Seminar Nasional 2026 — Inovasi Digital/title> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet"/> <style> :root { --ink: #0d0d0d; --cream: #f5f0e8; --gold: #c9a84c; --gold-light: #e8d49a; --rust: #b84c2c; --muted: #6b6460; --line: rgba(201,168,76,0.3); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--ink); color: var(--cream); font-family: 'DM Sans', sans-serif; font-weight: 300; overflow-x: hidden; } /* ── HERO ── */ .hero { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; position: relative; overflow: hidden; padding: 0 6vw; } /* noise grain */ .hero::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events: none; z-index: 0; } /* big decorative circle */ .hero::after { content: ''; position: absolute; right: -12vw; top: 50%; transform: translateY(-55%); width: 55vw; height: 55vw; border-radius: 50%; border: 1px solid var(--line); pointer-events: none; } nav { position: relative; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 2rem 0; border-bottom: 1px solid var(--line); } .logo { font-family: 'Playfair Display', serif; font-size: 1.1rem; letter-spacing: .08em; color: var(--gold); } nav ul { list-style: none; display: flex; gap: 2.5rem; } nav a { color: var(--cream); text-decoration: none; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; opacity: .7; transition: opacity .2s, color .2s; } nav a:hover { opacity: 1; color: var(--gold); } .hero-body { position: relative; z-index: 5; display: flex; flex-direction: column; justify-content: center; padding: 4rem 0; max-width: 60%; } .tag { display: inline-block; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold); padding: .35rem .9rem; margin-bottom: 2rem; width: fit-content; animation: fadeUp .8s ease both; } h1 { font-family: 'Playfair Display', serif; font-size: clamp(3rem, 6vw, 5.5rem); line-height: 1.05; font-weight: 900; margin-bottom: 1.5rem; animation: fadeUp .8s ease .1s both; } h1 em { font-style: italic; color: var(--gold); } .hero-desc { font-size: 1.05rem; line-height: 1.8; color: rgba(245,240,232,.6); max-width: 480px; margin-bottom: 2.5rem; animation: fadeUp .8s ease .2s both; } .btn-group { display: flex; gap: 1rem; flex-wrap: wrap; animation: fadeUp .8s ease .3s both; } .btn { display: inline-block; padding: .85rem 2rem; font-family: 'DM Sans', sans-serif; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; border: none; transition: all .25s; } .btn-primary { background: var(--gold); color: var(--ink); font-weight: 500; } .btn-primary:hover { background: var(--gold-light); } .btn-outline { background: transparent; color: var(--cream); border: 1px solid rgba(245,240,232,.3); } .btn-outline:hover { border-color: var(--gold); color: var(--gold); } /* countdown */ .countdown-bar { position: relative; z-index: 5; display: flex; gap: 2rem; padding: 2rem 0; border-top: 1px solid var(--line); animation: fadeUp .8s ease .4s both; } .count-item { text-align: center; min-width: 60px; } .count-num { font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 700; color: var(--gold); line-height: 1; } .count-label { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .3rem; } .count-sep { font-size: 2.5rem; color: var(--line); line-height: 1; padding-top: 0; align-self: flex-start; } /* ── SECTIONS ── */ section { padding: 6rem 6vw; } .section-label { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; } h2 { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.2; margin-bottom: 1rem; } .divider { width: 48px; height: 1px; background: var(--gold); margin: 1.5rem 0 2.5rem; } /* about */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .about-text p { color: rgba(245,240,232,.65); line-height: 1.85; margin-bottom: 1.2rem; } .about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .stat-card { background: rgba(201,168,76,.05); border: 1px solid var(--line); padding: 2rem; text-align: center; transition: background .3s; } .stat-card:hover { background: rgba(201,168,76,.1); } .stat-num { font-family: 'Playfair Display', serif; font-size: 2.8rem; color: var(--gold); font-weight: 700; } .stat-desc { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: .4rem; } /* speakers */ .speakers-section { background: rgba(255,255,255,.02); } .speakers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px; margin-top: 3rem; } .speaker-card { background: rgba(13,13,13,.8); border: 1px solid var(--line); padding: 2rem; position: relative; overflow: hidden; transition: border-color .3s; } .speaker-card:hover { border-color: var(--gold); } .speaker-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s; } .speaker-card:hover::before { transform: scaleX(1); } .speaker-avatar { width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--line); background: rgba(201,168,76,.15); display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--gold); margin-bottom: 1.2rem; } .speaker-name { font-family: 'Playfair Display', serif; font-size: 1.1rem; margin-bottom: .3rem; } .speaker-role { font-size: .78rem; color: var(--gold); letter-spacing: .06em; margin-bottom: .8rem; } .speaker-org { font-size: .8rem; color: var(--muted); line-height: 1.5; } /* schedule */ .schedule-list { margin-top: 3rem; display: flex; flex-direction: column; gap: 2px; } .sched-item { display: grid; grid-template-columns: 120px 1fr auto; gap: 2rem; padding: 1.5rem 2rem; border: 1px solid var(--line); background: rgba(255,255,255,.02); align-items: center; transition: background .3s, border-color .3s; } .sched-item:hover { background: rgba(201,168,76,.05); border-color: var(--gold); } .sched-time { font-size: .8rem; letter-spacing: .08em; color: var(--gold); font-weight: 500; } .sched-title { font-family: 'Playfair Display', serif; font-size: 1rem; } .sched-speaker { font-size: .78rem; color: var(--muted); margin-top: .25rem; } .sched-type { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; padding: .3rem .8rem; border: 1px solid; } .type-keynote { color: var(--gold); border-color: var(--gold); } .type-panel { color: #88c0d0; border-color: #88c0d0; } .type-workshop { color: #a3be8c; border-color: #a3be8c; } .type-break { color: var(--muted); border-color: var(--muted); } /* venue */ .venue-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; margin-top: 3rem; } .venue-map { aspect-ratio: 4/3; background: rgba(201,168,76,.06); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .venue-map svg { opacity: .4; } .venue-info { display: flex; flex-direction: column; gap: 1.5rem; } .info-row { display: flex; gap: 1rem; align-items: flex-start; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); } .info-row:last-child { border-bottom: none; } .info-icon { width: 36px; height: 36px; background: rgba(201,168,76,.1); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; } .info-label { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; } .info-val { font-size: .95rem; line-height: 1.5; } /* ticket */ .ticket-section { background: rgba(201,168,76,.04); } .tickets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px; margin-top: 3rem; } .ticket-card { border: 1px solid var(--line); padding: 2.5rem 2rem; position: relative; transition: all .3s; background: var(--ink); } .ticket-card.featured { border-color: var(--gold); background: rgba(201,168,76,.06); } .ticket-badge { position: absolute; top: -1px; right: 2rem; background: var(--gold); color: var(--ink); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: .3rem .8rem; } .ticket-type { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; } .ticket-price { font-family: 'Playfair Display', serif; font-size: 2.8rem; color: var(--gold); font-weight: 700; margin-bottom: .3rem; } .ticket-price span { font-size: 1rem; color: var(--muted); font-family: 'DM Sans', sans-serif; } .ticket-desc { font-size: .85rem; color: var(--muted); margin-bottom: 1.5rem; line-height: 1.6; } .ticket-features { list-style: none; margin-bottom: 2rem; display: flex; flex-direction: column; gap: .6rem; } .ticket-features li { font-size: .85rem; color: rgba(245,240,232,.7); padding-left: 1.2rem; position: relative; } .ticket-features li::before { content: '—'; position: absolute; left: 0; color: var(--gold); } /* register form */ .register-section { border-top: 1px solid var(--line); } .register-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; } form { display: flex; flex-direction: column; gap: 1.2rem; } .form-group { display: flex; flex-direction: column; gap: .5rem; } label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } input, select, textarea { background: transparent; border: 1px solid var(--line); color: var(--cream); font-family: 'DM Sans', sans-serif; font-size: .95rem; padding: .85rem 1rem; outline: none; transition: border-color .2s; width: 100%; } input:focus, select:focus, textarea:focus { border-color: var(--gold); } select option { background: #1a1a1a; } textarea { resize: vertical; min-height: 100px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } /* footer */ footer { padding: 3rem 6vw; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; } .footer-logo { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: var(--gold); } .footer-copy { font-size: .8rem; color: var(--muted); } .footer-links { display: flex; gap: 1.5rem; } .footer-links a { font-size: .8rem; color: var(--muted); text-decoration: none; transition: color .2s; } .footer-links a:hover { color: var(--gold); } /* animations */ @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; } .reveal.visible { opacity: 1; transform: none; } /* responsive */ @media (max-width: 768px) { .hero-body { max-width: 100%; } .hero::after { display: none; } nav ul { display: none; } .about-grid, .venue-grid, .register-grid { grid-template-columns: 1fr; gap: 2.5rem; } .sched-item { grid-template-columns: 1fr; } .sched-type { width: fit-content; } .about-stats { grid-template-columns: 1fr 1fr; } } </style> </head> <body>  <header class="hero"> <nav> <div class="logo">SEMINASIONAL '26</div> <ul> <li><a href="#tentang">Tentang</a></li> <li><a href="#pembicara">Pembicara</a></li> <li><a href="#jadwal">Jadwal</a></li> <li><a href="#tiket">Tiket</a></li> <li><a href="#daftar">Daftar</a></li> </ul> </nav> <div class="hero-body"> <span class="tag">Jakarta — 15 Agustus 2026</span> <h1>Inovasi <em>Digital</em><br>untuk Indonesia<br>Maju</h1> <p class="hero-desc"> Seminar nasional bergengsi yang mempertemukan para pemimpin teknologi, akademisi, dan wirausahawan untuk merancang masa depan digital Indonesia. </p> <div class="btn-group"> <a href="#daftar" class="btn btn-primary">Daftar Sekarang</a> <a href="#jadwal" class="btn btn-outline">Lihat Jadwal</a> </div> </div> <div class="countdown-bar" id="countdown"> <div class="count-item"><div class="count-num" id="cd-days">00</div><div class="count-label">Hari</div></div> <div class="count-sep">:</div> <div class="count-item"><div class="count-num" id="cd-hours">00</div><div class="count-label">Jam</div></div> <div class="count-sep">:</div> <div class="count-item"><div class="count-num" id="cd-mins">00</div><div class="count-label">Menit</div></div> <div class="count-sep">:</div> <div class="count-item"><div class="count-num" id="cd-secs">00</div><div class="count-label">Detik</div></div> </div> </header>  <section id="tentang"> <div class="about-grid"> <div class="about-text reveal"> <p class="section-label">Tentang Acara</p> <h2>Satu Panggung,<br>Ribuan Gagasan</h2> <div class="divider"></div> <p>Seminar Nasional Inovasi Digital 2026 adalah forum tahunan yang menghadirkan lebih dari 500 peserta dari seluruh nusantara. Acara ini dirancang untuk mendorong kolaborasi lintas sektor antara pemerintah, industri, dan akademisi.</p> <p>Dengan tema <strong style="color:var(--gold)">"Inovasi Digital untuk Indonesia Maju"</strong>, kami mengeksplorasi peluang dan tantangan transformasi digital mulai dari kecerdasan buatan, keamanan siber, hingga ekonomi kreatif berbasis teknologi.</p> <p>Bergabunglah bersama kami dan jadilah bagian dari percakapan yang akan membentuk wajah Indonesia di era digital.</p> </div> <div class="about-stats reveal"> <div class="stat-card"><div class="stat-num">500+</div><div class="stat-desc">Peserta</div></div> <div class="stat-card"><div class="stat-num">12</div><div class="stat-desc">Pembicara</div></div> <div class="stat-card"><div class="stat-num">8</div><div class="stat-desc">Sesi & Panel</div></div> <div class="stat-card"><div class="stat-num">1</div><div class="stat-desc">Hari Penuh</div></div> </div> </div> </section>  <section id="pembicara" class="speakers-section"> <p class="section-label reveal">Pembicara Utama</p> <h2 class="reveal">Para Pemikir<br>& Pemimpin Industri</h2> <div class="divider reveal"></div> <div class="speakers-grid"> <div class="speaker-card reveal"> <div class="speaker-avatar">AR</div> <div class="speaker-name">Dr. Andi Rahmat, M.Sc.</div> <div class="speaker-role">Keynote Speaker</div> <div class="speaker-org">Kepala Badan Siber & Sandi Negara — BSSN</div> </div> <div class="speaker-card reveal"> <div class="speaker-avatar">SR</div> <div class="speaker-name">Sari Rahayu, Ph.D.</div> <div class="speaker-role">Pembicara Undangan</div> <div class="speaker-org">Direktur AI Lab — Universitas Indonesia</div> </div> <div class="speaker-card reveal"> <div class="speaker-avatar">BP</div> <div class="speaker-name">Budi Pratama</div> <div class="speaker-role">Pembicara Industri</div> <div class="speaker-org">Co-Founder & CTO — GovTech Solutions ID</div> </div> <div class="speaker-card reveal"> <div class="speaker-avatar">DL</div> <div class="speaker-name">Diana Lestari, M.Kom.</div> <div class="speaker-role">Moderator Panel</div> <div class="speaker-org">Direktur Inovasi — Kemenkominfo</div> </div> <div class="speaker-card reveal"> <div class="speaker-avatar">RH</div> <div class="speaker-name">Rizky Hakim</div> <div class="speaker-role">Pembicara Industri</div> <div class="speaker-org">CEO — Fintech Nusantara Group</div> </div> <div class="speaker-card reveal"> <div class="speaker-avatar">MF</div> <div class="speaker-name">Prof. Maya Fitriani</div> <div class="speaker-role">Pembicara Akademisi</div> <div class="speaker-org">Guru Besar Informatika — ITS Surabaya</div> </div> </div> </section>  <section id="jadwal"> <p class="section-label reveal">Rundown Acara</p> <h2 class="reveal">Jadwal<br>15 Agustus 2026</h2> <div class="divider reveal"></div> <div class="schedule-list"> <div class="sched-item reveal"> <div class="sched-time">07.30 – 08.30</div> <div> <div class="sched-title">Registrasi & Penyambutan</div> <div class="sched-speaker">Panitia Pelaksana</div> </div> <span class="sched-type type-break">Registrasi</span> </div> <div class="sched-item reveal"> <div class="sched-time">08.30 – 09.00</div> <div> <div class="sched-title">Pembukaan & Sambutan Menteri</div> <div class="sched-speaker">Kemenkominfo RI</div> </div> <span class="sched-type type-break">Pembukaan</span> </div> <div class="sched-item reveal"> <div class="sched-time">09.00 – 10.00</div> <div> <div class="sched-title">Keynote: Keamanan Siber di Era Transformasi Digital</div> <div class="sched-speaker">Dr. Andi Rahmat, M.Sc. — BSSN</div> </div> <span class="sched-type type-keynote">Keynote</span> </div> <div class="sched-item reveal"> <div class="sched-time">10.00 – 11.00</div> <div> <div class="sched-title">Sesi: Kecerdasan Buatan & Masa Depan Kerja</div> <div class="sched-speaker">Sari Rahayu, Ph.D. — UI</div> </div> <span class="sched-type type-keynote">Keynote</span> </div> <div class="sched-item reveal"> <div class="sched-time">11.00 – 12.00</div> <div> <div class="sched-title">Panel Diskusi: Ekosistem Startup & Investasi Tech</div> <div class="sched-speaker">Moderator: Diana Lestari · Peserta Panel: 4 Narasumber</div> </div> <span class="sched-type type-panel">Panel</span> </div> <div class="sched-item reveal"> <div class="sched-time">12.00 – 13.00</div> <div> <div class="sched-title">Istirahat & Makan Siang</div> <div class="sched-speaker">Networking Session</div> </div> <span class="sched-type type-break">Istirahat</span> </div> <div class="sched-item reveal"> <div class="sched-time">13.00 – 14.30</div> <div> <div class="sched-title">Workshop: Implementasi AI untuk UMKM Indonesia</div> <div class="sched-speaker">Budi Pratama — GovTech Solutions ID</div> </div> <span class="sched-type type-workshop">Workshop</span> </div> <div class="sched-item reveal"> <div class="sched-time">14.30 – 15.30</div> <div> <div class="sched-title">Sesi: Inklusi Keuangan Digital & Fintech</div> <div class="sched-speaker">Rizky Hakim — Fintech Nusantara Group</div> </div> <span class="sched-type type-keynote">Keynote</span> </div> <div class="sched-item reveal"> <div class="sched-time">15.30 – 16.30</div> <div> <div class="sched-title">Panel: Pendidikan Vokasi & SDM Digital Nasional</div> <div class="sched-speaker">Prof. Maya Fitriani & Panelis Tamu</div> </div> <span class="sched-type type-panel">Panel</span> </div> <div class="sched-item reveal"> <div class="sched-time">16.30 – 17.00</div> <div> <div class="sched-title">Penutupan & Penyerahan Penghargaan</div> <div class="sched-speaker">Panitia Pelaksana</div> </div> <span class="sched-type type-break">Penutupan</span> </div> </div> </section>  <section id="venue" style="background:rgba(255,255,255,.015)"> <p class="section-label reveal">Lokasi Acara</p> <h2 class="reveal">Ballroom Grand<br>Jakarta Convention Center</h2> <div class="divider reveal"></div> <div class="venue-grid"> <div class="venue-map reveal"> <svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" width="140" height="140" rx="4" stroke="#c9a84c" stroke-width="1"/> <line x1="20" y1="90" x2="160" y2="90" stroke="#c9a84c" stroke-width="0.5"/> <line x1="90" y1="20" x2="90" y2="160" stroke="#c9a84c" stroke-width="0.5"/> <circle cx="90" cy="90" r="16" fill="#c9a84c" fill-opacity=".25" stroke="#c9a84c" stroke-width="1.5"/> <circle cx="90" cy="90" r="5" fill="#c9a84c"/> <path d="M90 60 L90 74" stroke="#c9a84c" stroke-width="0.5" stroke-dasharray="3 2"/> <path d="M90 106 L90 120" stroke="#c9a84c" stroke-width="0.5" stroke-dasharray="3 2"/> <path d="M60 90 L74 90" stroke="#c9a84c" stroke-width="0.5" stroke-dasharray="3 2"/> <path d="M106 90 L120 90" stroke="#c9a84c" stroke-width="0.5" stroke-dasharray="3 2"/> </svg> <div style="position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);font-size:.72rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;white-space:nowrap">Jl. Gatot Subroto, Senayan, Jakarta</div> </div> <div class="venue-info reveal"> <div class="info-row"> <div class="info-icon">📅</div> <div><div class="info-label">Tanggal</div><div class="info-val">Sabtu, 15 Agustus 2026</div></div> </div> <div class="info-row"> <div class="info-icon">⏰</div> <div><div class="info-label">Waktu</div><div class="info-val">07.30 WIB – Selesai</div></div> </div> <div class="info-row"> <div class="info-icon">📍</div> <div><div class="info-label">Venue</div><div class="info-val">Ballroom, Lantai 2<br>Jakarta Convention Center<br>Jl. Gatot Subroto, Senayan, Jakarta Pusat 10270</div></div> </div> <div class="info-row"> <div class="info-icon">🚇</div> <div><div class="info-label">Akses Transportasi</div><div class="info-val">MRT: Stasiun Senayan (5 mnt jalan kaki)<br>Transjakarta: Halte Semanggi</div></div> </div> <div class="info-row"> <div class="info-icon">🅿️</div> <div><div class="info-label">Parkir</div><div class="info-val">Tersedia di basement JCC (berbayar)</div></div> </div> </div> </div> </section>  <section id="tiket" class="ticket-section"> <p class="section-label reveal">Pendaftaran</p> <h2 class="reveal">Pilih Paket<br>yang Sesuai</h2> <div class="divider reveal"></div> <div class="tickets-grid"> <div class="ticket-card reveal"> <div class="ticket-type">Early Bird</div> <div class="ticket-price">Rp 299K <span>/ orang</span></div> <div class="ticket-desc">Harga spesial untuk 100 pendaftar pertama. Berlaku hingga 30 Juni 2026.</div> <ul class="ticket-features"> <li>Akses semua sesi & panel</li> <li>Makan siang & snack</li> <li>Sertifikat digital</li> <li>Materi presentasi</li> </ul> <a href="#daftar" class="btn btn-outline" style="display:block;text-align:center">Daftar Early Bird</a> </div> <div class="ticket-card featured reveal"> <div class="ticket-badge">Paling Populer</div> <div class="ticket-type">Reguler</div> <div class="ticket-price">Rp 499K <span>/ orang</span></div> <div class="ticket-desc">Tiket standar dengan akses penuh ke semua rangkaian acara.</div> <ul class="ticket-features"> <li>Akses semua sesi & panel</li> <li>Makan siang & snack</li> <li>Sertifikat digital + fisik</li> <li>Materi presentasi</li> <li>Workshop eksklusif siang</li> </ul> <a href="#daftar" class="btn btn-primary" style="display:block;text-align:center">Daftar Sekarang</a> </div> <div class="ticket-card reveal"> <div class="ticket-type">VIP</div> <div class="ticket-price">Rp 999K <span>/ orang</span></div> <div class="ticket-desc">Pengalaman premium dengan akses eksklusif dan networking dengan pembicara.</div> <ul class="ticket-features"> <li>Semua benefit Reguler</li> <li>Meja VIP di barisan depan</li> <li>Sesi networking eksklusif</li> <li>Meet & greet pembicara</li> <li>Merchandise & goodie bag</li> <li>Foto bersama pembicara</li> </ul> <a href="#daftar" class="btn btn-outline" style="display:block;text-align:center">Daftar VIP</a> </div> </div> <p style="text-align:center;margin-top:2rem;font-size:.8rem;color:var(--muted)"> Diskon 20% untuk kelompok ≥5 orang · Mahasiswa: Rp 149K (dengan KTM) </p> </section>  <section id="daftar" class="register-section"> <div class="register-grid"> <div class="reveal"> <p class="section-label">Formulir Pendaftaran</p> <h2>Amankan<br>Kursi Anda</h2> <div class="divider"></div> <p style="color:rgba(245,240,232,.6);line-height:1.8;font-size:.95rem"> Isi formulir di samping untuk mendaftar. Konfirmasi & invoice akan dikirimkan ke email Anda dalam 1×24 jam kerja setelah pembayaran diverifikasi. </p> <p style="color:rgba(245,240,232,.6);line-height:1.8;font-size:.95rem;margin-top:1rem"> Untuk pendaftaran grup atau pertanyaan, hubungi kami di <a href="mailto:info@seminasional26.id" style="color:var(--gold);text-decoration:none">info@seminasional26.id</a> </p> </div> <form class="reveal" onsubmit="handleSubmit(event)"> <div class="form-row"> <div class="form-group"> <label for="nama_depan">Nama Depan *</label> <input id="nama_depan" type="text" placeholder="Budi" required/> </div> <div class="form-group"> <label for="nama_belakang">Nama Belakang *</label> <input id="nama_belakang" type="text" placeholder="Santoso" required/> </div> </div> <div class="form-group"> <label for="email">Alamat Email *</label> <input id="email" type="email" placeholder="budi@email.com" required/> </div> <div class="form-group"> <label for="hp">Nomor WhatsApp *</label> <input id="hp" type="tel" placeholder="08xx xxxx xxxx" required/> </div> <div class="form-group"> <label for="institusi">Institusi / Perusahaan *</label> <input id="institusi" type="text" placeholder="PT / Universitas / Instansi" required/> </div> <div class="form-group"> <label for="paket">Paket Tiket *</label> <select id="paket" required> <option value="" disabled selected>Pilih paket tiket...</option> <option value="early">Early Bird — Rp 299.000</option> <option value="reguler">Reguler — Rp 499.000</option> <option value="vip">VIP — Rp 999.000</option> <option value="mahasiswa">Mahasiswa — Rp 149.000</option> </select> </div> <div class="form-group"> <label for="sumber">Darimana Anda mengetahui acara ini?</label> <select id="sumber"> <option value="" disabled selected>Pilih sumber informasi...</option> <option>Media Sosial</option> <option>Email / Newsletter</option> <option>Rekomendasi Teman / Kolega</option> <option>Website Resmi</option> <option>Lainnya</option> </select> </div> <button type="submit" class="btn btn-primary" style="margin-top:.5rem">Kirim Pendaftaran</button> <p id="success-msg" style="display:none;color:var(--gold);font-size:.85rem;text-align:center;margin-top:.5rem"> ✓ Pendaftaran berhasil dikirim! Cek email Anda. </p> </form> </div> </section>  <footer> <div class="footer-logo">SEMINASIONAL '26</div> <div class="footer-copy">© 2026 Panitia Seminar Nasional Inovasi Digital. Semua hak dilindungi.</div> <div class="footer-links"> <a href="#">Instagram</a> <a href="#">LinkedIn</a> <a href="#">FAQ</a> <a href="mailto:info@seminasional26.id">Kontak</a> </div> </footer> <script> // Countdown const target = new Date('2026-08-15T07:30:00+07:00'); function updateCountdown() { const now = new Date(); const diff = target - now; if (diff <= 0) { document.getElementById('cd-days').textContent = '00'; return; } const d = Math.floor(diff / 86400000); const h = Math.floor((diff % 86400000) / 3600000); const m = Math.floor((diff % 3600000) / 60000); const s = Math.floor((diff % 60000) / 1000); document.getElementById('cd-days').textContent = String(d).padStart(2,'0'); document.getElementById('cd-hours').textContent = String(h).padStart(2,'0'); document.getElementById('cd-mins').textContent = String(m).padStart(2,'0'); document.getElementById('cd-secs').textContent = String(s).padStart(2,'0'); } updateCountdown(); setInterval(updateCountdown, 1000); // Scroll reveal const reveals = document.querySelectorAll('.reveal'); const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); io.unobserve(e.target); } }); }, { threshold: 0.12 }); reveals.forEach(r => io.observe(r)); // Form submit function handleSubmit(e) { e.preventDefault(); const msg = document.getElementById('success-msg'); msg.style.display = 'block'; e.target.reset(); setTimeout(() => msg.style.display = 'none', 5000); } </script> </body> </html>