<?php
session_start();

$karya = [
    [
        "judul" => "Website Sekolah",
        "deskripsi" => "Website sekolah modern menggunakan PHP dan CSS animation."
    ],
    [
        "judul" => "Aplikasi Kasir",
        "deskripsi" => "Aplikasi kasir sederhana dan aman untuk PHP 8.2."
    ],
    [
        "judul" => "Desain Jaringan",
        "deskripsi" => "Simulasi jaringan komputer untuk pembelajaran TKJ."
    ]
];
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Karya TKJ</title>

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
            font-family:Arial, sans-serif;
        }

        body{
            background:linear-gradient(135deg,#020617,#0f172a,#1e293b);
            color:white;
            min-height:100vh;
            overflow-x:hidden;
        }

        .navbar{
            width:100%;
            padding:20px;
            display:flex;
            justify-content:space-between;
            align-items:center;
            background:rgba(255,255,255,0.08);
            backdrop-filter:blur(10px);
            position:sticky;
            top:0;
            z-index:1000;
        }

        .navbar a{
            text-decoration:none;
            color:white;
            margin-left:20px;
            transition:0.3s;
            font-weight:bold;
        }

        .navbar a:hover{
            color:cyan;
        }

        .container{
            width:90%;
            margin:auto;
            padding:50px 0;
        }

        .title{
            text-align:center;
            margin-bottom:50px;
            animation:fadeDown 1s ease;
        }

        .cards{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
            gap:30px;
        }

        .card{
            background:rgba(255,255,255,0.08);
            border-radius:20px;
            padding:30px;
            transition:0.4s;
            backdrop-filter:blur(8px);
            animation:fadeUp 1s ease;
        }

        .card:hover{
            transform:translateY(-10px) scale(1.03);
            box-shadow:0 0 25px cyan;
        }

        .card h3{
            margin-bottom:15px;
            color:cyan;
        }

        .btn{
            display:inline-block;
            margin-top:20px;
            padding:12px 25px;
            background:cyan;
            color:black;
            border-radius:40px;
            text-decoration:none;
            font-weight:bold;
            transition:0.4s;
        }

        .btn:hover{
            transform:scale(1.1);
            box-shadow:0 0 20px cyan;
        }

        @keyframes fadeUp{
            from{
                opacity:0;
                transform:translateY(50px);
            }
            to{
                opacity:1;
                transform:translateY(0);
            }
        }

        @keyframes fadeDown{
            from{
                opacity:0;
                transform:translateY(-50px);
            }
            to{
                opacity:1;
                transform:translateY(0);
            }
        }
    </style>
</head>
<body>

<div class="navbar">
    <h2>TKJ PROJECT</h2>

    <div>
        <a href="index.php">Home</a>
        <a href="karya.php">Karya</a>
    </div>
</div>

<div class="container">

    <div class="title">
        <h1>Kumpulan Karya TKJ</h1>
        <p>Project modern dengan PHP 8.2 dan animasi aesthetic.</p>
    </div>

    <div class="cards">

        <?php foreach($karya as $item): ?>

            <div class="card">
                <h3><?= htmlspecialchars($item['judul']) ?></h3>
                <p><?= htmlspecialchars($item['deskripsi']) ?></p>
                <a href="index.php" class="btn">Kembali</a>
            </div>

        <?php endforeach; ?>

    </div>

</div>

</body>
</html>