<!DOCTYPE html>
<html lang="id" class="scroll-smooth">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Otomotif SMKN 1 Cirebon | Professional Excellence in Motion</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --bg-dark: #070709;
            --bg-card: #0f0f13;
            --bg-card-hover: #16161d;
            --primary: #f59e0b; /* Bright amber */
            --primary-glow: rgba(245, 158, 11, 0.45);
            --primary-border: rgba(245, 158, 11, 0.15);
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
            --font-outfit: 'Outfit', sans-serif;
            --font-inter: 'Inter', sans-serif;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-inter);
            background-color: var(--bg-dark);
            color: var(--text-main);
            line-height: 1.6;
            overflow-x: hidden;
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(245, 158, 11, 0.05) 0%, transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(245, 158, 11, 0.05) 0%, transparent 40%);
        }

        /* Typography Customizations */
        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-outfit);
            letter-spacing: -0.02em;
        }

        .gradient-text {
            background: linear-gradient(135deg, #ffffff 30%, var(--primary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .gradient-text-gold {
            background: linear-gradient(135deg, var(--primary) 0%, #fbbf24 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Premium Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: var(--bg-dark);
        }
        ::-webkit-scrollbar-thumb {
            background: #1e1e24;
            border-radius: 4px;
            border: 2px solid var(--bg-dark);
        }
        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary);
        }

        /* Container & Utilities */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 24px;
        }

        .section-padding {
            padding: 100px 0;
        }

        .section-header {
            text-align: center;
            margin-bottom: 60px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

        .section-title {
            font-size: 2.75rem;
            font-weight: 800;
            margin-bottom: 16px;
            position: relative;
            display: inline-block;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background: var(--primary);
            border-radius: 2px;
            box-shadow: 0 0 8px var(--primary-glow);
        }

        .section-subtitle {
            color: var(--text-muted);
            font-size: 1.05rem;
            font-weight: 400;
            margin-top: 10px;
        }

        /* Modern Glass Buttons */
        .btn-premium {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 14px 28px;
            background: linear-gradient(135deg, var(--primary) 0%, #d97706 100%);
            color: #000000;
            font-family: var(--font-outfit);
            font-weight: 700;
            text-decoration: none;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(245, 158, 11, 0.25);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .btn-premium:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(245, 158, 11, 0.45);
            filter: brightness(1.1);
        }

        .btn-secondary {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 14px 28px;
            background: rgba(255, 255, 255, 0.03);
            color: var(--text-main);
            font-family: var(--font-outfit);
            font-weight: 600;
            text-decoration: none;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: var(--primary-border);
            color: #ffffff;
            transform: translateY(-2px);
        }

        /* Gorgeous Navbar */
        nav {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            padding: 20px 0;
            background: rgba(7, 7, 9, 0.7);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.3s ease;
        }

        nav.scrolled {
            padding: 12px 0;
            background: rgba(7, 7, 9, 0.95);
            border-bottom: 1px solid rgba(245, 158, 11, 0.15);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
        }

        .nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            color: #ffffff;
        }

        .logo-img {
            width: 42px;
            height: 42px;
            object-fit: contain;
            filter: drop-shadow(0 0 5px var(--primary-glow));
        }

        .logo-text {
            font-family: var(--font-outfit);
            font-weight: 800;
            font-size: 1.35rem;
            letter-spacing: 0.5px;
            background: linear-gradient(135deg, #ffffff 40%, var(--primary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 32px;
        }

        .nav-links a {
            font-family: var(--font-inter);
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--text-muted);
            text-decoration: none;
            transition: all 0.2s ease;
            position: relative;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--primary);
            transition: width 0.3s ease;
            box-shadow: 0 0 6px var(--primary-glow);
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        .nav-links a:hover {
            color: #ffffff;
        }

        /* Floating Portals Dropdown */
        .portal-btn {
            background: rgba(245, 158, 11, 0.1);
            border: 1px solid var(--primary-border);
            color: var(--primary);
            padding: 8px 18px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.85rem;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s;
            cursor: pointer;
        }

        .portal-btn:hover {
            background: var(--primary);
            color: #000000;
            box-shadow: 0 0 15px var(--primary-glow);
            transform: translateY(-1px);
        }

        .menu-toggle {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
        }

        .menu-toggle span {
            width: 25px;
            height: 2px;
            background-color: #ffffff;
            transition: all 0.3s ease;
        }

        /* Hero Section */
        .hero {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding-top: 120px;
            padding-bottom: 80px;
            overflow: hidden;
            background-image: 
                linear-gradient(to right, rgba(7, 7, 9, 0.95) 45%, rgba(7, 7, 9, 0.6) 100%),
                url("img/awalan.jpeg");
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 20% 50%, rgba(245, 158, 11, 0.1) 0%, transparent 60%);
            pointer-events: none;
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1.2fr 0.8fr;
            gap: 40px;
            align-items: center;
        }

        .hero-content {
            z-index: 5;
            animation: slideInLeft 1s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(245, 158, 11, 0.08);
            border: 1px solid var(--primary-border);
            padding: 8px 16px;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--primary);
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 24px;
            box-shadow: 0 0 15px rgba(245, 158, 11, 0.05);
        }

        .hero h1 {
            font-size: 4.25rem;
            font-weight: 900;
            line-height: 1.1;
            margin-bottom: 20px;
        }

        .hero p {
            font-size: 1.15rem;
            color: var(--text-muted);
            margin-bottom: 36px;
            max-width: 620px;
            line-height: 1.7;
        }

        .hero-actions {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
        }

        /* Floating Portals Quick Menu card in Hero */
        .hero-portal-card {
            background: rgba(15, 15, 19, 0.75);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-top: 3px solid var(--primary);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
            z-index: 10;
            animation: slideInRight 1.2s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .portal-title-box {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 20px;
        }

        .portal-title-box i {
            color: var(--primary);
            font-size: 1.4rem;
        }

        .portal-title-box h3 {
            font-size: 1.2rem;
            font-weight: 700;
        }

        .portal-links-stack {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .portal-item-link {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 20px;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 12px;
            text-decoration: none;
            color: #ffffff;
            font-weight: 600;
            font-size: 0.95rem;
            transition: all 0.3s;
        }

        .portal-item-link i {
            font-size: 0.9rem;
            transition: transform 0.3s;
        }

        .portal-item-link.admin-link:hover {
            background: rgba(239, 68, 68, 0.08);
            border-color: rgba(239, 68, 68, 0.3);
            color: #f87171;
        }
        .portal-item-link.petugas-link:hover {
            background: rgba(157, 78, 221, 0.08);
            border-color: rgba(157, 78, 221, 0.3);
            color: #c77dff;
        }
        .portal-item-link.alumni-link:hover {
            background: rgba(16, 185, 129, 0.08);
            border-color: rgba(16, 185, 129, 0.3);
            color: #34d399;
        }

        .portal-item-link:hover i {
            transform: translateX(5px);
        }

        /* Announcements Ticker Banner */
        .announcement-ticker {
            background: linear-gradient(90deg, #0e0d12 0%, #17161f 50%, #0e0d12 100%);
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            border-bottom: 1px solid var(--primary-border);
            padding: 16px 0;
            overflow: hidden;
            position: relative;
        }

        .announcement-wrapper {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .announcement-badge {
            background: var(--primary);
            color: #000000;
            padding: 6px 14px;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
            box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
        }

        .announcement-carousel {
            flex-grow: 1;
            overflow: hidden;
            white-space: nowrap;
            position: relative;
        }

        .announcement-track {
            display: inline-block;
            animation: marquee 30s linear infinite;
        }

        .announcement-text-item {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--text-main);
            font-size: 0.9rem;
            margin-right: 50px;
            font-weight: 500;
        }

        .announcement-text-item span.date {
            color: var(--primary);
            font-size: 0.75rem;
            font-weight: 700;
            background: rgba(245, 158, 11, 0.08);
            padding: 2px 8px;
            border-radius: 4px;
        }

        /* Stats Counter Section */
        .stats-section {
            background: #09090d;
            border-bottom: 1px solid rgba(255, 255, 255, 0.03);
            padding: 60px 0;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            text-align: center;
        }

        .stat-item {
            padding: 20px;
            position: relative;
        }

        .stat-item:not(:last-child)::after {
            content: '';
            position: absolute;
            right: -15px;
            top: 20%;
            height: 60%;
            width: 1px;
            background: rgba(255, 255, 255, 0.05);
        }

        .stat-number {
            font-family: var(--font-outfit);
            font-size: 3.5rem;
            font-weight: 900;
            color: #ffffff;
            margin-bottom: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .stat-label {
            font-size: 0.9rem;
            color: var(--text-muted);
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* Profil Section */
        .profil-section {
            background: #070709;
        }

        .profil-grid {
            display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            gap: 60px;
            align-items: center;
        }

        .profil-card {
            background: rgba(15, 15, 19, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.04);
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            position: relative;
        }

        .profil-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: var(--primary);
            border-radius: 20px 0 0 20px;
        }

        .profil-para {
            color: var(--text-muted);
            font-size: 1.05rem;
            line-height: 1.8;
            margin-bottom: 24px;
        }

        .profil-para strong {
            color: #ffffff;
        }

        .profil-img-container {
            position: relative;
            display: flex;
            justify-content: center;
        }

        .profil-glow-circle {
            position: absolute;
            width: 320px;
            height: 320px;
            background: radial-gradient(circle, rgba(245, 158, 11, 0.08) 0%, transparent 70%);
            z-index: 1;
        }

        .profil-logo {
            width: 260px;
            height: 260px;
            object-fit: contain;
            filter: drop-shadow(0 15px 35px rgba(245, 158, 11, 0.2));
            z-index: 2;
            animation: float 6s ease-in-out infinite;
        }

        /* Services Grid Section */
        .services-section {
            background: #0c0c10;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

        .service-card {
            background: var(--bg-card);
            border: 1px solid rgba(255, 255, 255, 0.03);
            border-radius: 16px;
            padding: 35px 30px;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            flex-direction: column;
            gap: 15px;
            position: relative;
            overflow: hidden;
        }

        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: var(--primary);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.4s ease;
        }

        .service-card:hover {
            transform: translateY(-8px);
            background: var(--bg-card-hover);
            border-color: var(--primary-border);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
        }

        .service-card:hover::before {
            transform: scaleX(1);
        }

        .service-icon-box {
            width: 54px;
            height: 54px;
            border-radius: 10px;
            background: rgba(245, 158, 11, 0.08);
            border: 1px solid var(--primary-border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: var(--primary);
            box-shadow: 0 0 15px rgba(245, 158, 11, 0.1);
        }

        .service-card h3 {
            font-size: 1.25rem;
            font-weight: 700;
            color: #ffffff;
        }

        .service-card p {
            font-size: 0.92rem;
            color: var(--text-muted);
            line-height: 1.6;
        }

        /* Program Keahlian Section (TKR vs TBKR) */
        .program-section {
            background: #070709;
        }

        .program-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
        }

        .program-card {
            background: rgba(15, 15, 19, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.04);
            border-radius: 24px;
            padding: 45px;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .program-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 180px;
            height: 180px;
            background: radial-gradient(circle, rgba(245, 158, 11, 0.05) 0%, transparent 70%);
            pointer-events: none;
        }

        .program-card:hover {
            border-color: var(--primary-border);
            box-shadow: 0 30px 60px rgba(245, 158, 11, 0.08);
            transform: translateY(-5px);
        }

        .program-img-wrapper {
            position: relative;
            margin-left: -45px;
            margin-right: -45px;
            margin-top: -45px;
            margin-bottom: 24px;
            border-bottom: 1px solid var(--primary-border);
        }

        .program-img {
            width: 100%;
            height: 280px;
            object-fit: cover;
            display: block;
        }

        .program-header {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 50px 45px 20px;
            background: linear-gradient(to top, rgba(15, 15, 19, 0.95) 0%, rgba(15, 15, 19, 0) 100%);
            margin-bottom: 0;
        }

        .program-code {
            font-size: 3.2rem;
            font-weight: 900;
            color: var(--primary);
            line-height: 1;
            margin-bottom: 6px;
            text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
        }

        .program-name {
            font-size: 1.35rem;
            font-weight: 700;
            color: #ffffff;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
        }

        .program-desc {
            color: var(--text-muted);
            font-size: 0.95rem;
            line-height: 1.7;
            margin-bottom: 30px;
        }

        .program-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .program-list li {
            font-size: 0.9rem;
            color: #e2e8f0;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .program-list li i {
            color: var(--primary);
            font-size: 0.85rem;
        }

        /* Partnerships Grid */
        .partner-section {
            background: #0c0c10;
        }

        .partner-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

        .partner-card {
            background: var(--bg-card);
            border: 1px solid rgba(255, 255, 255, 0.04);
            border-radius: 16px;
            padding: 30px;
            text-align: left;
            transition: all 0.3s;
            overflow: hidden;
        }

        .partner-card:hover {
            background: var(--bg-card-hover);
            border-color: var(--primary-border);
            transform: translateY(-4px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
        }

        .partner-img-box {
            position: relative;
            margin-top: -30px;
            margin-left: -30px;
            margin-right: -30px;
            height: 200px;
            margin-bottom: 20px;
            border-bottom: 1px solid var(--primary-border);
            overflow: hidden;
        }

        .partner-img-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.5s ease;
        }

        .partner-card:hover .partner-img-box img {
            transform: scale(1.08);
        }

        .partner-img-box h4 {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 40px 30px 15px;
            background: linear-gradient(to top, rgba(14, 11, 22, 0.95) 0%, rgba(14, 11, 22, 0) 100%);
            margin-bottom: 0;
            color: #ffffff;
            font-size: 1.15rem;
            font-weight: 700;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
        }

        .partner-card p {
            font-size: 0.88rem;
            color: var(--text-muted);
            line-height: 1.6;
            margin-bottom: 0;
        }

        /* Timeline Awards Section */
        .awards-section {
            background: #070709;
        }

        .timeline {
            position: relative;
            max-width: 900px;
            margin: 0 auto;
        }

        .timeline::before {
            content: '';
            position: absolute;
            left: 50%;
            top: 0;
            width: 2px;
            height: 100%;
            background: rgba(245, 158, 11, 0.15);
            transform: translateX(-50%);
        }

        .timeline-item {
            display: flex;
            justify-content: flex-end;
            padding-right: 50%;
            position: relative;
            margin-bottom: 50px;
        }

        .timeline-item:nth-child(even) {
            justify-content: flex-start;
            padding-right: 0;
            padding-left: 50%;
        }

        .timeline-dot {
            position: absolute;
            left: 50%;
            top: 24px;
            width: 16px;
            height: 16px;
            background: var(--primary);
            border-radius: 50%;
            transform: translateX(-50%);
            box-shadow: 0 0 10px var(--primary-glow);
            z-index: 5;
        }

        .timeline-content {
            background: var(--bg-card);
            border: 1px solid rgba(255, 255, 255, 0.04);
            padding: 30px;
            border-radius: 16px;
            width: 90%;
            margin-right: 30px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
            transition: all 0.3s;
        }

        .timeline-item:nth-child(even) .timeline-content {
            margin-right: 0;
            margin-left: 30px;
        }

        .timeline-content:hover {
            border-color: var(--primary-border);
            background: var(--bg-card-hover);
        }

        .timeline-year {
            font-family: var(--font-outfit);
            font-size: 0.85rem;
            font-weight: 800;
            color: var(--primary);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 6px;
        }

        .timeline-content h3 {
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .timeline-content p {
            font-size: 0.9rem;
            color: var(--text-muted);
            line-height: 1.6;
        }

        /* Tenaga Pendidik / Guru Grid */
        .guru-section {
            background: #0c0c10;
        }

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

        .guru-card {
            background: var(--bg-card);
            border: 1px solid rgba(255, 255, 255, 0.03);
            border-top: 4px solid var(--primary);
            border-radius: 16px;
            padding: 35px 25px;
            text-align: center;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
            transition: all 0.3s;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
        }

        .guru-card:hover {
            transform: translateY(-6px);
            border-color: var(--primary-border);
            box-shadow: 0 20px 45px rgba(245, 158, 11, 0.08);
        }

        .guru-avatar-container {
            width: 110px;
            height: 110px;
            border-radius: 50%;
            margin: 0 auto 20px;
            overflow: hidden;
            border: 3px solid var(--primary);
            box-shadow: 0 0 15px rgba(245, 158, 11, 0.2);
            position: relative;
        }

        .guru-avatar-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .guru-avatar-placeholder {
            width: 100%;
            height: 100%;
            background: #15151b;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.2rem;
            color: var(--primary);
            font-weight: bold;
        }

        .guru-name {
            font-size: 1.15rem;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 4px;
        }

        .guru-role {
            font-size: 0.8rem;
            color: var(--primary);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 16px;
        }

        .guru-subject {
            font-size: 0.88rem;
            color: var(--text-muted);
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            padding-top: 14px;
        }

        .guru-subject strong {
            color: #ffffff;
        }

        /* Galeri Grid */
        .galeri-section {
            background: #070709;
        }

        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 16px;
            height: 260px;
            border: 1px solid rgba(255, 255, 255, 0.05);
            cursor: pointer;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .gallery-item-fallback {
            width: 100%;
            height: 100%;
            background: #111116;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            color: var(--primary);
        }

        .gallery-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(7, 7, 9, 0.95) 0%, rgba(7, 7, 9, 0.4) 60%, transparent 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 24px;
            opacity: 0;
            transition: opacity 0.4s ease;
            border-top: 2px solid var(--primary);
        }

        .gallery-item:hover img {
            transform: scale(1.08);
        }

        /* Gallery Modal */
        .gallery-modal {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            backdrop-filter: blur(8px);
            opacity: 0;
            transition: opacity 0.3s ease;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .gallery-modal.show {
            display: flex;
            opacity: 1;
        }

        .gallery-modal-close {
            position: absolute;
            top: 25px;
            right: 40px;
            color: #fff;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
            transition: color 0.3s ease;
            z-index: 2001;
            line-height: 1;
        }

        .gallery-modal-close:hover {
            color: var(--primary);
        }

        .gallery-modal-content {
            background: #0c0c10;
            border-radius: 16px;
            overflow: hidden;
            max-width: 800px;
            width: 100%;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transform: scale(0.9);
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: flex;
            flex-direction: column;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
            max-height: 90vh;
        }

        .gallery-modal.show .gallery-modal-content {
            transform: scale(1);
        }

        .gallery-modal-content img {
            width: 100%;
            max-height: 60vh;
            object-fit: cover;
            display: block;
        }

        .gallery-modal-info {
            padding: 30px;
            overflow-y: auto;
        }

        .gallery-modal-info h3 {
            color: #ffffff;
            font-size: 1.5rem;
            margin-bottom: 10px;
            font-weight: 700;
        }

        .gallery-modal-info p {
            color: var(--text-muted);
            line-height: 1.6;
            margin-bottom: 15px;
        }

        .gallery-modal-info span {
            color: var(--primary);
            font-size: 0.85rem;
            font-weight: 600;
        }

        .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }

        .gallery-title {
            font-size: 1rem;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 4px;
        }

        .gallery-desc {
            font-size: 0.8rem;
            color: var(--text-muted);
            line-height: 1.4;
        }

        .gallery-date {
            font-size: 0.72rem;
            color: var(--primary);
            font-weight: 600;
            margin-top: 8px;
        }

        /* Footer Style */
        footer {
            background: #050507;
            border-top: 1px solid rgba(245, 158, 11, 0.15);
            padding: 80px 0 30px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.2fr 0.8fr 1fr;
            gap: 60px;
            margin-bottom: 60px;
        }

        .footer-col h4 {
            color: #ffffff;
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 24px;
            position: relative;
        }

        .footer-col h4::after {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 0;
            width: 30px;
            height: 2px;
            background: var(--primary);
            border-radius: 1px;
        }

        .footer-col p {
            color: var(--text-muted);
            font-size: 0.92rem;
            line-height: 1.7;
            margin-bottom: 16px;
        }

        .footer-links {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .footer-links a {
            color: var(--text-muted);
            text-decoration: none;
            font-size: 0.92rem;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .footer-links a:hover {
            color: var(--primary);
            transform: translateX(4px);
        }

        .footer-contact-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 16px;
        }

        .footer-contact-icon {
            color: var(--primary);
            font-size: 1.05rem;
            margin-top: 2px;
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            padding-top: 30px;
            text-align: center;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
        }

        .footer-copy {
            font-size: 0.88rem;
            color: var(--text-muted);
        }

        .footer-portals {
            display: flex;
            gap: 15px;
        }

        .footer-portal-link {
            font-size: 0.8rem;
            color: var(--text-muted);
            text-decoration: none;
            border: 1px solid rgba(255, 255, 255, 0.08);
            padding: 4px 10px;
            border-radius: 6px;
            transition: all 0.3s;
        }

        .footer-portal-link:hover {
            color: var(--primary);
            border-color: var(--primary-border);
            background: rgba(245, 158, 11, 0.05);
        }

        /* Animations Keyframes */
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }

        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        @keyframes slideInLeft {
            from { opacity: 0; transform: translateX(-40px); }
            to { opacity: 1; transform: translateX(0); }
        }

        @keyframes slideInRight {
            from { opacity: 0; transform: translateX(40px); }
            to { opacity: 1; transform: translateX(0); }
        }

        /* Reveal on scroll styling */
        .scroll-reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .scroll-reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Responsive Breakpoints */
        @media (max-width: 992px) {
            .hero-grid {
                grid-template-columns: 1fr;
                gap: 50px;
            }

            .hero h1 {
                font-size: 3.25rem;
            }

            .profil-grid {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .services-grid, .partner-grid, .gallery-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .timeline::before {
                left: 20px;
            }

            .timeline-item {
                justify-content: flex-start;
                padding-right: 0;
                padding-left: 40px;
            }

            .timeline-dot {
                left: 20px;
            }

            .timeline-content {
                width: 100%;
                margin-right: 0 !important;
                margin-left: 15px !important;
            }
        }

        @media (max-width: 768px) {
            .section-title {
                font-size: 2.2rem;
            }

            .hero h1 {
                font-size: 2.75rem;
            }

            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 20px;
            }

            .stat-item:not(:last-child)::after {
                display: none;
            }

            .menu-toggle {
                display: flex;
            }

            .nav-links {
                position: fixed;
                top: 80px;
                right: -100%;
                width: 280px;
                height: calc(100vh - 80px);
                background: #09090c;
                border-left: 1px solid rgba(255, 255, 255, 0.08);
                flex-direction: column;
                align-items: flex-start;
                padding: 40px 30px;
                gap: 24px;
                transition: right 0.4s ease;
                z-index: 999;
            }

            .nav-links.active {
                right: 0;
            }

            .program-grid {
                grid-template-columns: 1fr;
            }

            .footer-grid {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .footer-bottom {
                flex-direction: column;
                text-align: center;
            }
        }

        @media (max-width: 576px) {
            .services-grid, .partner-grid, .gallery-grid {
                grid-template-columns: 1fr;
            }

            .hero h1 {
                font-size: 2.25rem;
            }

            .program-card {
                padding: 30px 20px;
            }
        }
    </style>
</head>

<body>

    <!-- Header Navigation -->
    <nav id="main-nav">
        <div class="container nav-container">
            <a href="#" class="logo">
                <img class="logo-img" src="logo/logosmk.png" alt="SMK 1 Cirebon">
                <span class="logo-text">OTOMOTIF SMKN 1</span>
            </a>
            
            <div class="nav-links" id="nav-links-menu">
                <a href="#pengumuman">Pengumuman</a>
                <a href="#profil">Profil</a>
                <a href="#services">Keahlian</a>
                <a href="#program">Program Studi</a>
                <a href="#kerjasama">Kerjasama</a>
                <a href="#penghargaan">Prestasi</a>
                <a href="#guru">Pengajar</a>
                <a href="#galeri">Galeri</a>
            </div>

            <div class="menu-toggle" id="hamburger-menu" onclick="toggleMobileNav()">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </nav>

    <!-- Hero Area -->
    <header class="hero">
        <div class="container">
            <div class="hero-grid">
                
                <div class="hero-content">
                    <div class="hero-badge">
                        <i class="fa-solid fa-award"></i>
                        <span>Pusat Keunggulan Otomotif</span>
                    </div>
                    <h1>
                        Excellence in <br>
                        <span class="gradient-text-gold">Automotive</span> <br>
                        Engineering
                    </h1>
                    <p>
                        Membentuk SDM Otomotif unggul, berkarakter industri, dan berkelas global. Menyelaraskan kurikulum kurikulum teori berstandar tinggi dengan praktik real di bengkel modern sekolah.
                    </p>
                    <div class="hero-actions">
                        <a href="#profil" class="btn-premium">
                            <span>Jelajahi Jurusan</span>
                            <i class="fa-solid fa-arrow-right"></i>
                        </a>
                        <a href="#program" class="btn-secondary">
                            <span>Program Studi</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Announcements Ticker Banner -->
    <div class="announcement-ticker" id="pengumuman">
        <div class="container announcement-wrapper">
            <div class="announcement-badge">
                <i class="fa-solid fa-bullhorn"></i>
                <span>PENTING</span>
            </div>
            <div class="announcement-carousel">
                <div class="announcement-track">
                    @forelse($pengumumanList as $item)
                        <div class="announcement-text-item">
                            <span class="date">{{ date('d M Y', strtotime($item->tanggal)) }}</span>
                            <strong>{{ $item->judul }} :</strong> 
                            <span>{{ $item->isi }}</span>
                        </div>
                    @empty
                        <div class="announcement-text-item">
                            <i class="fa-solid fa-circle-info"></i>
                            <span>Selamat datang di portal resmi Jurusan Otomotif SMKN 1 Cirebon. Tetaplah mengikuti info terbaru di sini.</span>
                        </div>
                    @endforelse
                    
                    <!-- Loop duplicate for seamless marquee scroll -->
                    @forelse($pengumumanList as $item)
                        <div class="announcement-text-item">
                            <span class="date">{{ date('d M Y', strtotime($item->tanggal)) }}</span>
                            <strong>{{ $item->judul }} :</strong> 
                            <span>{{ $item->isi }}</span>
                        </div>
                    @empty
                        <div class="announcement-text-item">
                            <i class="fa-solid fa-circle-info"></i>
                            <span>Selamat datang di portal resmi Jurusan Otomotif SMKN 1 Cirebon. Tetaplah mengikuti info terbaru di sini.</span>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    <!-- Stats Section -->
    <section class="stats-section">
        <div class="container">
            <div class="stats-grid">
                
                <div class="stat-item">
                    <div class="stat-number"><span class="counter" data-target="24">0</span>+</div>
                    <div class="stat-label">Tahun Pengalaman</div>
                </div>
                
                <div class="stat-item">
                    <div class="stat-number"><span class="counter" data-target="850">0</span>+</div>
                    <div class="stat-label">Siswa Aktif</div>
                </div>
                
                <div class="stat-item">
                    <div class="stat-number"><span class="counter" data-target="4200">0</span>+</div>
                    <div class="stat-label">Alumni Terserap</div>
                </div>
                
                <div class="stat-item">
                    <div class="stat-number"><span class="counter" data-target="15">0</span>+</div>
                    <div class="stat-label">Mitra Industri</div>
                </div>

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

    <!-- Profil Jurusan -->
    <section class="section-padding profil-section" id="profil">
        <div class="container">
            <div class="profil-grid scroll-reveal">
                
                <div class="profil-info-container">
                    <h2 class="section-title">Profil Jurusan</h2>
                    <p class="section-subtitle" style="margin-bottom: 30px; text-align: left;">Membangun masa depan dunia transportasi otomotif melalui pendidikan vokasi.</p>
                    
                    <div class="profil-card">
                        <p class="profil-para">
                            Departemen <strong>Teknik Otomotif SMKN 1 Cirebon</strong> berdiri tegak sebagai pilar keunggulan pendidikan vokasi otomotif di wilayah Jawa Barat. Kami berkomitmen melatih calon teknisi andal yang tidak hanya mahir secara mekanik, namun juga cerdas dalam mendiagnosis sistem komputerisasi modern pada kendaraan roda empat.
                        </p>
                        <p class="profil-para" style="margin-bottom: 0;">
                            Di era perkembangan teknologi mobil hybrid dan kendaraan listrik (EV) saat ini, kami membekali siswa dengan sarana praktik modern, kurikulum adaptif industri, serta kedisiplinan yang tinggi (budaya kerja 5S/5R) untuk menjamin kesiapan kompetisi di kancah nasional maupun global.
                        </p>
                    </div>
                </div>

                <div class="profil-img-container">
                    <div class="profil-glow-circle"></div>
                    <img class="profil-logo" src="logo/logosmk.png" alt="SMK 1 Cirebon Logo">
                </div>

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

    <!-- Services / Layanan Keahlian -->
    <section class="section-padding services-section" id="services">
        <div class="container">
            <div class="section-header scroll-reveal">
                <h2 class="section-title">Keahlian Pembelajaran</h2>
                <p class="section-subtitle">Siswa kami ditempa melalui 6 klaster kompetensi utama berstandar bengkel resmi APM.</p>
            </div>

            <div class="services-grid scroll-reveal">
                
                <div class="service-card">
                    <div class="service-icon-box">
                        <i class="fa-solid fa-car-battery"></i>
                    </div>
                    <h3>Kelistrikan & EFI</h3>
                    <p>Mempelajari sistem wiring kelistrikan bodi, sensor-sensor engine ECU, sistem pengapian elektronik, dan kontrol injeksi bensin.</p>
                </div>
                
                <div class="service-card">
                    <div class="service-icon-box">
                        <i class="fa-solid fa-screwdriver-wrench"></i>
                    </div>
                    <h3>Perawatan Mesin (Overhaul)</h3>
                    <p>Pembongkaran, pemeriksaan, pengukuran komponen internal mesin, serta sinkronisasi klep dan poros engkol standar pabrik.</p>
                </div>
                
                <div class="service-card">
                    <div class="service-icon-box">
                        <i class="fa-solid fa-circle-notch"></i>
                    </div>
                    <h3>Chassis & Drive Line</h3>
                    <p>Memahami sistem transmisi manual & otomatis, gardan, sistem pengereman ABS, serta kemudi power steering modern.</p>
                </div>
                
                <div class="service-card">
                    <div class="service-icon-box">
                        <i class="fa-solid fa-gauge-high"></i>
                    </div>
                    <h3>Spooring & Balancing</h3>
                    <p>Praktik langsung penyelarasan sudut roda depan-belakang dengan komputerisasi scanner 3D dan keseimbangan getaran ban.</p>
                </div>
                
                <div class="service-card">
                    <div class="service-icon-box">
                        <i class="fa-solid fa-spray-can-sparkles"></i>
                    </div>
                    <h3>Pengecatan & Body Repair</h3>
                    <p>Teknik restorasi panel bodi penyok, teknik pendempulan presisi, peracikan cat (color matching), dan spray-gun finishing.</p>
                </div>
                
                <div class="service-card">
                    <div class="service-icon-box">
                        <i class="fa-solid fa-laptop-medical"></i>
                    </div>
                    <h3>Diagnosis Digital</h3>
                    <p>Pengoperasian Scanner Launch/OBD2 untuk mendeteksi Diagnostic Trouble Codes (DTC) secara instan pada sistem kendaraan modern.</p>
                </div>

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

    <!-- Program Keahlian (TKR vs TBKR) -->
    <section class="section-padding program-section" id="program">
        <div class="container">
            <div class="section-header scroll-reveal">
                <h2 class="section-title">Program Keahlian Utama</h2>
                <p class="section-subtitle">Spesialisasi kurikulum unggul yang dapat dipilih siswa di awal tahun akademik.</p>
            </div>

            <div class="program-grid scroll-reveal">
                
                <!-- TKR -->
                <div class="program-card">
                    <div>
                        <div class="program-img-wrapper">
                            <img class="program-img" src="img/tkr.jpeg" alt="Praktik TKR">
                            <div class="program-header">
                                <div class="program-code">TKR</div>
                                <div class="program-name">Teknik Kendaraan Ringan</div>
                            </div>
                        </div>
                        <p class="program-desc">
                            Berfokus mendalam pada sistem mekanika mesin (engine), sistem transmisi/pemindah tenaga, sistem sasis, suspensi kemudi, hingga sistem kelistrikan & manajemen kontrol mesin terkomputerisasi.
                        </p>
                    </div>
                    <ul class="program-list">
                        <li><i class="fa-solid fa-circle-check"></i> Perawatan & Overhaul Mesin Diesel/Bensin</li>
                        <li><i class="fa-solid fa-circle-check"></i> Kelistrikan & Sensor Engine EFI/ECU</li>
                        <li><i class="fa-solid fa-circle-check"></i> Perbaikan Sasis, Rem, & Power Steering</li>
                        <li><i class="fa-solid fa-circle-check"></i> Diagnosis Scanner Launch Digital</li>
                    </ul>
                </div>

                <!-- TBKR -->
                <div class="program-card">
                    <div>
                        <div class="program-img-wrapper">
                            <img class="program-img" src="img/murid.jpeg" alt="Praktik TBKR">
                            <div class="program-header">
                                <div class="program-code">TBKR</div>
                                <div class="program-name">Teknik Bodi Kendaraan Ringan</div>
                            </div>
                        </div>
                        <p class="program-desc">
                            Mempelajari keahlian restorasi panel luar bodi kendaraan, konstruksi rangka, teknik pengelasan mig/tig otomotif, pencampuran warna cat (spray paint finishing), hingga auto detailing kinclong.
                        </p>
                    </div>
                    <ul class="program-list">
                        <li><i class="fa-solid fa-circle-check"></i> Ketok Panel Bodi & Alignment Rangka</li>
                        <li><i class="fa-solid fa-circle-check"></i> Pengelasan Spot, Co2, & Oksigen</li>
                        <li><i class="fa-solid fa-circle-check"></i> Teknik Pengecatan (Bake Oven Spray)</li>
                        <li><i class="fa-solid fa-circle-check"></i> Racik Warna Cat (Color Matcher)</li>
                    </ul>
                </div>

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

    <!-- Kerja Sama Industri -->
    <section class="section-padding partner-section" id="kerjasama">
        <div class="container">
            <div class="section-header scroll-reveal">
                <h2 class="section-title">Link & Match Industri</h2>
                <p class="section-subtitle">Penyelarasan kurikulum bersama korporasi global otomotif untuk jaminan penyerapan kerja lulusan.</p>
            </div>

            <div class="partner-grid scroll-reveal">
                
                <div class="partner-card">
                    <div class="partner-img-box">
                        <img src="img/kelas_industri.jpeg" alt="Kelas Industri">
                        <h4>Kurikulum Selaras APM</h4>
                    </div>
                    <p>Modul belajar disinkronkan langsung dengan standar training operational agen pemegang merek (APM) perakitan terkemuka.</p>
                </div>
                
                <div class="partner-card">
                    <div class="partner-img-box">
                        <img src="img/pkl.jpeg" alt="Praktek Lapangan">
                        <h4>Program Magang 6 Bulan</h4>
                    </div>
                    <p>Penempatan praktek kerja lapangan (PKL) terstruktur di bengkel-bengkel resmi resmi ATPM untuk asah mental kerja professional.</p>
                </div>
                
                <div class="partner-card">
                    <div class="partner-img-box">
                        <img src="img/murid.jpeg" alt="Rekrutmen">
                        <h4>Bursa Kerja Khusus (BKK)</h4>
                    </div>
                    <p>Sistem seleksi rekrutmen kerja langsung di sekolah sebelum ijazah resmi diterbitkan, bekerja sama dengan puluhan pabrikan.</p>
                </div>

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

    <!-- Penghargaan & Prestasi -->
    <section class="section-padding awards-section" id="penghargaan">
        <div class="container">
            <div class="section-header scroll-reveal">
                <h2 class="section-title">Prestasi & Penghargaan</h2>
                <p class="section-subtitle">Pengakuan nyata atas keunggulan kualitas pendidikan vokasi yang kami selenggarakan.</p>
            </div>

            <div class="timeline scroll-reveal">
                
                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-content">
                        <div class="timeline-year">Tahun 2024</div>
                        <h3>Juara 1 LKS Tingkat Provinsi</h3>
                        <p>Medali emas Automobile Technology diraih oleh siswa perwakilan otomotif berkat catatan waktu diagnosis problem engine tercepat.</p>
                    </div>
                </div>

                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-content">
                        <div class="timeline-year">Tahun 2023</div>
                        <h3>Predikat Grade A Teaching Factory</h3>
                        <p>Bengkel otomotif sekolah lulus audit Kemendikbud dengan predikat TEFA Grade A, melayani jasa servis nyata masyarakat umum.</p>
                    </div>
                </div>

                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-content">
                        <div class="timeline-year">Tahun 2022</div>
                        <h3>Juara Nasional Body Paint Contest</h3>
                        <p>Tim TBKR sekolah meraih piala juara umum pengecatan & body repair tingkat nasional yang diselenggarakan industri cat ternama.</p>
                    </div>
                </div>

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

    <!-- Tenaga Pengajar / Guru -->
    <section class="section-padding guru-section" id="guru">
        <div class="container">
            <div class="section-header scroll-reveal">
                <h2 class="section-title">Guru & Instruktur Ahli</h2>
                <p class="section-subtitle">Dipandu langsung oleh guru produktif tersertifikasi kompetensi resmi BNSP dan Industri.</p>
            </div>

            <div class="guru-grid scroll-reveal">
                @forelse($guruList as $teacher)
                    <div class="guru-card">
                        <div>
                            <div class="guru-avatar-container">
                                @if($teacher->foto && $teacher->foto !== 'default_guru.jpg' && file_exists(public_path($teacher->foto)))
                                    <img src="{{ asset($teacher->foto) }}" alt="{{ $teacher->nama_guru }}">
                                @else
                                    <div class="guru-avatar-placeholder">
                                        {{ substr($teacher->nama_guru, 0, 1) }}
                                    </div>
                                @endif
                            </div>
                            <h3 class="guru-name">{{ $teacher->nama_guru }}</h3>
                            <div class="guru-role">{{ $teacher->jabatan }}</div>
                        </div>
                    </div>
                @empty
                    <div style="grid-column: 1 / -1; text-align: center; color: var(--text-muted); padding: 50px 0;">
                        <i class="fa-solid fa-chalkboard-user" style="font-size: 2.5rem; margin-bottom: 12px; opacity: 0.5;"></i>
                        <p>Daftar guru sedang diperbarui.</p>
                    </div>
                @endforelse
            </div>
        </div>
    </section>

    <!-- Galeri & Fasilitas -->
    <section class="section-padding galeri-section" id="galeri">
        <div class="container">
            <div class="section-header scroll-reveal">
                <h2 class="section-title">Galeri & Fasilitas</h2>
                <p class="section-subtitle">Infrastruktur bengkel praktik megah yang mereplikasi atmosfer kerja bengkel authorized.</p>
            </div>

            <div class="gallery-grid scroll-reveal">
                @forelse($galeriList as $item)
                    <div class="gallery-item" onclick="openGalleryModal(this)">
                        @if($item->foto && file_exists(public_path($item->foto)))
                            <img src="{{ asset($item->foto) }}" alt="{{ $item->judul }}">
                        @else
                            <div class="gallery-item-fallback">
                                <i class="fa-solid fa-image"></i>
                            </div>
                        @endif
                        <div class="gallery-overlay">
                            <h4 class="gallery-title">{{ $item->judul }}</h4>
                            <p class="gallery-desc">{{ $item->deskripsi }}</p>
                            <span class="gallery-date">{{ date('d M Y', strtotime($item->tanggal_kegiatan)) }}</span>
                        </div>
                    </div>
                @empty
                    <!-- Fallback default images from public/img -->
                    <div class="gallery-item" onclick="openGalleryModal(this)">
                        <img src="img/ruangan.jpeg" alt="Bengkel Praktik">
                        <div class="gallery-overlay">
                            <h4 class="gallery-title">Bengkel Mesin Utama TKR</h4>
                            <p class="gallery-desc">Sarana praktik engine stand dan car lift standar industri.</p>
                        </div>
                    </div>
                    <div class="gallery-item" onclick="openGalleryModal(this)">
                        <img src="img/mobil.jpeg" alt="Fasilitas Mobil">
                        <div class="gallery-overlay">
                            <h4 class="gallery-title">Fasilitas Unit Praktik Mobil</h4>
                            <p class="gallery-desc">Berbagai unit mobil APM untuk praktik diagnosis digital secara riil.</p>
                        </div>
                    </div>
                    <div class="gallery-item" onclick="openGalleryModal(this)">
                        <img src="img/pkl.jpeg" alt="Kerjasama PKL">
                        <div class="gallery-overlay">
                            <h4 class="gallery-title">Praktik Kerja Industri</h4>
                            <p class="gallery-desc">Penempatan langsung siswa magang di bengkel ATPM nasional.</p>
                        </div>
                    </div>
                    <div class="gallery-item" onclick="openGalleryModal(this)">
                        <img src="img/kelas_industri.jpeg" alt="Kelas Industri">
                        <div class="gallery-overlay">
                            <h4 class="gallery-title">Ruang Kelas Industri</h4>
                            <p class="gallery-desc">Teori dan penyelarasan wawasan kerja bersama tim instruktur ahli APM.</p>
                        </div>
                    </div>
                    <div class="gallery-item" onclick="openGalleryModal(this)">
                        <img src="img/piala.jpeg" alt="Piala Prestasi">
                        <div class="gallery-overlay">
                            <h4 class="gallery-title">Podium Prestasi Siswa</h4>
                            <p class="gallery-desc">Bukti dedikasi menyabet gelar juara kompetisi otomotif bergengsi.</p>
                        </div>
                    </div>
                    <div class="gallery-item" onclick="openGalleryModal(this)">
                        <img src="img/murid.jpeg" alt="Uji Kompetensi">
                        <div class="gallery-overlay">
                            <h4 class="gallery-title">Sertifikasi LSP Otomotif</h4>
                            <p class="gallery-desc">Pengujian resmi kompetensi siswa berlisensi nasional BNSP.</p>
                        </div>
                    </div>
                @endforelse
            </div>
        </div>
    </section>

    <!-- Footer Area -->
    <footer>
        <div class="container">
            <div class="footer-grid">
                
                <div class="footer-col">
                    <h4 style="font-family: var(--font-outfit);">OTOMOTIF SMKN 1 CIREBON</h4>
                    <p style="margin-top: 15px;">
                        Mencetak teknisi handal, berkarakter mulia, cerdas digital, dan siap bersaing di era mobilitas modern masa depan.
                    </p>
                    <p style="font-size: 0.85rem; color: var(--text-muted);">SMK Pusat Keunggulan Otomotif Jawa Barat.</p>
                </div>
                
                <div class="footer-col">
                    <h4>Navigasi Cepat</h4>
                    <div class="footer-links">
                        <a href="#pengumuman"><i class="fa-solid fa-angle-right"></i> Info Pengumuman</a>
                        <a href="#profil"><i class="fa-solid fa-angle-right"></i> Profil Lengkap</a>
                        <a href="#services"><i class="fa-solid fa-angle-right"></i> Klaster Keahlian</a>
                        <a href="#program"><i class="fa-solid fa-angle-right"></i> Program TKR & TBKR</a>
                        <a href="#guru"><i class="fa-solid fa-angle-right"></i> Roster Pengajar</a>
                    </div>
                </div>
                
                <div class="footer-col">
                    <h4>Hubungi Kami</h4>
                    <div class="footer-contact-item">
                        <i class="fa-solid fa-location-dot footer-contact-icon"></i>
                        <p style="margin-bottom: 0;">Jl. Perjuangan, Sunyaragi, Kec. Kesambi, Kota Cirebon, Jawa Barat 45132</p>
                    </div>
                    <div class="footer-contact-item">
                        <i class="fa-solid fa-phone footer-contact-icon"></i>
                        <p style="margin-bottom: 0;">(0231) 480202</p>
                    </div>
                    <div class="footer-contact-item">
                        <i class="fa-solid fa-envelope footer-contact-icon"></i>
                        <p style="margin-bottom: 0;">info@smkn1-cirebon.sch.id</p>
                    </div>
                </div>

            </div>

            <div class="footer-bottom">
                <div class="footer-copy">
                    &copy; 2026 Jurusan Otomotif SMKN 1 Cirebon. Hak Cipta Dilindungi Undang-Undang.
                </div>
            </div>
        </div>
    </footer>

    <!-- Gallery Modal -->
    <div class="gallery-modal" id="gallery-modal">
        <span class="gallery-modal-close" onclick="closeGalleryModal()">&times;</span>
        <div class="gallery-modal-content">
            <img src="" alt="Gallery Image" id="modal-img">
            <div class="gallery-modal-info">
                <h3 id="modal-title"></h3>
                <p id="modal-desc"></p>
                <span id="modal-date"></span>
            </div>
        </div>
    </div>

    <!-- Scripts Area -->
    <script>
        // Shrink nav bar on scroll & Hero 3D Parallax effect
        window.addEventListener('scroll', function() {
            const nav = document.getElementById('main-nav');
            const scrollY = window.scrollY;
            
            if (scrollY > 50) {
                nav.classList.add('scrolled');
            } else {
                nav.classList.remove('scrolled');
            }
            
            // 3D Parallax effect for hero content
            const heroContent = document.querySelector('.hero-content');
            if (heroContent) {
                if (scrollY < window.innerHeight) {
                    const opacity = Math.max(1 - (scrollY / 500), 0);
                    const scale = Math.max(1 - (scrollY / 1500), 0.85);
                    // translateY moves it down at 70% of scroll speed, making it look fixed/parallax
                    const translateY = scrollY * 0.7;
                    const rotateX = scrollY * 0.05;
                    
                    heroContent.style.transform = `perspective(1000px) translate3d(0, ${translateY}px, 0) scale(${scale}) rotateX(${rotateX}deg)`;
                    heroContent.style.opacity = opacity;
                }
            }
        });

        // Gallery Modal Logic
        function openGalleryModal(element) {
            const modal = document.getElementById('gallery-modal');
            const modalImg = document.getElementById('modal-img');
            const modalTitle = document.getElementById('modal-title');
            const modalDesc = document.getElementById('modal-desc');
            const modalDate = document.getElementById('modal-date');
            
            const imgElem = element.querySelector('img');
            const imgSrc = imgElem ? imgElem.src : '';
            const titleElem = element.querySelector('.gallery-title');
            const descElem = element.querySelector('.gallery-desc');
            const dateElem = element.querySelector('.gallery-date');
            
            modalImg.src = imgSrc;
            modalImg.style.display = imgSrc ? 'block' : 'none';
            modalTitle.innerText = titleElem ? titleElem.innerText : '';
            modalDesc.innerText = descElem ? descElem.innerText : '';
            
            if (dateElem && dateElem.innerText.trim() !== '') {
                modalDate.innerText = dateElem.innerText;
                modalDate.style.display = 'inline-block';
            } else {
                modalDate.style.display = 'none';
            }
            
            modal.classList.add('show');
            document.body.style.overflow = 'hidden';
        }
        
        function closeGalleryModal() {
            const modal = document.getElementById('gallery-modal');
            modal.classList.remove('show');
            setTimeout(() => {
                document.body.style.overflow = '';
            }, 300);
        }
        
        document.getElementById('gallery-modal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeGalleryModal();
            }
        });

        // Toggle mobile navigation menu
        function toggleMobileNav() {
            const menu = document.getElementById('nav-links-menu');
            const hamburger = document.getElementById('hamburger-menu');
            menu.classList.toggle('active');
            hamburger.classList.toggle('active');
        }

        // Toggle portals floating dropdown directly
        function toggleNavPortalMenu() {
            const portalCard = document.querySelector('.hero-portal-card');
            if(portalCard) {
                portalCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
                portalCard.style.outline = '3px solid var(--primary)';
                portalCard.style.boxShadow = '0 0 40px var(--primary-glow)';
                setTimeout(() => {
                    portalCard.style.outline = 'none';
                    portalCard.style.boxShadow = '0 25px 50px rgba(0, 0, 0, 0.5)';
                }, 2000);
            }
        }

        // Count Up Stats animation
        const counters = document.querySelectorAll('.counter');
        const speed = 200; // The lower the faster

        const animateCounters = () => {
            counters.forEach(counter => {
                const target = +counter.getAttribute('data-target');
                const count = +counter.innerText;
                const inc = target / speed;

                if (count < target) {
                    counter.innerText = Math.ceil(count + inc);
                    setTimeout(animateCounters, 15);
                } else {
                    counter.innerText = target;
                }
            });
        }

        // IntersectionObserver for scroll reveals
        const revealObserver = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if(entry.isIntersecting) {
                    entry.target.classList.add('active');
                    // If this entry contains counter elements, trigger countup
                    if(entry.target.classList.contains('stats-section') || entry.target.querySelector('.counter')) {
                        animateCounters();
                    }
                    observer.unobserve(entry.target);
                }
            });
        }, {
            threshold: 0.15
        });

        document.querySelectorAll('.scroll-reveal, .stats-section').forEach(element => {
            element.classList.add('scroll-reveal');
            revealObserver.observe(element);
        });

        // Highlight active navbar link on scroll
        const sections = document.querySelectorAll('section, header');
        const navLi = document.querySelectorAll('.nav-links a');

        window.addEventListener('scroll', () => {
            let current = '';
            sections.forEach(section => {
                const sectionTop = section.offsetTop;
                const sectionHeight = section.clientHeight;
                if (pageYOffset >= (sectionTop - 150)) {
                    current = section.getAttribute('id') || '';
                }
            });

            navLi.forEach(a => {
                a.classList.remove('active');
                if (a.getAttribute('href') === `#${current}`) {
                    a.style.color = '#ffffff';
                } else {
                    a.style.color = '';
                }
            });
        });
    </script>
</body>

</html>