first commit

WIREFRAME/LINK FIGMA.txt

@@ -0,0 +1 @@
+https://www.figma.com/design/S0xwb6hhuoxODidQ8WRl9Z/Education-or-Online-education-online-courses-or-elearning-or-lms-figma-template-3--Community-?node-id=1012-14&t=aZHUWINHMCtqC8Gp-1

project/.editorconfig

@@ -0,0 +1,18 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 4
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.{yml,yaml}]
+indent_size = 2
+
+[compose.yaml]
+indent_size = 4

project/.env.example

@@ -0,0 +1,65 @@
+APP_NAME=Laravel
+APP_ENV=local
+APP_KEY=
+APP_DEBUG=true
+APP_URL=http://localhost
+
+APP_LOCALE=en
+APP_FALLBACK_LOCALE=en
+APP_FAKER_LOCALE=en_US
+
+APP_MAINTENANCE_DRIVER=file
+# APP_MAINTENANCE_STORE=database
+
+# PHP_CLI_SERVER_WORKERS=4
+
+BCRYPT_ROUNDS=12
+
+LOG_CHANNEL=stack
+LOG_STACK=single
+LOG_DEPRECATIONS_CHANNEL=null
+LOG_LEVEL=debug
+
+DB_CONNECTION=sqlite
+# DB_HOST=127.0.0.1
+# DB_PORT=3306
+# DB_DATABASE=laravel
+# DB_USERNAME=root
+# DB_PASSWORD=
+
+SESSION_DRIVER=database
+SESSION_LIFETIME=120
+SESSION_ENCRYPT=false
+SESSION_PATH=/
+SESSION_DOMAIN=null
+
+BROADCAST_CONNECTION=log
+FILESYSTEM_DISK=local
+QUEUE_CONNECTION=database
+
+CACHE_STORE=database
+# CACHE_PREFIX=
+
+MEMCACHED_HOST=127.0.0.1
+
+REDIS_CLIENT=phpredis
+REDIS_HOST=127.0.0.1
+REDIS_PASSWORD=null
+REDIS_PORT=6379
+
+MAIL_MAILER=log
+MAIL_SCHEME=null
+MAIL_HOST=127.0.0.1
+MAIL_PORT=2525
+MAIL_USERNAME=null
+MAIL_PASSWORD=null
+MAIL_FROM_ADDRESS="hello@example.com"
+MAIL_FROM_NAME="${APP_NAME}"
+
+AWS_ACCESS_KEY_ID=
+AWS_SECRET_ACCESS_KEY=
+AWS_DEFAULT_REGION=us-east-1
+AWS_BUCKET=
+AWS_USE_PATH_STYLE_ENDPOINT=false
+
+VITE_APP_NAME="${APP_NAME}"

project/.gitattributes

@@ -0,0 +1,11 @@
+* text=auto eol=lf
+
+*.blade.php diff=html
+*.css diff=css
+*.html diff=html
+*.md diff=markdown
+*.php diff=php
+
+/.github export-ignore
+CHANGELOG.md export-ignore
+.styleci.yml export-ignore

project/.gitignore

@@ -0,0 +1,24 @@
+*.log
+.DS_Store
+.env
+.env.backup
+.env.production
+.phpactor.json
+.phpunit.result.cache
+/.fleet
+/.idea
+/.nova
+/.phpunit.cache
+/.vscode
+/.zed
+/auth.json
+/node_modules
+/public/build
+/public/hot
+/public/storage
+/storage/*.key
+/storage/pail
+/vendor
+Homestead.json
+Homestead.yaml
+Thumbs.db

project/app/Http/Controllers/ActivityLogsController.php

@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class ActivityLogsController extends Controller
+{
+    public function index()
+    {
+        return view('activityLogs.index');
+    }
+
+    public function show()
+    {
+        return view('activityLogs.show');
+    }
+}

project/app/Http/Controllers/AuthController.php

@@ -0,0 +1,55 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+class AuthController extends Controller
+{
+    /*
+    |--------------------------------
+    | Tampilkan halaman login
+    |--------------------------------
+    */
+    public function showLogin()
+    {
+        return view('login.login');
+    }
+
+    /*
+    |--------------------------------
+    | Proses Login
+    |--------------------------------
+    */
+    public function login(Request $request)
+    {
+        $credentials = $request->validate([
+            'email' => 'required|email',
+            'password' => 'required'
+        ]);
+
+        if (Auth::attempt($credentials)) {
+            $request->session()->regenerate();
+
+            return redirect()->intended('/dashboard');
+        }
+
+        return back()->with('error', 'Email atau Password salah!');
+    }
+
+    /*
+    |--------------------------------
+    | Logout
+    |--------------------------------
+    */
+    public function logout(Request $request)
+    {
+        Auth::logout();
+
+        $request->session()->invalidate();
+        $request->session()->regenerateToken();
+
+        return redirect('/');
+    }
+}

project/app/Http/Controllers/Controller.php

@@ -0,0 +1,8 @@
+<?php
+
+namespace App\Http\Controllers;
+
+abstract class Controller
+{
+    //
+}

project/app/Http/Controllers/DashboardController.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class DashboardController extends Controller
+{
+    // dashboard admin
+    public function admin()
+    {
+        return view('dashboard.admin');
+    }
+
+    // dashboard perangkat desa
+    public function perangkat()
+    {
+        return view('dashboard.perangkat');
+    }
+}

project/app/Http/Controllers/ForgotPasswordController.php

@@ -0,0 +1,75 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\Models\User;
+use Illuminate\Support\Facades\Hash;
+
+class ForgotPasswordController extends Controller
+{
+    /*
+    |--------------------------------------------------------------------------
+    | Tampilkan halaman lupa password
+    |--------------------------------------------------------------------------
+    */
+    public function showForgot()
+    {
+        return view('login.lupapass');
+    }
+
+    /*
+    |--------------------------------------------------------------------------
+    | Cek email user
+    |--------------------------------------------------------------------------
+    */
+    public function checkEmail(Request $request)
+    {
+        $request->validate([
+            'email' => 'required|email'
+        ]);
+
+        $user = User::where('email', $request->email)->first();
+
+        if (!$user) {
+            return back()->with('error', 'Email tidak ditemukan');
+        }
+
+        return redirect()->route('password.reset', $user->email);
+    }
+
+    /*
+    |--------------------------------------------------------------------------
+    | Tampilkan halaman reset password
+    |--------------------------------------------------------------------------
+    */
+    public function showReset($email)
+    {
+        return view('login.resetpass', compact('email'));
+    }
+
+    /*
+    |--------------------------------------------------------------------------
+    | Proses reset password
+    |--------------------------------------------------------------------------
+    */
+    public function resetPassword(Request $request)
+    {
+        $request->validate([
+            'email' => 'required|email',
+            'password' => 'required|min:6|confirmed'
+        ]);
+
+        $user = User::where('email', $request->email)->first();
+
+        if (!$user) {
+            return back()->with('error', 'User tidak ditemukan');
+        }
+
+        $user->password = Hash::make($request->password);
+        $user->save();
+
+        return redirect()->route('login')
+            ->with('success', 'Password berhasil diubah!');
+    }
+}

project/app/Http/Controllers/InformasiController.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class InformasiController extends Controller
+{
+     public function kabar()
+    {
+        return view('informasi.kabar');
+    }
+
+    public function kabarDetail()
+    {
+        return view('informasi.kabarDetail');
+    }
+
+    public function pengumuman()
+    {
+        return view('informasi.pengumuman');
+    }
+
+    public function pengumumanDetail()
+    {
+        return view('informasi.pengumumanDetail');
+    }
+}

project/app/Http/Controllers/KabarDesaController.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class KabarDesaController extends Controller
+{
+    public function index()
+    {
+        return view('kabar.index');
+    }
+
+    public function create()
+    {
+        return view('kabar.create');
+    }
+
+    public function show()
+    {
+        return view('kabar.show');
+    }
+
+    public function edit()
+    {
+        return view('kabar.edit');
+    }
+
+    public function admin()
+    {
+        return view('kabar.admin');
+    }
+}

project/app/Http/Controllers/LaporanController.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class LaporanController extends Controller
+{
+     public function index()
+    {
+        return view('laporan.index');
+    }
+}

project/app/Http/Controllers/PembuatanSuratController.php

@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class PembuatanSuratController extends Controller
+
+{
+    public function index()
+    {
+        return view('pembuatanSurat.index');
+    }
+
+    public function create()
+    {
+        return view('pembuatanSurat.create');
+    }
+
+    public function riwayat()
+    {
+        return view('pembuatanSurat.riwayat');
+    }
+}

project/app/Http/Controllers/PengajuanController.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class PengajuanController extends Controller
+{
+    // halaman utama pengajuan
+    public function index()
+    {
+        return view('pengajuan.index');
+    }
+
+    // halaman form tambah pengajuan
+    public function create()
+    {
+        return view('pengajuan.create');
+    }
+
+
+    // halaman edit
+    public function edit()
+    {
+        return view('pengajuan.edit');
+    }
+
+    
+}

project/app/Http/Controllers/PengajuanSuratController.php

@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class PengajuanSuratController extends Controller
+{
+    /**
+     * Halaman daftar pengajuan
+     */
+    public function index()
+    {
+        return view('pengajuanSurat.index');
+    }
+
+     public function edit()
+    {
+        return view('pengajuanSurat.edit');
+    }
+
+    /**
+     * Halaman show pengajuan
+     */
+    public function show()
+    {
+        return view('pengajuanSurat.show');
+    }
+
+     public function showw()
+    {
+        return view('pengajuanSurat.showw');
+    }
+}

project/app/Http/Controllers/PengaturanController.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class PengaturanController extends Controller
+{
+     public function index()
+    {
+        return view('pengaturan.index');
+    }
+}

project/app/Http/Controllers/PengumumanController.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class PengumumanController extends Controller
+{
+    public function index()
+    {
+        return view('pengumuman.index');
+    }
+
+    public function create()
+    {
+        return view('pengumuman.create');
+    }
+
+    public function show()
+    {
+        return view('pengumuman.show');
+    }
+
+    public function edit()
+    {
+        return view('pengumuman.edit');
+    }
+
+    public function admin()
+    {
+        return view('pengumuman.admin');
+    }
+}

project/app/Http/Controllers/ProfilController.php

@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class ProfilController extends Controller
+{
+    public function perangkat()
+    {
+        return view('profil.perangkat');
+    }
+
+    public function admin()
+    {
+        return view('profil.admin');
+    }
+}

project/app/Http/Controllers/ProfilDesaController.php

@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class ProfilDesaController extends Controller
+{
+    public function index()
+    {
+        return view('profilDesa.index');
+    }
+
+    public function edit()
+    {
+        return view('profilDesa.edit');
+    }
+}

project/app/Http/Controllers/TemplateController.php

@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class TemplateController extends Controller
+{
+    public function index()
+    {
+        return view('template.index');
+    }
+
+    public function create()
+    {
+        return view('template.create');
+    }
+
+
+    public function edit()
+    {
+        return view('template.edit');
+    }
+}

project/app/Http/Controllers/UserController.php

@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class UserController extends Controller
+{
+    public function index()
+    {
+        return view('users.index');
+    }
+
+    public function create()
+    {
+        return view('users.create');
+    }
+
+
+    public function edit()
+    {
+        return view('users.edit');
+    }
+}

project/app/Models/User.php

@@ -0,0 +1,49 @@
+<?php
+
+namespace App\Models;
+
+// use Illuminate\Contracts\Auth\MustVerifyEmail;
+use Database\Factories\UserFactory;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Foundation\Auth\User as Authenticatable;
+use Illuminate\Notifications\Notifiable;
+
+class User extends Authenticatable
+{
+    /** @use HasFactory<UserFactory> */
+    use HasFactory, Notifiable;
+
+    /**
+     * The attributes that are mass assignable.
+     *
+     * @var list<string>
+     */
+    protected $fillable = [
+        'name',
+        'email',
+        'password',
+    ];
+
+    /**
+     * The attributes that should be hidden for serialization.
+     *
+     * @var list<string>
+     */
+    protected $hidden = [
+        'password',
+        'remember_token',
+    ];
+
+    /**
+     * Get the attributes that should be cast.
+     *
+     * @return array<string, string>
+     */
+    protected function casts(): array
+    {
+        return [
+            'email_verified_at' => 'datetime',
+            'password' => 'hashed',
+        ];
+    }
+}

project/app/Providers/AppServiceProvider.php

@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Providers;
+
+use Illuminate\Support\ServiceProvider;
+
+class AppServiceProvider extends ServiceProvider
+{
+    /**
+     * Register any application services.
+     */
+    public function register(): void
+    {
+        //
+    }
+
+    /**
+     * Bootstrap any application services.
+     */
+    public function boot(): void
+    {
+        //
+    }
+}

project/artisan

@@ -0,0 +1,18 @@
+#!/usr/bin/env php
+<?php
+
+use Illuminate\Foundation\Application;
+use Symfony\Component\Console\Input\ArgvInput;
+
+define('LARAVEL_START', microtime(true));
+
+// Register the Composer autoloader...
+require __DIR__.'/vendor/autoload.php';
+
+// Bootstrap Laravel and handle the command...
+/** @var Application $app */
+$app = require_once __DIR__.'/bootstrap/app.php';
+
+$status = $app->handleCommand(new ArgvInput);
+
+exit($status);

project/bootstrap/app.php

@@ -0,0 +1,18 @@
+<?php
+
+use Illuminate\Foundation\Application;
+use Illuminate\Foundation\Configuration\Exceptions;
+use Illuminate\Foundation\Configuration\Middleware;
+
+return Application::configure(basePath: dirname(__DIR__))
+    ->withRouting(
+        web: __DIR__.'/../routes/web.php',
+        commands: __DIR__.'/../routes/console.php',
+        health: '/up',
+    )
+    ->withMiddleware(function (Middleware $middleware): void {
+        //
+    })
+    ->withExceptions(function (Exceptions $exceptions): void {
+        //
+    })->create();

project/bootstrap/cache/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

project/bootstrap/providers.php

@@ -0,0 +1,7 @@
+<?php
+
+use App\Providers\AppServiceProvider;
+
+return [
+    AppServiceProvider::class,
+];

project/composer.json

@@ -0,0 +1,86 @@
+{
+    "$schema": "https://getcomposer.org/schema.json",
+    "name": "laravel/laravel",
+    "type": "project",
+    "description": "The skeleton application for the Laravel framework.",
+    "keywords": ["laravel", "framework"],
+    "license": "MIT",
+    "require": {
+        "php": "^8.2",
+        "laravel/framework": "^12.0",
+        "laravel/tinker": "^2.10.1"
+    },
+    "require-dev": {
+        "fakerphp/faker": "^1.23",
+        "laravel/pail": "^1.2.2",
+        "laravel/pint": "^1.24",
+        "laravel/sail": "^1.41",
+        "mockery/mockery": "^1.6",
+        "nunomaduro/collision": "^8.6",
+        "phpunit/phpunit": "^11.5.50"
+    },
+    "autoload": {
+        "psr-4": {
+            "App\\": "app/",
+            "Database\\Factories\\": "database/factories/",
+            "Database\\Seeders\\": "database/seeders/"
+        }
+    },
+    "autoload-dev": {
+        "psr-4": {
+            "Tests\\": "tests/"
+        }
+    },
+    "scripts": {
+        "setup": [
+            "composer install",
+            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\"",
+            "@php artisan key:generate",
+            "@php artisan migrate --force",
+            "npm install",
+            "npm run build"
+        ],
+        "dev": [
+            "Composer\\Config::disableProcessTimeout",
+            "npx concurrently -c \"#93c5fd,#c4b5fd,#fb7185,#fdba74\" \"php artisan serve\" \"php artisan queue:listen --tries=1 --timeout=0\" \"php artisan pail --timeout=0\" \"npm run dev\" --names=server,queue,logs,vite --kill-others"
+        ],
+        "test": [
+            "@php artisan config:clear --ansi",
+            "@php artisan test"
+        ],
+        "post-autoload-dump": [
+            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
+            "@php artisan package:discover --ansi"
+        ],
+        "post-update-cmd": [
+            "@php artisan vendor:publish --tag=laravel-assets --ansi --force"
+        ],
+        "post-root-package-install": [
+            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
+        ],
+        "post-create-project-cmd": [
+            "@php artisan key:generate --ansi",
+            "@php -r \"file_exists('database/database.sqlite') || touch('database/database.sqlite');\"",
+            "@php artisan migrate --graceful --ansi"
+        ],
+        "pre-package-uninstall": [
+            "Illuminate\\Foundation\\ComposerScripts::prePackageUninstall"
+        ]
+    },
+    "extra": {
+        "laravel": {
+            "dont-discover": []
+        }
+    },
+    "config": {
+        "optimize-autoloader": true,
+        "preferred-install": "dist",
+        "sort-packages": true,
+        "allow-plugins": {
+            "pestphp/pest-plugin": true,
+            "php-http/discovery": true
+        }
+    },
+    "minimum-stability": "stable",
+    "prefer-stable": true
+}

project/config/app.php

