{{--
    Preloader — layar pembuka sebelum sampul undangan muncul, sekaligus ETALASE JASA RAFNST TECH
    (website, aplikasi, AI, dan teknologi lainnya mulai Rp100 ribu).
    Logika progress bar & animasi keluar ada di resources/js/preloader.js (ID di bawah jangan diubah):
    #preloader, #preloader-panel, #preloader-bar, #preloader-percent, #preloader-particles

    Cara pasang logo:
    Letakkan file logo Anda di public/images/rafnst-logo.png (PNG transparan disarankan).
    Jika belum ada, otomatis tampil singkatan "RT" (tidak ada gambar rusak).
--}}
<style>
    /* =====================================================================
       PRELOADER V6 — fokus jasa teknologi: website, aplikasi, AI, dll. Harga mulai Rp100 ribu.
       Semua animasi hanya transform/opacity (ringan di HP). Teks utama TIDAK tergantung animasi
       (selalu terbaca walau animasi dimatikan).
    ===================================================================== */
    #preloader { z-index: 10000; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)); }
    #preloader #preloader-panel { margin: auto; }

    /* Cahaya latar statis (gradasi saja, nol biaya render) */
    #preloader .pl-glow {
        position: absolute; inset: 0; pointer-events: none;
        background:
            radial-gradient(60% 40% at 50% 8%, rgba(217,179,106,.20), transparent 70%),
            radial-gradient(70% 45% at 50% 100%, rgba(244,63,94,.28), transparent 70%);
    }

    /* Ikon teknologi mengambang, sengaja sedikit */
    #preloader .pl-float { position: absolute; font-size: 22px; line-height: 1; opacity: .5; pointer-events: none; animation: plFloat 4.2s ease-in-out infinite; }
    @keyframes plFloat { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-14px) rotate(8deg); } }

    /* ---------- Logo + nama brand ---------- */
    #preloader .logo-orbit-ring {
        position: absolute; inset: -8px; border-radius: 999px; z-index: -1;
        background: conic-gradient(from 0deg, #fda4af, #F3E1B5, #fda4af, #fecdd3, #fda4af);
        animation: logoRingSpin 5s linear infinite; opacity: .85;
    }
    @keyframes logoRingSpin { to { transform: rotate(360deg); } }
    #preloader .logo-orbit-ring::after { content: ''; position: absolute; inset: 3px; border-radius: 999px; background: #2b0709; }
    #preloader-logo-fallback { animation: preloaderLogoPulse 2.2s ease-in-out infinite; }
    @keyframes preloaderLogoPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

    #preloader .pl-brand {
        font-family: 'Fredoka', 'Jost', ui-rounded, system-ui, sans-serif; font-weight: 600; letter-spacing: .12em;
        font-size: clamp(1.35rem, 5.4vw, 1.75rem); line-height: 1.1;
        background: linear-gradient(90deg, #F3E1B5, #fda4af, #F3E1B5); -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    #preloader .pl-made { font-family: 'Jost', system-ui, sans-serif; font-size: .8rem; color: rgba(255,255,255,.7); }

    /* ---------- Headline besar ---------- */
    #preloader .pl-headline {
        margin: 1.1rem 0 0; font-family: 'Fredoka', 'Jost', ui-rounded, system-ui, sans-serif; font-weight: 600;
        font-size: clamp(2rem, 9.4vw, 3.4rem); line-height: 1.04; letter-spacing: -.01em; color: #fff;
        text-wrap: balance;
    }
    #preloader .pl-headline .pl-line { display: block; }
    /* gradasi emas dipasang di tiap kata (bukan di induk), karena background-clip:text pada induk bisa membuat kata beranimasi tak terlihat */
    #preloader .pl-headline .pl-gold .pl-word {
        background: linear-gradient(95deg, #fff3cf 0%, #F3E1B5 35%, #D9B36C 100%);
        -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em;
    }
    #preloader .pl-word, #preloader .pl-chip { display: inline-block; opacity: 0; transform: translateY(14px) scale(.96); animation: plPop .7s cubic-bezier(.34,1.56,.64,1) forwards; animation-delay: calc(.15s + var(--w, 0) * .09s); }
    @keyframes plPop { to { opacity: 1; transform: translateY(0) scale(1); } }

    #preloader .pl-sub {
        margin: .85rem auto 0; max-width: 26rem; font-family: 'Jost', system-ui, sans-serif;
        font-size: clamp(.92rem, 3.8vw, 1.05rem); line-height: 1.45; color: rgba(255,255,255,.82); text-wrap: balance;
    }

    /* ---------- Stiker harga ---------- */
    #preloader .pl-price {
        position: relative; display: inline-flex; align-items: baseline; gap: .5rem; margin-top: 1.1rem; padding: .55rem 1.35rem .6rem;
        border-radius: 999px; transform: rotate(-2.5deg); color: #4a0f1c;
        font-family: 'Fredoka', 'Jost', ui-rounded, system-ui, sans-serif; font-weight: 600;
        background: linear-gradient(120deg, #fff3cf, #F3E1B5 45%, #D9B36C); border: 2px solid #fff3cf;
        animation: plSticker 3.2s ease-in-out infinite; overflow: hidden;
    }
    #preloader .pl-price small { font-size: .95rem; font-weight: 500; }
    #preloader .pl-price b { font-size: clamp(1.7rem, 7.4vw, 2.3rem); font-weight: 700; line-height: 1; letter-spacing: -.01em; }
    #preloader .pl-price::after {
        content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; transform: skewX(-20deg);
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); animation: plShine 3.2s ease-in-out infinite;
    }
    @keyframes plSticker { 0%,100% { transform: rotate(-2.5deg) scale(1); } 50% { transform: rotate(1.5deg) scale(1.05); } }
    @keyframes plShine { 0% { left: -40%; } 55%,100% { left: 130%; } }

    /* ---------- Kartu layanan ---------- */
    #preloader .pl-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; width: 100%; margin-top: 1.2rem; }
    #preloader .pl-chip {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; padding: .55rem .3rem;
        border-radius: .85rem; background: rgba(255,255,255,.07); border: 1px solid rgba(217,179,106,.35);
        font-family: 'Fredoka', 'Jost', sans-serif; font-weight: 500; font-size: .8rem; line-height: 1.15; color: #fde7ea;
    }
    #preloader .pl-chip i { font-style: normal; font-size: 1.35rem; line-height: 1; }
    #preloader .pl-chip.is-hot { background: rgba(217,179,106,.16); border-color: rgba(243,225,181,.8); color: #fff3cf; }

    /* ---------- Tombol WhatsApp besar ---------- */
    #preloader .pl-cta {
        position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; width: 100%; min-height: 64px;
        margin-top: 1.25rem; padding: .75rem 1.25rem; border-radius: 1.1rem; color: #052e16; text-decoration: none;
        font-family: 'Fredoka', 'Jost', ui-rounded, system-ui, sans-serif;
        background: linear-gradient(135deg, #86efac, #4ade80 55%, #22c55e); border: 2px solid #bbf7d0;
        transition: transform .3s cubic-bezier(.34,1.56,.64,1);
    }
    #preloader .pl-cta:hover { transform: scale(1.03); }
    #preloader .pl-cta:active { transform: scale(.97); }
    #preloader .pl-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
    #preloader .pl-cta::before { /* cincin denyut: transform/opacity saja */
        content: ''; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid rgba(134,239,172,.9); pointer-events: none;
        animation: plPing 2.2s ease-out infinite;
    }
    @keyframes plPing { 0% { transform: scale(1); opacity: .9; } 80%,100% { transform: scale(1.12, 1.35); opacity: 0; } }
    #preloader .pl-cta-main { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; font-size: clamp(1.1rem, 4.6vw, 1.3rem); line-height: 1.2; }
    #preloader .pl-cta-main svg { flex: none; animation: waWiggle 2.6s ease-in-out infinite; }
    @keyframes waWiggle { 0%,90%,100% { transform: rotate(0deg); } 93% { transform: rotate(-14deg); } 96% { transform: rotate(12deg); } }
    #preloader .pl-cta-num { font-weight: 600; font-size: clamp(1.05rem, 4.4vw, 1.2rem); letter-spacing: .04em; font-variant-numeric: tabular-nums; }

    /* ---------- Progress ---------- */
    #preloader .cute-bar-heart {
        position: absolute; top: 50%; font-size: 12px; transform: translate(-50%, -50%);
        left: var(--bar-progress, 0%); transition: left .25s ease; animation: barHeartBob 1s ease-in-out infinite;
    }
    @keyframes barHeartBob { 0%,100% { margin-top: 0; } 50% { margin-top: -3px; } }
    #preloader-bar::before {
        content: ''; position: absolute; inset: 0; border-radius: 999px; overflow: hidden;
        background: linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
        background-size: 60% 100%; background-repeat: no-repeat; background-position: -60% 0; animation: barShine 1.6s ease-in-out infinite;
    }
    @keyframes barShine { 0% { background-position: -60% 0; } 100% { background-position: 160% 0; } }
    #preloader .loading-dots span { animation: loadingDotBlink 1.4s ease-in-out infinite; opacity: .2; }
    #preloader .loading-dots span:nth-child(2) { animation-delay: .2s; }
    #preloader .loading-dots span:nth-child(3) { animation-delay: .4s; }
    @keyframes loadingDotBlink { 0%,100% { opacity: .2; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

    /* ---------- Responsif & hemat daya ---------- */
    @media (max-height: 700px) {
        #preloader .pl-logo { width: 3.5rem; height: 3.5rem; margin-bottom: .6rem; }
        #preloader .pl-headline { margin-top: .7rem; }
        #preloader .pl-sub { display: none; }
        #preloader .pl-price, #preloader .pl-services, #preloader .pl-cta { margin-top: .8rem; }
    }
    @media (max-width: 380px) { #preloader .pl-chip { font-size: .74rem; } }
    html.is-lite #preloader .logo-orbit-ring { animation-duration: 9s; }
    html.is-weak #preloader .pl-float { display: none; }
    @media (prefers-reduced-motion: reduce) {
        #preloader .pl-word, #preloader .pl-chip { opacity: 1; transform: none; animation: none; }
    }
</style>

<div
    id="preloader"
    class="fixed inset-0 flex items-start justify-center bg-[#2b0709] text-white"
    role="status" aria-live="polite" aria-label="Memuat undangan"
>
    <canvas id="preloader-particles" class="absolute inset-0 w-full h-full pointer-events-none"></canvas>
    <div class="pl-glow" aria-hidden="true"></div>
    <div class="absolute inset-0 pointer-events-none bg-[radial-gradient(ellipse_at_center,_transparent_50%,_rgba(20,4,4,0.6)_100%)]"></div>

    {{-- Ikon teknologi mengambang (disembunyikan di perangkat lemah) --}}
    <span class="pl-float top-[10%] left-[8%]" aria-hidden="true" style="animation-delay:.2s">&#128187;</span>
    <span class="pl-float hidden sm:block top-[16%] right-[10%]" aria-hidden="true" style="animation-delay:1.4s">&#129302;</span>
    <span class="pl-float bottom-[9%] right-[8%]" aria-hidden="true" style="animation-delay:2.2s">&#128640;</span>

    <div id="preloader-panel" class="relative z-10 flex flex-col items-center text-center w-full max-w-md sm:max-w-xl">
        <div class="pl-logo relative w-16 h-16 sm:w-20 sm:h-20 mb-3">
            <div class="logo-orbit-ring" aria-hidden="true"></div>
            <img
                src="{{ asset('images/rafnst-logo.png') }}"
                alt="RAFNST TECH"
                loading="eager" decoding="async" fetchpriority="high"
                class="relative w-full h-full object-contain p-1.5"
                onerror="this.style.display='none'; var fb=document.getElementById('preloader-logo-fallback'); if(fb){fb.classList.remove('hidden'); fb.classList.add('flex');}"
            >
            <div
                id="preloader-logo-fallback"
                class="hidden absolute inset-0 rounded-full border border-rose-400/50 items-center justify-center font-display text-2xl tracking-wide text-rose-300"
            >RT</div>
        </div>

        <p class="pl-made">Undangan digital ini karya</p>
        <p class="pl-brand">RAFNST TECH</p>

        <h2 class="pl-headline">
            <span class="pl-line"><span class="pl-word" style="--w:0">Website,</span> <span class="pl-word" style="--w:1">Aplikasi,</span></span>
            <span class="pl-line pl-gold"><span class="pl-word" style="--w:2">AI</span> <span class="pl-word" style="--w:3">&amp;</span> <span class="pl-word" style="--w:4">Teknologi</span></span>
            <span class="pl-line"><span class="pl-word" style="--w:5">Impian</span> <span class="pl-word" style="--w:6">Anda</span></span>
        </h2>

        <p class="pl-sub">Dari website bisnis, aplikasi, chatbot AI, hingga sistem custom. Dikerjakan profesional dengan harga bersahabat.</p>

        <div class="pl-price" aria-label="Mulai Rp100 ribu">
            <small>Mulai</small><b>Rp100 ribu</b>
        </div>

        <div class="pl-services" aria-label="Layanan RAFNST TECH">
            <div class="pl-chip" style="--w:7"><i aria-hidden="true">&#127760;</i>Website</div>
            <div class="pl-chip" style="--w:8"><i aria-hidden="true">&#128241;</i>Aplikasi Mobile</div>
            <div class="pl-chip is-hot" style="--w:9"><i aria-hidden="true">&#129302;</i>AI &amp; Chatbot</div>
            <div class="pl-chip" style="--w:10"><i aria-hidden="true">&#128722;</i>Toko Online</div>
            <div class="pl-chip" style="--w:11"><i aria-hidden="true">&#9881;&#65039;</i>Sistem Custom</div>
            <div class="pl-chip" style="--w:12"><i aria-hidden="true">&#128140;</i>Undangan Digital</div>
        </div>

        <a
            href="https://wa.me/6281161662102?text=Halo%20RAFNST%20TECH%2C%20saya%20tertarik%20membuat%20website%2C%20aplikasi%2C%20atau%20solusi%20AI.%20Boleh%20konsultasi%3F"
            target="_blank" rel="noopener"
            class="pl-cta"
        >
            <span class="pl-cta-main">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                    <path d="M12.04 2c-5.5 0-9.96 4.46-9.96 9.96 0 1.76.46 3.45 1.32 4.95L2 22l5.24-1.37a9.9 9.9 0 004.8 1.22h.01c5.5 0 9.96-4.46 9.96-9.96S17.54 2 12.04 2zm5.8 14.24c-.24.68-1.4 1.3-1.93 1.38-.5.08-1.13.11-1.82-.11-.42-.13-.96-.31-1.65-.6-2.9-1.25-4.8-4.16-4.94-4.35-.14-.19-1.18-1.57-1.18-3s.75-2.13 1.02-2.42c.27-.29.58-.36.78-.36h.55c.18 0 .42-.02.65.5.27.63.9 2.17.98 2.33.08.16.13.35.03.55-.1.2-.15.33-.3.5-.15.18-.31.4-.44.53-.15.15-.3.31-.13.6.17.29.76 1.27 1.65 2.06 1.13 1.02 2.09 1.34 2.38 1.49.29.15.46.13.63-.08.17-.2.72-.83.91-1.12.19-.29.39-.24.65-.14.27.1 1.7.8 1.99.95.29.15.48.22.55.34.07.13.07.72-.17 1.4z"/>
                </svg>
                Konsultasi via WhatsApp
            </span>
            <span class="pl-cta-num">0811-6166-2102</span>
        </a>

        <div class="relative w-52 sm:w-64 h-[3px] bg-white/10 rounded-full overflow-visible mt-6">
            <div class="h-full rounded-full overflow-hidden">
                <div id="preloader-bar" class="h-full bg-rose-500 rounded-full relative" style="width: 0%">
                    <span class="absolute -right-1.5 -top-2 text-[10px] cute-bar-heart" aria-hidden="true">&#10024;</span>
                </div>
            </div>
        </div>
        <p class="mt-3 text-xs text-white/60 font-sans tabular-nums">
            <span id="preloader-percent">0</span>%
            <span class="loading-dots ml-2 text-rose-200/80">Menyiapkan undangan<span>.</span><span>.</span><span>.</span></span>
        </p>
    </div>
</div>