@@ -0,0 +1,126 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Name
+    |--------------------------------------------------------------------------
+    |
+    | This value is the name of your application, which will be used when the
+    | framework needs to place the application's name in a notification or
+    | other UI elements where an application name needs to be displayed.
+    |
+    */
+
+    'name' => env('APP_NAME', 'Laravel'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Environment
+    |--------------------------------------------------------------------------
+    |
+    | This value determines the "environment" your application is currently
+    | running in. This may determine how you prefer to configure various
+    | services the application utilizes. Set this in your ".env" file.
+    |
+    */
+
+    'env' => env('APP_ENV', 'production'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Debug Mode
+    |--------------------------------------------------------------------------
+    |
+    | When your application is in debug mode, detailed error messages with
+    | stack traces will be shown on every error that occurs within your
+    | application. If disabled, a simple generic error page is shown.
+    |
+    */
+
+    'debug' => (bool) env('APP_DEBUG', false),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application URL
+    |--------------------------------------------------------------------------
+    |
+    | This URL is used by the console to properly generate URLs when using
+    | the Artisan command line tool. You should set this to the root of
+    | the application so that it's available within Artisan commands.
+    |
+    */
+
+    'url' => env('APP_URL', 'http://localhost'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Timezone
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify the default timezone for your application, which
+    | will be used by the PHP date and date-time functions. The timezone
+    | is set to "UTC" by default as it is suitable for most use cases.
+    |
+    */
+
+    'timezone' => 'UTC',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Locale Configuration
+    |--------------------------------------------------------------------------
+    |
+    | The application locale determines the default locale that will be used
+    | by Laravel's translation / localization methods. This option can be
+    | set to any locale for which you plan to have translation strings.
+    |
+    */
+
+    'locale' => env('APP_LOCALE', 'en'),
+
+    'fallback_locale' => env('APP_FALLBACK_LOCALE', 'en'),
+
+    'faker_locale' => env('APP_FAKER_LOCALE', 'en_US'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Encryption Key
+    |--------------------------------------------------------------------------
+    |
+    | This key is utilized by Laravel's encryption services and should be set
+    | to a random, 32 character string to ensure that all encrypted values
+    | are secure. You should do this prior to deploying the application.
+    |
+    */
+
+    'cipher' => 'AES-256-CBC',
+
+    'key' => env('APP_KEY'),
+
+    'previous_keys' => [
+        ...array_filter(
+            explode(',', (string) env('APP_PREVIOUS_KEYS', ''))
+        ),
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Maintenance Mode Driver
+    |--------------------------------------------------------------------------
+    |
+    | These configuration options determine the driver used to determine and
+    | manage Laravel's "maintenance mode" status. The "cache" driver will
+    | allow maintenance mode to be controlled across multiple machines.
+    |
+    | Supported drivers: "file", "cache"
+    |
+    */
+
+    'maintenance' => [
+        'driver' => env('APP_MAINTENANCE_DRIVER', 'file'),
+        'store' => env('APP_MAINTENANCE_STORE', 'database'),
+    ],
+
+];

project/config/auth.php

@@ -0,0 +1,117 @@
+<?php
+
+use App\Models\User;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Authentication Defaults
+    |--------------------------------------------------------------------------
+    |
+    | This option defines the default authentication "guard" and password
+    | reset "broker" for your application. You may change these values
+    | as required, but they're a perfect start for most applications.
+    |
+    */
+
+    'defaults' => [
+        'guard' => env('AUTH_GUARD', 'web'),
+        'passwords' => env('AUTH_PASSWORD_BROKER', 'users'),
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Authentication Guards
+    |--------------------------------------------------------------------------
+    |
+    | Next, you may define every authentication guard for your application.
+    | Of course, a great default configuration has been defined for you
+    | which utilizes session storage plus the Eloquent user provider.
+    |
+    | All authentication guards have a user provider, which defines how the
+    | users are actually retrieved out of your database or other storage
+    | system used by the application. Typically, Eloquent is utilized.
+    |
+    | Supported: "session"
+    |
+    */
+
+    'guards' => [
+        'web' => [
+            'driver' => 'session',
+            'provider' => 'users',
+        ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | User Providers
+    |--------------------------------------------------------------------------
+    |
+    | All authentication guards have a user provider, which defines how the
+    | users are actually retrieved out of your database or other storage
+    | system used by the application. Typically, Eloquent is utilized.
+    |
+    | If you have multiple user tables or models you may configure multiple
+    | providers to represent the model / table. These providers may then
+    | be assigned to any extra authentication guards you have defined.
+    |
+    | Supported: "database", "eloquent"
+    |
+    */
+
+    'providers' => [
+        'users' => [
+            'driver' => 'eloquent',
+            'model' => env('AUTH_MODEL', User::class),
+        ],
+
+        // 'users' => [
+        //     'driver' => 'database',
+        //     'table' => 'users',
+        // ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Resetting Passwords
+    |--------------------------------------------------------------------------
+    |
+    | These configuration options specify the behavior of Laravel's password
+    | reset functionality, including the table utilized for token storage
+    | and the user provider that is invoked to actually retrieve users.
+    |
+    | The expiry time is the number of minutes that each reset token will be
+    | considered valid. This security feature keeps tokens short-lived so
+    | they have less time to be guessed. You may change this as needed.
+    |
+    | The throttle setting is the number of seconds a user must wait before
+    | generating more password reset tokens. This prevents the user from
+    | quickly generating a very large amount of password reset tokens.
+    |
+    */
+
+    'passwords' => [
+        'users' => [
+            'provider' => 'users',
+            'table' => env('AUTH_PASSWORD_RESET_TOKEN_TABLE', 'password_reset_tokens'),
+            'expire' => 60,
+            'throttle' => 60,
+        ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Password Confirmation Timeout
+    |--------------------------------------------------------------------------
+    |
+    | Here you may define the number of seconds before a password confirmation
+    | window expires and users are asked to re-enter their password via the
+    | confirmation screen. By default, the timeout lasts for three hours.
+    |
+    */
+
+    'password_timeout' => env('AUTH_PASSWORD_TIMEOUT', 10800),
+
+];

project/config/cache.php

@@ -0,0 +1,117 @@
+<?php
+
+use Illuminate\Support\Str;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Cache Store
+    |--------------------------------------------------------------------------
+    |
+    | This option controls the default cache store that will be used by the
+    | framework. This connection is utilized if another isn't explicitly
+    | specified when running a cache operation inside the application.
+    |
+    */
+
+    'default' => env('CACHE_STORE', 'database'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Cache Stores
+    |--------------------------------------------------------------------------
+    |
+    | Here you may define all of the cache "stores" for your application as
+    | well as their drivers. You may even define multiple stores for the
+    | same cache driver to group types of items stored in your caches.
+    |
+    | Supported drivers: "array", "database", "file", "memcached",
+    |                    "redis", "dynamodb", "octane",
+    |                    "failover", "null"
+    |
+    */
+
+    'stores' => [
+
+        'array' => [
+            'driver' => 'array',
+            'serialize' => false,
+        ],
+
+        'database' => [
+            'driver' => 'database',
+            'connection' => env('DB_CACHE_CONNECTION'),
+            'table' => env('DB_CACHE_TABLE', 'cache'),
+            'lock_connection' => env('DB_CACHE_LOCK_CONNECTION'),
+            'lock_table' => env('DB_CACHE_LOCK_TABLE'),
+        ],
+
+        'file' => [
+            'driver' => 'file',
+            'path' => storage_path('framework/cache/data'),
+            'lock_path' => storage_path('framework/cache/data'),
+        ],
+
+        'memcached' => [
+            'driver' => 'memcached',
+            'persistent_id' => env('MEMCACHED_PERSISTENT_ID'),
+            'sasl' => [
+                env('MEMCACHED_USERNAME'),
+                env('MEMCACHED_PASSWORD'),
+            ],
+            'options' => [
+                // Memcached::OPT_CONNECT_TIMEOUT => 2000,
+            ],
+            'servers' => [
+                [
+                    'host' => env('MEMCACHED_HOST', '127.0.0.1'),
+                    'port' => env('MEMCACHED_PORT', 11211),
+                    'weight' => 100,
+                ],
+            ],
+        ],
+
+        'redis' => [
+            'driver' => 'redis',
+            'connection' => env('REDIS_CACHE_CONNECTION', 'cache'),
+            'lock_connection' => env('REDIS_CACHE_LOCK_CONNECTION', 'default'),
+        ],
+
+        'dynamodb' => [
+            'driver' => 'dynamodb',
+            'key' => env('AWS_ACCESS_KEY_ID'),
+            'secret' => env('AWS_SECRET_ACCESS_KEY'),
+            'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
+            'table' => env('DYNAMODB_CACHE_TABLE', 'cache'),
+            'endpoint' => env('DYNAMODB_ENDPOINT'),
+        ],
+
+        'octane' => [
+            'driver' => 'octane',
+        ],
+
+        'failover' => [
+            'driver' => 'failover',
+            'stores' => [
+                'database',
+                'array',
+            ],
+        ],
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Cache Key Prefix
+    |--------------------------------------------------------------------------
+    |
+    | When utilizing the APC, database, memcached, Redis, and DynamoDB cache
+    | stores, there might be other applications using the same cache. For
+    | that reason, you may prefix every cache key to avoid collisions.
+    |
+    */
+
+    'prefix' => env('CACHE_PREFIX', Str::slug((string) env('APP_NAME', 'laravel')).'-cache-'),
+
+];

project/config/database.php

@@ -0,0 +1,184 @@
+<?php
+
+use Illuminate\Support\Str;
+use Pdo\Mysql;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Database Connection Name
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify which of the database connections below you wish
+    | to use as your default connection for database operations. This is
+    | the connection which will be utilized unless another connection
+    | is explicitly specified when you execute a query / statement.
+    |
+    */
+
+    'default' => env('DB_CONNECTION', 'sqlite'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Database Connections
+    |--------------------------------------------------------------------------
+    |
+    | Below are all of the database connections defined for your application.
+    | An example configuration is provided for each database system which
+    | is supported by Laravel. You're free to add / remove connections.
+    |
+    */
+
+    'connections' => [
+
+        'sqlite' => [
+            'driver' => 'sqlite',
+            'url' => env('DB_URL'),
+            'database' => env('DB_DATABASE', database_path('database.sqlite')),
+            'prefix' => '',
+            'foreign_key_constraints' => env('DB_FOREIGN_KEYS', true),
+            'busy_timeout' => null,
+            'journal_mode' => null,
+            'synchronous' => null,
+            'transaction_mode' => 'DEFERRED',
+        ],
+
+        'mysql' => [
+            'driver' => 'mysql',
+            'url' => env('DB_URL'),
+            'host' => env('DB_HOST', '127.0.0.1'),
+            'port' => env('DB_PORT', '3306'),
+            'database' => env('DB_DATABASE', 'laravel'),
+            'username' => env('DB_USERNAME', 'root'),
+            'password' => env('DB_PASSWORD', ''),
+            'unix_socket' => env('DB_SOCKET', ''),
+            'charset' => env('DB_CHARSET', 'utf8mb4'),
+            'collation' => env('DB_COLLATION', 'utf8mb4_unicode_ci'),
+            'prefix' => '',
+            'prefix_indexes' => true,
+            'strict' => true,
+            'engine' => null,
+            'options' => extension_loaded('pdo_mysql') ? array_filter([
+                (PHP_VERSION_ID >= 80500 ? Mysql::ATTR_SSL_CA : PDO::MYSQL_ATTR_SSL_CA) => env('MYSQL_ATTR_SSL_CA'),
+            ]) : [],
+        ],
+
+        'mariadb' => [
+            'driver' => 'mariadb',
+            'url' => env('DB_URL'),
+            'host' => env('DB_HOST', '127.0.0.1'),
+            'port' => env('DB_PORT', '3306'),
+            'database' => env('DB_DATABASE', 'laravel'),
+            'username' => env('DB_USERNAME', 'root'),
+            'password' => env('DB_PASSWORD', ''),
+            'unix_socket' => env('DB_SOCKET', ''),
+            'charset' => env('DB_CHARSET', 'utf8mb4'),
+            'collation' => env('DB_COLLATION', 'utf8mb4_unicode_ci'),
+            'prefix' => '',
+            'prefix_indexes' => true,
+            'strict' => true,
+            'engine' => null,
+            'options' => extension_loaded('pdo_mysql') ? array_filter([
+                (PHP_VERSION_ID >= 80500 ? Mysql::ATTR_SSL_CA : PDO::MYSQL_ATTR_SSL_CA) => env('MYSQL_ATTR_SSL_CA'),
+            ]) : [],
+        ],
+
+        'pgsql' => [
+            'driver' => 'pgsql',
+            'url' => env('DB_URL'),
+            'host' => env('DB_HOST', '127.0.0.1'),
+            'port' => env('DB_PORT', '5432'),
+            'database' => env('DB_DATABASE', 'laravel'),
+            'username' => env('DB_USERNAME', 'root'),
+            'password' => env('DB_PASSWORD', ''),
+            'charset' => env('DB_CHARSET', 'utf8'),
+            'prefix' => '',
+            'prefix_indexes' => true,
+            'search_path' => 'public',
+            'sslmode' => env('DB_SSLMODE', 'prefer'),
+        ],
+
+        'sqlsrv' => [
+            'driver' => 'sqlsrv',
+            'url' => env('DB_URL'),
+            'host' => env('DB_HOST', 'localhost'),
+            'port' => env('DB_PORT', '1433'),
+            'database' => env('DB_DATABASE', 'laravel'),
+            'username' => env('DB_USERNAME', 'root'),
+            'password' => env('DB_PASSWORD', ''),
+            'charset' => env('DB_CHARSET', 'utf8'),
+            'prefix' => '',
+            'prefix_indexes' => true,
+            // 'encrypt' => env('DB_ENCRYPT', 'yes'),
+            // 'trust_server_certificate' => env('DB_TRUST_SERVER_CERTIFICATE', 'false'),
+        ],
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Migration Repository Table
+    |--------------------------------------------------------------------------
+    |
+    | This table keeps track of all the migrations that have already run for
+    | your application. Using this information, we can determine which of
+    | the migrations on disk haven't actually been run on the database.
+    |
+    */
+
+    'migrations' => [
+        'table' => 'migrations',
+        'update_date_on_publish' => true,
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Redis Databases
+    |--------------------------------------------------------------------------
+    |
+    | Redis is an open source, fast, and advanced key-value store that also
+    | provides a richer body of commands than a typical key-value system
+    | such as Memcached. You may define your connection settings here.
+    |
+    */
+
+    'redis' => [
+
+        'client' => env('REDIS_CLIENT', 'phpredis'),
+
+        'options' => [
+            'cluster' => env('REDIS_CLUSTER', 'redis'),
+            'prefix' => env('REDIS_PREFIX', Str::slug((string) env('APP_NAME', 'laravel')).'-database-'),
+            'persistent' => env('REDIS_PERSISTENT', false),
+        ],
+
+        'default' => [
+            'url' => env('REDIS_URL'),
+            'host' => env('REDIS_HOST', '127.0.0.1'),
+            'username' => env('REDIS_USERNAME'),
+            'password' => env('REDIS_PASSWORD'),
+            'port' => env('REDIS_PORT', '6379'),
+            'database' => env('REDIS_DB', '0'),
+            'max_retries' => env('REDIS_MAX_RETRIES', 3),
+            'backoff_algorithm' => env('REDIS_BACKOFF_ALGORITHM', 'decorrelated_jitter'),
+            'backoff_base' => env('REDIS_BACKOFF_BASE', 100),
+            'backoff_cap' => env('REDIS_BACKOFF_CAP', 1000),
+        ],
+
+        'cache' => [
+            'url' => env('REDIS_URL'),
+            'host' => env('REDIS_HOST', '127.0.0.1'),
+            'username' => env('REDIS_USERNAME'),
+            'password' => env('REDIS_PASSWORD'),
+            'port' => env('REDIS_PORT', '6379'),
+            'database' => env('REDIS_CACHE_DB', '1'),
+            'max_retries' => env('REDIS_MAX_RETRIES', 3),
+            'backoff_algorithm' => env('REDIS_BACKOFF_ALGORITHM', 'decorrelated_jitter'),
+            'backoff_base' => env('REDIS_BACKOFF_BASE', 100),
+            'backoff_cap' => env('REDIS_BACKOFF_CAP', 1000),
+        ],
+
+    ],
+
+];

project/config/filesystems.php

@@ -0,0 +1,80 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Filesystem Disk
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify the default filesystem disk that should be used
+    | by the framework. The "local" disk, as well as a variety of cloud
+    | based disks are available to your application for file storage.
+    |
+    */
+
+    'default' => env('FILESYSTEM_DISK', 'local'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Filesystem Disks
+    |--------------------------------------------------------------------------
+    |
+    | Below you may configure as many filesystem disks as necessary, and you
+    | may even configure multiple disks for the same driver. Examples for
+    | most supported storage drivers are configured here for reference.
+    |
+    | Supported drivers: "local", "ftp", "sftp", "s3"
+    |
+    */
+
+    'disks' => [
+
+        'local' => [
+            'driver' => 'local',
+            'root' => storage_path('app/private'),
+            'serve' => true,
+            'throw' => false,
+            'report' => false,
+        ],
+
+        'public' => [
+            'driver' => 'local',
+            'root' => storage_path('app/public'),
+            'url' => rtrim(env('APP_URL', 'http://localhost'), '/').'/storage',
+            'visibility' => 'public',
+            'throw' => false,
+            'report' => false,
+        ],
+
+        's3' => [
+            'driver' => 's3',
+            'key' => env('AWS_ACCESS_KEY_ID'),
+            'secret' => env('AWS_SECRET_ACCESS_KEY'),
+            'region' => env('AWS_DEFAULT_REGION'),
+            'bucket' => env('AWS_BUCKET'),
+            'url' => env('AWS_URL'),
+            'endpoint' => env('AWS_ENDPOINT'),
+            'use_path_style_endpoint' => env('AWS_USE_PATH_STYLE_ENDPOINT', false),
+            'throw' => false,
+            'report' => false,
+        ],
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Symbolic Links
+    |--------------------------------------------------------------------------
+    |
+    | Here you may configure the symbolic links that will be created when the
+    | `storage:link` Artisan command is executed. The array keys should be
+    | the locations of the links and the values should be their targets.
+    |
+    */
+
+    'links' => [
+        public_path('storage') => storage_path('app/public'),
+    ],
+
+];

project/config/logging.php

@@ -0,0 +1,132 @@
+<?php
+
+use Monolog\Handler\NullHandler;
+use Monolog\Handler\StreamHandler;
+use Monolog\Handler\SyslogUdpHandler;
+use Monolog\Processor\PsrLogMessageProcessor;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Log Channel
+    |--------------------------------------------------------------------------
+    |
+    | This option defines the default log channel that is utilized to write
+    | messages to your logs. The value provided here should match one of
+    | the channels present in the list of "channels" configured below.
+    |
+    */
+
+    'default' => env('LOG_CHANNEL', 'stack'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Deprecations Log Channel
+    |--------------------------------------------------------------------------
+    |
+    | This option controls the log channel that should be used to log warnings
+    | regarding deprecated PHP and library features. This allows you to get
+    | your application ready for upcoming major versions of dependencies.
+    |
+    */
+
+    'deprecations' => [
+        'channel' => env('LOG_DEPRECATIONS_CHANNEL', 'null'),
+        'trace' => env('LOG_DEPRECATIONS_TRACE', false),
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Log Channels
+    |--------------------------------------------------------------------------
+    |
+    | Here you may configure the log channels for your application. Laravel
+    | utilizes the Monolog PHP logging library, which includes a variety
+    | of powerful log handlers and formatters that you're free to use.
+    |
+    | Available drivers: "single", "daily", "slack", "syslog",
+    |                    "errorlog", "monolog", "custom", "stack"
+    |
+    */
+
+    'channels' => [
+
+        'stack' => [
+            'driver' => 'stack',
+            'channels' => explode(',', (string) env('LOG_STACK', 'single')),
+            'ignore_exceptions' => false,
+        ],
+
+        'single' => [
+            'driver' => 'single',
+            'path' => storage_path('logs/laravel.log'),
+            'level' => env('LOG_LEVEL', 'debug'),
+            'replace_placeholders' => true,
+        ],
+
+        'daily' => [
+            'driver' => 'daily',
+            'path' => storage_path('logs/laravel.log'),
+            'level' => env('LOG_LEVEL', 'debug'),
+            'days' => env('LOG_DAILY_DAYS', 14),
+            'replace_placeholders' => true,
+        ],
+
+        'slack' => [
+            'driver' => 'slack',
+            'url' => env('LOG_SLACK_WEBHOOK_URL'),
+            'username' => env('LOG_SLACK_USERNAME', env('APP_NAME', 'Laravel')),
+            'emoji' => env('LOG_SLACK_EMOJI', ':boom:'),
+            'level' => env('LOG_LEVEL', 'critical'),
+            'replace_placeholders' => true,
+        ],
+
+        'papertrail' => [
+            'driver' => 'monolog',
+            'level' => env('LOG_LEVEL', 'debug'),
+            'handler' => env('LOG_PAPERTRAIL_HANDLER', SyslogUdpHandler::class),
+            'handler_with' => [
+                'host' => env('PAPERTRAIL_URL'),
+                'port' => env('PAPERTRAIL_PORT'),
+                'connectionString' => 'tls://'.env('PAPERTRAIL_URL').':'.env('PAPERTRAIL_PORT'),
+            ],
+            'processors' => [PsrLogMessageProcessor::class],
+        ],
+
+        'stderr' => [
+            'driver' => 'monolog',
+            'level' => env('LOG_LEVEL', 'debug'),
+            'handler' => StreamHandler::class,
+            'handler_with' => [
+                'stream' => 'php://stderr',
+            ],
+            'formatter' => env('LOG_STDERR_FORMATTER'),
+            'processors' => [PsrLogMessageProcessor::class],
+        ],
+
+        'syslog' => [
+            'driver' => 'syslog',
+            'level' => env('LOG_LEVEL', 'debug'),
+            'facility' => env('LOG_SYSLOG_FACILITY', LOG_USER),
+            'replace_placeholders' => true,
+        ],
+
+        'errorlog' => [
+            'driver' => 'errorlog',
+            'level' => env('LOG_LEVEL', 'debug'),
+            'replace_placeholders' => true,
+        ],
+
+        'null' => [
+            'driver' => 'monolog',
+            'handler' => NullHandler::class,
+        ],
+
+        'emergency' => [
+            'path' => storage_path('logs/laravel.log'),
+        ],
+
+    ],
+
+];

project/config/mail.php

@@ -0,0 +1,118 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Mailer
+    |--------------------------------------------------------------------------
+    |
+    | This option controls the default mailer that is used to send all email
+    | messages unless another mailer is explicitly specified when sending
+    | the message. All additional mailers can be configured within the
+    | "mailers" array. Examples of each type of mailer are provided.
+    |
+    */
+
+    'default' => env('MAIL_MAILER', 'log'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Mailer Configurations
+    |--------------------------------------------------------------------------
+    |
+    | Here you may configure all of the mailers used by your application plus
+    | their respective settings. Several examples have been configured for
+    | you and you are free to add your own as your application requires.
+    |
+    | Laravel supports a variety of mail "transport" drivers that can be used
+    | when delivering an email. You may specify which one you're using for
+    | your mailers below. You may also add additional mailers if needed.
+    |
+    | Supported: "smtp", "sendmail", "mailgun", "ses", "ses-v2",
+    |            "postmark", "resend", "log", "array",
+    |            "failover", "roundrobin"
+    |
+    */
+
+    'mailers' => [
+
+        'smtp' => [
+            'transport' => 'smtp',
+            'scheme' => env('MAIL_SCHEME'),
+            'url' => env('MAIL_URL'),
+            'host' => env('MAIL_HOST', '127.0.0.1'),
+            'port' => env('MAIL_PORT', 2525),
+            'username' => env('MAIL_USERNAME'),
+            'password' => env('MAIL_PASSWORD'),
+            'timeout' => null,
+            'local_domain' => env('MAIL_EHLO_DOMAIN', parse_url((string) env('APP_URL', 'http://localhost'), PHP_URL_HOST)),
+        ],
+
+        'ses' => [
+            'transport' => 'ses',
+        ],
+
+        'postmark' => [
+            'transport' => 'postmark',
+            // 'message_stream_id' => env('POSTMARK_MESSAGE_STREAM_ID'),
+            // 'client' => [
+            //     'timeout' => 5,
+            // ],
+        ],
+
+        'resend' => [
+            'transport' => 'resend',
+        ],
+
+        'sendmail' => [
+            'transport' => 'sendmail',
+            'path' => env('MAIL_SENDMAIL_PATH', '/usr/sbin/sendmail -bs -i'),
+        ],
+
+        'log' => [
+            'transport' => 'log',
+            'channel' => env('MAIL_LOG_CHANNEL'),
+        ],
+
+        'array' => [
+            'transport' => 'array',
+        ],
+
+        'failover' => [
+            'transport' => 'failover',
+            'mailers' => [
+                'smtp',
+                'log',
+            ],
+            'retry_after' => 60,
+        ],
+
+        'roundrobin' => [
+            'transport' => 'roundrobin',
+            'mailers' => [
+                'ses',
+                'postmark',
+            ],
+            'retry_after' => 60,
+        ],
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Global "From" Address
+    |--------------------------------------------------------------------------
+    |
+    | You may wish for all emails sent by your application to be sent from
+    | the same address. Here you may specify a name and address that is
+    | used globally for all emails that are sent by your application.
+    |
+    */
+
+    'from' => [
+        'address' => env('MAIL_FROM_ADDRESS', 'hello@example.com'),
+        'name' => env('MAIL_FROM_NAME', env('APP_NAME', 'Laravel')),
+    ],
+
+];

project/config/queue.php

@@ -0,0 +1,129 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Queue Connection Name
+    |--------------------------------------------------------------------------
+    |
+    | Laravel's queue supports a variety of backends via a single, unified
+    | API, giving you convenient access to each backend using identical
+    | syntax for each. The default queue connection is defined below.
+    |
+    */
+
+    'default' => env('QUEUE_CONNECTION', 'database'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Queue Connections
+    |--------------------------------------------------------------------------
+    |
+    | Here you may configure the connection options for every queue backend
+    | used by your application. An example configuration is provided for
+    | each backend supported by Laravel. You're also free to add more.
+    |
+    | Drivers: "sync", "database", "beanstalkd", "sqs", "redis",
+    |          "deferred", "background", "failover", "null"
+    |
+    */
+
+    'connections' => [
+
+        'sync' => [
+            'driver' => 'sync',
+        ],
+
+        'database' => [
+            'driver' => 'database',
+            'connection' => env('DB_QUEUE_CONNECTION'),
+            'table' => env('DB_QUEUE_TABLE', 'jobs'),
+            'queue' => env('DB_QUEUE', 'default'),
+            'retry_after' => (int) env('DB_QUEUE_RETRY_AFTER', 90),
+            'after_commit' => false,
+        ],
+
+        'beanstalkd' => [
+            'driver' => 'beanstalkd',
+            'host' => env('BEANSTALKD_QUEUE_HOST', 'localhost'),
+            'queue' => env('BEANSTALKD_QUEUE', 'default'),
+            'retry_after' => (int) env('BEANSTALKD_QUEUE_RETRY_AFTER', 90),
+            'block_for' => 0,
+            'after_commit' => false,
+        ],
+
+        'sqs' => [
+            'driver' => 'sqs',
+            'key' => env('AWS_ACCESS_KEY_ID'),
+            'secret' => env('AWS_SECRET_ACCESS_KEY'),
+            'prefix' => env('SQS_PREFIX', 'https://sqs.us-east-1.amazonaws.com/your-account-id'),
+            'queue' => env('SQS_QUEUE', 'default'),
+            'suffix' => env('SQS_SUFFIX'),
+            'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
+            'after_commit' => false,
+        ],
+
+        'redis' => [
+            'driver' => 'redis',
+            'connection' => env('REDIS_QUEUE_CONNECTION', 'default'),
+            'queue' => env('REDIS_QUEUE', 'default'),
+            'retry_after' => (int) env('REDIS_QUEUE_RETRY_AFTER', 90),
+            'block_for' => null,
+            'after_commit' => false,
+        ],
+
+        'deferred' => [
+            'driver' => 'deferred',
+        ],
+
+        'background' => [
+            'driver' => 'background',
+        ],
+
+        'failover' => [
+            'driver' => 'failover',
+            'connections' => [
+                'database',
+                'deferred',
+            ],
+        ],
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Job Batching
+    |--------------------------------------------------------------------------
+    |
+    | The following options configure the database and table that store job
+    | batching information. These options can be updated to any database
+    | connection and table which has been defined by your application.
+    |
+    */
+
+    'batching' => [
+        'database' => env('DB_CONNECTION', 'sqlite'),
+        'table' => 'job_batches',
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Failed Queue Jobs
+    |--------------------------------------------------------------------------
+    |
+    | These options configure the behavior of failed queue job logging so you
+    | can control how and where failed jobs are stored. Laravel ships with
+    | support for storing failed jobs in a simple file or in a database.
+    |
+    | Supported drivers: "database-uuids", "dynamodb", "file", "null"
+    |
+    */
+
+    'failed' => [
+        'driver' => env('QUEUE_FAILED_DRIVER', 'database-uuids'),
+        'database' => env('DB_CONNECTION', 'sqlite'),
+        'table' => 'failed_jobs',
+    ],
+
+];

project/config/services.php

@@ -0,0 +1,38 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Third Party Services
+    |--------------------------------------------------------------------------
+    |
+    | This file is for storing the credentials for third party services such
+    | as Mailgun, Postmark, AWS and more. This file provides the de facto
+    | location for this type of information, allowing packages to have
+    | a conventional file to locate the various service credentials.
+    |
+    */
+
+    'postmark' => [
+        'key' => env('POSTMARK_API_KEY'),
+    ],
+
+    'resend' => [
+        'key' => env('RESEND_API_KEY'),
+    ],
+
+    'ses' => [
+        'key' => env('AWS_ACCESS_KEY_ID'),
+        'secret' => env('AWS_SECRET_ACCESS_KEY'),
+        'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
+    ],
+
+    'slack' => [
+        'notifications' => [
+            'bot_user_oauth_token' => env('SLACK_BOT_USER_OAUTH_TOKEN'),
+            'channel' => env('SLACK_BOT_USER_DEFAULT_CHANNEL'),
+        ],
+    ],
+
+];

project/config/session.php

@@ -0,0 +1,217 @@
+<?php
+
+use Illuminate\Support\Str;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Session Driver
+    |--------------------------------------------------------------------------
+    |
+    | This option determines the default session driver that is utilized for
+    | incoming requests. Laravel supports a variety of storage options to
+    | persist session data. Database storage is a great default choice.
+    |
+    | Supported: "file", "cookie", "database", "memcached",
+    |            "redis", "dynamodb", "array"
+    |
+    */
+
+    'driver' => env('SESSION_DRIVER', 'database'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Lifetime
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify the number of minutes that you wish the session
+    | to be allowed to remain idle before it expires. If you want them
+    | to expire immediately when the browser is closed then you may
+    | indicate that via the expire_on_close configuration option.
+    |
+    */
+
+    'lifetime' => (int) env('SESSION_LIFETIME', 120),
+
+    'expire_on_close' => env('SESSION_EXPIRE_ON_CLOSE', false),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Encryption
+    |--------------------------------------------------------------------------
+    |
+    | This option allows you to easily specify that all of your session data
+    | should be encrypted before it's stored. All encryption is performed
+    | automatically by Laravel and you may use the session like normal.
+    |
+    */
+
+    'encrypt' => env('SESSION_ENCRYPT', false),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session File Location
+    |--------------------------------------------------------------------------
+    |
+    | When utilizing the "file" session driver, the session files are placed
+    | on disk. The default storage location is defined here; however, you
+    | are free to provide another location where they should be stored.
+    |
+    */
+
+    'files' => storage_path('framework/sessions'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Database Connection
+    |--------------------------------------------------------------------------
+    |
+    | When using the "database" or "redis" session drivers, you may specify a
+    | connection that should be used to manage these sessions. This should
+    | correspond to a connection in your database configuration options.
+    |
+    */
+
+    'connection' => env('SESSION_CONNECTION'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Database Table
+    |--------------------------------------------------------------------------
+    |
+    | When using the "database" session driver, you may specify the table to
+    | be used to store sessions. Of course, a sensible default is defined
+    | for you; however, you're welcome to change this to another table.
+    |
+    */
+
+    'table' => env('SESSION_TABLE', 'sessions'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Cache Store
+    |--------------------------------------------------------------------------
+    |
+    | When using one of the framework's cache driven session backends, you may
+    | define the cache store which should be used to store the session data
+    | between requests. This must match one of your defined cache stores.
+    |
+    | Affects: "dynamodb", "memcached", "redis"
+    |
+    */
+
+    'store' => env('SESSION_STORE'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Sweeping Lottery
+    |--------------------------------------------------------------------------
+    |
+    | Some session drivers must manually sweep their storage location to get
+    | rid of old sessions from storage. Here are the chances that it will
+    | happen on a given request. By default, the odds are 2 out of 100.
+    |
+    */
+
+    'lottery' => [2, 100],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Cookie Name
+    |--------------------------------------------------------------------------
+    |
+    | Here you may change the name of the session cookie that is created by
+    | the framework. Typically, you should not need to change this value
+    | since doing so does not grant a meaningful security improvement.
+    |
+    */
+
+    'cookie' => env(
+        'SESSION_COOKIE',
+        Str::slug((string) env('APP_NAME', 'laravel')).'-session'
+    ),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Cookie Path
+    |--------------------------------------------------------------------------
+    |
+    | The session cookie path determines the path for which the cookie will
+    | be regarded as available. Typically, this will be the root path of
+    | your application, but you're free to change this when necessary.
+    |
+    */
+
+    'path' => env('SESSION_PATH', '/'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Cookie Domain
+    |--------------------------------------------------------------------------
+    |
+    | This value determines the domain and subdomains the session cookie is
+    | available to. By default, the cookie will be available to the root
+    | domain without subdomains. Typically, this shouldn't be changed.
+    |
+    */
+
+    'domain' => env('SESSION_DOMAIN'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | HTTPS Only Cookies
+    |--------------------------------------------------------------------------
+    |
+    | By setting this option to true, session cookies will only be sent back
+    | to the server if the browser has a HTTPS connection. This will keep
+    | the cookie from being sent to you when it can't be done securely.
+    |
+    */
+
+    'secure' => env('SESSION_SECURE_COOKIE'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | HTTP Access Only
+    |--------------------------------------------------------------------------
+    |
+    | Setting this value to true will prevent JavaScript from accessing the
+    | value of the cookie and the cookie will only be accessible through
+    | the HTTP protocol. It's unlikely you should disable this option.
+    |
+    */
+
+    'http_only' => env('SESSION_HTTP_ONLY', true),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Same-Site Cookies
+    |--------------------------------------------------------------------------
+    |
+    | This option determines how your cookies behave when cross-site requests
+    | take place, and can be used to mitigate CSRF attacks. By default, we
+    | will set this value to "lax" to permit secure cross-site requests.
+    |
+    | See: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value
+    |
+    | Supported: "lax", "strict", "none", null
+    |
+    */
+
+    'same_site' => env('SESSION_SAME_SITE', 'lax'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Partitioned Cookies
+    |--------------------------------------------------------------------------
+    |
+    | Setting this value to true will tie the cookie to the top-level site for
+    | a cross-site context. Partitioned cookies are accepted by the browser
+    | when flagged "secure" and the Same-Site attribute is set to "none".
+    |
+    */
+
+    'partitioned' => env('SESSION_PARTITIONED_COOKIE', false),
+
+];

project/database/.gitignore

@@ -0,0 +1 @@
+*.sqlite*

project/database/factories/UserFactory.php

@@ -0,0 +1,45 @@
+<?php
+
+namespace Database\Factories;
+
+use App\Models\User;
+use Illuminate\Database\Eloquent\Factories\Factory;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Support\Str;
+
+/**
+ * @extends Factory<User>
+ */
+class UserFactory extends Factory
+{
+    /**
+     * The current password being used by the factory.
+     */
+    protected static ?string $password;
+
+    /**
+     * Define the model's default state.
+     *
+     * @return array<string, mixed>
+     */
+    public function definition(): array
+    {
+        return [
+            'name' => fake()->name(),
+            'email' => fake()->unique()->safeEmail(),
+            'email_verified_at' => now(),
+            'password' => static::$password ??= Hash::make('password'),
+            'remember_token' => Str::random(10),
+        ];
+    }
+
+    /**
+     * Indicate that the model's email address should be unverified.
+     */
+    public function unverified(): static
+    {
+        return $this->state(fn (array $attributes) => [
+            'email_verified_at' => null,
+        ]);
+    }
+}

project/database/migrations/0001_01_01_000000_create_users_table.php

@@ -0,0 +1,49 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('users', function (Blueprint $table) {
+            $table->id();
+            $table->string('name');
+            $table->string('email')->unique();
+            $table->timestamp('email_verified_at')->nullable();
+            $table->string('password');
+            $table->rememberToken();
+            $table->timestamps();
+        });
+
+        Schema::create('password_reset_tokens', function (Blueprint $table) {
+            $table->string('email')->primary();
+            $table->string('token');
+            $table->timestamp('created_at')->nullable();
+        });
+
+        Schema::create('sessions', function (Blueprint $table) {
+            $table->string('id')->primary();
+            $table->foreignId('user_id')->nullable()->index();
+            $table->string('ip_address', 45)->nullable();
+            $table->text('user_agent')->nullable();
+            $table->longText('payload');
+            $table->integer('last_activity')->index();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('users');
+        Schema::dropIfExists('password_reset_tokens');
+        Schema::dropIfExists('sessions');
+    }
+};

project/database/migrations/0001_01_01_000001_create_cache_table.php

@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('cache', function (Blueprint $table) {
+            $table->string('key')->primary();
+            $table->mediumText('value');
+            $table->integer('expiration')->index();
+        });
+
+        Schema::create('cache_locks', function (Blueprint $table) {
+            $table->string('key')->primary();
+            $table->string('owner');
+            $table->integer('expiration')->index();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('cache');
+        Schema::dropIfExists('cache_locks');
+    }
+};

project/database/migrations/0001_01_01_000002_create_jobs_table.php

@@ -0,0 +1,57 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('jobs', function (Blueprint $table) {
+            $table->id();
+            $table->string('queue')->index();
+            $table->longText('payload');
+            $table->unsignedTinyInteger('attempts');
+            $table->unsignedInteger('reserved_at')->nullable();
+            $table->unsignedInteger('available_at');
+            $table->unsignedInteger('created_at');
+        });
+
+        Schema::create('job_batches', function (Blueprint $table) {
+            $table->string('id')->primary();
+            $table->string('name');
+            $table->integer('total_jobs');
+            $table->integer('pending_jobs');
+            $table->integer('failed_jobs');
+            $table->longText('failed_job_ids');
+            $table->mediumText('options')->nullable();
+            $table->integer('cancelled_at')->nullable();
+            $table->integer('created_at');
+            $table->integer('finished_at')->nullable();
+        });
+
+        Schema::create('failed_jobs', function (Blueprint $table) {
+            $table->id();
+            $table->string('uuid')->unique();
+            $table->text('connection');
+            $table->text('queue');
+            $table->longText('payload');
+            $table->longText('exception');
+            $table->timestamp('failed_at')->useCurrent();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('jobs');
+        Schema::dropIfExists('job_batches');
+        Schema::dropIfExists('failed_jobs');
+    }
+};

project/database/seeders/DatabaseSeeder.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\User;
+use Illuminate\Database\Console\Seeds\WithoutModelEvents;
+use Illuminate\Database\Seeder;
+
+class DatabaseSeeder extends Seeder
+{
+    use WithoutModelEvents;
+
+    /**
+     * Seed the application's database.
+     */
+    public function run(): void
+    {
+        // User::factory(10)->create();
+
+        User::factory()->create([
+            'name' => 'Test User',
+            'email' => 'test@example.com',
+        ]);
+    }
+}

project/package.json

@@ -0,0 +1,17 @@
+{
+    "$schema": "https://www.schemastore.org/package.json",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "build": "vite build",
+        "dev": "vite"
+    },
+    "devDependencies": {
+        "@tailwindcss/vite": "^4.0.0",
+        "axios": "^1.11.0",
+        "concurrently": "^9.0.1",
+        "laravel-vite-plugin": "^2.0.0",
+        "tailwindcss": "^4.0.0",
+        "vite": "^7.0.7"
+    }
+}

project/phpunit.xml

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:noNamespaceSchemaLocation="vendor/phpunit/phpunit/phpunit.xsd"
+         bootstrap="vendor/autoload.php"
+         colors="true"
+>
+    <testsuites>
+        <testsuite name="Unit">
+            <directory>tests/Unit</directory>
+        </testsuite>
+        <testsuite name="Feature">
+            <directory>tests/Feature</directory>
+        </testsuite>
+    </testsuites>
+    <source>
+        <include>
+            <directory>app</directory>
+        </include>
+    </source>
+    <php>
+        <env name="APP_ENV" value="testing"/>
+        <env name="APP_MAINTENANCE_DRIVER" value="file"/>
+        <env name="BCRYPT_ROUNDS" value="4"/>
+        <env name="BROADCAST_CONNECTION" value="null"/>
+        <env name="CACHE_STORE" value="array"/>
+        <env name="DB_CONNECTION" value="sqlite"/>
+        <env name="DB_DATABASE" value=":memory:"/>
+        <env name="DB_URL" value=""/>
+        <env name="MAIL_MAILER" value="array"/>
+        <env name="QUEUE_CONNECTION" value="sync"/>
+        <env name="SESSION_DRIVER" value="array"/>
+        <env name="PULSE_ENABLED" value="false"/>
+        <env name="TELESCOPE_ENABLED" value="false"/>
+        <env name="NIGHTWATCH_ENABLED" value="false"/>
+    </php>
+</phpunit>

project/public/.htaccess

@@ -0,0 +1,25 @@
+<IfModule mod_rewrite.c>
+    <IfModule mod_negotiation.c>
+        Options -MultiViews -Indexes
+    </IfModule>
+
+    RewriteEngine On
+
+    # Handle Authorization Header
+    RewriteCond %{HTTP:Authorization} .
+    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
+
+    # Handle X-XSRF-Token Header
+    RewriteCond %{HTTP:x-xsrf-token} .
+    RewriteRule .* - [E=HTTP_X_XSRF_TOKEN:%{HTTP:X-XSRF-Token}]
+
+    # Redirect Trailing Slashes If Not A Folder...
+    RewriteCond %{REQUEST_FILENAME} !-d
+    RewriteCond %{REQUEST_URI} (.+)/$
+    RewriteRule ^ %1 [L,R=301]
+
+    # Send Requests To Front Controller...
+    RewriteCond %{REQUEST_FILENAME} !-d
+    RewriteCond %{REQUEST_FILENAME} !-f
+    RewriteRule ^ index.php [L]
+</IfModule>

project/public/assets/css/detail_surat.css

@@ -0,0 +1,797 @@
+/* =========================
+   RESET & BASE
+========================= */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+}
+
+body {
+  background: #e4eaf6;
+  display: flex;
+}
+
+/* =========================
+   SIDEBAR
+========================= */
+.sidebar {
+  width: 240px;
+  min-height: 100vh; /* ikut tinggi konten */
+  position: relative; /* BUKAN fixed */
+  background: #1e5cc8;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+}
+
+/* COLLAPSE MODE */
+.sidebar.collapsed {
+  width: 80px;
+}
+
+/* =========================
+   SIDEBAR HEADER
+========================= */
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 20px 20px 20px;
+  margin-bottom: 5px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.logo-desa {
+  width: 55px;
+  height: 55px;
+  object-fit: contain;
+  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
+}
+
+.header-text {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.2;
+}
+
+.desa-title {
+  font-size: 14px;
+  opacity: 0.9;
+}
+
+.desa-name {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+/* Header saat collapse */
+.sidebar.collapsed .header-text {
+  display: none;
+}
+
+.sidebar.collapsed .sidebar-header {
+  justify-content: center;
+}
+
+/* =========================
+   SIDEBAR MENU (SCROLLABLE)
+========================= */
+.sidebar-menu {
+  list-style: none;
+  overflow: visible; /* SEMUA MENU TERLIHAT */
+}
+
+/* Scrollbar */
+.sidebar-menu::-webkit-scrollbar {
+  width: 6px;
+}
+
+.sidebar-menu::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 10px;
+}
+
+/* Section title */
+.menu-section {
+  margin-top: 7px;
+  padding: 10px 20px;
+  font-size: 11px;
+  font-weight: 700;
+  opacity: 0.6;
+}
+
+/* Menu item */
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 20px;
+  font-size: 14px;
+  color: #fff;
+  text-decoration: none;
+  opacity: 0.9;
+  border-left: 3px solid transparent;
+  transition: 0.2s ease;
+}
+
+.menu-item i {
+  font-size: 18px;
+}
+
+.menu-item:hover {
+  background: rgba(255, 255, 255, 0.2);
+  opacity: 1;
+}
+
+.menu-item.active {
+  background: rgba(255, 255, 255, 0.25);
+  border-left-color: #fff;
+  opacity: 1;
+  font-weight: 600; /* BOLD saat aktif */
+}
+
+/* Menu saat collapse */
+.sidebar.collapsed .menu-item span,
+.sidebar.collapsed .menu-section {
+  display: none;
+}
+
+.sidebar.collapsed .menu-item {
+  justify-content: center;
+}
+
+/* =========================
+   LOGOUT BUTTON
+========================= */
+.sidebar-logout {
+  padding: 35px 20px;
+  font-weight: 600;
+}
+
+.logout-btn {
+  display: flex;
+  align-items: center; /* center vertikal */
+  justify-content: center; /* center horizontal */
+  gap: 12px;
+  padding: 12px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.15);
+  color: #fff;
+  font-size: 15px;
+  text-decoration: none;
+  transition: 0.3s ease;
+}
+
+.logout-btn:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.sidebar.collapsed .logout-btn span {
+  display: none;
+}
+
+.sidebar.collapsed .logout-btn {
+  justify-content: center;
+}
+
+/* =========================
+   TOGGLE BUTTON
+========================= */
+.sidebar-toggle {
+  position: relative;
+  bottom: 15px;
+  margin: 20px auto;
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: 0.3s ease;
+}
+
+.sidebar-toggle:hover {
+  background: rgba(255, 255, 255, 0.35);
+}
+
+.main {
+  padding: 25px;
+  width: calc(100% - 240px);
+  background: var(--bg-soft);
+}
+
+.sidebar.collapsed ~ .main {
+  width: calc(100% - 80px);
+}
+
+/* =========================
+   BASE
+========================= */
+.main {
+  padding: 30px;
+  background: #e7edf8;
+}
+
+/* =========================
+   GRID LAYOUT
+========================= */
+.detail-grid {
+  display: grid;
+  grid-template-columns: 2.5fr 1fr;
+  gap: 26px;
+  align-items: flex-start;
+}
+
+/* =========================
+   CARD
+========================= */
+.detail-card {
+  background: #ffffff;
+  border-radius: 20px;
+  padding: 28px;
+  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.08);
+}
+
+/* =========================
+   HEADER
+========================= */
+.detail-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  background: linear-gradient(135deg, #1e40af, #2563eb);
+  margin: -28px -28px 30px;
+  padding: 20px 28px;
+
+  border-radius: 10px 10px 0 0;
+}
+
+.detail-header h2 {
+  font-size: 20px;
+  font-weight: 700;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.detail-header i {
+  color: #fff;
+}
+
+/* ==============================
+   BUTTON KEMBALI
+============================== */
+.btn-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 18px;
+  background: #f1f5f9;
+  color: #1e5cc8;
+  font-weight: 600;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: 0.2s ease;
+}
+
+.btn-back i {
+  font-size: 16px;
+  color: #1e5cc8;
+}
+
+.btn-back:hover {
+  background: #e5e9f0;
+}
+
+/* =========================
+   INFO GRID
+========================= */
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 18px;
+}
+
+.info-box {
+  background: #f8fafc;
+  padding: 18px;
+  border-radius: 16px;
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+}
+
+.info-box i {
+  font-size: 22px;
+  color: #2563eb;
+  margin-top: 2px;
+}
+
+.info-content span {
+  font-size: 13px;
+  color: #6b7280;
+}
+
+.info-content strong {
+  display: block;
+  margin-top: 4px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+/* FULL WIDTH */
+.info-box.highlight {
+  grid-column: span 2;
+  background: #e0f2fe;
+}
+
+/* Judul / label */
+.info-label {
+  font-size: 13px;
+  color: #6b7280; /* abu-abu */
+  display: block;
+  margin-bottom: 6px;
+}
+
+/* =========================
+   STATUS BADGE
+========================= */
+.status-badge {
+  display: inline-block;
+  margin-top: 6px;
+  padding: 6px 14px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #ffffff;
+}
+
+.status-badge.success {
+  background: #22c55e;
+  color: #fff;
+}
+
+/* =========================
+   CONTACT
+========================= */
+.contact-action {
+  margin-top: 12px;
+  display: flex;
+  gap: 10px;
+}
+
+.btn-call,
+.btn-wa {
+  border: none;
+  padding: 8px 14px;
+  border-radius: 10px;
+  font-size: 13px;
+  color: #fff;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+}
+
+.btn-call {
+  background: #1e40af;
+}
+
+.btn-wa {
+  background: #22c55e;
+}
+
+.btn-call i,
+.btn-wa i {
+  color: #ffffff !important;
+}
+
+/* =========================
+   META INFO
+========================= */
+.meta-info {
+  margin: 26px 0;
+  font-size: 14px;
+  color: #4b5563;
+}
+
+.meta-info p {
+  margin-bottom: 6px;
+}
+
+/* =========================
+   SECTION
+========================= */
+.section-box {
+  margin-top: 30px;
+  color: #203f9d;
+}
+
+.section-box h4 {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 14px;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+/* =========================
+   ALERT
+========================= */
+.alert-info {
+  background: #e0f2fe;
+  padding: 14px 16px;
+  border-radius: 14px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+}
+
+/* =========================
+   FORM
+========================= */
+.form-group {
+  margin-bottom: 16px;
+}
+
+.form-group label {
+  font-size: 13px;
+  color: #6b7280;
+  margin-bottom: 6px;
+  display: block;
+}
+
+.form-group input {
+  width: 100%;
+  padding: 11px 12px;
+  border-radius: 10px;
+  border: 1px solid #d1d5db;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  outline: none;
+}
+
+.form-group input:focus {
+  border-color: #2563eb;
+  box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.15);
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+}
+
+.btn-save {
+  margin-top: 20px;
+  background: #2563eb;
+  color: #fff;
+  padding: 12px 20px;
+  border-radius: 12px;
+  border: none;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+/* =========================
+   SIDEBAR
+========================= */
+.detail-side {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  color: #535456;
+}
+
+.side-card {
+  background: #ffffff;
+  padding: 20px;
+  border-radius: 18px;
+  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08);
+}
+
+.side-card h4 {
+  margin-bottom: 16px;
+  font-size: 16px;
+  font-weight: 550;
+}
+
+/* =========================
+   TIMELINE TEXT FIX
+========================= */
+.timeline-item strong {
+  font-weight: 500;
+  color: #374151;
+  display: block;
+  margin-bottom: 4px;
+}
+
+.timeline-item small {
+  font-size: 12px;
+  color: #9ca3af;
+}
+
+/* =========================
+   SIDEBAR BUTTON
+========================= */
+.btn-download,
+.btn-print {
+  width: 100%;
+  padding: 12px;
+  border-radius: 12px;
+  border: none;
+  color: #fff;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.btn-download {
+  background: #16a34a;
+  margin-bottom: 12px;
+}
+
+.btn-print {
+  background: #2563eb;
+}
+
+/* =========================
+   TIMELINE
+========================= */
+.timeline {
+  border-left: 2px solid #e5e7eb;
+  padding-left: 16px;
+}
+
+.timeline-item {
+  position: relative;
+  margin-bottom: 18px;
+}
+
+.timeline-item strong {
+  display: block;
+  font-size: 14px;
+}
+
+.timeline-item small {
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.dot {
+  position: absolute;
+  left: -22px;
+  top: 4px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.dot.blue {
+  background: #4974d1;
+}
+
+.dot.green {
+  background: #22c55e;
+}
+
+.side-card h4 {
+  position: relative;
+  padding-bottom: 10px;
+  margin-bottom: 16px;
+}
+
+/* garis */
+.side-card h4::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 1px;
+  background: #c4c5c8; /* abu tipis */
+}
+
+/* ====================
+   MOBILE RESPONSIVE 
+===================== */
+
+/* TABLET & MOBILE */
+@media (max-width: 992px) {
+  body {
+    display: block;
+  }
+
+  /* ===== SIDEBAR SLIDE ===== */
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: -260px;
+    height: 100vh;
+    z-index: 1200;
+    transition: left 0.3s ease;
+  }
+
+  .sidebar.show {
+    left: 0;
+  }
+
+  /* ===== MAIN FULL WIDTH ===== */
+  .main {
+    width: 100% !important;
+    padding: 20px;
+  }
+
+  /* ===== GRID JADI SATU KOLOM ===== */
+  .detail-grid {
+    grid-template-columns: 1fr;
+  }
+
+  /* ===== HEADER ===== */
+  .detail-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .detail-header h2 {
+    font-size: 17px;
+  }
+
+  /* ===== CARD ===== */
+  .detail-card {
+    padding: 22px;
+  }
+
+  /* ===== INFO GRID ===== */
+  .info-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .info-box.highlight {
+    grid-column: span 1;
+  }
+
+  /* ===== FORM ===== */
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+
+  /* ===== SIDE CARD ===== */
+  .detail-side {
+    margin-top: 20px;
+  }
+
+  /* ===== BUTTON ===== */
+  .btn-back {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .btn-download,
+  .btn-print {
+    font-size: 14px;
+  }
+}
+
+/* MOBILE KECIL */
+@media (max-width: 576px) {
+  .detail-header h2 {
+    font-size: 16px;
+  }
+
+  .detail-card {
+    padding: 18px;
+  }
+
+  .info-content strong {
+    font-size: 14px;
+  }
+
+  .meta-info {
+    font-size: 13px;
+  }
+}
+
+/* ===== HAMBURGER MOBILE ===== */
+.mobile-hamburger {
+  display: none;
+}
+
+@media (max-width: 992px) {
+  .mobile-toggle {
+    display: none;
+    position: fixed;
+    top: 16px;
+    left: 16px;
+    z-index: 1300;
+    background: #1e5cc8;
+    color: #fff;
+    border: none;
+    padding: 10px 14px;
+    font-size: 22px;
+    border-radius: 10px;
+    cursor: pointer;
+  }
+
+  /* sembunyikan toggle desktop */
+  .sidebar-toggle {
+    display: none;
+  }
+}
+
+/* ==============================
+   HAMBURGER MOBILE
+============================== */
+.mobile-hamburger {
+  display: none;
+}
+
+/* MOBILE MODE */
+@media (max-width: 768px) {
+  .mobile-hamburger {
+    display: flex;
+    position: fixed;
+    top: 16px;
+    right: 16px;
+    z-index: 1200;
+    width: 44px;
+    height: 44px;
+    background: #1e5cc8;
+    color: #fff;
+    border-radius: 10px;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+  }
+
+  /* Sidebar jadi drawer */
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: -240px;
+    height: 100vh;
+    z-index: 1000;
+    transition: left 0.3s ease;
+  }
+
+  .sidebar.show {
+    left: 0;
+  }
+
+  /* PAKSA TEKS MUNCUL */
+  .sidebar.show .menu-item span,
+  .sidebar.show .menu-section,
+  .sidebar.show .header-text,
+  .sidebar.show .logout-btn span {
+    display: block !important;
+  }
+
+  .sidebar.show .menu-item {
+    justify-content: flex-start;
+  }
+
+  /* Main full */
+  .main {
+    width: 100%;
+    padding: 16px;
+  }
+}
+
+/* ==============================
+   HIDE DESKTOP TOGGLE ON MOBILE
+============================== */
+@media (max-width: 768px) {
+  .sidebar-toggle {
+    display: none !important;
+  }
+}

project/public/assets/css/edit kabar.css

@@ -0,0 +1,683 @@
+/* =========================
+   RESET & BASE
+========================= */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+}
+
+body {
+  background: #e4eaf6;
+  display: flex;
+}
+
+/* =========================
+   SIDEBAR
+========================= */
+.sidebar {
+  width: 240px;
+  min-height: 100vh; /* ikut tinggi konten */
+  position: relative; /* BUKAN fixed */
+  background: #1e5cc8;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+}
+
+/* COLLAPSE MODE */
+.sidebar.collapsed {
+  width: 80px;
+}
+
+/* =========================
+   SIDEBAR HEADER
+========================= */
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 20px 20px 20px;
+  margin-bottom: 5px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.logo-desa {
+  width: 55px;
+  height: 55px;
+  object-fit: contain;
+  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
+}
+
+.header-text {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.2;
+}
+
+.desa-title {
+  font-size: 14px;
+  opacity: 0.9;
+}
+
+.desa-name {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+/* Header saat collapse */
+.sidebar.collapsed .header-text {
+  display: none;
+}
+
+.sidebar.collapsed .sidebar-header {
+  justify-content: center;
+}
+
+/* =========================
+   SIDEBAR MENU (SCROLLABLE)
+========================= */
+.sidebar-menu {
+  list-style: none;
+  overflow: visible; /* SEMUA MENU TERLIHAT */
+}
+
+/* Scrollbar */
+.sidebar-menu::-webkit-scrollbar {
+  width: 6px;
+}
+
+.sidebar-menu::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 10px;
+}
+
+/* Section title */
+.menu-section {
+  margin-top: 7px;
+  padding: 10px 20px;
+  font-size: 11px;
+  font-weight: 700;
+  opacity: 0.6;
+}
+
+/* Menu item */
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 20px;
+  font-size: 14px;
+  color: #fff;
+  text-decoration: none;
+  opacity: 0.9;
+  border-left: 3px solid transparent;
+  transition: 0.2s ease;
+}
+
+.menu-item i {
+  font-size: 18px;
+}
+
+.menu-item:hover {
+  background: rgba(255, 255, 255, 0.2);
+  opacity: 1;
+}
+
+.menu-item.active {
+  background: rgba(255, 255, 255, 0.25);
+  border-left-color: #fff;
+  opacity: 1;
+  font-weight: 600; /* BOLD saat aktif */
+}
+
+/* Menu saat collapse */
+.sidebar.collapsed .menu-item span,
+.sidebar.collapsed .menu-section {
+  display: none;
+}
+
+.sidebar.collapsed .menu-item {
+  justify-content: center;
+}
+
+/* =========================
+   LOGOUT BUTTON
+========================= */
+.sidebar-logout {
+  padding: 35px 20px;
+  font-weight: 600;
+}
+
+.logout-btn {
+  display: flex;
+  align-items: center; /* center vertikal */
+  justify-content: center; /* center horizontal */
+  gap: 12px;
+  padding: 12px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.15);
+  color: #fff;
+  font-size: 15px;
+  text-decoration: none;
+  transition: 0.3s ease;
+}
+
+.logout-btn:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.sidebar.collapsed .logout-btn span {
+  display: none;
+}
+
+.sidebar.collapsed .logout-btn {
+  justify-content: center;
+}
+
+/* =========================
+   TOGGLE BUTTON
+========================= */
+.sidebar-toggle {
+  position: relative;
+  bottom: 15px;
+  margin: 20px auto;
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: 0.3s ease;
+}
+
+.sidebar-toggle:hover {
+  background: rgba(255, 255, 255, 0.35);
+}
+
+.main {
+  padding: 25px;
+  width: calc(100% - 240px);
+  background: var(--bg-soft);
+}
+
+.sidebar.collapsed ~ .main {
+  width: calc(100% - 80px);
+}
+
+/* =========================
+   MAIN CONTENT
+========================= */
+.main {
+  flex: 1;
+  padding: 30px;
+  background: #e4eaf6;
+  overflow-y: auto;
+}
+
+/* =========================
+   HEADER BANNER
+========================= */
+.header-banner {
+  background: #1e5cc8;
+  color: #fff;
+  padding: 20px 40px;
+  border-radius: 12px;
+  margin-bottom: 30px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.header-banner h1 {
+  font-size: 24px;
+  font-weight: 700;
+  margin-bottom: 5px;
+}
+
+.header-banner p {
+  font-size: 14px;
+  opacity: 0.8;
+}
+
+.header-banner {
+  display: flex;
+  justify-content: space-between; /* kiri & kanan */
+  align-items: center;
+  background: #1e5cc8;
+  color: #fff;
+  padding: 20px 30px;
+  border-radius: 12px;
+  margin-bottom: 30px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.header-banner h1 {
+  font-size: 24px;
+  font-weight: 700;
+  margin-bottom: 5px;
+}
+
+.header-banner p {
+  font-size: 14px;
+  opacity: 0.8;
+}
+
+/* Tombol Kembali */
+.btn-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 18px;
+  background: #f1f5f9;
+  color: #1e5cc8;
+  font-weight: 600;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: 0.2s ease;
+}
+
+.btn-back i {
+  font-size: 16px;
+}
+
+.btn-back:hover {
+  background: #e2e8f0;
+}
+/* =========================
+   FORM CONTAINER
+========================= */
+.form-container {
+  background: #ffffff;
+  border-radius: 10px;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+}
+
+/* =========================
+   FORM HEADER
+========================= */
+.form-header {
+  background: #f8faff;
+  padding: 15px 25px;
+  border-bottom: 1px solid #edf2f7;
+  font-weight: 600;
+  color: #2156c9;
+  font-size: 16px;
+}
+
+/* =========================
+   FORM BODY
+========================= */
+.kabar-form {
+  padding: 26px;
+}
+
+/* =========================
+   FORM GROUP
+========================= */
+.form-group {
+  margin-bottom: 22px;
+}
+
+.form-group label {
+  display: block;
+  font-size: 14px;
+  font-weight: 550;
+  color: #4a5568;
+  margin-bottom: 8px;
+}
+
+/* =========================
+   INPUT & TEXTAREA
+========================= */
+.form-group input[type="text"],
+.form-group input[type="date"],
+.form-group textarea {
+  width: 100%;
+  padding: 11px 14px;
+  font-size: 14px;
+  color: #2d3748;
+  border: 1px solid #c3c5ca;
+  border-radius: 6px;
+  background: #ffffff;
+  transition: 0.2s ease;
+}
+
+.form-group textarea {
+  resize: vertical;
+  line-height: 1.6;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: #2563eb;
+  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25);
+}
+
+/* Icon di label form */
+.form-group label i,
+.form-header i,
+.current-photo-box label i {
+  margin-right: 6px; /* jarak antara icon & teks */
+  color: #2563eb; /* biru konsisten */
+  font-size: 14px;
+  vertical-align: middle;
+}
+
+/* Tombol dengan icon */
+.form-actions button i {
+  margin-right: 6px;
+}
+
+/* =========================
+   FILE INPUT CUSTOM
+========================= */
+.file-custom-input {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 6px;
+}
+
+.file-custom-input button {
+  background: #f1f5f9;
+  border: 1px solid #cbd5e0;
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 13px;
+  color: #2d3748;
+  cursor: pointer;
+  transition: 0.2s ease;
+}
+
+.file-custom-input button:hover {
+  background: #e8eef6;
+}
+
+#file-name {
+  font-size: 13px;
+  color: #718096;
+}
+
+/* =========================
+   FORM HELP TEXT
+========================= */
+.form-help {
+  display: block;
+  margin-top: 6px;
+  font-size: 12px;
+  color: #718096;
+}
+
+/* =========================
+   CURRENT PHOTO
+========================= */
+.current-photo-box label {
+  display: block;
+  font-size: 13.5px;
+  font-weight: 500;
+  color: #4a5568;
+  margin-bottom: 10px;
+}
+
+.photo-preview {
+  width: 200px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #e2e8f0;
+  background: #f8fafc;
+}
+
+.photo-preview img {
+  width: 100%;
+  display: block;
+}
+
+/* =========================
+   FORM ACTIONS
+========================= */
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 14px;
+  margin-top: 30px;
+  padding-top: 20px;
+  border-top: 1px solid #e5eaf2;
+}
+
+/* =========================
+   BUTTONS
+========================= */
+.btn-secondary {
+  background: #ef4444;
+  color: #ffffff;
+  border: 1px solid #cbd5e0;
+  padding: 10px 26px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: 0.2s ease;
+}
+
+.btn-secondary:hover {
+  background: #f7fafc;
+}
+
+/* UPDATE BUTTON */
+.btn-primary-update {
+  background: linear-gradient(135deg, #1e5cc8, #2563eb);
+  color: #ffffff;
+  border: none;
+  padding: 10px 28px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: 0.2s ease;
+}
+
+.btn-primary-update:hover {
+  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
+  transform: translateY(-1px);
+}
+
+/* ====================
+   MOBILE RESPONSIVE 
+===================== */
+
+/* ===== MOBILE LAYOUT ===== */
+@media (max-width: 768px) {
+  body {
+    display: block;
+  }
+
+  /* ===== SIDEBAR MOBILE ===== */
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: -260px;
+    height: 100vh;
+    width: 240px;
+    z-index: 1200;
+    transition: left 0.3s ease;
+  }
+
+  .sidebar.show {
+    left: 0;
+  }
+
+  /* ===== MAIN FULL WIDTH ===== */
+  .main {
+    width: 100% !important;
+    padding: 20px;
+  }
+
+  /* ===== SEMBUNYIKAN TOGGLE DESKTOP ===== */
+  .sidebar-toggle {
+    display: none;
+  }
+
+  /* ===== HAMBURGER MOBILE ===== */
+  .mobile-toggle {
+    display: none;
+    position: fixed;
+    top: 16px;
+    left: 16px;
+    z-index: 1300;
+    background: #1e5cc8;
+    color: #fff;
+    border: none;
+    padding: 10px 14px;
+    font-size: 22px;
+    border-radius: 10px;
+    cursor: pointer;
+  }
+}
+
+/* ===== HEADER BANNER MOBILE ===== */
+@media (max-width: 768px) {
+  .header-banner {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 14px;
+    padding: 20px;
+  }
+
+  .header-banner h1 {
+    font-size: 20px;
+  }
+
+  .header-banner p {
+    font-size: 13px;
+  }
+
+  .header-right {
+    width: 100%;
+  }
+
+  .btn-back {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+/* ===== FORM MOBILE ===== */
+@media (max-width: 768px) {
+  .form-container {
+    border-radius: 8px;
+  }
+
+  .kabar-form {
+    padding: 18px;
+  }
+
+  .form-group label {
+    font-size: 13px;
+  }
+
+  .form-group input,
+  .form-group textarea {
+    font-size: 13px;
+    padding: 10px 12px;
+  }
+
+  .file-custom-input {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .file-custom-input button {
+    width: 100%;
+  }
+
+  .photo-preview {
+    width: 100%;
+    max-width: 240px;
+  }
+}
+
+/* ===== FORM ACTIONS MOBILE ===== */
+@media (max-width: 576px) {
+  .form-actions {
+    flex-direction: column-reverse;
+    gap: 10px;
+  }
+
+  .form-actions button {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+/* ==============================
+   HAMBURGER MOBILE
+============================== */
+.mobile-hamburger {
+  display: none;
+}
+
+/* MOBILE MODE */
+@media (max-width: 768px) {
+  .mobile-hamburger {
+    display: flex;
+    position: fixed;
+    top: 16px;
+    right: 16px;
+    z-index: 1200;
+    width: 44px;
+    height: 44px;
+    background: #1e5cc8;
+    color: #fff;
+    border-radius: 10px;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+  }
+
+  /* Sidebar jadi drawer */
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: -240px;
+    height: 100vh;
+    z-index: 1000;
+    transition: left 0.3s ease;
+  }
+
+  .sidebar.show {
+    left: 0;
+  }
+
+  /* PAKSA TEKS MUNCUL */
+  .sidebar.show .menu-item span,
+  .sidebar.show .menu-section,
+  .sidebar.show .header-text,
+  .sidebar.show .logout-btn span {
+    display: block !important;
+  }
+
+  .sidebar.show .menu-item {
+    justify-content: flex-start;
+  }
+
+  /* Main full */
+  .main {
+    width: 100%;
+    padding: 16px;
+  }
+}
+
+/* ==============================
+   HIDE DESKTOP TOGGLE ON MOBILE
+============================== */
+@media (max-width: 768px) {
+  .sidebar-toggle {
+    display: none !important;
+  }
+}

project/public/assets/css/forgot.css

@@ -0,0 +1,136 @@
+/* Animasi muncul */
+@keyframes fadeSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(40px); /* mulai agak ke bawah */
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0); /* kembali ke posisi normal */
+  }
+}
+
+/* Terapkan ke card login */
+.login-card {
+  background: #fff;
+  padding: 35px;
+  border-radius: 14px;
+  width: 100%;
+  max-width: 580px;
+  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.25);
+  text-align: center;
+
+  /* efek animasi */
+  animation: fadeSlideIn 0.8s ease-out;
+}
+
+/* Background dengan gambar */
+body {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  background: url("../img/hero.jpg") no-repeat center center fixed;
+  background-size: cover;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* Overlay transparan di atas gambar */
+body::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 1;
+}
+
+/* Logo di login card */
+.login-logo {
+  width: 180px; /* lebih proporsional */
+  height: auto;
+  margin-bottom: 20px;
+}
+
+/* Divider setelah logo */
+.login-divider {
+  width: 80%;
+  margin: 15px auto 25px auto;
+  border: none;
+  border-top: 2px solid #007bff;
+  opacity: 0.7;
+}
+
+/* Container login */
+.login-container {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  padding: 15px;
+}
+
+/* Kotak login */
+.login-card {
+  background: #fff;
+  padding: 35px 30px;
+  border-radius: 14px;
+  width: 100%;
+  max-width: 420px;
+  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.25);
+  text-align: center;
+}
+
+/* Judul */
+.login-card h2 {
+  font-size: 22px;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+.login-card p {
+  font-size: 14px;
+  color: #555;
+  margin-bottom: 25px;
+}
+
+/* Input custom */
+.custom-input {
+  border-radius: 8px;
+  padding: 12px;
+  font-size: 15px;
+  margin-bottom: 18px;
+}
+
+/* Toggle password icon */
+.toggle-password {
+  position: absolute;
+  top: 50%;
+  right: 15px;
+  transform: translateY(-120%);
+  cursor: pointer;
+  color: #6c757d;
+  font-size: 18px;
+}
+.toggle-password:hover {
+  color: #0d6efd;
+}
+
+/* Tombol utama */
+.btn-primary {
+  width: 100%;
+  padding: 12px;
+  font-size: 15px;
+  font-weight: 600;
+  border-radius: 8px;
+  margin-top: 10px;
+}
+
+/* Link kecil */
+.login-card a {
+  font-size: 13px;
+}

project/public/assets/css/form-style.css

@@ -0,0 +1,122 @@
+/* Animasi muncul */
+@keyframes fadeSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(40px); /* mulai agak ke bawah */
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0); /* kembali ke posisi normal */
+  }
+}
+
+/* Background penuh */
+body {
+  font-family: "Poppins", sans-serif;
+  background: url("../img/hero.jpg") no-repeat center center fixed;
+  background-size: cover;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  margin: 0;
+}
+
+/* Overlay transparan di atas gambar */
+body::before {
+  content: "";
+  position: fixed; /* pakai fixed biar full screen dan ikut scroll */
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 1;
+}
+
+/* Card Form */
+.form-container {
+  position: relative; /* biar bisa pakai z-index */
+  z-index: 2; /* lebih tinggi dari overlay */
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.2);
+  padding: 40px 50px; /* tambah padding kanan-kiri biar lega */
+  width: 100%;
+  max-width: 1000px; /* diperbesar dari 650px jadi 900px */
+  animation: fadeInUp 0.6s ease;
+}
+
+/* Judul */
+.form-container h2 {
+  text-align: center;
+  font-size: 25px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 10px;
+}
+
+.form-container p {
+  text-align: center;
+  font-size: 15px;
+  color: #777;
+  margin-bottom: 25px;
+}
+
+/* Input dan Select */
+.form-container .form-control {
+  border-radius: 8px;
+  padding: 10px 12px;
+  border: 1px solid #d4d3d3;
+  transition: all 0.3s ease;
+}
+
+.form-container .form-control:focus {
+  border-color: #0d6efd;
+  box-shadow: 0 0 8px rgba(13, 110, 253, 0.3);
+}
+
+/* Input Group (ikon) */
+.input-group-text {
+  background: #f8f9fa;
+  border: 1px solid #ddd;
+  border-right: 0;
+}
+
+/* Subjudul */
+.form-container h5 {
+  font-size: 16px;
+  font-weight: 600;
+  color: #0d6efd;
+  margin-bottom: 15px;
+  border-left: 4px solid #0d6efd;
+  padding-left: 10px;
+}
+
+/* Tombol */
+.form-container .btn-submit {
+  width: 100%;
+  padding: 12px;
+  border-radius: 8px;
+  background: #0d6efd;
+  border: none;
+  color: white;
+  font-weight: 600;
+  transition: 0.3s;
+}
+
+.form-container .btn-submit:hover {
+  background: #0b5ed7;
+}
+
+/* Animasi masuk */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

project/public/assets/css/informasi.css

@@ -0,0 +1,328 @@
+/* =========================
+   KABAR DESA
+========================= */
+
+body {
+  background-color: #f4f7fa;
+}
+
+.card-government {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  border: none;
+  box-shadow: 0 8px 25px rgba(30, 60, 114, 0.3);
+}
+
+.text-government-primary {
+  color: #1e3c72 !important;
+}
+
+.bg-government-light {
+  background: linear-gradient(135deg, #f8f9ff 0%, #e8f0ff 100%);
+}
+
+.kabar-card {
+  border: none;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.3s ease;
+  overflow: hidden;
+  background: #fff;
+}
+
+.kabar-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+.kabar-image {
+  height: 200px;
+  object-fit: cover;
+  width: 100%;
+}
+
+.kabar-date {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  padding: 0.25rem 0.75rem;
+  border-radius: 15px;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.btn-government {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  border: none;
+  color: white;
+  font-size: 1rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  padding: 10px 25px;
+  border-radius: 12px;
+  transition: all 0.3s ease;
+}
+
+.btn-government:hover {
+  background: linear-gradient(135deg, #163056 0%, #1e4176 100%);
+  color: white;
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(30, 60, 114, 0.4);
+}
+
+/* =========================
+   DETAIL KABAR DESA
+========================= */
+.card-government {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  border: none;
+}
+
+.government-container {
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+  min-height: 100vh;
+}
+
+.photo-gallery .img-thumbnail {
+  cursor: pointer;
+  border: 3px solid #1e3c72;
+  position: relative;
+  overflow: hidden;
+}
+
+.photo-gallery .img-thumbnail:hover {
+  border-color: #2a5298;
+  box-shadow: 0 4px 15px rgba(30, 60, 114, 0.2);
+}
+
+.photo-container {
+  position: relative;
+  overflow: hidden;
+  border-radius: 8px;
+}
+
+.info-card {
+  background: white;
+  border-left: none !important;
+}
+
+.info-card:hover {
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+}
+
+.btn-government {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  border: none;
+  color: white;
+}
+
+.btn-government:hover {
+  background: linear-gradient(135deg, #2a5298 0%, #1e3c72 100%);
+  color: white;
+}
+
+.modal-government .modal-header {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  border-bottom: none;
+}
+
+.modal-government .modal-footer {
+  border-top: 1px solid #e9ecef;
+  background-color: var(--bs-primary);
+}
+
+.modal img {
+  transition: none;
+  will-change: auto;
+  backface-visibility: hidden;
+}
+
+.photo-gallery .img-thumbnail::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(30, 60, 114, 0.7);
+  opacity: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.photo-gallery .img-thumbnail:hover::after {
+  opacity: 1;
+}
+
+/* Prevent any unwanted animations */
+* {
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.modal-dialog {
+  will-change: transform;
+}
+
+.date-badge {
+  background: linear-gradient(135deg, #2a5298 0%, #1e3c72 100%);
+  color: white;
+  border-radius: 20px;
+  padding: 8px 16px;
+  font-size: 0.9rem;
+  display: inline-block;
+}
+
+/* =========================
+   PENGUMUMAN
+========================= */
+body {
+  background-color: #f4f7f6;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* Styles dari Push Blade */
+.card-government {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  border: none;
+  box-shadow: 0 8px 25px rgba(30, 60, 114, 0.3);
+}
+
+.text-government-primary {
+  color: #1e3c72 !important;
+}
+
+.bg-government-light {
+  background: linear-gradient(135deg, #f8f9ff 0%, #e8f0ff 100%);
+}
+
+.btn-government {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  border: none;
+  color: white;
+  transition: all 0.3s ease;
+}
+
+.btn-government:hover {
+  background: linear-gradient(135deg, #163056 0%, #1e4176 100%);
+  color: white;
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(30, 60, 114, 0.4);
+}
+
+/* Tambahan styling untuk tabel agar lebih rapi */
+.table-government thead th {
+  background-color: #f8f9ff;
+  color: #1e3c72;
+  border-bottom: 2px solid #e8f0ff;
+  padding: 15px;
+}
+
+.table-government tbody td {
+  padding: 15px;
+  vertical-align: middle;
+}
+
+/* Meratakan Show Entries dan Search */
+.dataTables_wrapper .row {
+  display: flex;
+  align-items: center;
+}
+
+.dataTables_length label,
+.dataTables_filter label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 1rem;
+  color: #1b1b1b;
+}
+
+.dataTables_filter input {
+  margin-left: 0.5rem !important;
+  border: 1px solid #d1d3e2;
+  border-radius: 4px;
+  padding: 4px 8px;
+}
+
+.dataTables_length select {
+  border: 1px solid #d1d3e2;
+  border-radius: 4px;
+  padding: 2px 8px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-image: none !important;
+  background-color: #fff;
+  text-align: center;
+  cursor: pointer;
+  min-width: 45px;
+}
+
+table.dataTable thead th {
+  padding-right: 12px !important;
+}
+
+/* =========================
+   DETAIL PENGUMUMAN
+========================= */
+
+body {
+  background-color: #f4f7f6;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.card-government {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  border: none;
+  box-shadow: 0 8px 25px rgba(30, 60, 114, 0.3);
+}
+
+.text-government-primary {
+  color: #1e3c72 !important;
+}
+
+.bg-government-light {
+  background: linear-gradient(135deg, #f8f9ff 0%, #e8f0ff 100%);
+}
+
+.info-item {
+  background: #f8f9ff;
+  /* border-left: 4px solid #1e3c72; */
+  padding: 1rem;
+  border-radius: 8px; /* Disesuaikan agar simetris jika border-left mati */
+  margin-bottom: 1rem;
+}
+
+.info-item .label {
+  font-weight: 600;
+  color: #1e3c72;
+  margin-bottom: 0.5rem;
+  display: flex;
+  align-items: center;
+}
+
+.info-item .value {
+  color: #333;
+  margin: 0;
+  font-size: 1.1rem;
+}
+
+.badge-date {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 20px;
+  font-weight: 500;
+}
+
+.btn-group .btn {
+  margin-left: 0;
+}

project/public/assets/css/kabar.css

@@ -0,0 +1,711 @@
+/* Government Theme Colors */
+:root {
+  --government-primary: #1e3c72;
+  --government-secondary: #2a5298;
+  --government-accent: #ffd700;
+  --government-light: #f8f9ff;
+  --government-dark: #163056;
+}
+
+body {
+  background-color: #f4f7f6;
+  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  margin: 0;
+}
+
+.sidebar-government {
+  background: linear-gradient(180deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+  box-shadow: 4px 0 15px rgba(30, 60, 114, 0.2);
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+
+  width: 280px;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  padding: 20px;
+}
+
+/* Overlay pattern untuk tekstur sidebar */
+.sidebar-government::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M0,0 L100,0 L100,100 L0,100 Z" fill="white" opacity="0.05"/></svg>');
+  opacity: 0.1;
+  pointer-events: none;
+}
+
+.sidebar-government .brand-section {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 15px;
+  padding: 20px;
+  margin-bottom: 20px;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  text-align: left;
+}
+
+.sidebar-government .brand-title {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.sidebar-government .brand-subtitle {
+  font-size: 16px;
+  opacity: 0.9;
+}
+
+.sidebar-government .brand-text {
+  color: white;
+  margin-left: 0px;
+  font-weight: 700;
+  font-size: 1.1rem;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* Logo */
+.logo-wrapper {
+  width: 75px;
+  height: 75px;
+  border-radius: 50%;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo-img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.sidebar-government .nav-link {
+  color: rgba(255, 255, 255, 0.9) !important;
+  padding: 12px 16px;
+  margin-bottom: 8px;
+  border-radius: 12px;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  backdrop-filter: blur(5px);
+  border: 1px solid transparent;
+  display: flex;
+  align-items: center;
+}
+
+/* Efek kilau saat hover */
+.sidebar-government .nav-link::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: left 0.5s ease;
+}
+
+.sidebar-government .nav-link:hover::before {
+  left: 100%;
+}
+
+.sidebar-government .nav-link:hover {
+  background: rgba(255, 255, 255, 0.15);
+  color: white !important;
+  transform: translateX(8px);
+  border-color: rgba(255, 215, 0, 0.5);
+  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
+}
+
+.sidebar-government .nav-link.active {
+  background: linear-gradient(135deg, var(--government-accent) 0%, #ffed4e 100%);
+  color: var(--government-primary) !important;
+  font-weight: 600;
+  border-color: var(--government-accent);
+  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
+}
+
+.sidebar-government .nav-link.active i {
+  color: var(--government-primary) !important;
+}
+
+.sidebar-government .nav-link i {
+  width: 20px;
+  margin-right: 12px;
+  text-align: center;
+  font-size: 1.1rem;
+}
+
+.sidebar-government hr {
+  border-color: rgba(255, 255, 255, 0.3);
+  margin: 20px 0;
+}
+
+.btn-government-logout {
+  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
+  border: none;
+  color: white;
+  padding: 12px 20px;
+  border-radius: 12px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  width: 100%;
+  box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
+  cursor: pointer;
+}
+
+.btn-government-logout:hover {
+  background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
+  color: white;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
+}
+
+/* Mobile Navbar Styles */
+.mobile-navbar-government {
+  background: linear-gradient(135deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+  color: white;
+  box-shadow: 0 4px 15px rgba(30, 60, 114, 0.3);
+  border-bottom: 3px solid var(--government-accent);
+}
+
+.mobile-navbar-government .navbar-brand {
+  color: white !important;
+  font-weight: 700;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* Nav section headers */
+.nav-section-header {
+  color: var(--government-accent);
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin: 20px 0 10px 0;
+  padding-left: 16px;
+}
+
+/* User info section */
+.user-info {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 15px;
+  margin-bottom: 20px;
+  text-align: center;
+  backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.user-info .user-name {
+  color: white;
+  font-weight: 600;
+  margin-bottom: 5px;
+}
+
+.user-info .user-role {
+  color: var(--government-accent);
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* Responsive Main Content area adjustment */
+.main-content {
+  transition: margin 0.3s ease;
+  padding: 20px;
+}
+
+@media (min-width: 769px) {
+  .main-content {
+    margin-left: 280px;
+  }
+}
+
+@media (max-width: 768px) {
+  .navbar-collapse {
+    background: linear-gradient(135deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+    margin-top: 10px;
+    border-radius: 15px;
+    padding: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+  }
+}
+
+/* SweetAlert Custom Styles */
+.swal-government-popup {
+  border-radius: 15px !important;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
+  padding: 2rem !important;
+}
+.swal-government-title {
+  color: #1e3c72 !important;
+  font-weight: 600 !important;
+}
+.swal-government-confirm {
+  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
+  color: white !important;
+  border: none !important;
+  border-radius: 8px !important;
+  padding: 10px 24px !important;
+  margin-left: 10px !important;
+  font-weight: 600 !important;
+}
+.swal-government-cancel {
+  background: #6c757d !important;
+  color: white !important;
+  border: none !important;
+  border-radius: 8px !important;
+  padding: 10px 24px !important;
+  font-weight: 600 !important;
+}
+
+/* ============================= */
+/* MOBILE NAVBAR GOVERNMENT FIX */
+/* ============================= */
+
+.mobile-navbar-government {
+  background: linear-gradient(135deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+  color: white;
+  border-bottom: 3px solid var(--government-accent);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
+}
+
+/* Brand */
+.mobile-navbar-government .navbar-brand {
+  color: white !important;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.mobile-navbar-government .navbar-brand i {
+  color: white !important;
+  font-size: 1.4rem;
+}
+
+/* Hamburger button */
+.mobile-navbar-government .navbar-toggler {
+  border: none;
+  background: rgba(255, 255, 255, 0.15);
+  padding: 6px 10px;
+  border-radius: 8px;
+}
+
+.mobile-navbar-government .navbar-toggler:focus {
+  box-shadow: none;
+}
+
+.mobile-navbar-government .navbar-toggler-icon {
+  filter: brightness(0) invert(1); /* bikin icon putih */
+}
+
+/* Collapse area */
+@media (max-width: 768px) {
+  .mobile-navbar-government .navbar-collapse {
+    background: linear-gradient(180deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+    margin-top: 15px;
+    border-radius: 15px;
+    padding: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
+  }
+
+  .mobile-navbar-government .nav-link {
+    color: white !important;
+    font-weight: 500;
+    padding: 12px 14px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .mobile-navbar-government .nav-link i {
+    color: white !important;
+    font-size: 1.1rem;
+  }
+
+  .mobile-navbar-government .nav-link:hover {
+    background: rgba(255, 255, 255, 0.15);
+  }
+
+  .mobile-navbar-government .nav-link.active {
+    background: linear-gradient(135deg, var(--government-accent) 0%, #ffed4e 100%);
+    color: var(--government-primary) !important;
+    font-weight: 600;
+  }
+
+  .mobile-navbar-government .nav-link.active i {
+    color: var(--government-primary) !important;
+  }
+}
+
+/* User Info */
+.mobile-user-info {
+  text-align: center;
+  padding-bottom: 15px;
+  margin-bottom: 15px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.mobile-user-info .user-name {
+  color: var(--government-accent);
+  font-weight: 600;
+}
+
+.mobile-user-info .user-role {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 0.8rem;
+}
+
+/* Logout button mobile */
+.mobile-navbar-government .btn-government-logout {
+  width: 100%;
+  margin-top: 10px;
+}
+
+/* =========================
+   KABAR DESA
+========================= */
+
+body {
+  background-color: #f4f7fa;
+}
+
+.card-government {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  border: none;
+  box-shadow: 0 8px 25px rgba(30, 60, 114, 0.3);
+}
+
+.text-government-primary {
+  color: #1e3c72 !important;
+}
+
+.bg-government-light {
+  background: linear-gradient(135deg, #f8f9ff 0%, #e8f0ff 100%);
+}
+
+.kabar-card {
+  border: none;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.3s ease;
+  overflow: hidden;
+  background: #fff;
+}
+
+.kabar-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+.kabar-image {
+  height: 200px;
+  object-fit: cover;
+  width: 100%;
+}
+
+.kabar-date {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  padding: 0.25rem 0.75rem;
+  border-radius: 15px;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.btn-government {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  border: none;
+  color: white;
+  transition: all 0.3s ease;
+}
+
+.btn-government:hover {
+  background: linear-gradient(135deg, #163056 0%, #1e4176 100%);
+  color: white;
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(30, 60, 114, 0.4);
+}
+
+/* =========================
+   TAMBAH KABAR DESA
+========================= */
+
+.card-government {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  border: none;
+  box-shadow: 0 8px 25px rgba(30, 60, 114, 0.3);
+}
+
+.text-government-primary {
+  color: #1e3c72 !important;
+}
+
+.bg-government-light {
+  background: linear-gradient(135deg, #f8f9ff 0%, #e8f0ff 100%);
+}
+
+.btn-government {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  border: none;
+  color: white;
+  transition: all 0.3s ease;
+}
+
+.btn-government:hover {
+  background: linear-gradient(135deg, #163056 0%, #1e4176 100%);
+  color: white;
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(30, 60, 114, 0.4);
+}
+
+.form-control:focus {
+  border-color: #2a5298;
+  box-shadow: 0 0 0 0.2rem rgba(42, 82, 152, 0.25);
+}
+
+.form-label {
+  font-weight: 600;
+  color: #1e3c72;
+}
+
+.file-upload-area {
+  border: 2px dashed #2a5298;
+  border-radius: 8px;
+  padding: 2rem;
+  text-align: center;
+  background: #f8f9ff;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  position: relative;
+}
+
+.file-upload-area:hover {
+  border-color: #1e3c72;
+  background: #e8f0ff;
+}
+
+/* Preview Image Style */
+#image-preview-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  gap: 10px;
+  margin-top: 15px;
+}
+
+.preview-item {
+  position: relative;
+  width: 100px;
+  height: 100px;
+}
+
+.preview-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 5px;
+  border: 1px solid #ddd;
+}
+
+/* =========================
+   DETAIL KABAR DESA
+========================= */
+.card-government {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  border: none;
+}
+
+.government-container {
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+  min-height: 100vh;
+}
+
+.photo-gallery .img-thumbnail {
+  cursor: pointer;
+  border: 3px solid #1e3c72;
+  position: relative;
+  overflow: hidden;
+}
+
+.photo-gallery .img-thumbnail:hover {
+  border-color: #2a5298;
+  box-shadow: 0 4px 15px rgba(30, 60, 114, 0.2);
+}
+
+.photo-container {
+  position: relative;
+  overflow: hidden;
+  border-radius: 8px;
+}
+
+.info-card {
+  background: white;
+  border-left: none !important;
+}
+
+.info-card:hover {
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+}
+
+.btn-government {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  border: none;
+  color: white;
+}
+
+.btn-government:hover {
+  background: linear-gradient(135deg, #2a5298 0%, #1e3c72 100%);
+  color: white;
+}
+
+.modal-government .modal-header {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  border-bottom: none;
+}
+
+.modal-government .modal-footer {
+  border-top: 1px solid #e9ecef;
+  background-color: var(--bs-primary);
+}
+
+.modal img {
+  transition: none;
+  will-change: auto;
+  backface-visibility: hidden;
+}
+
+.photo-gallery .img-thumbnail::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(30, 60, 114, 0.7);
+  opacity: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.photo-gallery .img-thumbnail:hover::after {
+  opacity: 1;
+}
+
+/* Prevent any unwanted animations */
+* {
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.modal-dialog {
+  will-change: transform;
+}
+
+.date-badge {
+  background: linear-gradient(135deg, #2a5298 0%, #1e3c72 100%);
+  color: white;
+  border-radius: 20px;
+  padding: 8px 16px;
+  font-size: 0.9rem;
+  display: inline-block;
+}
+
+/* =========================
+   EDIT KABAR DESA
+========================= */
+body {
+  background-color: #f4f7fa;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.card-government {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  border: none;
+  box-shadow: 0 8px 25px rgba(30, 60, 114, 0.3);
+}
+
+.text-government-primary {
+  color: #1e3c72 !important;
+}
+
+.bg-government-light {
+  background: linear-gradient(135deg, #f8f9ff 0%, #e8f0ff 100%);
+}
+
+.btn-government {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  border: none;
+  color: white;
+  transition: all 0.3s ease;
+}
+
+.btn-government:hover {
+  background: linear-gradient(135deg, #163056 0%, #1e4176 100%);
+  color: white;
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(30, 60, 114, 0.4);
+}
+
+/* Memaksa kolom tanggal menjadi lebar penuh (100%) */
+.row.mb-4 .col-md-6 {
+  width: 100% !important;
+  flex: 0 0 100% !important;
+  max-width: 100% !important;
+}
+
+/* Memastikan input di dalamnya juga memenuhi lebar */
+#tanggal.form-control {
+  width: 100%;
+  display: block;
+}
+
+/* Kode asli Anda yang tetap dipertahankan */
+.form-control:focus {
+  border-color: #2a5298;
+  box-shadow: 0 0 0 0.2rem rgba(42, 82, 152, 0.25);
+}
+
+.form-label {
+  font-weight: 600;
+  color: #1e3c72;
+}
+
+.current-photos {
+  background: #f8f9ff;
+  border-radius: 8px;
+  padding: 1rem;
+  border: 1px solid #e0e7ff;
+}
+
+.img-thumbnail {
+  border-radius: 8px;
+  object-fit: cover;
+  transition: transform 0.2s;
+}
+
+.img-thumbnail:hover {
+  transform: scale(1.05);
+}

project/public/assets/css/kelola perangkat.css

@@ -0,0 +1,611 @@
+/* Government Theme Colors */
+:root {
+  --government-primary: #1e3c72;
+  --government-secondary: #2a5298;
+  --government-accent: #ffd700;
+  --government-light: #f8f9ff;
+  --government-dark: #163056;
+}
+
+body {
+  background-color: #f4f7f6;
+  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  margin: 0;
+}
+
+.sidebar-government {
+  background: linear-gradient(180deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+  box-shadow: 4px 0 15px rgba(30, 60, 114, 0.2);
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+
+  width: 280px;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  padding: 20px;
+}
+
+/* Overlay pattern untuk tekstur sidebar */
+.sidebar-government::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M0,0 L100,0 L100,100 L0,100 Z" fill="white" opacity="0.05"/></svg>');
+  opacity: 0.1;
+  pointer-events: none;
+}
+
+.sidebar-government .brand-section {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 15px;
+  padding: 20px;
+  margin-bottom: 20px;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  text-align: left;
+}
+
+.sidebar-government .brand-title {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.sidebar-government .brand-subtitle {
+  font-size: 16px;
+  opacity: 0.9;
+}
+
+.sidebar-government .brand-text {
+  color: white;
+  margin-left: 0px;
+  font-weight: 700;
+  font-size: 1.1rem;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* Logo */
+.logo-wrapper {
+  width: 75px;
+  height: 75px;
+  border-radius: 50%;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo-img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.sidebar-government .nav-link {
+  color: rgba(255, 255, 255, 0.9) !important;
+  padding: 12px 16px;
+  margin-bottom: 8px;
+  border-radius: 12px;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  backdrop-filter: blur(5px);
+  border: 1px solid transparent;
+  display: flex;
+  align-items: center;
+}
+
+/* Efek kilau saat hover */
+.sidebar-government .nav-link::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: left 0.5s ease;
+}
+
+.sidebar-government .nav-link:hover::before {
+  left: 100%;
+}
+
+.sidebar-government .nav-link:hover {
+  background: rgba(255, 255, 255, 0.15);
+  color: white !important;
+  transform: translateX(8px);
+  border-color: rgba(255, 215, 0, 0.5);
+  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
+}
+
+.sidebar-government .nav-link.active {
+  background: linear-gradient(135deg, var(--government-accent) 0%, #ffed4e 100%);
+  color: var(--government-primary) !important;
+  font-weight: 600;
+  border-color: var(--government-accent);
+  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
+}
+
+.sidebar-government .nav-link.active i {
+  color: var(--government-primary) !important;
+}
+
+.sidebar-government .nav-link i {
+  width: 20px;
+  margin-right: 12px;
+  text-align: center;
+  font-size: 1.1rem;
+}
+
+.sidebar-government hr {
+  border-color: rgba(255, 255, 255, 0.3);
+  margin: 20px 0;
+}
+
+.btn-government-logout {
+  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
+  border: none;
+  color: white;
+  padding: 12px 20px;
+  border-radius: 12px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  width: 100%;
+  box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
+  cursor: pointer;
+}
+
+.btn-government-logout:hover {
+  background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
+  color: white;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
+}
+
+/* Mobile Navbar Styles */
+.mobile-navbar-government {
+  background: linear-gradient(135deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+  color: white;
+  box-shadow: 0 4px 15px rgba(30, 60, 114, 0.3);
+  border-bottom: 3px solid var(--government-accent);
+}
+
+.mobile-navbar-government .navbar-brand {
+  color: white !important;
+  font-weight: 700;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* Nav section headers */
+.nav-section-header {
+  color: var(--government-accent);
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin: 20px 0 10px 0;
+  padding-left: 16px;
+}
+
+/* User info section */
+.user-info {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 15px;
+  margin-bottom: 20px;
+  text-align: center;
+  backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.user-info .user-name {
+  color: white;
+  font-weight: 600;
+  margin-bottom: 5px;
+}
+
+.user-info .user-role {
+  color: var(--government-accent);
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* Responsive Main Content area adjustment */
+.main-content {
+  transition: margin 0.3s ease;
+  padding: 20px;
+}
+
+@media (min-width: 769px) {
+  .main-content {
+    margin-left: 280px;
+  }
+}
+
+@media (max-width: 768px) {
+  .navbar-collapse {
+    background: linear-gradient(135deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+    margin-top: 10px;
+    border-radius: 15px;
+    padding: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+  }
+}
+
+/* SweetAlert Custom Styles */
+.swal-government-popup {
+  border-radius: 15px !important;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
+  padding: 2rem !important;
+}
+.swal-government-title {
+  color: #1e3c72 !important;
+  font-weight: 600 !important;
+}
+.swal-government-confirm {
+  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
+  color: white !important;
+  border: none !important;
+  border-radius: 8px !important;
+  padding: 10px 24px !important;
+  margin-left: 10px !important;
+  font-weight: 600 !important;
+}
+.swal-government-cancel {
+  background: #6c757d !important;
+  color: white !important;
+  border: none !important;
+  border-radius: 8px !important;
+  padding: 10px 24px !important;
+  font-weight: 600 !important;
+}
+
+/* ============================= */
+/* MOBILE NAVBAR GOVERNMENT FIX */
+/* ============================= */
+
+.mobile-navbar-government {
+  background: linear-gradient(135deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+  color: white;
+  border-bottom: 3px solid var(--government-accent);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
+}
+
+/* Brand */
+.mobile-navbar-government .navbar-brand {
+  color: white !important;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.mobile-navbar-government .navbar-brand i {
+  color: white !important;
+  font-size: 1.4rem;
+}
+
+/* Hamburger button */
+.mobile-navbar-government .navbar-toggler {
+  border: none;
+  background: rgba(255, 255, 255, 0.15);
+  padding: 6px 10px;
+  border-radius: 8px;
+}
+
+.mobile-navbar-government .navbar-toggler:focus {
+  box-shadow: none;
+}
+
+.mobile-navbar-government .navbar-toggler-icon {
+  filter: brightness(0) invert(1); /* bikin icon putih */
+}
+
+/* Collapse area */
+@media (max-width: 768px) {
+  .mobile-navbar-government .navbar-collapse {
+    background: linear-gradient(180deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+    margin-top: 15px;
+    border-radius: 15px;
+    padding: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
+  }
+
+  .mobile-navbar-government .nav-link {
+    color: white !important;
+    font-weight: 500;
+    padding: 12px 14px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .mobile-navbar-government .nav-link i {
+    color: white !important;
+    font-size: 1.1rem;
+  }
+
+  .mobile-navbar-government .nav-link:hover {
+    background: rgba(255, 255, 255, 0.15);
+  }
+
+  .mobile-navbar-government .nav-link.active {
+    background: linear-gradient(135deg, var(--government-accent) 0%, #ffed4e 100%);
+    color: var(--government-primary) !important;
+    font-weight: 600;
+  }
+
+  .mobile-navbar-government .nav-link.active i {
+    color: var(--government-primary) !important;
+  }
+}
+
+/* User Info */
+.mobile-user-info {
+  text-align: center;
+  padding-bottom: 15px;
+  margin-bottom: 15px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.mobile-user-info .user-name {
+  color: var(--government-accent);
+  font-weight: 600;
+}
+
+.mobile-user-info .user-role {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 0.8rem;
+}
+
+/* Logout button mobile */
+.mobile-navbar-government .btn-government-logout {
+  width: 100%;
+  margin-top: 10px;
+}
+
+/* =========================
+   KELOLA PERANGKAT
+========================= */
+:root {
+  --gov-gradient: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+}
+
+body {
+  background-color: #f4f7fe;
+  padding-bottom: 50px;
+}
+
+/* Page Header Style */
+.card-government {
+  background: var(--gov-gradient) !important;
+  border: none;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* Table Card Styling */
+.card {
+  border-radius: 4px;
+  border: none;
+  box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1) !important;
+}
+
+.card-header.bg-gradient-primary {
+  background: var(--gov-gradient) !important;
+  border-radius: 4px 4px 0 0 !important;
+}
+
+/* Table Controls (Search & Show Entries) */
+.data-table-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  font-size: 0.875rem;
+  color: #858796;
+}
+
+/* Custom Table Header */
+.table-government thead th {
+  background-color: #f8f9fc;
+  font-size: 1rem;
+  letter-spacing: 0.05em;
+  font-weight: 600;
+  color: #1e3c72;
+  border-bottom: 2px solid #e3e6f0;
+  padding: 12px 15px;
+}
+
+/* Badge & Avatars */
+.badge {
+  border-radius: 20px; /* Pill style sesuai gambar */
+  padding: 0.5em 1em;
+}
+
+.avatar-circle {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+/* Pagination */
+.pagination .page-link {
+  color: #858796;
+  border: 1px solid #dddfeb;
+  margin: 0 2px;
+  border-radius: 4px !important;
+}
+
+.pagination .page-item.active .page-link {
+  background-color: var(--government-primary);
+  border-color: var(--government-primary);
+  color: white;
+}
+/* =========================
+   TAMBAH PERANGKAT
+========================= */
+body {
+  background-color: #f8f9fc;
+  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+
+.card-government {
+  background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
+  border: none;
+  border-radius: 0.75rem;
+}
+
+.bg-gradient-primary {
+  background: linear-gradient(180deg, #4e73df 10%, #224abe 100%);
+}
+
+.bg-gradient-success {
+  background: linear-gradient(180deg, #2fa87c 0%, #45b08f 100%);
+}
+
+.card {
+  border: none;
+  border-radius: 5px;
+}
+
+.card-header {
+  border-top-left-radius: 5px !important;
+  border-top-right-radius: 5px !important;
+}
+
+.section-title {
+  color: #1e3c72;
+  font-size: 1rem;
+}
+
+.btn-icon-split {
+  padding: 0;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: stretch;
+  justify-content: center;
+}
+
+.btn-icon-split .icon {
+  background: rgba(0, 0, 0, 0.15);
+  padding: 0.375rem 0.75rem;
+}
+
+.btn-icon-split .text {
+  padding: 0.375rem 0.75rem;
+}
+
+.image-preview img {
+  max-width: 100%;
+  height: auto;
+}
+/* =========================
+   EDIT PERANGKAT
+========================= */
+:root {
+  --gov-primary: #003366;
+  --gov-gradient: linear-gradient(135deg, #003366 0%, #00509e 100%);
+  --bs-primary: #4e73df;
+}
+
+body {
+  background-color: #f4f6f9;
+  font-family:
+    "Inter",
+    system-ui,
+    -apple-system,
+    sans-serif;
+  padding-bottom: 50px;
+}
+
+/* Header Style */
+.card-government {
+  background: var(--gov-gradient);
+  border: none;
+  border-radius: 5px;
+  box-shadow: 0 4px 12px rgba(0, 51, 102, 0.2);
+}
+
+/* Card Customization */
+.card {
+  border: none;
+  border-radius: 5px;
+}
+.card-header {
+  border-top-left-radius: 5px !important;
+  border-top-right-radius: 5px !important;
+}
+.bg-gradient-primary {
+  background: linear-gradient(180deg, #4e73df 10%, #224abe 100%);
+}
+.bg-gradient-info {
+  background: linear-gradient(90deg, #258391 0%, #36b9cc 100%);
+}
+
+/* Form Styling */
+.section-title {
+  color: var(--gov-primary);
+  font-size: 0.95rem;
+}
+.form-label {
+  font-weight: 500;
+  color: #444;
+}
+.input-group-text {
+  background-color: #f8f9fc;
+  color: #4e73df;
+}
+
+/* Image Preview Circle */
+.image-preview-container {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  overflow: hidden;
+  background-color: #eaecf4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid #e3e6f0;
+}
+
+/* Button Icon Split */
+.btn-icon-split {
+  padding: 0;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: stretch;
+  transition: all 0.2s;
+}
+.btn-icon-split .icon {
+  background: rgba(0, 0, 0, 0.15);
+  padding: 0.5rem 0.75rem;
+  display: flex;
+  align-items: center;
+}
+.btn-icon-split .text {
+  padding: 0.5rem 1rem;
+  font-weight: 600;
+}
+
+/* Sidebar Info Styling */
+.img-thumbnail {
+  padding: 0.25rem;
+  background-color: #fff;
+  border: 1px solid #dee2e6;
+  border-radius: 50%;
+}

project/public/assets/css/landing page.css

@@ -0,0 +1,448 @@
+/* --- NAVBAR STYLE --- */
+.navbar-government {
+  background: linear-gradient(135deg, rgba(30, 60, 114, 0.95) 0%, rgba(42, 82, 152, 0.95) 100%);
+  backdrop-filter: blur(10px);
+  border-bottom: 3px solid #2a5298;
+  transition: all 0.3s ease;
+}
+
+.navbar-government .navbar-brand {
+  transition: transform 0.3s ease;
+}
+
+.navbar-government .navbar-brand:hover {
+  transform: scale(1.05);
+}
+
+.navbar-government .nav-link {
+  color: white !important;
+  font-weight: 500;
+  position: relative;
+  padding: 0.8rem 1rem !important;
+  transition: all 0.3s ease;
+}
+
+.navbar-government .nav-link:hover {
+  color: #ffd700 !important;
+  transform: translateY(-2px);
+}
+
+.navbar-government .nav-link::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  height: 2px;
+  background: #ffd700;
+  transition: all 0.3s ease;
+  transform: translateX(-50%);
+}
+
+.navbar-government .nav-link:hover::after {
+  width: 80%;
+}
+
+.btn-login {
+  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
+  color: #1e3c72 !important;
+  border: none;
+  font-weight: 600;
+  padding: 0.5rem 1.5rem;
+  border-radius: 25px;
+  transition: all 0.3s ease;
+}
+
+.btn-login:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
+  color: #1e3c72 !important;
+}
+
+.navbar-toggler {
+  border: 2px solid white;
+  padding: 0.5rem;
+}
+
+.navbar-toggler:focus {
+  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
+}
+
+.navbar-toggler-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+
+.logo-container {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+  transition: all 0.3s ease;
+}
+
+.logo-container:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+/* Tambahan agar dropdown menu terlihat rapi */
+.dropdown-menu {
+  border-radius: 10px;
+  margin-top: 10px;
+}
+
+/* =========================
+   LANDING PAGE
+========================= */
+
+.hero-government {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  position: relative;
+  overflow: hidden;
+}
+
+.hero-government::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="white" opacity="0.1"><polygon points="0,0 1000,0 1000,100 0,100"/></svg>');
+  opacity: 0.1;
+}
+
+.card-government {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  border: none;
+  transition: all 0.3s ease;
+}
+
+.card-government:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 30px rgba(30, 60, 114, 0.3);
+}
+
+.feature-card {
+  background: white;
+  border-left: 4px solid #2a5298;
+  transition: all 0.3s ease;
+  border-radius: 10px;
+}
+
+.feature-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  border-left-color: #1e3c72;
+}
+
+.btn-government {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  border: none;
+  color: white;
+  transition: all 0.3s ease;
+  border-radius: 50px;
+  padding: 12px 30px;
+  font-weight: 600;
+}
+
+.btn-government:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(30, 60, 114, 0.3);
+  color: white;
+}
+
+.section-title {
+  color: #1e3c72;
+  font-weight: 700;
+  position: relative;
+  padding-bottom: 15px;
+}
+
+.section-title::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80px;
+  height: 3px;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  border-radius: 2px;
+}
+
+.government-bg {
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+}
+
+/* --- NEWS CARD STYLE --- */
+.news-card {
+  transition: all 0.3s ease;
+  border-radius: 5px;
+  overflow: hidden;
+  background-color: #fff;
+}
+
+.news-image-wrapper {
+  position: relative;
+  height: 220px;
+  overflow: hidden;
+}
+
+.news-image-wrapper img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.5s ease;
+}
+
+.news-card:hover .news-image-wrapper img {
+  transform: scale(1.1);
+}
+
+/* Badge Tanggal di pojok kanan atas gambar */
+.date-badge {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  background-color: #0d6efd;
+  color: white;
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-size: 0.75rem;
+  font-weight: bold;
+}
+
+/* Bagian Konten Kartu Berita */
+.news-content {
+  background: linear-gradient(180deg, #6c86ad 0%, #4a638a 100%);
+  color: white;
+  padding: 1.5rem !important;
+}
+
+.news-meta {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+/* Tombol Baca Selengkapnya */
+.btn-read-more {
+  background-color: white;
+  color: #1e3c72;
+  font-size: 0.85rem;
+  font-weight: 600;
+  padding: 6px 15px;
+  border-radius: 5px;
+  text-decoration: none;
+  transition: all 0.3s ease;
+}
+
+.btn-read-more:hover {
+  background-color: #f8f9fa;
+  transform: translateX(5px);
+}
+
+/* Tombol Utama Lihat Semua */
+.btn-primary-gov {
+  background-color: #2a5298;
+  color: white;
+  border: none;
+  font-weight: 600;
+  border-radius: 5px;
+  transition: background 0.3s;
+}
+
+.btn-primary-gov:hover {
+  background-color: #1e3c72;
+  color: white;
+}
+
+/* Judul Section Underline */
+.underline-title {
+  width: 50px;
+  height: 3px;
+  background-color: #1e3c72;
+  border-radius: 2px;
+}
+.toast-government {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  border: none;
+  min-width: 320px;
+  max-width: 400px;
+}
+
+.map-container {
+  width: 100%;
+  border-radius: 8px;
+  overflow: hidden; /* Memastikan peta mengikuti lengkungan border-radius */
+  border: 2px solid rgba(255, 255, 255, 0.1);
+}
+
+.map-container iframe {
+  display: block;
+}
+
+.notification-mobile {
+  position: fixed;
+  top: 80px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1055;
+  width: 95%;
+  max-width: 500px;
+}
+
+.notification-banner {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  padding: 15px 20px;
+  border-radius: 10px;
+  box-shadow: 0 4px 20px rgba(30, 60, 114, 0.3);
+  margin-bottom: 10px;
+  animation: slideInDown 0.5s ease-out;
+  position: relative;
+  border-left: 5px solid #ffd700;
+}
+
+.notification-banner .close-btn {
+  position: absolute;
+  top: 8px;
+  right: 12px;
+  background: none;
+  border: none;
+  color: white;
+  font-size: 1.2rem;
+  cursor: pointer;
+  opacity: 0.8;
+  transition: opacity 0.3s;
+}
+
+.notification-banner .close-btn:hover {
+  opacity: 1;
+}
+
+.notification-content {
+  padding-right: 30px;
+}
+
+.notification-title {
+  font-weight: 700;
+  font-size: 1rem;
+  margin-bottom: 5px;
+  display: flex;
+  align-items: center;
+}
+
+.notification-date {
+  font-size: 0.75rem;
+  opacity: 0.9;
+  margin-bottom: 8px;
+}
+
+.notification-text {
+  font-size: 0.9rem;
+  line-height: 1.4;
+  margin-bottom: 0;
+}
+
+@keyframes slideInDown {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+@keyframes slideOutUp {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-30px);
+  }
+}
+
+@media (max-width: 768px) {
+  .toast-container {
+    display: none !important;
+  }
+  .notification-mobile {
+    top: 70px;
+    width: 90%;
+  }
+}
+
+@media (min-width: 769px) {
+  .notification-mobile {
+    display: none !important;
+  }
+}
+
+.stats-number {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: #1e3c72;
+}
+
+.icon-government {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 15px;
+}
+
+/* --- FADE IN ANIMATIONS --- */
+.fade-in-section,
+.fade-in-up,
+.fade-in-left,
+.fade-in-right,
+.fade-in-scale {
+  opacity: 0;
+  transition: all 0.8s ease-out;
+}
+.fade-in-section {
+  transform: translateY(50px);
+}
+.fade-in-up {
+  transform: translateY(30px);
+}
+.fade-in-left {
+  transform: translateX(-30px);
+}
+.fade-in-right {
+  transform: translateX(30px);
+}
+.fade-in-scale {
+  transform: scale(0.8);
+}
+
+.is-visible {
+  opacity: 1 !important;
+  transform: translate(0) scale(1) !important;
+}
+
+/* Stagger delays */
+.fade-in-up:nth-child(1) {
+  transition-delay: 0.1s;
+}
+.fade-in-up:nth-child(2) {
+  transition-delay: 0.2s;
+}
+.fade-in-up:nth-child(3) {
+  transition-delay: 0.3s;
+}
+.fade-in-up:nth-child(4) {
+  transition-delay: 0.4s;
+}

project/public/assets/css/laporan.css

@@ -0,0 +1,879 @@
+/* Government Theme Colors */
+:root {
+  --government-primary: #1e3c72;
+  --government-secondary: #2a5298;
+  --government-accent: #ffd700;
+  --government-light: #f8f9ff;
+  --government-dark: #163056;
+}
+
+body {
+  background-color: #f4f7f6;
+  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  margin: 0;
+}
+
+.sidebar-government {
+  background: linear-gradient(180deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+  box-shadow: 4px 0 15px rgba(30, 60, 114, 0.2);
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+
+  width: 280px;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  padding: 20px;
+}
+
+/* Overlay pattern untuk tekstur sidebar */
+.sidebar-government::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M0,0 L100,0 L100,100 L0,100 Z" fill="white" opacity="0.05"/></svg>');
+  opacity: 0.1;
+  pointer-events: none;
+}
+
+.sidebar-government .brand-section {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 15px;
+  padding: 20px;
+  margin-bottom: 20px;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  text-align: left;
+}
+
+.sidebar-government .brand-title {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.sidebar-government .brand-subtitle {
+  font-size: 16px;
+  opacity: 0.9;
+}
+
+.sidebar-government .brand-text {
+  color: white;
+  margin-left: 0px;
+  font-weight: 700;
+  font-size: 1.1rem;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* Logo */
+.logo-wrapper {
+  width: 75px;
+  height: 75px;
+  border-radius: 50%;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo-img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.sidebar-government .nav-link {
+  color: rgba(255, 255, 255, 0.9) !important;
+  padding: 12px 16px;
+  margin-bottom: 8px;
+  border-radius: 12px;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  backdrop-filter: blur(5px);
+  border: 1px solid transparent;
+  display: flex;
+  align-items: center;
+}
+
+/* Efek kilau saat hover */
+.sidebar-government .nav-link::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: left 0.5s ease;
+}
+
+.sidebar-government .nav-link:hover::before {
+  left: 100%;
+}
+
+.sidebar-government .nav-link:hover {
+  background: rgba(255, 255, 255, 0.15);
+  color: white !important;
+  transform: translateX(8px);
+  border-color: rgba(255, 215, 0, 0.5);
+  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
+}
+
+.sidebar-government .nav-link.active {
+  background: linear-gradient(135deg, var(--government-accent) 0%, #ffed4e 100%);
+  color: var(--government-primary) !important;
+  font-weight: 600;
+  border-color: var(--government-accent);
+  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
+}
+
+.sidebar-government .nav-link.active i {
+  color: var(--government-primary) !important;
+}
+
+.sidebar-government .nav-link i {
+  width: 20px;
+  margin-right: 12px;
+  text-align: center;
+  font-size: 1.1rem;
+}
+
+.sidebar-government hr {
+  border-color: rgba(255, 255, 255, 0.3);
+  margin: 20px 0;
+}
+
+.btn-government-logout {
+  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
+  border: none;
+  color: white;
+  padding: 12px 20px;
+  border-radius: 12px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  width: 100%;
+  box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
+  cursor: pointer;
+}
+
+.btn-government-logout:hover {
+  background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
+  color: white;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
+}
+
+/* Mobile Navbar Styles */
+.mobile-navbar-government {
+  background: linear-gradient(135deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+  color: white;
+  box-shadow: 0 4px 15px rgba(30, 60, 114, 0.3);
+  border-bottom: 3px solid var(--government-accent);
+}
+
+.mobile-navbar-government .navbar-brand {
+  color: white !important;
+  font-weight: 700;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* Nav section headers */
+.nav-section-header {
+  color: var(--government-accent);
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin: 20px 0 10px 0;
+  padding-left: 16px;
+}
+
+/* User info section */
+.user-info {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 15px;
+  margin-bottom: 20px;
+  text-align: center;
+  backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.user-info .user-name {
+  color: white;
+  font-weight: 600;
+  margin-bottom: 5px;
+}
+
+.user-info .user-role {
+  color: var(--government-accent);
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* Responsive Main Content area adjustment */
+.main-content {
+  transition: margin 0.3s ease;
+  padding: 20px;
+}
+
+@media (min-width: 769px) {
+  .main-content {
+    margin-left: 280px;
+  }
+}
+
+@media (max-width: 768px) {
+  .navbar-collapse {
+    background: linear-gradient(135deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+    margin-top: 10px;
+    border-radius: 15px;
+    padding: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+  }
+}
+
+/* SweetAlert Custom Styles */
+.swal-government-popup {
+  border-radius: 15px !important;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
+  padding: 2rem !important;
+}
+.swal-government-title {
+  color: #1e3c72 !important;
+  font-weight: 600 !important;
+}
+.swal-government-confirm {
+  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
+  color: white !important;
+  border: none !important;
+  border-radius: 8px !important;
+  padding: 10px 24px !important;
+  margin-left: 10px !important;
+  font-weight: 600 !important;
+}
+.swal-government-cancel {
+  background: #6c757d !important;
+  color: white !important;
+  border: none !important;
+  border-radius: 8px !important;
+  padding: 10px 24px !important;
+  font-weight: 600 !important;
+}
+
+/* ============================= */
+/* MOBILE NAVBAR GOVERNMENT FIX */
+/* ============================= */
+
+.mobile-navbar-government {
+  background: linear-gradient(135deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+  color: white;
+  border-bottom: 3px solid var(--government-accent);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
+}
+
+/* Brand */
+.mobile-navbar-government .navbar-brand {
+  color: white !important;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.mobile-navbar-government .navbar-brand i {
+  color: white !important;
+  font-size: 1.4rem;
+}
+
+/* Hamburger button */
+.mobile-navbar-government .navbar-toggler {
+  border: none;
+  background: rgba(255, 255, 255, 0.15);
+  padding: 6px 10px;
+  border-radius: 8px;
+}
+
+.mobile-navbar-government .navbar-toggler:focus {
+  box-shadow: none;
+}
+
+.mobile-navbar-government .navbar-toggler-icon {
+  filter: brightness(0) invert(1); /* bikin icon putih */
+}
+
+/* Collapse area */
+@media (max-width: 768px) {
+  .mobile-navbar-government .navbar-collapse {
+    background: linear-gradient(180deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+    margin-top: 15px;
+    border-radius: 15px;
+    padding: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
+  }
+
+  .mobile-navbar-government .nav-link {
+    color: white !important;
+    font-weight: 500;
+    padding: 12px 14px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .mobile-navbar-government .nav-link i {
+    color: white !important;
+    font-size: 1.1rem;
+  }
+
+  .mobile-navbar-government .nav-link:hover {
+    background: rgba(255, 255, 255, 0.15);
+  }
+
+  .mobile-navbar-government .nav-link.active {
+    background: linear-gradient(135deg, var(--government-accent) 0%, #ffed4e 100%);
+    color: var(--government-primary) !important;
+    font-weight: 600;
+  }
+
+  .mobile-navbar-government .nav-link.active i {
+    color: var(--government-primary) !important;
+  }
+}
+
+/* User Info */
+.mobile-user-info {
+  text-align: center;
+  padding-bottom: 15px;
+  margin-bottom: 15px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.mobile-user-info .user-name {
+  color: var(--government-accent);
+  font-weight: 600;
+}
+
+.mobile-user-info .user-role {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 0.8rem;
+}
+
+/* Logout button mobile */
+.mobile-navbar-government .btn-government-logout {
+  width: 100%;
+  margin-top: 10px;
+}
+
+/* =========================
+   LAPORAN
+========================= */
+body {
+  background-color: #f4f7fa;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.card-government {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  border: none;
+  border-radius: 15px;
+  box-shadow: 0 8px 25px rgba(30, 60, 114, 0.3);
+  backdrop-filter: blur(10px);
+}
+
+.text-government-primary {
+  color: #1e3c72 !important;
+}
+
+.bg-government-light {
+  background: linear-gradient(135deg, #f8f9ff 0%, #e8f0ff 100%);
+  border-radius: 12px;
+}
+
+.btn-government {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  border: none;
+  color: white;
+  border-radius: 8px;
+  padding: 10px 20px;
+  font-weight: 500;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.btn-government:hover {
+  background: linear-gradient(135deg, #163056 0%, #1e4176 100%);
+  color: white;
+  transform: translateY(-2px) scale(1.02);
+  box-shadow: 0 5px 15px rgba(30, 60, 114, 0.4);
+}
+
+.table-modern {
+  border: none;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  background: white;
+}
+
+.table-modern thead th {
+  background: linear-gradient(135deg, #f8f9ff 0%, #e8f0ff 100%);
+  color: #4a5568;
+  border: none;
+  font-weight: 600;
+  padding: 18px 15px;
+  font-size: 0.9rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.table-modern tbody td {
+  padding: 18px 15px;
+  border: none;
+  border-bottom: 1px solid #f7fafc;
+  vertical-align: middle;
+}
+
+.table-modern tbody tr {
+  transition: all 0.2s ease;
+}
+
+.table-modern tbody tr:hover {
+  background: linear-gradient(135deg, #f8faff 0%, #e8f2ff 100%);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.stats-card {
+  border-radius: 15px;
+  border: none;
+  padding: 25px;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  backdrop-filter: blur(10px);
+}
+
+.stats-card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+  pointer-events: none;
+}
+
+.stats-card:hover {
+  transform: translateY(-5px) scale(1.02);
+  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
+}
+
+.stats-card .card-body {
+  position: relative;
+  z-index: 1;
+}
+
+.stats-card h5 {
+  font-size: 2.2rem;
+  font-weight: 700;
+  margin-bottom: 8px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.stats-card p {
+  font-size: 0.9rem;
+  font-weight: 500;
+  margin-bottom: 0;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.filter-card {
+  background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
+  border-radius: 15px;
+  border: 1px solid rgba(30, 60, 114, 0.1);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+}
+
+.form-control,
+.form-select {
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+  padding: 12px 15px;
+  transition: all 0.2s ease;
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.form-control:focus,
+.form-select:focus {
+  border-color: #1e3c72;
+  box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.1);
+  background: white;
+}
+
+.btn-filter {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  border: none;
+  color: white;
+  border-radius: 8px;
+  padding: 12px;
+  transition: all 0.2s ease;
+}
+
+.btn-filter:hover {
+  background: linear-gradient(135deg, #163056 0%, #1e4176 100%);
+  transform: scale(1.05);
+}
+
+.badge {
+  padding: 8px 12px;
+  border-radius: 20px;
+  font-weight: 500;
+  font-size: 0.8rem;
+  text-transform: capitalize;
+}
+
+.page-header {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  border-radius: 15px;
+  padding: 30px;
+  margin-bottom: 30px;
+  color: white;
+  position: relative;
+  overflow: hidden;
+}
+
+.page-header::before {
+  content: "";
+  position: absolute;
+  top: -50%;
+  right: -20%;
+  width: 200px;
+  height: 200px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+  z-index: 0;
+}
+
+.page-header .content {
+  position: relative;
+  z-index: 1;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-in-up {
+  animation: fadeInUp 0.6s ease-out;
+}
+
+.container-fluid {
+  padding: 20px;
+}
+
+/* DataTables Custom Styling */
+.dataTables_wrapper {
+  padding: 0;
+}
+
+.dataTables_length,
+.dataTables_filter,
+.dataTables_info,
+.dataTables_paginate {
+  margin-bottom: 15px;
+}
+
+.dataTables_length select,
+.dataTables_filter input {
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+  padding: 8px 12px;
+  margin: 0 5px;
+}
+
+.dataTables_filter input {
+  background: rgba(255, 255, 255, 0.9);
+  width: 300px;
+}
+
+.dataTables_filter input:focus {
+  border-color: #1e3c72;
+  box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.1);
+  outline: none;
+}
+
+.page-link {
+  border-radius: 6px;
+  margin: 0 2px;
+  border: 1px solid #e2e8f0;
+  color: #1e3c72;
+  padding: 8px 12px;
+}
+
+.page-link:hover {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  border-color: #1e3c72;
+}
+
+.page-item.active .page-link {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
+  border-color: #1e3c72 !important;
+  color: white !important;
+}
+
+.dataTables_info {
+  color: #6c757d;
+  font-size: 0.9rem;
+}
+
+.table-responsive {
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.dt-buttons {
+  margin-bottom: 15px;
+}
+
+.dt-button {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
+  border: none !important;
+  color: white !important;
+  border-radius: 6px !important;
+  padding: 8px 16px !important;
+  margin: 0 2px !important;
+  font-size: 0.875rem !important;
+}
+
+.dt-button:hover {
+  background: linear-gradient(135deg, #163056 0%, #1e4176 100%) !important;
+}
+
+.icon-box {
+  width: 60px;
+  height: 60px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 24px;
+  margin-bottom: 1rem;
+}
+
+/* Penyesuaian Tombol Export */
+.dt-buttons {
+  display: inline-flex;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+/* semua tombol */
+.dt-buttons .btn {
+  border-radius: 0;
+  border: none;
+  padding: 8px 16px;
+  background: #2f4b85;
+  color: #fff;
+  font-weight: 500;
+}
+
+/* separator effect */
+.dt-buttons .btn + .btn {
+  border-left: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/* hover */
+.dt-buttons .btn:hover {
+  background: #243b6a;
+}
+.btn-excel {
+  background-color: #1a4b8c;
+  color: white;
+  border: none;
+}
+.btn-pdf {
+  background-color: #1a4b8c;
+  color: white;
+  border: none;
+}
+.btn-print {
+  background-color: #1a4b8c;
+  color: white;
+  border: none;
+}
+.btn-excel:hover,
+.btn-pdf:hover,
+.btn-print:hover {
+  background-color: #153a6d;
+  color: white;
+}
+
+/* Penyesuaian Tabel */
+.table-modern thead th {
+  background-color: #f8faff;
+  color: #495057;
+  text-transform: uppercase;
+  font-size: 12px;
+  letter-spacing: 0.5px;
+  padding: 15px 10px;
+  border-bottom: 2px solid #ebf1ff;
+}
+
+/* Badge Status Sesuai Gambar */
+.badge-status {
+  border-radius: 50px;
+  padding: 7px 15px;
+  font-weight: 500;
+  font-size: 12px;
+}
+.bg-selesai {
+  background-color: #198754;
+  color: white;
+}
+.bg-tertunda {
+  background-color: #ffc107;
+  color: white;
+}
+.bg-diproses {
+  background-color: #0dcaf0;
+  color: white;
+}
+.bg-ditolak {
+  background-color: #dc3545;
+  color: white;
+}
+
+/* Tombol Aksi */
+.btn-lihat {
+  background-color: #2b4c8c;
+  color: white;
+  border-radius: 6px;
+}
+.btn-pengingat {
+  background-color: #ffc107;
+  color: #333;
+  border-radius: 6px;
+  border: none;
+}
+
+/* container */
+.dataTables_length {
+  display: flex;
+  align-items: center;
+}
+
+/* PENTING: flex pada label */
+.dataTables_length label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 0; /* hilangkan turun */
+  font-weight: 500;
+}
+
+/* dropdown */
+.dataTables_length select {
+  border-radius: 10px;
+  padding: 6px 28px 6px 10px;
+  border: 1px solid #dce1ea;
+  background-color: #f4f6fa;
+  height: 38px; /* samakan tinggi */
+}
+
+/* Hilangkan arrow dropdown bawaan */
+.dataTables_length select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  background-image: none; /* extra safety */
+  padding-right: 10px; /* rapikan spacing */
+}
+
+/* kanan atas (search) */
+.dataTables_filter {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.dataTables_filter label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 500;
+}
+
+/* input search */
+.dataTables_filter input {
+  border-radius: 12px;
+  border: 1px solid #dce1ea;
+  background: #fbfbfc;
+  padding: 8px 8px;
+  width: 260px;
+  transition: 0.2s;
+}
+
+.dataTables_filter input:focus {
+  outline: none;
+  background: #fff;
+  border-color: #2c4e8a;
+  box-shadow: 0 0 0 0.1rem rgba(44, 78, 138, 0.2);
+}
+
+/* ======================
+   BOTTOM AREA
+====================== */
+
+/* info kiri bawah */
+.dataTables_info {
+  font-size: 0.95rem;
+  color: #6c757d;
+}
+
+/* pagination kanan bawah */
+.dataTables_paginate {
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* active page */
+.dataTables_paginate .paginate_button.current {
+  background: #2c4e8a !important;
+  color: #fff !important;
+  border-color: #2c4e8a !important;
+}
+
+/* hover */
+.dataTables_paginate .paginate_button:hover {
+  background: #e9eef7 !important;
+  color: #2c4e8a !important;
+}
+
+/* disable button */
+.dataTables_paginate .paginate_button.disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}

project/public/assets/css/log aktivitas.css

@@ -0,0 +1,605 @@
+/* Government Theme Colors */
+:root {
+  --government-primary: #1e3c72;
+  --government-secondary: #2a5298;
+  --government-accent: #ffd700;
+  --government-light: #f8f9ff;
+  --government-dark: #163056;
+}
+
+body {
+  background-color: #f4f7f6;
+  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  margin: 0;
+}
+
+.sidebar-government {
+  background: linear-gradient(180deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+  box-shadow: 4px 0 15px rgba(30, 60, 114, 0.2);
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+
+  width: 280px;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  padding: 20px;
+}
+
+/* Overlay pattern untuk tekstur sidebar */
+.sidebar-government::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M0,0 L100,0 L100,100 L0,100 Z" fill="white" opacity="0.05"/></svg>');
+  opacity: 0.1;
+  pointer-events: none;
+}
+
+.sidebar-government .brand-section {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 15px;
+  padding: 20px;
+  margin-bottom: 20px;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  text-align: left;
+}
+
+.sidebar-government .brand-title {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.sidebar-government .brand-subtitle {
+  font-size: 16px;
+  opacity: 0.9;
+}
+
+.sidebar-government .brand-text {
+  color: white;
+  margin-left: 0px;
+  font-weight: 700;
+  font-size: 1.1rem;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* Logo */
+.logo-wrapper {
+  width: 75px;
+  height: 75px;
+  border-radius: 50%;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo-img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.sidebar-government .nav-link {
+  color: rgba(255, 255, 255, 0.9) !important;
+  padding: 12px 16px;
+  margin-bottom: 8px;
+  border-radius: 12px;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  backdrop-filter: blur(5px);
+  border: 1px solid transparent;
+  display: flex;
+  align-items: center;
+}
+
+/* Efek kilau saat hover */
+.sidebar-government .nav-link::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: left 0.5s ease;
+}
+
+.sidebar-government .nav-link:hover::before {
+  left: 100%;
+}
+
+.sidebar-government .nav-link:hover {
+  background: rgba(255, 255, 255, 0.15);
+  color: white !important;
+  transform: translateX(8px);
+  border-color: rgba(255, 215, 0, 0.5);
+  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
+}
+
+.sidebar-government .nav-link.active {
+  background: linear-gradient(135deg, var(--government-accent) 0%, #ffed4e 100%);
+  color: var(--government-primary) !important;
+  font-weight: 600;
+  border-color: var(--government-accent);
+  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
+}
+
+.sidebar-government .nav-link.active i {
+  color: var(--government-primary) !important;
+}
+
+.sidebar-government .nav-link i {
+  width: 20px;
+  margin-right: 12px;
+  text-align: center;
+  font-size: 1.1rem;
+}
+
+.sidebar-government hr {
+  border-color: rgba(255, 255, 255, 0.3);
+  margin: 20px 0;
+}
+
+.btn-government-logout {
+  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
+  border: none;
+  color: white;
+  padding: 12px 20px;
+  border-radius: 12px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  width: 100%;
+  box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
+  cursor: pointer;
+}
+
+.btn-government-logout:hover {
+  background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
+  color: white;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
+}
+
+/* Mobile Navbar Styles */
+.mobile-navbar-government {
+  background: linear-gradient(135deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+  color: white;
+  box-shadow: 0 4px 15px rgba(30, 60, 114, 0.3);
+  border-bottom: 3px solid var(--government-accent);
+}
+
+.mobile-navbar-government .navbar-brand {
+  color: white !important;
+  font-weight: 700;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* Nav section headers */
+.nav-section-header {
+  color: var(--government-accent);
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin: 20px 0 10px 0;
+  padding-left: 16px;
+}
+
+/* User info section */
+.user-info {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 15px;
+  margin-bottom: 20px;
+  text-align: center;
+  backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.user-info .user-name {
+  color: white;
+  font-weight: 600;
+  margin-bottom: 5px;
+}
+
+.user-info .user-role {
+  color: var(--government-accent);
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* Responsive Main Content area adjustment */
+.main-content {
+  transition: margin 0.3s ease;
+  padding: 20px;
+}
+
+@media (min-width: 769px) {
+  .main-content {
+    margin-left: 280px;
+  }
+}
+
+@media (max-width: 768px) {
+  .navbar-collapse {
+    background: linear-gradient(135deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+    margin-top: 10px;
+    border-radius: 15px;
+    padding: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+  }
+}
+
+/* SweetAlert Custom Styles */
+.swal-government-popup {
+  border-radius: 15px !important;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
+  padding: 2rem !important;
+}
+.swal-government-title {
+  color: #1e3c72 !important;
+  font-weight: 600 !important;
+}
+.swal-government-confirm {
+  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
+  color: white !important;
+  border: none !important;
+  border-radius: 8px !important;
+  padding: 10px 24px !important;
+  margin-left: 10px !important;
+  font-weight: 600 !important;
+}
+.swal-government-cancel {
+  background: #6c757d !important;
+  color: white !important;
+  border: none !important;
+  border-radius: 8px !important;
+  padding: 10px 24px !important;
+  font-weight: 600 !important;
+}
+
+/* ============================= */
+/* MOBILE NAVBAR GOVERNMENT FIX */
+/* ============================= */
+
+.mobile-navbar-government {
+  background: linear-gradient(135deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+  color: white;
+  border-bottom: 3px solid var(--government-accent);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
+}
+
+/* Brand */
+.mobile-navbar-government .navbar-brand {
+  color: white !important;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.mobile-navbar-government .navbar-brand i {
+  color: white !important;
+  font-size: 1.4rem;
+}
+
+/* Hamburger button */
+.mobile-navbar-government .navbar-toggler {
+  border: none;
+  background: rgba(255, 255, 255, 0.15);
+  padding: 6px 10px;
+  border-radius: 8px;
+}
+
+.mobile-navbar-government .navbar-toggler:focus {
+  box-shadow: none;
+}
+
+.mobile-navbar-government .navbar-toggler-icon {
+  filter: brightness(0) invert(1); /* bikin icon putih */
+}
+
+/* Collapse area */
+@media (max-width: 768px) {
+  .mobile-navbar-government .navbar-collapse {
+    background: linear-gradient(180deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+    margin-top: 15px;
+    border-radius: 15px;
+    padding: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
+  }
+
+  .mobile-navbar-government .nav-link {
+    color: white !important;
+    font-weight: 500;
+    padding: 12px 14px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .mobile-navbar-government .nav-link i {
+    color: white !important;
+    font-size: 1.1rem;
+  }
+
+  .mobile-navbar-government .nav-link:hover {
+    background: rgba(255, 255, 255, 0.15);
+  }
+
+  .mobile-navbar-government .nav-link.active {
+    background: linear-gradient(135deg, var(--government-accent) 0%, #ffed4e 100%);
+    color: var(--government-primary) !important;
+    font-weight: 600;
+  }
+
+  .mobile-navbar-government .nav-link.active i {
+    color: var(--government-primary) !important;
+  }
+}
+
+/* User Info */
+.mobile-user-info {
+  text-align: center;
+  padding-bottom: 15px;
+  margin-bottom: 15px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.mobile-user-info .user-name {
+  color: var(--government-accent);
+  font-weight: 600;
+}
+
+.mobile-user-info .user-role {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 0.8rem;
+}
+
+/* Logout button mobile */
+.mobile-navbar-government .btn-government-logout {
+  width: 100%;
+  margin-top: 10px;
+}
+
+/* =========================
+   LOG AKTIVITAS
+========================= */
+:root {
+  --gov-primary: #003366;
+  --gov-accent: #004080;
+  --gov-gradient: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+}
+
+body {
+  background-color: #f4f7f6;
+  padding: 20px;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* Mengurangi kebulatan card agar tidak terlalu 'round' */
+.card-government,
+.card.shadow {
+  border-radius: 5px !important; /* Nilai kecil membuat sudut lebih tegas */
+  border: none;
+}
+
+/* Card Header Government Style */
+.card-government {
+  background: var(--gov-gradient);
+  border: none;
+  border-radius: 10px;
+  box-shadow: 0 4px 15px rgba(0, 51, 102, 0.2);
+}
+
+.text-white-50 {
+  color: rgba(255, 255, 255, 0.7) !important;
+}
+
+/* Main Content Card */
+.card.shadow {
+  border: none;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.bg-gradient-primary {
+  background: var(--gov-gradient);
+  border: none;
+}
+
+/* Table Styling */
+.table-responsive {
+  background: white;
+  border-radius: 8px;
+}
+
+.table thead th {
+  background-color: #f8f9fa;
+  color: #000000;
+  font-weight: 700;
+  border-bottom: 2px solid #dee2e6;
+  font-size: 1rem;
+}
+
+.table-hover tbody tr:hover {
+  background-color: #f1f4f9;
+  transition: 0.2s;
+}
+
+.text-capitalize {
+  font-weight: 600;
+  color: var(--gov-primary);
+}
+
+.btn-lihat {
+  background-color: #00d2f3;
+  border: none;
+  color: rgb(0, 0, 0);
+  padding: 4px 10px;
+  font-size: 1rem;
+  border-radius: 4px;
+}
+
+.btn-lihat:hover {
+  background-color: #00b8d4;
+  color: white;
+}
+
+/* Button Styling */
+.btn-info {
+  background-color: #17a2b8;
+  border: none;
+  color: white;
+  padding: 5px 15px;
+  border-radius: 6px;
+}
+
+.btn-info:hover {
+  background-color: #138496;
+  color: white;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+/* DataTables Customization */
+.dataTables_wrapper .dataTables_paginate .paginate_button.current {
+  background: var(--gov-primary) !important;
+  color: white !important;
+  border: none;
+}
+
+/* Meratakan Show Entries dan Search */
+.dataTables_wrapper .row {
+  display: flex;
+  align-items: center;
+}
+
+.dataTables_length label,
+.dataTables_filter label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 1rem;
+  color: #1b1b1b;
+}
+
+.dataTables_filter input {
+  margin-left: 0.5rem !important;
+  border: 1px solid #d1d3e2;
+  border-radius: 4px;
+  padding: 4px 8px;
+}
+
+.dataTables_length select {
+  border: 1px solid #d1d3e2;
+  border-radius: 4px;
+  padding: 2px 8px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-image: none !important;
+  background-color: #fff;
+  text-align: center;
+  cursor: pointer;
+  min-width: 45px;
+}
+
+table.dataTable thead th {
+  padding-right: 12px !important;
+}
+
+/* =========================
+   DETAIL LOG AKTIVITAS (FIXED)
+========================= */
+
+body {
+  background-color: #f8f9fc;
+}
+
+/* Page Header Banner */
+.card-government {
+  background: var(--gov-gradient) !important;
+  border: none;
+  border-radius: 5px !important; /* Lengkungan kecil sesuai gambar */
+  padding: 20px !important;
+}
+
+/* Detail Card Style */
+.card-main {
+  border: none;
+  border-radius: 5px !important;
+  overflow: hidden;
+  box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1) !important;
+}
+
+.card-header-gov {
+  background: var(--gov-gradient) !important;
+  color: white;
+  padding: 12px 20px;
+  border: none;
+}
+
+.detail-label {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #69696a;
+  margin-bottom: 2px;
+}
+
+.detail-value {
+  font-size: 1rem;
+  color: var(--text-dark);
+  margin-bottom: 20px; /* Jarak antar informasi */
+}
+
+.raw-data-section {
+  font-size: 1rem;
+  color: var(--text-dark);
+  line-height: 1.5;
+
+  display: flex;
+  flex-direction: column; /* email pindah ke bawah */
+  gap: 6px; /* jarak antar baris */
+}
+.raw-data-item {
+  font-weight: 700;
+}
+
+.raw-data-item .value {
+  font-weight: 400;
+  color: #69696a;
+}
+
+.btn-kembali {
+  background: white;
+  color: #333;
+  border: none;
+  border-radius: 5px;
+  padding: 8px 16px;
+  font-weight: 500;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 1rem;
+  transition: all 0.2s;
+}
+
+.btn-kembali:hover {
+  background: #f8f9fa;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}

project/public/assets/css/login.css

@@ -0,0 +1,136 @@
+/* Animasi muncul */
+@keyframes fadeSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(40px); /* mulai agak ke bawah */
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0); /* kembali ke posisi normal */
+  }
+}
+
+/* Terapkan ke card login */
+.login-card {
+  background: #fff;
+  padding: 35px;
+  border-radius: 14px;
+  width: 100%;
+  max-width: 580px;
+  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.25);
+  text-align: center;
+
+  /* efek animasi */
+  animation: fadeSlideIn 0.8s ease-out;
+}
+
+/* Background dengan gambar */
+body {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  background: url("../img/hero.jpg") no-repeat center center fixed;
+  background-size: cover;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* Overlay transparan di atas gambar */
+body::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 1;
+}
+
+/* Logo di login card */
+.login-logo {
+  width: 180px; /* lebih proporsional */
+  height: auto;
+  margin-bottom: 20px;
+}
+
+/* Divider setelah logo */
+.login-divider {
+  width: 80%;
+  margin: 15px auto 25px auto;
+  border: none;
+  border-top: 2px solid #007bff;
+  opacity: 0.7;
+}
+
+/* Container login */
+.login-container {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  padding: 15px;
+}
+
+/* Kotak login */
+.login-card {
+  background: #fff;
+  padding: 35px 30px;
+  border-radius: 14px;
+  width: 100%;
+  max-width: 420px;
+  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.25);
+  text-align: center;
+}
+
+/* Judul */
+.login-card h2 {
+  font-size: 22px;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+.login-card p {
+  font-size: 14px;
+  color: #555;
+  margin-bottom: 25px;
+}
+
+/* Input custom */
+.custom-input {
+  border-radius: 8px;
+  padding: 12px;
+  font-size: 15px;
+  margin-bottom: 18px;
+}
+
+/* Toggle password icon */
+.toggle-password {
+  position: absolute;
+  top: 50%;
+  right: 15px;
+  transform: translateY(-120%);
+  cursor: pointer;
+  color: #6c757d;
+  font-size: 18px;
+}
+.toggle-password:hover {
+  color: #0d6efd;
+}
+
+/* Tombol utama */
+.btn-primary {
+  width: 100%;
+  padding: 12px;
+  font-size: 15px;
+  font-weight: 600;
+  border-radius: 8px;
+  margin-top: 10px;
+}
+
+/* Link kecil */
+.login-card a {
+  font-size: 13px;
+}

project/public/assets/css/pembuatan_surat.css

@@ -0,0 +1,699 @@
+/* Government Theme Colors */
+:root {
+  --government-primary: #1e3c72;
+  --government-secondary: #2a5298;
+  --government-accent: #ffd700;
+  --government-light: #f8f9ff;
+  --government-dark: #163056;
+}
+
+.bg-gradient-primary {
+  /* Menggunakan variabel --government-primary dan --government-secondary */
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
+}
+
+body {
+  background-color: #f4f7f6;
+  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  margin: 0;
+}
+
+.sidebar-government {
+  background: linear-gradient(180deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+  box-shadow: 4px 0 15px rgba(30, 60, 114, 0.2);
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+
+  width: 280px;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  padding: 20px;
+}
+
+/* Overlay pattern untuk tekstur sidebar */
+.sidebar-government::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M0,0 L100,0 L100,100 L0,100 Z" fill="white" opacity="0.05"/></svg>');
+  opacity: 0.1;
+  pointer-events: none;
+}
+
+.sidebar-government .brand-section {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 15px;
+  padding: 20px;
+  margin-bottom: 20px;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  text-align: left;
+}
+
+.sidebar-government .brand-title {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.sidebar-government .brand-subtitle {
+  font-size: 16px;
+  opacity: 0.9;
+}
+
+.sidebar-government .brand-text {
+  color: white;
+  margin-left: 0px;
+  font-weight: 700;
+  font-size: 1.1rem;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* Logo */
+.logo-wrapper {
+  width: 75px;
+  height: 75px;
+  border-radius: 50%;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo-img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.sidebar-government .nav-link {
+  color: rgba(255, 255, 255, 0.9) !important;
+  padding: 12px 16px;
+  margin-bottom: 8px;
+  border-radius: 12px;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  backdrop-filter: blur(5px);
+  border: 1px solid transparent;
+  display: flex;
+  align-items: center;
+}
+
+/* Efek kilau saat hover */
+.sidebar-government .nav-link::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: left 0.5s ease;
+}
+
+.sidebar-government .nav-link:hover::before {
+  left: 100%;
+}
+
+.sidebar-government .nav-link:hover {
+  background: rgba(255, 255, 255, 0.15);
+  color: white !important;
+  transform: translateX(8px);
+  border-color: rgba(255, 215, 0, 0.5);
+  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
+}
+
+.sidebar-government .nav-link.active {
+  background: linear-gradient(135deg, var(--government-accent) 0%, #ffed4e 100%);
+  color: var(--government-primary) !important;
+  font-weight: 600;
+  border-color: var(--government-accent);
+  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
+}
+
+.sidebar-government .nav-link.active i {
+  color: var(--government-primary) !important;
+}
+
+.sidebar-government .nav-link i {
+  width: 20px;
+  margin-right: 12px;
+  text-align: center;
+  font-size: 1.1rem;
+}
+
+.sidebar-government hr {
+  border-color: rgba(255, 255, 255, 0.3);
+  margin: 20px 0;
+}
+
+.btn-government-logout {
+  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
+  border: none;
+  color: white;
+  padding: 12px 20px;
+  border-radius: 12px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  width: 100%;
+  box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
+  cursor: pointer;
+}
+
+.btn-government-logout:hover {
+  background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
+  color: white;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
+}
+
+/* Mobile Navbar Styles */
+.mobile-navbar-government {
+  background: linear-gradient(135deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+  color: white;
+  box-shadow: 0 4px 15px rgba(30, 60, 114, 0.3);
+  border-bottom: 3px solid var(--government-accent);
+}
+
+.mobile-navbar-government .navbar-brand {
+  color: white !important;
+  font-weight: 700;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* Nav section headers */
+.nav-section-header {
+  color: var(--government-accent);
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin: 20px 0 10px 0;
+  padding-left: 16px;
+}
+
+/* User info section */
+.user-info {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 15px;
+  margin-bottom: 20px;
+  text-align: center;
+  backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.user-info .user-name {
+  color: white;
+  font-weight: 600;
+  margin-bottom: 5px;
+}
+
+.user-info .user-role {
+  color: var(--government-accent);
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* Responsive Main Content area adjustment */
+.main-content {
+  transition: margin 0.3s ease;
+  padding: 20px;
+}
+
+@media (min-width: 769px) {
+  .main-content {
+    margin-left: 280px;
+  }
+}
+
+@media (max-width: 768px) {
+  .navbar-collapse {
+    background: linear-gradient(135deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+    margin-top: 10px;
+    border-radius: 15px;
+    padding: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+  }
+}
+
+/* SweetAlert Custom Styles */
+.swal-government-popup {
+  border-radius: 15px !important;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
+  padding: 2rem !important;
+}
+.swal-government-title {
+  color: #1e3c72 !important;
+  font-weight: 600 !important;
+}
+.swal-government-confirm {
+  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
+  color: white !important;
+  border: none !important;
+  border-radius: 8px !important;
+  padding: 10px 24px !important;
+  margin-left: 10px !important;
+  font-weight: 600 !important;
+}
+.swal-government-cancel {
+  background: #6c757d !important;
+  color: white !important;
+  border: none !important;
+  border-radius: 8px !important;
+  padding: 10px 24px !important;
+  font-weight: 600 !important;
+}
+
+/* ============================= */
+/* MOBILE NAVBAR GOVERNMENT FIX */
+/* ============================= */
+
+.mobile-navbar-government {
+  background: linear-gradient(135deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+  color: white;
+  border-bottom: 3px solid var(--government-accent);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
+}
+
+/* Brand */
+.mobile-navbar-government .navbar-brand {
+  color: white !important;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.mobile-navbar-government .navbar-brand i {
+  color: white !important;
+  font-size: 1.4rem;
+}
+
+/* Hamburger button */
+.mobile-navbar-government .navbar-toggler {
+  border: none;
+  background: rgba(255, 255, 255, 0.15);
+  padding: 6px 10px;
+  border-radius: 8px;
+}
+
+.mobile-navbar-government .navbar-toggler:focus {
+  box-shadow: none;
+}
+
+.mobile-navbar-government .navbar-toggler-icon {
+  filter: brightness(0) invert(1); /* bikin icon putih */
+}
+
+/* Collapse area */
+@media (max-width: 768px) {
+  .mobile-navbar-government .navbar-collapse {
+    background: linear-gradient(180deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+    margin-top: 15px;
+    border-radius: 15px;
+    padding: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
+  }
+
+  .mobile-navbar-government .nav-link {
+    color: white !important;
+    font-weight: 500;
+    padding: 12px 14px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .mobile-navbar-government .nav-link i {
+    color: white !important;
+    font-size: 1.1rem;
+  }
+
+  .mobile-navbar-government .nav-link:hover {
+    background: rgba(255, 255, 255, 0.15);
+  }
+
+  .mobile-navbar-government .nav-link.active {
+    background: linear-gradient(135deg, var(--government-accent) 0%, #ffed4e 100%);
+    color: var(--government-primary) !important;
+    font-weight: 600;
+  }
+
+  .mobile-navbar-government .nav-link.active i {
+    color: var(--government-primary) !important;
+  }
+}
+
+/* User Info */
+.mobile-user-info {
+  text-align: center;
+  padding-bottom: 15px;
+  margin-bottom: 15px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.mobile-user-info .user-name {
+  color: var(--government-accent);
+  font-weight: 600;
+}
+
+.mobile-user-info .user-role {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 0.8rem;
+}
+
+/* Logout button mobile */
+.mobile-navbar-government .btn-government-logout {
+  width: 100%;
+  margin-top: 10px;
+}
+
+/* =========================
+   PEMBUATAN SURAT
+========================= */
+
+.card-government {
+  background: linear-gradient(135deg, var(--gov-primary) 0%, var(--gov-dark) 100%);
+  border: none;
+  border-radius: 10px;
+}
+
+.bg-gradient-primary {
+  background: linear-gradient(180deg, #4e73df 10%, #224abe 100%);
+}
+
+.government-card {
+  background: #fff;
+  border: 1px solid #e3e6f0;
+  border-radius: 0.75rem;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+  overflow: hidden;
+}
+
+.government-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1) !important;
+}
+
+.btn-icon-split {
+  padding: 0;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: stretch;
+  justify-content: center;
+}
+
+.btn-icon-split .icon {
+  background: rgba(0, 0, 0, 0.15);
+  padding: 0.375rem 0.75rem;
+}
+
+.btn-icon-split .text {
+  padding: 0.375rem 0.75rem;
+}
+
+.preview-iframe {
+  width: 100%;
+  height: 600px;
+  border: none;
+  background-color: #eee;
+}
+
+/* =========================
+   PEMBUATAN SURAT FORM
+========================= */
+
+body {
+  background-color: #f8f9fc;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.card-government {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  border: none;
+  border-radius: 10px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.bg-gradient-primary {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+}
+
+.section-header {
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  border-bottom: 2px solid #e3e6f0;
+  padding-bottom: 0.5rem;
+}
+
+.section-title {
+  color: #4e73df;
+  font-weight: 700;
+  text-transform: uppercase;
+  font-size: 0.9rem;
+  letter-spacing: 0.05rem;
+  margin: 0;
+}
+
+.required-asterisk {
+  color: #e74a3b;
+}
+
+.form-group-spacing {
+  margin-bottom: 1rem;
+}
+
+.government-btn-outline {
+  color: #4e73df;
+  border: 1px solid #4e73df;
+  background-color: transparent;
+  transition: all 0.3s;
+}
+
+.government-btn-outline:hover {
+  background-color: #4e73df;
+  color: white;
+}
+
+.card {
+  border-radius: 0.75rem;
+  border: none;
+}
+
+.form-control:focus,
+.form-select:focus {
+  border-color: #bac8f3;
+  box-shadow: 0 0 0 0.25rem rgba(78, 115, 223, 0.25);
+}
+
+/* Simulasi Invalid Feedback */
+.invalid-feedback {
+  display: block;
+}
+
+.text-blue-dark {
+  color: #1e3c72;
+}
+
+/* Override Bootstrap btn-outline-primary → Biru Gelap */
+.btn-outline-primary {
+  color: #1e3c72 !important;
+  border-color: #1e3c72 !important;
+  background-color: transparent;
+  font-weight: 600;
+  transition: all 0.25s ease;
+}
+
+/* Hover */
+.btn-outline-primary:hover {
+  background-color: #1e3c72 !important;
+  border-color: #1e3c72 !important;
+  color: #ffffff !important;
+}
+
+/* Active & Focus */
+.btn-outline-primary:focus,
+.btn-outline-primary:active {
+  background-color: #16305c !important;
+  border-color: #16305c !important;
+  color: #ffffff !important;
+  box-shadow: 0 0 0 0.2rem rgba(30, 60, 114, 0.25);
+}
+
+/* =========================
+    RIWAYAT SURAT
+========================= */
+body {
+  background-color: #f8f9fc;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.card-government {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  border: none;
+  border-radius: 10px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+}
+
+.bg-gradient-primary {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+}
+
+.btn-icon-split {
+  padding: 0;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: stretch;
+  justify-content: center;
+}
+
+.btn-icon-split .icon {
+  background: rgba(0, 0, 0, 0.15);
+  padding: 0.375rem 0.75rem;
+}
+
+.btn-icon-split .text {
+  padding: 0.375rem 0.75rem;
+}
+
+/* Styling Tabel */
+.table-responsive {
+  background: white;
+  border-radius: 8px;
+}
+
+.badge {
+  padding: 0.5em 0.8em;
+  font-weight: 500;
+}
+
+/* =========================
+   BUTTON GROUP AKSI
+========================= */
+
+/* hilangkan jarak antar tombol */
+.btn-group .btn {
+  margin: 0;
+  border-radius: 0 !important;
+  border-right-width: 0;
+}
+
+/* tombol pertama (kiri) */
+.btn-group .btn:first-child {
+  border-top-left-radius: 8px !important;
+  border-bottom-left-radius: 8px !important;
+}
+
+/* tombol terakhir (kanan) */
+.btn-group .btn:last-child {
+  border-top-right-radius: 8px !important;
+  border-bottom-right-radius: 8px !important;
+  border-right-width: 1px;
+}
+
+/* agar tinggi & posisi icon sama */
+.btn-group .btn {
+  padding: 8px 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* garis pemisah tengah seperti gambar */
+.btn-group .btn + .btn {
+  border-left: 1px solid #00613b;
+}
+
+/* DataTables Custom UI */
+.dataTables_wrapper .dataTables_paginate .paginate_button {
+  padding: 0;
+  margin-left: 2px;
+}
+
+.dataTables_filter input {
+  border-radius: 20px;
+  padding: 5px 15px;
+  border: 1px solid #ddd;
+}
+
+/* ======================
+   TOP AREA
+====================== */
+/* container */
+.dataTables_length {
+  display: flex;
+  align-items: center;
+}
+
+/* PENTING: flex pada label */
+.dataTables_length label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 0; /* hilangkan turun */
+  font-weight: 500;
+}
+
+/* dropdown */
+.dataTables_length select {
+  border-radius: 6px;
+  padding: 6px 28px 6px 10px;
+  border: 1px solid #dce1ea;
+  background-color: #f4f6fa;
+  height: 38px; /* samakan tinggi */
+}
+
+/* Hilangkan arrow dropdown bawaan */
+.dataTables_length select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  background-image: none; /* extra safety */
+  padding-right: 10px; /* rapikan spacing */
+}
+
+/* kanan atas (search) */
+.dataTables_filter {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.dataTables_filter label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 500;
+}
+
+/* input search */
+.dataTables_filter input {
+  border-radius: 6px;
+  border: 1px solid #dce1ea;
+  background: #fbfbfc;
+  padding: 8px 8px;
+  width: 260px;
+  transition: 0.2s;
+}
+
+.dataTables_filter input:focus {
+  outline: none;
+  background: #fff;
+  border-color: #2c4e8a;
+  box-shadow: 0 0 0 0.1rem rgba(44, 78, 138, 0.2);
+}

project/public/assets/css/pengajuan warga.css

@@ -0,0 +1,243 @@
+/* =========================
+   GLOBAL
+========================= */
+body {
+  background: #f3f5f9;
+  font-family: "Segoe UI", Tahoma, sans-serif;
+  color: #2d3748;
+}
+
+/* =========================
+   HEADER
+========================= */
+.card-government {
+  background: linear-gradient(135deg, #2c4e8a, #3b5da0);
+  color: #fff;
+  border-radius: 14px;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
+}
+
+.card-government h4 {
+  font-weight: 600;
+}
+
+.card-government small {
+  opacity: 0.85;
+  font-size: 0.9rem;
+}
+
+/* =========================
+   SECTION TITLE
+========================= */
+.bg-government-light {
+  background: #eef3fb;
+  border-radius: 12px 12px 0 0;
+}
+
+.text-government-primary {
+  color: #2c4e8a;
+  font-weight: 600;
+}
+
+/* =========================
+   BUTTON
+========================= */
+.btn-government {
+  background: #2c4e8a;
+  color: #fff;
+  text-transform: uppercase;
+  border-radius: 10px;
+  font-weight: 600;
+  height: 44px;
+}
+
+.btn-government:hover {
+  background: #274579;
+  color: #fff;
+}
+
+/* =========================
+   DOCUMENT CARD
+========================= */
+.card.document-card {
+  border-radius: 14px;
+  border: 1px solid #e6ebf2; /* override .card border:none */
+  background: #fff;
+  max-width: 320px;
+
+  transition:
+    transform 0.25s ease,
+    box-shadow 0.25s ease,
+    border-color 0.25s ease;
+}
+
+/* hover */
+.card.document-card:hover {
+  transform: translateY(-4px);
+  border-color: #2c4e8a;
+  box-shadow: 0 0 0 0.1rem rgba(44, 78, 138, 0.2);
+}
+
+/* ICON BULAT */
+.document-icon {
+  width: 90px;
+  height: 90px;
+  border-radius: 50%;
+  background: #eaf1ff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto;
+  color: #2c4e8a;
+  font-size: 34px;
+}
+
+/* =========================
+   SEARCH AREA
+========================= */
+.main-card {
+  border-radius: 10px;
+  background: #fff;
+}
+
+.form-label {
+  font-size: 0.95rem;
+}
+
+#tokenInput {
+  height: 50px;
+  border-radius: 10px 0 0 10px;
+  border-right: none;
+  background: #f7f9fc;
+}
+
+#tokenInput:focus {
+  background: #fff;
+  border-color: #2c4e8a;
+  box-shadow: 0 0 0 0.1rem rgba(44, 78, 138, 0.2);
+}
+
+.input-group .btn-government {
+  border-radius: 0 10px 10px 0;
+  height: 50px;
+}
+
+/* akses cepat */
+.btn-outline-primary.btn-lg {
+  height: 50px;
+  border-radius: 10px;
+  font-weight: 500;
+}
+
+/* agar label sejajar bawah */
+.col-lg-8,
+.col-lg-4 {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+/* =========================
+   LIST PENGAJUAN
+========================= */
+.pengajuan-item {
+  border-left: 5px solid #2c4e8a;
+  border-radius: 12px;
+  background: #f8faff;
+  transition: 0.2s;
+}
+
+.pengajuan-item:hover {
+  background: #f1f6ff;
+}
+
+.pengajuan-item h5 {
+  font-size: 1.05rem;
+}
+
+.pengajuan-item .text-muted {
+  font-size: 0.9rem;
+}
+
+/* BADGE STATUS */
+.badge-status {
+  background: #f4b400;
+  color: #fff;
+  padding: 8px 16px;
+  border-radius: 999px;
+  font-weight: 500;
+  font-size: 0.8rem;
+}
+
+/* ACTION BUTTON */
+.pengajuan-item .btn-sm {
+  border-radius: 8px;
+  font-size: 0.9rem;
+}
+
+#tokenInput {
+  font-size: 0.95rem;
+}
+
+#tokenInput::placeholder {
+  font-size: 0.9rem;
+  color: #63676e;
+}
+
+/* =====================================
+   PERFECT ALIGN FIX (FINAL)
+===================================== */
+
+.align-search {
+  display: flex;
+  align-items: flex-start;
+}
+
+/* kolom jadi flex vertical */
+.search-col {
+  display: flex;
+  flex-direction: column;
+}
+
+/* AREA YANG DISEJAJARKAN */
+.search-align {
+  height: 54px;
+  display: flex;
+  align-items: center;
+}
+
+/* input styling */
+.token-input {
+  height: 54px;
+  font-size: 0.95rem;
+  border-radius: 10px 0 0 10px;
+}
+
+/* placeholder kecil */
+.token-input::placeholder {
+  font-size: 0.9rem;
+  color: #8a94a6;
+}
+
+/* tombol cari */
+.input-group .btn-government {
+  height: 54px;
+  border-radius: 0 10px 10px 0;
+}
+
+/* tombol riwayat */
+.btn-riwayat {
+  height: 54px;
+  border-radius: 10px;
+  font-weight: 500;
+}
+
+/* info text tidak mempengaruhi alignment */
+.info-text {
+  margin-top: 8px;
+}
+
+/* rapikan label */
+.form-label {
+  margin-bottom: 6px;
+}

project/public/assets/css/pengaturan sistem.css

@@ -0,0 +1,463 @@
+/* Government Theme Colors */
+:root {
+  --government-primary: #1e3c72;
+  --government-secondary: #2a5298;
+  --government-accent: #ffd700;
+  --government-light: #f8f9ff;
+  --government-dark: #163056;
+}
+
+body {
+  background-color: #f4f7f6;
+  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  margin: 0;
+}
+
+.sidebar-government {
+  background: linear-gradient(180deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+  box-shadow: 4px 0 15px rgba(30, 60, 114, 0.2);
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+
+  width: 280px;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  padding: 20px;
+}
+
+/* Overlay pattern untuk tekstur sidebar */
+.sidebar-government::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M0,0 L100,0 L100,100 L0,100 Z" fill="white" opacity="0.05"/></svg>');
+  opacity: 0.1;
+  pointer-events: none;
+}
+
+.sidebar-government .brand-section {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 15px;
+  padding: 20px;
+  margin-bottom: 20px;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  text-align: left;
+}
+
+.sidebar-government .brand-title {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.sidebar-government .brand-subtitle {
+  font-size: 16px;
+  opacity: 0.9;
+}
+
+.sidebar-government .brand-text {
+  color: white;
+  margin-left: 0px;
+  font-weight: 700;
+  font-size: 1.1rem;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* Logo */
+.logo-wrapper {
+  width: 75px;
+  height: 75px;
+  border-radius: 50%;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo-img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.sidebar-government .nav-link {
+  color: rgba(255, 255, 255, 0.9) !important;
+  padding: 12px 16px;
+  margin-bottom: 8px;
+  border-radius: 12px;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  backdrop-filter: blur(5px);
+  border: 1px solid transparent;
+  display: flex;
+  align-items: center;
+}
+
+/* Efek kilau saat hover */
+.sidebar-government .nav-link::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: left 0.5s ease;
+}
+
+.sidebar-government .nav-link:hover::before {
+  left: 100%;
+}
+
+.sidebar-government .nav-link:hover {
+  background: rgba(255, 255, 255, 0.15);
+  color: white !important;
+  transform: translateX(8px);
+  border-color: rgba(255, 215, 0, 0.5);
+  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
+}
+
+.sidebar-government .nav-link.active {
+  background: linear-gradient(135deg, var(--government-accent) 0%, #ffed4e 100%);
+  color: var(--government-primary) !important;
+  font-weight: 600;
+  border-color: var(--government-accent);
+  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
+}
+
+.sidebar-government .nav-link.active i {
+  color: var(--government-primary) !important;
+}
+
+.sidebar-government .nav-link i {
+  width: 20px;
+  margin-right: 12px;
+  text-align: center;
+  font-size: 1.1rem;
+}
+
+.sidebar-government hr {
+  border-color: rgba(255, 255, 255, 0.3);
+  margin: 20px 0;
+}
+
+.btn-government-logout {
+  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
+  border: none;
+  color: white;
+  padding: 12px 20px;
+  border-radius: 12px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  width: 100%;
+  box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
+  cursor: pointer;
+}
+
+.btn-government-logout:hover {
+  background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
+  color: white;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
+}
+
+/* Mobile Navbar Styles */
+.mobile-navbar-government {
+  background: linear-gradient(135deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+  color: white;
+  box-shadow: 0 4px 15px rgba(30, 60, 114, 0.3);
+  border-bottom: 3px solid var(--government-accent);
+}
+
+.mobile-navbar-government .navbar-brand {
+  color: white !important;
+  font-weight: 700;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* Nav section headers */
+.nav-section-header {
+  color: var(--government-accent);
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin: 20px 0 10px 0;
+  padding-left: 16px;
+}
+
+/* User info section */
+.user-info {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 15px;
+  margin-bottom: 20px;
+  text-align: center;
+  backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.user-info .user-name {
+  color: white;
+  font-weight: 600;
+  margin-bottom: 5px;
+}
+
+.user-info .user-role {
+  color: var(--government-accent);
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* Responsive Main Content area adjustment */
+.main-content {
+  transition: margin 0.3s ease;
+  padding: 20px;
+}
+
+@media (min-width: 769px) {
+  .main-content {
+    margin-left: 280px;
+  }
+}
+
+@media (max-width: 768px) {
+  .navbar-collapse {
+    background: linear-gradient(135deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+    margin-top: 10px;
+    border-radius: 15px;
+    padding: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+  }
+}
+
+/* SweetAlert Custom Styles */
+.swal-government-popup {
+  border-radius: 15px !important;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
+  padding: 2rem !important;
+}
+.swal-government-title {
+  color: #1e3c72 !important;
+  font-weight: 600 !important;
+}
+.swal-government-confirm {
+  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
+  color: white !important;
+  border: none !important;
+  border-radius: 8px !important;
+  padding: 10px 24px !important;
+  margin-left: 10px !important;
+  font-weight: 600 !important;
+}
+.swal-government-cancel {
+  background: #6c757d !important;
+  color: white !important;
+  border: none !important;
+  border-radius: 8px !important;
+  padding: 10px 24px !important;
+  font-weight: 600 !important;
+}
+
+/* ============================= */
+/* MOBILE NAVBAR GOVERNMENT FIX */
+/* ============================= */
+
+.mobile-navbar-government {
+  background: linear-gradient(135deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+  color: white;
+  border-bottom: 3px solid var(--government-accent);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
+}
+
+/* Brand */
+.mobile-navbar-government .navbar-brand {
+  color: white !important;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.mobile-navbar-government .navbar-brand i {
+  color: white !important;
+  font-size: 1.4rem;
+}
+
+/* Hamburger button */
+.mobile-navbar-government .navbar-toggler {
+  border: none;
+  background: rgba(255, 255, 255, 0.15);
+  padding: 6px 10px;
+  border-radius: 8px;
+}
+
+.mobile-navbar-government .navbar-toggler:focus {
+  box-shadow: none;
+}
+
+.mobile-navbar-government .navbar-toggler-icon {
+  filter: brightness(0) invert(1); /* bikin icon putih */
+}
+
+/* Collapse area */
+@media (max-width: 768px) {
+  .mobile-navbar-government .navbar-collapse {
+    background: linear-gradient(180deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+    margin-top: 15px;
+    border-radius: 15px;
+    padding: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
+  }
+
+  .mobile-navbar-government .nav-link {
+    color: white !important;
+    font-weight: 500;
+    padding: 12px 14px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .mobile-navbar-government .nav-link i {
+    color: white !important;
+    font-size: 1.1rem;
+  }
+
+  .mobile-navbar-government .nav-link:hover {
+    background: rgba(255, 255, 255, 0.15);
+  }
+
+  .mobile-navbar-government .nav-link.active {
+    background: linear-gradient(135deg, var(--government-accent) 0%, #ffed4e 100%);
+    color: var(--government-primary) !important;
+    font-weight: 600;
+  }
+
+  .mobile-navbar-government .nav-link.active i {
+    color: var(--government-primary) !important;
+  }
+}
+
+/* User Info */
+.mobile-user-info {
+  text-align: center;
+  padding-bottom: 15px;
+  margin-bottom: 15px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.mobile-user-info .user-name {
+  color: var(--government-accent);
+  font-weight: 600;
+}
+
+.mobile-user-info .user-role {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 0.8rem;
+}
+
+/* Logout button mobile */
+.mobile-navbar-government .btn-government-logout {
+  width: 100%;
+  margin-top: 10px;
+}
+
+/* =========================
+   PENGATURAN SISTEM
+========================= */
+:root {
+  --gov-primary: #003366;
+  --gov-gradient: linear-gradient(135deg, #003366 0%, #00509e 100%);
+}
+
+body {
+  background-color: #f4f6f9;
+  font-family:
+    "Inter",
+    system-ui,
+    -apple-system,
+    sans-serif;
+  padding-bottom: 50px;
+}
+
+/* Page Header Custom Style */
+.card-government {
+  background: var(--gov-gradient);
+  border: none;
+  border-radius: 10px;
+  box-shadow: 0 4px 12px rgba(0, 51, 102, 0.2);
+}
+
+/* Sidebar Nav Pills */
+.nav-pills .nav-link {
+  color: #495057;
+  font-weight: 500;
+  padding: 12px 20px;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+  background-color: #fff;
+  border: 1px solid #dee2e6;
+  margin-bottom: 8px;
+}
+
+.nav-pills .nav-link.active {
+  background-color: var(--gov-primary);
+  color: white;
+  border-color: var(--gov-primary);
+  box-shadow: 0 4px 8px rgba(0, 51, 102, 0.2);
+}
+
+.nav-pills .nav-link:hover:not(.active) {
+  background-color: #e9ecef;
+}
+
+/* Sticky Sidebar */
+.sticky-top {
+  top: 20px;
+  z-index: 100;
+}
+
+/* Button Icon Split Style (SB Admin 2 style) */
+.btn-icon-split {
+  padding: 0;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: stretch;
+  justify-content: center;
+}
+.btn-icon-split .icon {
+  background: rgba(0, 0, 0, 0.15);
+  padding: 0.375rem 0.75rem;
+}
+.btn-icon-split .text {
+  padding: 0.375rem 0.75rem;
+}
+
+/* Card Styling */
+.card {
+  border-radius: 10px;
+  border: none;
+}
+.shadow {
+  box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important;
+}
+
+/* Alert Styling */
+.alert {
+  border: none;
+  border-radius: 8px;
+}

project/public/assets/css/pengumuman.css

@@ -0,0 +1,579 @@
+/* Government Theme Colors */
+:root {
+  --government-primary: #1e3c72;
+  --government-secondary: #2a5298;
+  --government-accent: #ffd700;
+  --government-light: #f8f9ff;
+  --government-dark: #163056;
+}
+
+body {
+  background-color: #f4f7f6;
+  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  margin: 0;
+}
+
+.sidebar-government {
+  background: linear-gradient(180deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+  box-shadow: 4px 0 15px rgba(30, 60, 114, 0.2);
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+
+  width: 280px;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  padding: 20px;
+}
+
+/* Overlay pattern untuk tekstur sidebar */
+.sidebar-government::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M0,0 L100,0 L100,100 L0,100 Z" fill="white" opacity="0.05"/></svg>');
+  opacity: 0.1;
+  pointer-events: none;
+}
+
+.sidebar-government .brand-section {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 15px;
+  padding: 20px;
+  margin-bottom: 20px;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  text-align: left;
+}
+
+.sidebar-government .brand-title {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.sidebar-government .brand-subtitle {
+  font-size: 16px;
+  opacity: 0.9;
+}
+
+.sidebar-government .brand-text {
+  color: white;
+  margin-left: 0px;
+  font-weight: 700;
+  font-size: 1.1rem;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* Logo */
+.logo-wrapper {
+  width: 75px;
+  height: 75px;
+  border-radius: 50%;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo-img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.sidebar-government .nav-link {
+  color: rgba(255, 255, 255, 0.9) !important;
+  padding: 12px 16px;
+  margin-bottom: 8px;
+  border-radius: 12px;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  backdrop-filter: blur(5px);
+  border: 1px solid transparent;
+  display: flex;
+  align-items: center;
+}
+
+/* Efek kilau saat hover */
+.sidebar-government .nav-link::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: left 0.5s ease;
+}
+
+.sidebar-government .nav-link:hover::before {
+  left: 100%;
+}
+
+.sidebar-government .nav-link:hover {
+  background: rgba(255, 255, 255, 0.15);
+  color: white !important;
+  transform: translateX(8px);
+  border-color: rgba(255, 215, 0, 0.5);
+  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
+}
+
+.sidebar-government .nav-link.active {
+  background: linear-gradient(135deg, var(--government-accent) 0%, #ffed4e 100%);
+  color: var(--government-primary) !important;
+  font-weight: 600;
+  border-color: var(--government-accent);
+  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
+}
+
+.sidebar-government .nav-link.active i {
+  color: var(--government-primary) !important;
+}
+
+.sidebar-government .nav-link i {
+  width: 20px;
+  margin-right: 12px;
+  text-align: center;
+  font-size: 1.1rem;
+}
+
+.sidebar-government hr {
+  border-color: rgba(255, 255, 255, 0.3);
+  margin: 20px 0;
+}
+
+.btn-government-logout {
+  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
+  border: none;
+  color: white;
+  padding: 12px 20px;
+  border-radius: 12px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  width: 100%;
+  box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
+  cursor: pointer;
+}
+
+.btn-government-logout:hover {
+  background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
+  color: white;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
+}
+
+/* Mobile Navbar Styles */
+.mobile-navbar-government {
+  background: linear-gradient(135deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+  color: white;
+  box-shadow: 0 4px 15px rgba(30, 60, 114, 0.3);
+  border-bottom: 3px solid var(--government-accent);
+}
+
+.mobile-navbar-government .navbar-brand {
+  color: white !important;
+  font-weight: 700;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* Nav section headers */
+.nav-section-header {
+  color: var(--government-accent);
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin: 20px 0 10px 0;
+  padding-left: 16px;
+}
+
+/* User info section */
+.user-info {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 15px;
+  margin-bottom: 20px;
+  text-align: center;
+  backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.user-info .user-name {
+  color: white;
+  font-weight: 600;
+  margin-bottom: 5px;
+}
+
+.user-info .user-role {
+  color: var(--government-accent);
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* Responsive Main Content area adjustment */
+.main-content {
+  transition: margin 0.3s ease;
+  padding: 20px;
+}
+
+@media (min-width: 769px) {
+  .main-content {
+    margin-left: 280px;
+  }
+}
+
+@media (max-width: 768px) {
+  .navbar-collapse {
+    background: linear-gradient(135deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+    margin-top: 10px;
+    border-radius: 15px;
+    padding: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+  }
+}
+
+/* SweetAlert Custom Styles */
+.swal-government-popup {
+  border-radius: 15px !important;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
+  padding: 2rem !important;
+}
+.swal-government-title {
+  color: #1e3c72 !important;
+  font-weight: 600 !important;
+}
+.swal-government-confirm {
+  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
+  color: white !important;
+  border: none !important;
+  border-radius: 8px !important;
+  padding: 10px 24px !important;
+  margin-left: 10px !important;
+  font-weight: 600 !important;
+}
+.swal-government-cancel {
+  background: #6c757d !important;
+  color: white !important;
+  border: none !important;
+  border-radius: 8px !important;
+  padding: 10px 24px !important;
+  font-weight: 600 !important;
+}
+
+/* ============================= */
+/* MOBILE NAVBAR GOVERNMENT FIX */
+/* ============================= */
+
+.mobile-navbar-government {
+  background: linear-gradient(135deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+  color: white;
+  border-bottom: 3px solid var(--government-accent);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
+}
+
+/* Brand */
+.mobile-navbar-government .navbar-brand {
+  color: white !important;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.mobile-navbar-government .navbar-brand i {
+  color: white !important;
+  font-size: 1.4rem;
+}
+
+/* Hamburger button */
+.mobile-navbar-government .navbar-toggler {
+  border: none;
+  background: rgba(255, 255, 255, 0.15);
+  padding: 6px 10px;
+  border-radius: 8px;
+}
+
+.mobile-navbar-government .navbar-toggler:focus {
+  box-shadow: none;
+}
+
+.mobile-navbar-government .navbar-toggler-icon {
+  filter: brightness(0) invert(1); /* bikin icon putih */
+}
+
+/* Collapse area */
+@media (max-width: 768px) {
+  .mobile-navbar-government .navbar-collapse {
+    background: linear-gradient(180deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+    margin-top: 15px;
+    border-radius: 15px;
+    padding: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
+  }
+
+  .mobile-navbar-government .nav-link {
+    color: white !important;
+    font-weight: 500;
+    padding: 12px 14px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .mobile-navbar-government .nav-link i {
+    color: white !important;
+    font-size: 1.1rem;
+  }
+
+  .mobile-navbar-government .nav-link:hover {
+    background: rgba(255, 255, 255, 0.15);
+  }
+
+  .mobile-navbar-government .nav-link.active {
+    background: linear-gradient(135deg, var(--government-accent) 0%, #ffed4e 100%);
+    color: var(--government-primary) !important;
+    font-weight: 600;
+  }
+
+  .mobile-navbar-government .nav-link.active i {
+    color: var(--government-primary) !important;
+  }
+}
+
+/* User Info */
+.mobile-user-info {
+  text-align: center;
+  padding-bottom: 15px;
+  margin-bottom: 15px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.mobile-user-info .user-name {
+  color: var(--government-accent);
+  font-weight: 600;
+}
+
+.mobile-user-info .user-role {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 0.8rem;
+}
+
+/* Logout button mobile */
+.mobile-navbar-government .btn-government-logout {
+  width: 100%;
+  margin-top: 10px;
+}
+
+/* =========================
+   PENGUMUMAN
+========================= */
+body {
+  background-color: #f4f7f6;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* Styles dari Push Blade */
+.card-government {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  border: none;
+  box-shadow: 0 8px 25px rgba(30, 60, 114, 0.3);
+}
+
+.text-government-primary {
+  color: #1e3c72 !important;
+}
+
+.bg-government-light {
+  background: linear-gradient(135deg, #f8f9ff 0%, #e8f0ff 100%);
+}
+
+.btn-government {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  border: none;
+  color: white;
+  transition: all 0.3s ease;
+}
+
+.btn-government:hover {
+  background: linear-gradient(135deg, #163056 0%, #1e4176 100%);
+  color: white;
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(30, 60, 114, 0.4);
+}
+
+/* Tambahan styling untuk tabel agar lebih rapi */
+.table-government thead th {
+  background-color: #f8f9ff;
+  color: #1e3c72;
+  border-bottom: 2px solid #e8f0ff;
+  padding: 15px;
+}
+
+.table-government tbody td {
+  padding: 15px;
+  vertical-align: middle;
+}
+
+/* Meratakan Show Entries dan Search */
+.dataTables_wrapper .row {
+  display: flex;
+  align-items: center;
+}
+
+.dataTables_length label,
+.dataTables_filter label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 1rem;
+  color: #1b1b1b;
+}
+
+.dataTables_filter input {
+  margin-left: 0.5rem !important;
+  border: 1px solid #d1d3e2;
+  border-radius: 4px;
+  padding: 4px 8px;
+}
+
+.dataTables_length select {
+  border: 1px solid #d1d3e2;
+  border-radius: 4px;
+  padding: 2px 8px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-image: none !important;
+  background-color: #fff;
+  text-align: center;
+  cursor: pointer;
+  min-width: 45px;
+}
+
+table.dataTable thead th {
+  padding-right: 12px !important;
+}
+
+/* =========================
+   DETAIL PENGUMUMAN
+========================= */
+
+body {
+  background-color: #f4f7f6;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.card-government {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  border: none;
+  box-shadow: 0 8px 25px rgba(30, 60, 114, 0.3);
+}
+
+.text-government-primary {
+  color: #1e3c72 !important;
+}
+
+.bg-government-light {
+  background: linear-gradient(135deg, #f8f9ff 0%, #e8f0ff 100%);
+}
+
+.info-item {
+  background: #f8f9ff;
+  /* border-left: 4px solid #1e3c72; */
+  padding: 1rem;
+  border-radius: 8px; /* Disesuaikan agar simetris jika border-left mati */
+  margin-bottom: 1rem;
+}
+
+.info-item .label {
+  font-weight: 600;
+  color: #1e3c72;
+  margin-bottom: 0.5rem;
+  display: flex;
+  align-items: center;
+}
+
+.info-item .value {
+  color: #333;
+  margin: 0;
+  font-size: 1.1rem;
+}
+
+.badge-date {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 20px;
+  font-weight: 500;
+}
+
+.btn-group .btn {
+  margin-left: 0;
+}
+
+/* =========================
+   TAMBAH PENGUMUMAN
+========================= */
+
+body {
+  background-color: #f4f7f6;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.card-government {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  border: none;
+  box-shadow: 0 8px 25px rgba(30, 60, 114, 0.3);
+}
+
+.text-government-primary {
+  color: #1e3c72 !important;
+}
+
+.bg-government-light {
+  background: linear-gradient(135deg, #f8f9ff 0%, #e8f0ff 100%);
+}
+
+.btn-government {
+  background: #0d6efd;
+  border: none;
+  color: white;
+  transition: all 0.3s ease;
+}
+
+.btn-government:hover {
+  background: linear-gradient(135deg, #163056 0%, #1e4176 100%);
+  color: white;
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(30, 60, 114, 0.4);
+}
+
+.form-control:focus {
+  border-color: #2a5298;
+  box-shadow: 0 0 0 0.2rem rgba(42, 82, 152, 0.25);
+}
+
+.form-label {
+  font-weight: 600;
+  color: #1e3c72;
+}
+
+/* Custom spacing for button gap */
+.gap-2 {
+  gap: 0.5rem !important;
+}

project/public/assets/css/profil desa.css

@@ -0,0 +1,541 @@
+/* Government Theme Colors */
+:root {
+  --government-primary: #1e3c72;
+  --government-secondary: #2a5298;
+  --government-accent: #ffd700;
+  --government-light: #f8f9ff;
+  --government-dark: #163056;
+}
+
+body {
+  background-color: #f4f7f6;
+  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  margin: 0;
+}
+
+.sidebar-government {
+  background: linear-gradient(180deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+  box-shadow: 4px 0 15px rgba(30, 60, 114, 0.2);
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+
+  width: 280px;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  padding: 20px;
+}
+
+/* Overlay pattern untuk tekstur sidebar */
+.sidebar-government::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M0,0 L100,0 L100,100 L0,100 Z" fill="white" opacity="0.05"/></svg>');
+  opacity: 0.1;
+  pointer-events: none;
+}
+
+.sidebar-government .brand-section {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 15px;
+  padding: 20px;
+  margin-bottom: 20px;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  text-align: left;
+}
+
+.sidebar-government .brand-title {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.sidebar-government .brand-subtitle {
+  font-size: 16px;
+  opacity: 0.9;
+}
+
+.sidebar-government .brand-text {
+  color: white;
+  margin-left: 0px;
+  font-weight: 600;
+  font-size: 1.1rem;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* Logo */
+.logo-wrapper {
+  width: 75px;
+  height: 75px;
+  border-radius: 50%;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo-img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.sidebar-government .nav-link {
+  color: rgba(255, 255, 255, 0.9) !important;
+  padding: 12px 16px;
+  margin-bottom: 8px;
+  border-radius: 12px;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  backdrop-filter: blur(5px);
+  border: 1px solid transparent;
+  display: flex;
+  align-items: center;
+}
+
+/* Efek kilau saat hover */
+.sidebar-government .nav-link::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: left 0.5s ease;
+}
+
+.sidebar-government .nav-link:hover::before {
+  left: 100%;
+}
+
+.sidebar-government .nav-link:hover {
+  background: rgba(255, 255, 255, 0.15);
+  color: white !important;
+  transform: translateX(8px);
+  border-color: rgba(255, 215, 0, 0.5);
+  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
+}
+
+.sidebar-government .nav-link.active {
+  background: linear-gradient(135deg, var(--government-accent) 0%, #ffed4e 100%);
+  color: var(--government-primary) !important;
+  font-weight: 600;
+  border-color: var(--government-accent);
+  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
+}
+
+.sidebar-government .nav-link.active i {
+  color: var(--government-primary) !important;
+}
+
+.sidebar-government .nav-link i {
+  width: 20px;
+  margin-right: 12px;
+  text-align: center;
+  font-size: 1.1rem;
+}
+
+.sidebar-government hr {
+  border-color: rgba(255, 255, 255, 0.3);
+  margin: 20px 0;
+}
+
+.btn-government-logout {
+  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
+  border: none;
+  color: white;
+  padding: 12px 20px;
+  border-radius: 12px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  width: 100%;
+  box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
+  cursor: pointer;
+}
+
+.btn-government-logout:hover {
+  background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
+  color: white;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
+}
+
+/* Mobile Navbar Styles */
+.mobile-navbar-government {
+  background: linear-gradient(135deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+  color: white;
+  box-shadow: 0 4px 15px rgba(30, 60, 114, 0.3);
+  border-bottom: 3px solid var(--government-accent);
+}
+
+.mobile-navbar-government .navbar-brand {
+  color: white !important;
+  font-weight: 600;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* Nav section headers */
+.nav-section-header {
+  color: var(--government-accent);
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin: 20px 0 10px 0;
+  padding-left: 16px;
+}
+
+/* User info section */
+.user-info {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 15px;
+  margin-bottom: 20px;
+  text-align: center;
+  backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.user-info .user-name {
+  color: white;
+  font-weight: 600;
+  margin-bottom: 5px;
+}
+
+.user-info .user-role {
+  color: var(--government-accent);
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* Responsive Main Content area adjustment */
+.main-content {
+  transition: margin 0.3s ease;
+  padding: 20px;
+}
+
+@media (min-width: 769px) {
+  .main-content {
+    margin-left: 280px;
+  }
+}
+
+@media (max-width: 768px) {
+  .navbar-collapse {
+    background: linear-gradient(135deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+    margin-top: 10px;
+    border-radius: 15px;
+    padding: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+  }
+}
+
+/* SweetAlert Custom Styles */
+.swal-government-popup {
+  border-radius: 15px !important;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
+  padding: 2rem !important;
+}
+.swal-government-title {
+  color: #1e3c72 !important;
+  font-weight: 600 !important;
+}
+.swal-government-confirm {
+  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
+  color: white !important;
+  border: none !important;
+  border-radius: 8px !important;
+  padding: 10px 24px !important;
+  margin-left: 10px !important;
+  font-weight: 600 !important;
+}
+.swal-government-cancel {
+  background: #6c757d !important;
+  color: white !important;
+  border: none !important;
+  border-radius: 8px !important;
+  padding: 10px 24px !important;
+  font-weight: 600 !important;
+}
+
+/* ============================= */
+/* MOBILE NAVBAR GOVERNMENT FIX */
+/* ============================= */
+
+.mobile-navbar-government {
+  background: linear-gradient(135deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+  color: white;
+  border-bottom: 3px solid var(--government-accent);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
+}
+
+/* Brand */
+.mobile-navbar-government .navbar-brand {
+  color: white !important;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.mobile-navbar-government .navbar-brand i {
+  color: white !important;
+  font-size: 1.4rem;
+}
+
+/* Hamburger button */
+.mobile-navbar-government .navbar-toggler {
+  border: none;
+  background: rgba(255, 255, 255, 0.15);
+  padding: 6px 10px;
+  border-radius: 8px;
+}
+
+.mobile-navbar-government .navbar-toggler:focus {
+  box-shadow: none;
+}
+
+.mobile-navbar-government .navbar-toggler-icon {
+  filter: brightness(0) invert(1); /* bikin icon putih */
+}
+
+/* Collapse area */
+@media (max-width: 768px) {
+  .mobile-navbar-government .navbar-collapse {
+    background: linear-gradient(180deg, var(--government-primary) 0%, var(--government-secondary) 100%);
+    margin-top: 15px;
+    border-radius: 15px;
+    padding: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
+  }
+
+  .mobile-navbar-government .nav-link {
+    color: white !important;
+    font-weight: 500;
+    padding: 12px 14px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .mobile-navbar-government .nav-link i {
+    color: white !important;
+    font-size: 1.1rem;
+  }
+
+  .mobile-navbar-government .nav-link:hover {
+    background: rgba(255, 255, 255, 0.15);
+  }
+
+  .mobile-navbar-government .nav-link.active {
+    background: linear-gradient(135deg, var(--government-accent) 0%, #ffed4e 100%);
+    color: var(--government-primary) !important;
+    font-weight: 600;
+  }
+
+  .mobile-navbar-government .nav-link.active i {
+    color: var(--government-primary) !important;
+  }
+}
+
+/* User Info */
+.mobile-user-info {
+  text-align: center;
+  padding-bottom: 15px;
+  margin-bottom: 15px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.mobile-user-info .user-name {
+  color: var(--government-accent);
+  font-weight: 600;
+}
+
+.mobile-user-info .user-role {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 0.8rem;
+}
+
+/* Logout button mobile */
+.mobile-navbar-government .btn-government-logout {
+  width: 100%;
+  margin-top: 10px;
+}
+
+/* =========================
+   PROFIL DESA
+========================= */
+body {
+  background-color: #f8f9fc;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* Styles Dasar dari Tema Government */
+.card-government {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  border: none;
+  box-shadow: 0 8px 25px rgba(30, 60, 114, 0.3);
+  border-radius: 15px;
+}
+
+.bg-gradient-primary {
+  background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
+}
+
+/* Utilities untuk Border Samping (Shadow-sm & Colored Borders) */
+.border-left-primary {
+  border-left: 0.25rem solid #4e73df !important;
+}
+
+.border-left-success {
+  border-left: 0.25rem solid #1cc88a !important;
+}
+
+.border-left-info {
+  border-left: 0.25rem solid #36b9cc !important;
+}
+
+.border-left-warning {
+  border-left: 0.25rem solid #f6c23e !important;
+}
+
+.section-title {
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: 0.05rem;
+  color: #5a5c69;
+  border-bottom: 2px solid #e3e6f0;
+  padding-bottom: 5px;
+  display: inline-block;
+}
+
+.btn-icon-split {
+  padding: 0;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: stretch;
+  justify-content: center;
+}
+
+.btn-icon-split .icon {
+  background: rgba(0, 0, 0, 0.15);
+  padding: 0.375rem 0.75rem;
+}
+
+.btn-icon-split .text {
+  padding: 0.375rem 0.75rem;
+}
+
+.card {
+  border-radius: 10px;
+  transition: transform 0.2s;
+}
+
+.card:hover {
+  transform: translateY(-2px);
+}
+
+/* =========================
+   EDIT PROFIL DESA
+========================= */
+body {
+  background-color: #f8f9fc;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* Styles Dasar dari Tema Government */
+.card-government {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  border: none;
+  box-shadow: 0 8px 25px rgba(30, 60, 114, 0.3);
+  border-radius: 5px;
+}
+
+.bg-gradient-primary {
+  background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
+}
+
+.bg-government-light {
+  background: linear-gradient(135deg, #f8f9ff 0%, #e8f0ff 100%);
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  min-height: 50px;
+  padding: 0 15px;
+}
+
+/* Update Section Styling */
+.section-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  letter-spacing: 0.05rem;
+  color: #1e3c72;
+  border-bottom: none !important;
+  padding-bottom: 0;
+  margin-bottom: 0 !important;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+}
+
+/* Form Styling */
+.form-label {
+  font-weight: 600;
+  color: #353535;
+  font-size: 1rem;
+}
+
+.required-field::after {
+  content: " *";
+  color: red;
+}
+
+.form-control:focus {
+  border-color: #4e73df;
+  box-shadow: 0 0 0 0.25rem rgba(78, 115, 223, 0.25);
+}
+
+/* Button Styling */
+.btn-icon-split {
+  padding: 0;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: stretch;
+  justify-content: center;
+}
+
+.btn-icon-split .icon {
+  background: rgba(0, 0, 0, 0.15);
+  padding: 0.375rem 1rem;
+}
+
+.btn-icon-split .text {
+  padding: 0.375rem 1rem;
+}
+
+.form-group-spacing {
+  padding: 10px 0;
+}
+
+hr {
+  border-top: 1px solid #e3e6f0;
+  opacity: 1;
+}

project/public/assets/css/profil.css

@@ -0,0 +1,569 @@
+/* Government Theme Colors */
+:root {
+    --government-primary: #1e3c72;
+    --government-secondary: #2a5298;
+    --government-accent: #ffd700;
+    --government-light: #f8f9ff;
+    --government-dark: #163056;
+}
+
+body {
+    background-color: #f4f7f6;
+    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    margin: 0;
+}
+
+.sidebar-government {
+    background: linear-gradient(
+        180deg,
+        var(--government-primary) 0%,
+        var(--government-secondary) 100%
+    );
+    box-shadow: 4px 0 15px rgba(30, 60, 114, 0.2);
+
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+
+    width: 280px;
+    height: 100vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    padding: 20px;
+}
+
+/* Overlay pattern untuk tekstur sidebar */
+.sidebar-government::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M0,0 L100,0 L100,100 L0,100 Z" fill="white" opacity="0.05"/></svg>');
+    opacity: 0.1;
+    pointer-events: none;
+}
+
+.sidebar-government .brand-section {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 15px;
+    padding: 20px;
+    margin-bottom: 20px;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    text-align: left;
+}
+
+.sidebar-government .brand-title {
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.sidebar-government .brand-subtitle {
+    font-size: 16px;
+    opacity: 0.9;
+}
+
+.sidebar-government .brand-text {
+    color: white;
+    margin-left: 0px;
+    font-weight: 700;
+    font-size: 1.1rem;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* Logo */
+.logo-wrapper {
+    width: 75px;
+    height: 75px;
+    border-radius: 50%;
+    padding: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.logo-img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+}
+
+.sidebar-government .nav-link {
+    color: rgba(255, 255, 255, 0.9) !important;
+    padding: 12px 16px;
+    margin-bottom: 8px;
+    border-radius: 12px;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+    backdrop-filter: blur(5px);
+    border: 1px solid transparent;
+    display: flex;
+    align-items: center;
+}
+
+/* Efek kilau saat hover */
+.sidebar-government .nav-link::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        90deg,
+        transparent,
+        rgba(255, 255, 255, 0.2),
+        transparent
+    );
+    transition: left 0.5s ease;
+}
+
+.sidebar-government .nav-link:hover::before {
+    left: 100%;
+}
+
+.sidebar-government .nav-link:hover {
+    background: rgba(255, 255, 255, 0.15);
+    color: white !important;
+    transform: translateX(8px);
+    border-color: rgba(255, 215, 0, 0.5);
+    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
+}
+
+.sidebar-government .nav-link.active {
+    background: linear-gradient(
+        135deg,
+        var(--government-accent) 0%,
+        #ffed4e 100%
+    );
+    color: var(--government-primary) !important;
+    font-weight: 600;
+    border-color: var(--government-accent);
+    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
+}
+
+.sidebar-government .nav-link.active i {
+    color: var(--government-primary) !important;
+}
+
+.sidebar-government .nav-link i {
+    width: 20px;
+    margin-right: 12px;
+    text-align: center;
+    font-size: 1.1rem;
+}
+
+.sidebar-government hr {
+    border-color: rgba(255, 255, 255, 0.3);
+    margin: 20px 0;
+}
+
+.btn-government-logout {
+    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
+    border: none;
+    color: white;
+    padding: 12px 20px;
+    border-radius: 12px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    width: 100%;
+    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
+    cursor: pointer;
+}
+
+.btn-government-logout:hover {
+    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
+    color: white;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
+}
+
+/* Mobile Navbar Styles */
+.mobile-navbar-government {
+    background: linear-gradient(
+        135deg,
+        var(--government-primary) 0%,
+        var(--government-secondary) 100%
+    );
+    color: white;
+    box-shadow: 0 4px 15px rgba(30, 60, 114, 0.3);
+    border-bottom: 3px solid var(--government-accent);
+}
+
+.mobile-navbar-government .navbar-brand {
+    color: white !important;
+    font-weight: 700;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* Nav section headers */
+.nav-section-header {
+    color: var(--government-accent);
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin: 20px 0 10px 0;
+    padding-left: 16px;
+}
+
+/* User info section */
+.user-info {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    padding: 15px;
+    margin-bottom: 20px;
+    text-align: center;
+    backdrop-filter: blur(5px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.user-info .user-name {
+    color: white;
+    font-weight: 600;
+    margin-bottom: 5px;
+}
+
+.user-info .user-role {
+    color: var(--government-accent);
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+/* Responsive Main Content area adjustment */
+.main-content {
+    transition: margin 0.3s ease;
+    padding: 20px;
+}
+
+@media (min-width: 769px) {
+    .main-content {
+        margin-left: 280px;
+    }
+}
+
+@media (max-width: 768px) {
+    .navbar-collapse {
+        background: linear-gradient(
+            135deg,
+            var(--government-primary) 0%,
+            var(--government-secondary) 100%
+        );
+        margin-top: 10px;
+        border-radius: 15px;
+        padding: 20px;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+    }
+}
+
+/* SweetAlert Custom Styles */
+.swal-government-popup {
+    border-radius: 15px !important;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
+    padding: 2rem !important;
+}
+.swal-government-title {
+    color: #1e3c72 !important;
+    font-weight: 600 !important;
+}
+.swal-government-confirm {
+    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 8px !important;
+    padding: 10px 24px !important;
+    margin-left: 10px !important;
+    font-weight: 600 !important;
+}
+.swal-government-cancel {
+    background: #6c757d !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 8px !important;
+    padding: 10px 24px !important;
+    font-weight: 600 !important;
+}
+
+/* ============================= */
+/* MOBILE NAVBAR GOVERNMENT FIX */
+/* ============================= */
+
+.mobile-navbar-government {
+    background: linear-gradient(
+        135deg,
+        var(--government-primary) 0%,
+        var(--government-secondary) 100%
+    );
+    color: white;
+    border-bottom: 3px solid var(--government-accent);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
+}
+
+/* Brand */
+.mobile-navbar-government .navbar-brand {
+    color: white !important;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.mobile-navbar-government .navbar-brand i {
+    color: white !important;
+    font-size: 1.4rem;
+}
+
+/* Hamburger button */
+.mobile-navbar-government .navbar-toggler {
+    border: none;
+    background: rgba(255, 255, 255, 0.15);
+    padding: 6px 10px;
+    border-radius: 8px;
+}
+
+.mobile-navbar-government .navbar-toggler:focus {
+    box-shadow: none;
+}
+
+.mobile-navbar-government .navbar-toggler-icon {
+    filter: brightness(0) invert(1); /* bikin icon putih */
+}
+
+/* Collapse area */
+@media (max-width: 768px) {
+    .mobile-navbar-government .navbar-collapse {
+        background: linear-gradient(
+            180deg,
+            var(--government-primary) 0%,
+            var(--government-secondary) 100%
+        );
+        margin-top: 15px;
+        border-radius: 15px;
+        padding: 20px;
+        border: 1px solid rgba(255, 255, 255, 0.15);
+        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
+    }
+
+    .mobile-navbar-government .nav-link {
+        color: white !important;
+        font-weight: 500;
+        padding: 12px 14px;
+        border-radius: 10px;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+
+    .mobile-navbar-government .nav-link i {
+        color: white !important;
+        font-size: 1.1rem;
+    }
+
+    .mobile-navbar-government .nav-link:hover {
+        background: rgba(255, 255, 255, 0.15);
+    }
+
+    .mobile-navbar-government .nav-link.active {
+        background: linear-gradient(
+            135deg,
+            var(--government-accent) 0%,
+            #ffed4e 100%
+        );
+        color: var(--government-primary) !important;
+        font-weight: 600;
+    }
+
+    .mobile-navbar-government .nav-link.active i {
+        color: var(--government-primary) !important;
+    }
+}
+
+/* User Info */
+.mobile-user-info {
+    text-align: center;
+    padding-bottom: 15px;
+    margin-bottom: 15px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.mobile-user-info .user-name {
+    color: var(--government-accent);
+    font-weight: 600;
+}
+
+.mobile-user-info .user-role {
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 0.8rem;
+}
+
+/* Logout button mobile */
+.mobile-navbar-government .btn-government-logout {
+    width: 100%;
+    margin-top: 10px;
+}
+
+/* =========================
+   PROFIL AKUN - MODERN GOV STYLE
+========================= */
+
+:root {
+    /* Warna Biru Pekat sesuai Gambar */
+    --gov-primary: #1e3c72;
+    --gov-secondary: #4e73df;
+    --gov-blue-dark: #22335c;
+    /* Gradasi sesuai referensi banner */
+    --gov-gradient: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+    --gov-info-gradient: linear-gradient(to left, #4ec9d9 0%, #349faf 100%);
+    --gov-success-gradient: linear-gradient(to left, #1cc88a 0%, #13855c 100%);
+}
+
+body {
+    background-color: #f8f9fc;
+    color: #333;
+}
+
+/* Page Header Custom Style */
+.card-government {
+    background: var(--gov-gradient) !important;
+    border: none;
+    border-radius: 5px !important;
+    padding: 1.5rem !important;
+    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1) !important;
+}
+
+.card-government h1 {
+    font-weight: 600;
+    letter-spacing: 0.5px;
+}
+
+.bg-gradient-primary {
+    background-color: var(--gov-primary) !important;
+    background-image: none !important;
+}
+
+.bg-gradient-info {
+    background: var(--gov-info-gradient) !important;
+}
+
+.bg-gradient-success {
+    background: var(--gov-success-gradient) !important;
+}
+
+/* Card Styling */
+.card {
+    border-radius: 5px !important;
+    border: 1px solid #e3e6f0;
+}
+
+.card-header {
+    border-bottom: 1px solid #e3e6f0;
+    padding: 0.75rem 1.25rem;
+}
+
+.card.shadow {
+    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1) !important;
+}
+
+/* Form & Typography Styling */
+.section-title {
+    color: var(--gov-primary);
+    font-size: 1rem;
+    font-weight: 700 !important;
+    margin-bottom: 0;
+}
+
+.form-label {
+    font-weight: 600;
+    color: #262627;
+    font-size: 0.9rem;
+    margin-bottom: 0.4rem;
+}
+
+.form-control:focus {
+    border: 1px solid #175899 !important;
+    box-shadow: none !important;
+    outline: none !important;
+}
+
+.form-control:focus {
+    border-color: #bac8f3;
+    box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
+}
+
+.input-group-text {
+    background-color: #f8f9fc;
+    border: 1px solid #d1d3e2;
+    color: #6e707e;
+}
+
+.form-text {
+    font-size: 1rem;
+    color: #858796;
+    margin-top: 0.3rem;
+}
+
+/* Image Preview */
+.image-preview img {
+    border: 3px solid #fff;
+    box-shadow: 0 0.15rem 1rem 0 rgba(58, 59, 69, 0.15) !important;
+}
+
+/* Sidebar Information */
+#sidebarAvatar {
+    border: 3px solid #fff;
+}
+
+.list-group-item {
+    border-color: #f1f1f1;
+    padding: 0.75rem 0;
+}
+
+.list-group-item h6 {
+    font-size: 0.85rem;
+    color: #262627;
+}
+
+.list-group-item p {
+    font-size: 0.85rem;
+}
+
+/* Button Icon Split */
+.btn-primary {
+    background-color: #4e73df;
+    border-color: #4e73df;
+}
+
+.btn-icon-split {
+    padding: 0;
+    overflow: hidden;
+    display: inline-flex;
+    align-items: stretch;
+    border-radius: 5px;
+}
+
+.btn-icon-split .icon {
+    background: rgba(0, 0, 0, 0.1);
+    padding: 0.5rem 0.8rem;
+    display: flex;
+    align-items: center;
+}
+
+.btn-icon-split .text {
+    padding: 0.5rem 1rem;
+    font-weight: 600;
+}
+
+/* Alert/Security Tips */
+.alert-info {
+    background-color: #e0f4f9;
+    border-left: 4px solid #36b9cc;
+    border-radius: 5px;
+    color: #2c6e79;
+}

project/public/assets/css/register.css

@@ -0,0 +1,123 @@
+/* Animasi muncul */
+@keyframes fadeSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(40px); /* mulai agak ke bawah */
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0); /* kembali ke posisi normal */
+  }
+}
+
+/* Terapkan ke card login */
+.login-card {
+  background: #fff;
+  padding: 35px;
+  border-radius: 14px;
+  width: 100%;
+  max-width: 580px;
+  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.25);
+  text-align: center;
+
+  /* efek animasi */
+  animation: fadeSlideIn 0.8s ease-out;
+}
+
+/* Background dengan gambar */
+body {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  background: url("../img/hero.jpg") no-repeat center center fixed;
+  background-size: cover;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* Overlay transparan */
+body::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 1;
+}
+
+/* Container utama */
+.login-container {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  padding: 20px;
+}
+
+/* Card register */
+.login-card {
+  background: #fff;
+  padding: 25px;
+  border-radius: 14px;
+  width: 100%;
+  max-width: 700px; /* lebih lebar */
+  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.25);
+  text-align: center;
+}
+
+/* Logo */
+.login-logo {
+  width: 150px;
+  height: auto;
+  margin: 0 auto 20px auto;
+  display: block;
+}
+
+/* Divider */
+.login-divider {
+  width: 80%;
+  margin: 15px auto 30px auto;
+  border: none;
+  border-top: 2px solid #007bff;
+  opacity: 0.7;
+}
+
+/* Judul */
+.login-card h2 {
+  font-size: 22px;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+.login-card p {
+  font-size: 14px;
+  color: #555;
+  margin-bottom: 25px;
+}
+
+/* Input custom */
+.custom-input {
+  border-radius: 8px;
+  padding: 12px;
+  font-size: 15px;
+  margin-bottom: 18px;
+}
+
+/* Tombol utama */
+.btn-primary {
+  width: 100%;
+  padding: 12px;
+  font-size: 15px;
+  font-weight: 600;
+  border-radius: 8px;
+  margin-top: 15px;
+}
+
+/* Link kecil */
+.login-card a {
+  font-size: 14px;
+}

project/public/assets/css/style.css

@@ -0,0 +1,483 @@
+/* Government Theme Colors */
+:root {
+    --government-primary: #1e3c72;
+    --government-secondary: #2a5298;
+    --government-accent: #ffd700;
+    --government-light: #f8f9ff;
+    --government-dark: #163056;
+}
+
+body {
+    background-color: #f4f7f6;
+    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    margin: 0;
+}
+
+.sidebar-government {
+    background: linear-gradient(
+        180deg,
+        var(--government-primary) 0%,
+        var(--government-secondary) 100%
+    );
+    box-shadow: 4px 0 15px rgba(30, 60, 114, 0.2);
+
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+
+    width: 280px;
+    height: 100vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    padding: 20px;
+}
+
+/* Overlay pattern untuk tekstur sidebar */
+.sidebar-government::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M0,0 L100,0 L100,100 L0,100 Z" fill="white" opacity="0.05"/></svg>');
+    opacity: 0.1;
+    pointer-events: none;
+}
+
+.sidebar-government .brand-section {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 15px;
+    padding: 20px;
+    margin-bottom: 20px;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    text-align: left;
+}
+
+.sidebar-government .brand-title {
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.sidebar-government .brand-subtitle {
+    font-size: 16px;
+    opacity: 0.9;
+}
+
+.sidebar-government .brand-text {
+    color: white;
+    margin-left: 0px;
+    font-weight: 600;
+    font-size: 1.1rem;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* Logo */
+.logo-wrapper {
+    width: 75px;
+    height: 75px;
+    border-radius: 50%;
+    padding: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.logo-img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+}
+
+.sidebar-government .nav-link {
+    color: rgba(255, 255, 255, 0.9) !important;
+    padding: 12px 16px;
+    margin-bottom: 8px;
+    border-radius: 12px;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+    backdrop-filter: blur(5px);
+    border: 1px solid transparent;
+    display: flex;
+    align-items: center;
+}
+
+/* Efek kilau saat hover */
+.sidebar-government .nav-link::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        90deg,
+        transparent,
+        rgba(255, 255, 255, 0.2),
+        transparent
+    );
+    transition: left 0.5s ease;
+}
+
+.sidebar-government .nav-link:hover::before {
+    left: 100%;
+}
+
+.sidebar-government .nav-link:hover {
+    background: rgba(255, 255, 255, 0.15);
+    color: white !important;
+    transform: translateX(8px);
+    border-color: rgba(255, 215, 0, 0.5);
+    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
+}
+
+.sidebar-government .nav-link.active {
+    background: linear-gradient(
+        135deg,
+        var(--government-accent) 0%,
+        #ffed4e 100%
+    );
+    color: var(--government-primary) !important;
+    font-weight: 600;
+    border-color: var(--government-accent);
+    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
+}
+
+.sidebar-government .nav-link.active i {
+    color: var(--government-primary) !important;
+}
+
+.sidebar-government .nav-link i {
+    width: 20px;
+    margin-right: 12px;
+    text-align: center;
+    font-size: 1.1rem;
+}
+
+.sidebar-government hr {
+    border-color: rgba(255, 255, 255, 0.3);
+    margin: 20px 0;
+}
+
+.btn-government-logout {
+    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
+    border: none;
+    color: white;
+    padding: 12px 20px;
+    border-radius: 12px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    width: 100%;
+    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
+    cursor: pointer;
+}
+
+.btn-government-logout:hover {
+    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
+    color: white;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
+}
+
+/* Mobile Navbar Styles */
+.mobile-navbar-government {
+    background: linear-gradient(
+        135deg,
+        var(--government-primary) 0%,
+        var(--government-secondary) 100%
+    );
+    color: white;
+    box-shadow: 0 4px 15px rgba(30, 60, 114, 0.3);
+    border-bottom: 3px solid var(--government-accent);
+}
+
+.mobile-navbar-government .navbar-brand {
+    color: white !important;
+    font-weight: 600;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* Nav section headers */
+.nav-section-header {
+    color: var(--government-accent);
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin: 20px 0 10px 0;
+    padding-left: 16px;
+}
+
+/* User info section */
+.user-info {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    padding: 15px;
+    margin-bottom: 20px;
+    text-align: center;
+    backdrop-filter: blur(5px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.user-info .user-name {
+    color: white;
+    font-weight: 600;
+    margin-bottom: 5px;
+}
+
+.user-info .user-role {
+    color: var(--government-accent);
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+/* Responsive Main Content area adjustment */
+.main-content {
+    transition: margin 0.3s ease;
+    padding: 20px;
+}
+
+@media (min-width: 769px) {
+    .main-content {
+        margin-left: 280px;
+    }
+}
+
+@media (max-width: 768px) {
+    .navbar-collapse {
+        background: linear-gradient(
+            135deg,
+            var(--government-primary) 0%,
+            var(--government-secondary) 100%
+        );
+        margin-top: 10px;
+        border-radius: 15px;
+        padding: 20px;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+    }
+}
+
+/* SweetAlert Custom Styles */
+.swal-government-popup {
+    border-radius: 15px !important;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
+    padding: 2rem !important;
+}
+.swal-government-title {
+    color: #1e3c72 !important;
+    font-weight: 600 !important;
+}
+.swal-government-confirm {
+    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 8px !important;
+    padding: 10px 24px !important;
+    margin-left: 10px !important;
+    font-weight: 600 !important;
+}
+.swal-government-cancel {
+    background: #6c757d !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 8px !important;
+    padding: 10px 24px !important;
+    font-weight: 600 !important;
+}
+
+/* ============================= */
+/* MOBILE NAVBAR GOVERNMENT FIX */
+/* ============================= */
+
+.mobile-navbar-government {
+    background: linear-gradient(
+        135deg,
+        var(--government-primary) 0%,
+        var(--government-secondary) 100%
+    );
+    color: white;
+    border-bottom: 3px solid var(--government-accent);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
+}
+
+/* Brand */
+.mobile-navbar-government .navbar-brand {
+    color: white !important;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.mobile-navbar-government .navbar-brand i {
+    color: white !important;
+    font-size: 1.4rem;
+}
+
+/* Hamburger button */
+.mobile-navbar-government .navbar-toggler {
+    border: none;
+    background: rgba(255, 255, 255, 0.15);
+    padding: 6px 10px;
+    border-radius: 8px;
+}
+
+.mobile-navbar-government .navbar-toggler:focus {
+    box-shadow: none;
+}
+
+.mobile-navbar-government .navbar-toggler-icon {
+    filter: brightness(0) invert(1); /* bikin icon putih */
+}
+
+/* Collapse area */
+@media (max-width: 768px) {
+    .mobile-navbar-government .navbar-collapse {
+        background: linear-gradient(
+            180deg,
+            var(--government-primary) 0%,
+            var(--government-secondary) 100%
+        );
+        margin-top: 15px;
+        border-radius: 15px;
+        padding: 20px;
+        border: 1px solid rgba(255, 255, 255, 0.15);
+        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
+    }
+
+    .mobile-navbar-government .nav-link {
+        color: white !important;
+        font-weight: 500;
+        padding: 12px 14px;
+        border-radius: 10px;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+
+    .mobile-navbar-government .nav-link i {
+        color: white !important;
+        font-size: 1.1rem;
+    }
+
+    .mobile-navbar-government .nav-link:hover {
+        background: rgba(255, 255, 255, 0.15);
+    }
+
+    .mobile-navbar-government .nav-link.active {
+        background: linear-gradient(
+            135deg,
+            var(--government-accent) 0%,
+            #ffed4e 100%
+        );
+        color: var(--government-primary) !important;
+        font-weight: 600;
+    }
+
+    .mobile-navbar-government .nav-link.active i {
+        color: var(--government-primary) !important;
+    }
+}
+
+/* User Info */
+.mobile-user-info {
+    text-align: center;
+    padding-bottom: 15px;
+    margin-bottom: 15px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.mobile-user-info .user-name {
+    color: var(--government-accent);
+    font-weight: 600;
+}
+
+.mobile-user-info .user-role {
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 0.8rem;
+}
+
+/* Logout button mobile */
+.mobile-navbar-government .btn-government-logout {
+    width: 100%;
+    margin-top: 10px;
+}
+
+/* =========================
+   DASHBOARD
+========================= */
+
+body {
+    background-color: #f8f9fa;
+}
+
+.card-government {
+    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+    color: white;
+    border: none;
+    box-shadow: 0 8px 25px rgba(30, 60, 114, 0.3);
+}
+
+.card-stats {
+    background: white;
+    border: none;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    transition:
+        transform 0.3s ease,
+        box-shadow 0.3s ease;
+}
+
+.card-stats:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+.text-government-primary {
+    color: #1e3c72 !important;
+}
+
+.text-government-secondary {
+    color: #2a5298 !important;
+}
+
+.bg-government-light {
+    background: linear-gradient(135deg, #f8f9ff 0%, #e8f0ff 100%);
+}
+
+.icon-box {
+    width: 60px;
+    height: 60px;
+    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 24px;
+    margin-bottom: 1rem;
+}
+
+/* Penyesuaian list item agar lebih rapi */
+.list-group-item {
+    transition: background-color 0.2s;
+}
+.list-group-item:hover {
+    background-color: #f8f9ff;
+}
+
+.form-control {
+    border: 1px solid #dee2e6;
+    box-shadow: none;
+}
+
+.form-control:focus {
+    border: 1px solid #175899 !important;
+    box-shadow: none !important;
+    outline: none !important;
+}

project/public/assets/css/tambah kabar.css

@@ -0,0 +1,659 @@
+/* =========================
+   RESET & BASE
+========================= */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+}
+
+body {
+  background: #e4eaf6;
+  display: flex;
+}
+
+/* =========================
+   SIDEBAR
+========================= */
+.sidebar {
+  width: 240px;
+  min-height: 100vh; /* ikut tinggi konten */
+  position: relative; /* BUKAN fixed */
+  background: #1e5cc8;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+}
+
+/* COLLAPSE MODE */
+.sidebar.collapsed {
+  width: 80px;
+}
+
+/* =========================
+   SIDEBAR HEADER
+========================= */
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 20px 20px 20px;
+  margin-bottom: 5px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.logo-desa {
+  width: 55px;
+  height: 55px;
+  object-fit: contain;
+  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
+}
+
+.header-text {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.2;
+}
+
+.desa-title {
+  font-size: 14px;
+  opacity: 0.9;
+}
+
+.desa-name {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+/* Header saat collapse */
+.sidebar.collapsed .header-text {
+  display: none;
+}
+
+.sidebar.collapsed .sidebar-header {
+  justify-content: center;
+}
+
+/* =========================
+   SIDEBAR MENU (SCROLLABLE)
+========================= */
+.sidebar-menu {
+  list-style: none;
+  overflow: visible; /* SEMUA MENU TERLIHAT */
+}
+
+/* Scrollbar */
+.sidebar-menu::-webkit-scrollbar {
+  width: 6px;
+}
+
+.sidebar-menu::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 10px;
+}
+
+/* Section title */
+.menu-section {
+  margin-top: 7px;
+  padding: 10px 20px;
+  font-size: 11px;
+  font-weight: 700;
+  opacity: 0.6;
+}
+
+/* Menu item */
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 20px;
+  font-size: 14px;
+  color: #fff;
+  text-decoration: none;
+  opacity: 0.9;
+  border-left: 3px solid transparent;
+  transition: 0.2s ease;
+}
+
+.menu-item i {
+  font-size: 18px;
+}
+
+.menu-item:hover {
+  background: rgba(255, 255, 255, 0.2);
+  opacity: 1;
+}
+
+.menu-item.active {
+  background: rgba(255, 255, 255, 0.25);
+  border-left-color: #fff;
+  opacity: 1;
+  font-weight: 600; /* BOLD saat aktif */
+}
+
+/* Menu saat collapse */
+.sidebar.collapsed .menu-item span,
+.sidebar.collapsed .menu-section {
+  display: none;
+}
+
+.sidebar.collapsed .menu-item {
+  justify-content: center;
+}
+
+/* =========================
+   LOGOUT BUTTON
+========================= */
+.sidebar-logout {
+  padding: 35px 20px;
+  font-weight: 600;
+}
+
+.logout-btn {
+  display: flex;
+  align-items: center; /* center vertikal */
+  justify-content: center; /* center horizontal */
+  gap: 12px;
+  padding: 12px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.15);
+  color: #fff;
+  font-size: 15px;
+  text-decoration: none;
+  transition: 0.3s ease;
+}
+
+.logout-btn:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.sidebar.collapsed .logout-btn span {
+  display: none;
+}
+
+.sidebar.collapsed .logout-btn {
+  justify-content: center;
+}
+
+/* =========================
+   TOGGLE BUTTON
+========================= */
+.sidebar-toggle {
+  position: relative;
+  bottom: 15px;
+  margin: 20px auto;
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: 0.3s ease;
+}
+
+.sidebar-toggle:hover {
+  background: rgba(255, 255, 255, 0.35);
+}
+
+.main {
+  padding: 25px;
+  width: calc(100% - 240px);
+  background: var(--bg-soft);
+}
+
+.sidebar.collapsed ~ .main {
+  width: calc(100% - 80px);
+}
+
+/* =========================
+   MAIN CONTENT LAYOUT
+========================= */
+.main {
+  flex: 1;
+  padding: 30px;
+  overflow-y: auto;
+}
+
+/* =========================
+   HEADER BANNER
+========================= */
+.header-banner {
+  background: #1e5cc8;
+  color: #fff;
+  padding: 20px 40px;
+  border-radius: 12px;
+  margin-bottom: 30px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.header-banner h1 {
+  font-size: 24px;
+  font-weight: 700;
+  margin-bottom: 5px;
+}
+
+.header-banner p {
+  font-size: 14px;
+  opacity: 0.8;
+}
+
+.header-banner {
+  display: flex;
+  justify-content: space-between; /* kiri & kanan */
+  align-items: center;
+  background: #1e5cc8;
+  color: #fff;
+  padding: 20px 30px;
+  border-radius: 12px;
+  margin-bottom: 30px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.header-banner h1 {
+  font-size: 24px;
+  font-weight: 700;
+  margin-bottom: 5px;
+}
+
+.header-banner p {
+  font-size: 14px;
+  opacity: 0.8;
+}
+
+/* Tombol Kembali */
+.btn-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 18px;
+  background: #f1f5f9;
+  color: #1e5cc8;
+  font-weight: 600;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: 0.2s ease;
+}
+
+.btn-back i {
+  font-size: 16px;
+}
+
+.btn-back:hover {
+  background: #e2e8f0;
+}
+
+/* =========================
+   FORM CONTAINER
+========================= */
+.form-container {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+}
+
+.form-header {
+  background: #f8faff;
+  padding: 15px 25px;
+  border-bottom: 1px solid #edf2f7;
+  font-weight: 600;
+  color: #2156c9;
+  font-size: 16px;
+}
+
+.kabar-form {
+  padding: 25px;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-group label {
+  display: block;
+  font-size: 14px;
+  font-weight: 550;
+  color: #4a5568;
+  margin-bottom: 8px;
+}
+
+.form-group input[type="text"],
+.form-group input[type="date"],
+.form-group textarea {
+  width: 100%;
+  padding: 12px 15px;
+  border: 1px solid #cacdd2;
+  border-radius: 6px;
+  font-size: 14px;
+  color: #2d3748;
+  transition: all 0.2s;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: #2563eb;
+  box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.15);
+}
+
+.form-group label i {
+  margin-right: 6px;
+  color: #2563eb;
+  font-size: 14px;
+}
+
+.form-header i {
+  margin-right: 6px;
+  color: #2563eb;
+}
+
+.upload-title i {
+  margin-right: 6px;
+  color: #2563eb;
+}
+
+.form-actions button i {
+  margin-right: 6px;
+}
+
+/* =========================
+   UPLOAD AREA (DASHED)
+========================= */
+.upload-area {
+  border: 2px dashed #cbd5e0;
+  border-radius: 8px;
+  padding: 30px;
+  text-align: center;
+  background: #fcfdfe;
+}
+
+.upload-title {
+  font-weight: 600;
+  color: #2d3748;
+  margin-bottom: 5px;
+}
+
+.upload-subtitle {
+  font-size: 12px;
+  color: #718096;
+  margin-bottom: 20px;
+}
+
+.file-input {
+  display: none;
+}
+
+.file-custom-input {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  max-width: 80%;
+  margin: 0 auto;
+}
+
+.file-custom-input button {
+  background: #f1f5f9;
+  border: 1px solid #cbd5e0;
+  padding: 8px 15px;
+  border-radius: 4px;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+#file-name {
+  font-size: 13px;
+  color: #718096;
+}
+
+/* =========================
+   BUTTONS
+========================= */
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 30px;
+}
+
+.btn-secondary {
+  background: #ef4444;
+  color: #ffffff;
+  border: 1px solid #cbd5e0;
+  padding: 10px 26px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: 0.2s ease;
+}
+
+.btn-secondary:hover {
+  background: #f7fafc;
+}
+
+.btn-primary {
+  background: #1e5cc8;
+  color: #fff;
+  border: none;
+  padding: 10px 25px;
+  border-radius: 6px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: 0.2s;
+}
+
+.btn-primary:hover {
+  background: #16469d;
+  box-shadow: 0 4px 10px rgba(30, 92, 200, 0.3);
+}
+
+/* ====================
+   MOBILE RESPONSIVE 
+===================== */
+
+/* ===== GENERAL ===== */
+@media (max-width: 992px) {
+  body {
+    display: block;
+  }
+
+  /* ===== SIDEBAR MOBILE ===== */
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: -260px;
+    height: 100vh;
+    z-index: 1200;
+    transition: left 0.3s ease;
+  }
+
+  .sidebar.active {
+    left: 0;
+  }
+
+  /* MAIN FULL WIDTH */
+  .main {
+    width: 100% !important;
+    padding: 18px;
+  }
+
+  .sidebar.collapsed ~ .main {
+    width: 100% !important;
+  }
+
+  /* SEMBUNYIKAN TOGGLE DESKTOP */
+  .sidebar-toggle {
+    display: none;
+  }
+}
+
+/* ===== MOBILE TOGGLE BUTTON ===== */
+.mobile-toggle {
+  display: none;
+  position: fixed;
+  top: 16px;
+  left: 16px;
+  z-index: 1300;
+  background: #1e5cc8;
+  color: #fff;
+  border: none;
+  padding: 10px 14px;
+  font-size: 22px;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+@media (max-width: 992px) {
+  .mobile-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+/* ===== HEADER BANNER MOBILE ===== */
+@media (max-width: 768px) {
+  .header-banner {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 14px;
+    padding: 20px;
+  }
+
+  .header-banner h1 {
+    font-size: 20px;
+  }
+
+  .header-banner p {
+    font-size: 13px;
+  }
+
+  .header-right {
+    width: 100%;
+  }
+
+  .btn-back {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+/* ===== FORM MOBILE ===== */
+@media (max-width: 768px) {
+  .form-container {
+    border-radius: 6px;
+  }
+
+  .kabar-form {
+    padding: 18px;
+  }
+
+  .form-group label {
+    font-size: 13px;
+  }
+
+  .form-group input,
+  .form-group textarea {
+    font-size: 13px;
+    padding: 10px 12px;
+  }
+
+  .upload-area {
+    padding: 20px;
+  }
+
+  .file-custom-input {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .file-custom-input button {
+    width: 100%;
+  }
+}
+
+/* ===== FORM ACTIONS MOBILE ===== */
+@media (max-width: 576px) {
+  .form-actions {
+    flex-direction: column-reverse;
+    gap: 10px;
+  }
+
+  .form-actions button {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+/* ==============================
+   HAMBURGER MOBILE
+============================== */
+.mobile-hamburger {
+  display: none;
+}
+
+/* MOBILE MODE */
+@media (max-width: 768px) {
+  .mobile-hamburger {
+    display: flex;
+    position: fixed;
+    top: 16px;
+    right: 16px;
+    z-index: 1200;
+    width: 44px;
+    height: 44px;
+    background: #1e5cc8;
+    color: #fff;
+    border-radius: 10px;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+  }
+
+  /* Sidebar jadi drawer */
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: -240px;
+    height: 100vh;
+    z-index: 1000;
+    transition: left 0.3s ease;
+  }
+
+  .sidebar.show {
+    left: 0;
+  }
+
+  /* PAKSA TEKS MUNCUL */
+  .sidebar.show .menu-item span,
+  .sidebar.show .menu-section,
+  .sidebar.show .header-text,
+  .sidebar.show .logout-btn span {
+    display: block !important;
+  }
+
+  .sidebar.show .menu-item {
+    justify-content: flex-start;
+  }
+
+  /* Main full */
+  .main {
+    width: 100%;
+    padding: 16px;
+  }
+}
+
+/* ==============================
+   HIDE DESKTOP TOGGLE ON MOBILE
+============================== */
+@media (max-width: 768px) {
+  .sidebar-toggle {
+    display: none !important;
+  }
+}

project/public/assets/css/template surat.css

@@ -0,0 +1,762 @@
+/* Government Theme Colors */
+:root {
+    --government-primary: #1e3c72;
+    --government-secondary: #2a5298;
+    --government-accent: #ffd700;
+    --government-light: #f8f9ff;
+    --government-dark: #163056;
+}
+
+body {
+    background-color: #f4f7f6;
+    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    margin: 0;
+}
+
+.sidebar-government {
+    background: linear-gradient(
+        180deg,
+        var(--government-primary) 0%,
+        var(--government-secondary) 100%
+    );
+    box-shadow: 4px 0 15px rgba(30, 60, 114, 0.2);
+
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+
+    width: 280px;
+    height: 100vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    padding: 20px;
+}
+
+/* Overlay pattern untuk tekstur sidebar */
+.sidebar-government::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M0,0 L100,0 L100,100 L0,100 Z" fill="white" opacity="0.05"/></svg>');
+    opacity: 0.1;
+    pointer-events: none;
+}
+
+.sidebar-government .brand-section {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 15px;
+    padding: 20px;
+    margin-bottom: 20px;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    text-align: left;
+}
+
+.sidebar-government .brand-title {
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.sidebar-government .brand-subtitle {
+    font-size: 16px;
+    opacity: 0.9;
+}
+
+.sidebar-government .brand-text {
+    color: white;
+    margin-left: 0px;
+    font-weight: 700;
+    font-size: 1.1rem;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* Logo */
+.logo-wrapper {
+    width: 75px;
+    height: 75px;
+    border-radius: 50%;
+    padding: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.logo-img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+}
+
+.sidebar-government .nav-link {
+    color: rgba(255, 255, 255, 0.9) !important;
+    padding: 12px 16px;
+    margin-bottom: 8px;
+    border-radius: 12px;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+    backdrop-filter: blur(5px);
+    border: 1px solid transparent;
+    display: flex;
+    align-items: center;
+}
+
+/* Efek kilau saat hover */
+.sidebar-government .nav-link::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        90deg,
+        transparent,
+        rgba(255, 255, 255, 0.2),
+        transparent
+    );
+    transition: left 0.5s ease;
+}
+
+.sidebar-government .nav-link:hover::before {
+    left: 100%;
+}
+
+.sidebar-government .nav-link:hover {
+    background: rgba(255, 255, 255, 0.15);
+    color: white !important;
+    transform: translateX(8px);
+    border-color: rgba(255, 215, 0, 0.5);
+    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
+}
+
+.sidebar-government .nav-link.active {
+    background: linear-gradient(
+        135deg,
+        var(--government-accent) 0%,
+        #ffed4e 100%
+    );
+    color: var(--government-primary) !important;
+    font-weight: 600;
+    border-color: var(--government-accent);
+    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
+}
+
+.sidebar-government .nav-link.active i {
+    color: var(--government-primary) !important;
+}
+
+.sidebar-government .nav-link i {
+    width: 20px;
+    margin-right: 12px;
+    text-align: center;
+    font-size: 1.1rem;
+}
+
+.sidebar-government hr {
+    border-color: rgba(255, 255, 255, 0.3);
+    margin: 20px 0;
+}
+
+.btn-government-logout {
+    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
+    border: none;
+    color: white;
+    padding: 12px 20px;
+    border-radius: 12px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    width: 100%;
+    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
+    cursor: pointer;
+}
+
+.btn-government-logout:hover {
+    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
+    color: white;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
+}
+
+/* Mobile Navbar Styles */
+.mobile-navbar-government {
+    background: linear-gradient(
+        135deg,
+        var(--government-primary) 0%,
+        var(--government-secondary) 100%
+    );
+    color: white;
+    box-shadow: 0 4px 15px rgba(30, 60, 114, 0.3);
+    border-bottom: 3px solid var(--government-accent);
+}
+
+.mobile-navbar-government .navbar-brand {
+    color: white !important;
+    font-weight: 700;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* Nav section headers */
+.nav-section-header {
+    color: var(--government-accent);
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin: 20px 0 10px 0;
+    padding-left: 16px;
+}
+
+/* User info section */
+.user-info {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    padding: 15px;
+    margin-bottom: 20px;
+    text-align: center;
+    backdrop-filter: blur(5px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.user-info .user-name {
+    color: white;
+    font-weight: 600;
+    margin-bottom: 5px;
+}
+
+.user-info .user-role {
+    color: var(--government-accent);
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+/* Responsive Main Content area adjustment */
+.main-content {
+    transition: margin 0.3s ease;
+    padding: 20px;
+}
+
+@media (min-width: 769px) {
+    .main-content {
+        margin-left: 280px;
+    }
+}
+
+@media (max-width: 768px) {
+    .navbar-collapse {
+        background: linear-gradient(
+            135deg,
+            var(--government-primary) 0%,
+            var(--government-secondary) 100%
+        );
+        margin-top: 10px;
+        border-radius: 15px;
+        padding: 20px;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+    }
+}
+
+/* SweetAlert Custom Styles */
+.swal-government-popup {
+    border-radius: 15px !important;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
+    padding: 2rem !important;
+}
+.swal-government-title {
+    color: #1e3c72 !important;
+    font-weight: 600 !important;
+}
+.swal-government-confirm {
+    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 8px !important;
+    padding: 10px 24px !important;
+    margin-left: 10px !important;
+    font-weight: 600 !important;
+}
+.swal-government-cancel {
+    background: #6c757d !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 8px !important;
+    padding: 10px 24px !important;
+    font-weight: 600 !important;
+}
+
+/* ============================= */
+/* MOBILE NAVBAR GOVERNMENT FIX */
+/* ============================= */
+
+.mobile-navbar-government {
+    background: linear-gradient(
+        135deg,
+        var(--government-primary) 0%,
+        var(--government-secondary) 100%
+    );
+    color: white;
+    border-bottom: 3px solid var(--government-accent);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
+}
+
+/* Brand */
+.mobile-navbar-government .navbar-brand {
+    color: white !important;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.mobile-navbar-government .navbar-brand i {
+    color: white !important;
+    font-size: 1.4rem;
+}
+
+/* Hamburger button */
+.mobile-navbar-government .navbar-toggler {
+    border: none;
+    background: rgba(255, 255, 255, 0.15);
+    padding: 6px 10px;
+    border-radius: 8px;
+}
+
+.mobile-navbar-government .navbar-toggler:focus {
+    box-shadow: none;
+}
+
+.mobile-navbar-government .navbar-toggler-icon {
+    filter: brightness(0) invert(1); /* bikin icon putih */
+}
+
+/* Collapse area */
+@media (max-width: 768px) {
+    .mobile-navbar-government .navbar-collapse {
+        background: linear-gradient(
+            180deg,
+            var(--government-primary) 0%,
+            var(--government-secondary) 100%
+        );
+        margin-top: 15px;
+        border-radius: 15px;
+        padding: 20px;
+        border: 1px solid rgba(255, 255, 255, 0.15);
+        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
+    }
+
+    .mobile-navbar-government .nav-link {
+        color: white !important;
+        font-weight: 500;
+        padding: 12px 14px;
+        border-radius: 10px;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+
+    .mobile-navbar-government .nav-link i {
+        color: white !important;
+        font-size: 1.1rem;
+    }
+
+    .mobile-navbar-government .nav-link:hover {
+        background: rgba(255, 255, 255, 0.15);
+    }
+
+    .mobile-navbar-government .nav-link.active {
+        background: linear-gradient(
+            135deg,
+            var(--government-accent) 0%,
+            #ffed4e 100%
+        );
+        color: var(--government-primary) !important;
+        font-weight: 600;
+    }
+
+    .mobile-navbar-government .nav-link.active i {
+        color: var(--government-primary) !important;
+    }
+}
+
+/* User Info */
+.mobile-user-info {
+    text-align: center;
+    padding-bottom: 15px;
+    margin-bottom: 15px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.mobile-user-info .user-name {
+    color: var(--government-accent);
+    font-weight: 600;
+}
+
+.mobile-user-info .user-role {
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 0.8rem;
+}
+
+/* Logout button mobile */
+.mobile-navbar-government .btn-government-logout {
+    width: 100%;
+    margin-top: 10px;
+}
+
+/* =========================
+   TEMPLATE SURAT
+========================= */
+body {
+    background-color: #f8f9fc;
+}
+
+.card-government {
+    background: linear-gradient(90deg, #1e3a8a 0%, #3b5998 100%);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    box-shadow: 0 4px 15px rgba(30, 60, 114, 0.2);
+}
+
+.card-government h1 {
+    color: white !important;
+    font-weight: 600;
+}
+
+.card-government p {
+    color: rgba(255, 255, 255, 0.8) !important;
+}
+
+.bg-gradient-primary {
+    background: linear-gradient(90deg, #1e3a8a 0%, #3b5998 100%);
+}
+
+.card {
+    border: none;
+    border-radius: 4px;
+}
+
+.card-header {
+    border-top-left-radius: 4px !important;
+    border-top-right-radius: 4px !important;
+    padding: 1rem 1.25rem;
+}
+
+.card.shadow {
+    border: none;
+    border-radius: 4px;
+    overflow: hidden;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
+}
+
+.card-header.bg-gradient-primary {
+    background: linear-gradient(90deg, #1e3a8a 0%, #3b5998 100%) !important;
+    padding: 15px 20px;
+    border-bottom: none;
+}
+
+/* Styling Judul di dalam Header */
+.card-header h5 {
+    font-size: 1.1rem;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    display: flex;
+    align-items: center;
+}
+
+/* Styling Ikon (Bootstrap Icons) */
+.card-header h5 i {
+    font-size: 1.3rem;
+    opacity: 0.9;
+}
+
+/* Penyesuaian Body Card */
+.card-body {
+    padding: 1.5rem;
+    background-color: #ffffff;
+}
+
+/* Efek Hover untuk baris tabel di dalam card agar lebih interaktif */
+.table-hover tbody tr:hover {
+    background-color: #f8faff;
+    transition: background-color 0.2s ease;
+}
+
+/* Table Styling */
+.table-government thead th {
+    background-color: #f8f9fc;
+    font-size: 1rem;
+    letter-spacing: 0.5px;
+    font-weight: 600;
+    color: #071e69;
+    border-bottom: 2px solid #e3e6f0;
+}
+
+.table-government tbody tr {
+    transition: all 0.2s;
+}
+
+.table-government tbody tr:hover {
+    background-color: rgba(78, 115, 223, 0.05);
+}
+
+.badge {
+    font-weight: 600;
+    padding: 0.5em 0.8em;
+}
+
+code {
+    color: #e83e8c;
+    word-wrap: break-word;
+}
+
+/* Button Styling */
+.btn-icon-split {
+    padding: 0;
+    overflow: hidden;
+    display: inline-flex;
+    align-items: stretch;
+    justify-content: center;
+}
+
+.btn-icon-split .icon {
+    background: rgba(0, 0, 0, 0.15);
+    padding: 0.375rem 0.75rem;
+}
+
+.btn-icon-split .text {
+    padding: 0.375rem 0.75rem;
+}
+
+.dataTables_wrapper .dataTables_paginate .paginate_button.current {
+    background: #4e73df !important;
+    color: white !important;
+    border: 1px solid #4e73df !important;
+}
+
+.dataTables_wrapper .row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.dataTables_length {
+    margin-bottom: 0;
+}
+
+.dataTables_filter {
+    text-align: right;
+}
+
+.dataTables_filter label {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 10px;
+}
+
+.dataTables_length label {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.dataTables_length select,
+.dataTables_filter input {
+    display: inline-block;
+    width: auto;
+    margin: 0;
+}
+
+/* =========================
+  TAMBAH TEMPLATE SURAT
+========================= */
+.main-content {
+    flex-grow: 1;
+    padding: 20px;
+}
+
+.header-title-box {
+    background: linear-gradient(90deg, #1e3a8a 0%, #3b5998 100%);
+    color: white;
+    padding: 20px;
+    border-radius: 4px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 25px;
+}
+
+.card {
+    border: none;
+    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
+    margin-bottom: 20px;
+}
+
+.card-header {
+    background-color: #f8f9fc;
+    border-bottom: 1px solid #e3e6f0;
+    font-weight: bold;
+    color: linear-gradient(90deg, #1e3a8a 0%, #3b5998 100%);
+}
+
+.form-label {
+    font-weight: 600;
+    font-size: 0.9rem;
+    color: #3a3b45;
+}
+
+/* Fokus input & textarea */
+.form-control:focus {
+    border-color: #1e3c72 !important; /* biru tua */
+    box-shadow: 0 0 0 0.1rem rgba(30, 60, 114, 0.2) !important; /* tipis */
+    outline: none;
+}
+
+/* Input group juga ikut rapi */
+.input-group:focus-within {
+    border-radius: 6px;
+    box-shadow: 0 0 0 0.1rem rgba(30, 60, 114, 0.2);
+}
+
+/* Biar border tidak dobel */
+.input-group .form-control {
+    border-left: none;
+}
+
+/* Optional: hilangkan shadow terlalu tebal */
+.input-group.shadow-sm {
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
+}
+
+.input-group-text {
+    background-color: #f8f9fc;
+}
+
+/* --- BUILDER AREA --- */
+.builder-container {
+    border: 2px dashed #d1d3e2;
+    border-radius: 4px;
+    background: #fbfcfe;
+    min-height: 250px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #858796;
+}
+
+.btn-group-tools .btn {
+    font-size: 0.85rem;
+    padding: 8px 15px;
+}
+
+.placeholder-box {
+    background-color: #e3f2fd;
+    border: 1px solid #bbdefb;
+    padding: 15px;
+    border-radius: 4px;
+}
+
+code {
+    color: #e83e8c;
+    background: #f8f9fc;
+    padding: 2px 4px;
+    border-radius: 4px;
+}
+
+.btn-light.text-white {
+    background-color: #6c757d;
+    border-color: #6c757d;
+    color: #ffffff;
+}
+
+.btn-light.text-white:hover {
+    background-color: #5a6268;
+    border-color: #545b62;
+}
+
+/* =========================
+  ELEMEN TAMBAH TEMPLATE SURAT
+========================= */
+body {
+    background-color: #f8f9fc;
+    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+
+.bg-gradient-primary {
+    background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
+}
+
+.card {
+    border: none;
+    border-radius: 5px;
+}
+
+.template-builder .card-header {
+    border-top-left-radius: 5px !important;
+    border-top-right-radius: 5px !important;
+}
+
+/* Template Preview Area */
+.template-preview {
+    border: 2px dashed #e3e6f0;
+    border-radius: 8px;
+    padding: 15px;
+    background-color: #fff;
+    min-height: 300px;
+}
+
+.builder-element {
+    position: relative;
+    background: #fff;
+    border: 1px solid #e3e6f0;
+    padding: 12px;
+    margin-bottom: 10px;
+    border-radius: 6px;
+    cursor: move;
+    transition: all 0.2s;
+}
+
+.builder-element:hover {
+    border-color: #4e73df;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+}
+
+.builder-element.active {
+    background-color: rgba(78, 115, 223, 0.02);
+}
+
+.element-badge {
+    position: absolute;
+    top: -10px;
+    right: 10px;
+    font-size: 10px;
+    text-transform: uppercase;
+}
+
+/* Animation */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.new-element {
+    animation: fadeIn 0.3s ease-out;
+}
+
+.empty-state {
+    color: #b7b9cc;
+}