@extends('layouts.app')

@section('title', 'QR Yoklama - Dijital Yoklama Sistemi')
@section('description', 'Universiteler icin GPS ve dinamik QR kod destekli dijital yoklama sistemi.')

@section('styles')
<style>
    /* ── HERO ── */
    .hero {
        position: relative; overflow: hidden;
        padding: 8rem 2rem 6rem; text-align: center;
    }
    .hero-glow {
        position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
        width: 900px; height: 600px;
        background: radial-gradient(ellipse, rgba(99,102,241,0.12) 0%, rgba(34,211,238,0.06) 40%, transparent 70%);
        pointer-events: none; filter: blur(40px);
    }
    .hero-grid {
        position: absolute; inset: 0; opacity: 0.03;
        background-image:
            linear-gradient(rgba(255,255,255,1) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,1) 1px, transparent 1px);
        background-size: 80px 80px;
        mask-image: radial-gradient(ellipse 50% 60% at 50% 30%, black, transparent);
    }
    .hero-content { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
    .hero-pill {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 6px 16px 6px 10px; border-radius: 100px;
        background: var(--c-surface-2); border: 1px solid var(--c-border-2);
        font-size: 0.75rem; font-weight: 600; color: var(--c-text-2);
        margin-bottom: 2rem; letter-spacing: 0.01em;
    }
    .hero-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-success); box-shadow: 0 0 8px rgba(52,211,153,0.5); animation: dotPulse 2s ease infinite; }
    @keyframes dotPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

    .hero h1 {
        font-size: clamp(2.75rem, 6vw, 4.5rem); font-weight: 800;
        line-height: 1.05; letter-spacing: -0.04em;
        margin-bottom: 1.5rem;
    }
    .hero h1 span {
        background: linear-gradient(135deg, #818cf8 0%, #22d3ee 50%, #34d399 100%);
        -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .hero-desc {
        font-size: 1.125rem; color: var(--c-text-3); max-width: 520px;
        margin: 0 auto 2.5rem; line-height: 1.7; font-weight: 400;
    }
    .hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

    .btn {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 12px 24px; border-radius: 10px;
        font-size: 0.875rem; font-weight: 600; border: none; cursor: pointer;
        transition: all var(--transition); text-decoration: none; font-family: inherit;
    }
    .btn-hero {
        background: var(--c-primary); color: #fff;
        box-shadow: 0 0 24px rgba(99,102,241,0.3), inset 0 1px 0 rgba(255,255,255,0.12);
    }
    .btn-hero:hover {
        background: #818cf8; transform: translateY(-2px);
        box-shadow: 0 0 40px rgba(99,102,241,0.45), inset 0 1px 0 rgba(255,255,255,0.15);
        text-decoration: none; color: #fff;
    }
    .btn-ghost {
        background: rgba(255,255,255,0.04); color: var(--c-text-2);
        border: 1px solid var(--c-border-2);
    }
    .btn-ghost:hover { background: rgba(255,255,255,0.08); color: var(--c-text); border-color: rgba(255,255,255,0.15); text-decoration: none; }

    /* ── STATS BAR ── */
    .stats-bar {
        max-width: 880px; margin: -2rem auto 0; position: relative; z-index: 2; padding: 0 2rem;
    }
    .stats-inner {
        display: flex; border-radius: 16px; overflow: hidden;
        background: var(--c-surface); border: 1px solid var(--c-border);
        box-shadow: var(--shadow-lg);
    }
    .stat {
        flex: 1; padding: 1.5rem; text-align: center;
        position: relative;
    }
    .stat + .stat::before {
        content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
        width: 1px; background: var(--c-border);
    }
    .stat-val {
        font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em;
        background: linear-gradient(135deg, #818cf8, #22d3ee);
        -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
        line-height: 1.2;
    }
    .stat-lbl { font-size: 0.6875rem; color: var(--c-text-4); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }

    /* ── SECTION ── */
    .sec { padding: 6rem 2rem; }
    .sec-inner { max-width: 1100px; margin: 0 auto; }
    .sec-head { text-align: center; margin-bottom: 4rem; }
    .sec-tag {
        display: inline-block; font-size: 0.6875rem; font-weight: 700;
        color: var(--c-primary); text-transform: uppercase;
        letter-spacing: 0.12em; margin-bottom: 12px;
        padding: 4px 12px; border-radius: 6px;
        background: var(--c-primary-soft);
    }
    .sec-head h2 {
        font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 800;
        letter-spacing: -0.03em; margin-bottom: 12px; line-height: 1.15;
    }
    .sec-head p { color: var(--c-text-3); font-size: 1rem; max-width: 480px; margin: 0 auto; }
    .sec-alt { background: var(--c-surface); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }

    /* ── FEATURE GRID ── */
    .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--c-border); border-radius: 16px; overflow: hidden; border: 1px solid var(--c-border); }
    .feat {
        background: var(--c-surface); padding: 2.25rem;
        transition: background var(--transition);
    }
    .feat:hover { background: var(--c-surface-2); }
    .feat-ico {
        width: 44px; height: 44px; border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
        margin-bottom: 1.25rem;
    }
    .feat h3 { font-size: 0.9375rem; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em; }
    .feat p { font-size: 0.8125rem; color: var(--c-text-3); line-height: 1.65; }

    .ico-primary { background: var(--c-primary-soft); color: var(--c-primary); }
    .ico-accent { background: var(--c-accent-soft); color: var(--c-accent); }
    .ico-success { background: var(--c-success-soft); color: var(--c-success); }
    .ico-warning { background: var(--c-warning-soft); color: var(--c-warning); }
    .ico-danger { background: var(--c-danger-soft); color: var(--c-danger); }
    .ico-purple { background: rgba(168,85,247,0.1); color: #a855f7; }

    /* ── FLOW / HOW IT WORKS ── */
    .flow-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
    .flow-col h3 {
        font-size: 1rem; font-weight: 700; margin-bottom: 2rem;
        display: flex; align-items: center; gap: 10px;
    }
    .flow-tag {
        font-size: 0.625rem; font-weight: 700; padding: 3px 10px; border-radius: 100px;
        text-transform: uppercase; letter-spacing: 0.06em;
    }
    .flow-tag-purple { background: rgba(168,85,247,0.12); color: #c084fc; }
    .flow-tag-cyan { background: var(--c-accent-soft); color: var(--c-accent); }

    .flow-step {
        display: flex; gap: 16px; padding-bottom: 2rem; position: relative;
    }
    .flow-step:last-child { padding-bottom: 0; }
    .flow-num {
        width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        font-size: 0.75rem; font-weight: 800; position: relative; z-index: 1;
    }
    .flow-step:not(:last-child)::after {
        content: ''; position: absolute; left: 15px; top: 36px;
        width: 2px; height: calc(100% - 36px);
        background: linear-gradient(to bottom, var(--c-border-2), transparent);
    }
    .flow-num-purple { background: rgba(168,85,247,0.15); color: #c084fc; }
    .flow-num-cyan { background: var(--c-accent-soft); color: var(--c-accent); }
    .flow-info { padding-top: 4px; }
    .flow-info strong { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 2px; }
    .flow-info span { font-size: 0.8125rem; color: var(--c-text-3); }

    /* ── SECURITY GRID ── */
    .sec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .sec-item {
        display: flex; gap: 14px; padding: 1.25rem;
        background: var(--c-surface); border: 1px solid var(--c-border);
        border-radius: var(--radius); transition: border-color var(--transition);
    }
    .sec-item:hover { border-color: var(--c-border-2); }
    .sec-check {
        width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
        background: var(--c-success-soft); color: var(--c-success);
        display: flex; align-items: center; justify-content: center; margin-top: 1px;
    }
    .sec-item strong { font-size: 0.8125rem; font-weight: 600; display: block; margin-bottom: 2px; }
    .sec-item span { font-size: 0.75rem; color: var(--c-text-3); line-height: 1.5; }

    /* ── TECH ── */
    .tech-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .tech-card {
        background: var(--c-surface); border: 1px solid var(--c-border);
        border-radius: var(--radius); padding: 1.75rem; text-align: center;
        transition: all var(--transition);
    }
    .tech-card:hover { border-color: var(--c-border-2); transform: translateY(-2px); }
    .tech-ico { margin-bottom: 12px; }
    .tech-name { font-weight: 700; font-size: 0.9375rem; margin-bottom: 2px; }
    .tech-desc { font-size: 0.6875rem; color: var(--c-text-4); text-transform: uppercase; letter-spacing: 0.04em; }

    /* ── CTA ── */
    .cta-box {
        max-width: 640px; margin: 0 auto; text-align: center;
        padding: 3.5rem 2.5rem; border-radius: var(--radius-lg);
        background: var(--c-surface); border: 1px solid var(--c-border);
        position: relative; overflow: hidden;
    }
    .cta-box::before {
        content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
        background: radial-gradient(circle at 50% 0%, rgba(99,102,241,0.08), transparent 50%);
        pointer-events: none;
    }
    .cta-box h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 8px; letter-spacing: -0.02em; position: relative; }
    .cta-box p { color: var(--c-text-3); font-size: 0.9375rem; margin-bottom: 2rem; position: relative; }

    /* ── RESPONSIVE ── */
    @media (max-width: 1024px) {
        .feat-grid { grid-template-columns: repeat(2, 1fr); }
        .tech-row { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
        .hero { padding: 5rem 1.25rem 4rem; }
        .feat-grid, .flow-wrap, .sec-grid { grid-template-columns: 1fr; }
        .tech-row { grid-template-columns: repeat(2, 1fr); }
        .stats-inner { flex-wrap: wrap; }
        .stat { flex: none; width: 33.33%; }
        .stat + .stat::before { display: none; }
        .sec { padding: 4rem 1.25rem; }
    }
    @media (max-width: 480px) {
        .stat { width: 50%; }
        .tech-row { grid-template-columns: 1fr; }
    }
</style>
@endsection

@section('content')

<!-- HERO -->
<section class="hero">
    <div class="hero-glow"></div>
    <div class="hero-grid"></div>
    <div class="hero-content">
        <div class="hero-pill">
            <span class="hero-pill-dot"></span>
            Proje 1002-A &middot; Aktif
        </div>
        <h1>Dijital Yoklama,<br><span>Yeni Nesil</span> Guvenlik</h1>
        <p class="hero-desc">Dinamik QR kod ve GPS konum dogrulamasi ile cift katmanli guvenlik. Sahte yoklamayi tamamen ortadan kaldiran akilli platform.</p>
        <div class="hero-actions">
            <a href="/dashboard" class="btn btn-hero">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
                Panele Giris Yap
            </a>
            <a href="#features" class="btn btn-ghost">
                Ozellikleri Incele
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg>
            </a>
        </div>
    </div>
</section>

<!-- STATS -->
<div class="stats-bar">
    <div class="stats-inner">
        <div class="stat"><div class="stat-val">{{ $stats['students'] }}</div><div class="stat-lbl">Ogrenci</div></div>
        <div class="stat"><div class="stat-val">{{ $stats['instructors'] }}</div><div class="stat-lbl">Ogretim Uyesi</div></div>
        <div class="stat"><div class="stat-val">{{ $stats['courses'] }}</div><div class="stat-lbl">Aktif Ders</div></div>
        <div class="stat"><div class="stat-val">{{ $stats['sessions'] }}</div><div class="stat-lbl">Oturum</div></div>
        <div class="stat"><div class="stat-val">{{ $stats['records'] }}</div><div class="stat-lbl">Katilim</div></div>
    </div>
</div>

<!-- FEATURES -->
<section id="features" class="sec">
    <div class="sec-inner">
        <div class="sec-head">
            <span class="sec-tag">Ozellikler</span>
            <h2>Guvenli ve Akilli Yoklama</h2>
            <p>Geleneksel yoklama yontemlerinin tum sorunlarini ortadan kaldiran modern sistem.</p>
        </div>
        <div class="feat-grid">
            <div class="feat">
                <div class="feat-ico ico-primary"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg></div>
                <h3>Dinamik QR Kod</h3>
                <p>Her yoklama icin benzersiz, periyodik yenilenen QR kodlar. Ekran goruntusu paylasimi engellenir.</p>
            </div>
            <div class="feat">
                <div class="feat-ico ico-accent"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="10" r="3"/><path d="M12 21.7C17.3 17 20 13 20 10a8 8 0 1 0-16 0c0 3 2.7 7 8 11.7z"/></svg></div>
                <h3>GPS Konum Dogrulama</h3>
                <p>Haversine formuluyle hassas mesafe hesaplama. Ogrencinin sinifta bulundugu dogrulanir.</p>
            </div>
            <div class="feat">
                <div class="feat-ico ico-success"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg></div>
                <h3>Cift Katmanli Guvenlik</h3>
                <p>Hem QR kod hem GPS dogrulamasi gerekli. Tek basina hicbiri yeterli degil.</p>
            </div>
            <div class="feat">
                <div class="feat-ico ico-danger"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><circle cx="12" cy="17" r="0.5" fill="currentColor"/></svg></div>
                <h3>Sahte Konum Tespiti</h3>
                <p>Mock location, accuracy anomalileri ve cihaz bilgisi analizi ile fake GPS engellenir.</p>
            </div>
            <div class="feat">
                <div class="feat-ico ico-warning"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></div>
                <h3>Excel Raporlama</h3>
                <p>Ders ve tarih bazli detayli raporlar. Devamsizlik orani, toplam katilim ve istatistikler.</p>
            </div>
            <div class="feat">
                <div class="feat-ico ico-purple"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg></div>
                <h3>Canli Katilim Paneli</h3>
                <p>Ogretim elemani yoklama sirasinda anlik katilimi izler. Detayli ogrenci listesi.</p>
            </div>
        </div>
    </div>
</section>

<!-- HOW IT WORKS -->
<section class="sec sec-alt">
    <div class="sec-inner">
        <div class="sec-head">
            <span class="sec-tag">Kullanim Akisi</span>
            <h2>Nasil Calisir?</h2>
            <p>Minimum adimda maksimum verimlilik.</p>
        </div>
        <div class="flow-wrap">
            <div class="flow-col">
                <h3><span class="flow-tag flow-tag-purple">Ogretim Elemani</span> Yoklama Baslat</h3>
                <div class="flow-step">
                    <div class="flow-num flow-num-purple">1</div>
                    <div class="flow-info"><strong>Ders Sec</strong><span>Yetkili oldugunuz dersler arasindan seciminizi yapin</span></div>
                </div>
                <div class="flow-step">
                    <div class="flow-num flow-num-purple">2</div>
                    <div class="flow-info"><strong>Konum &amp; Sure</strong><span>Derslik secin veya konumunuzu kullanin, yaricap ve sure ayarlayin</span></div>
                </div>
                <div class="flow-step">
                    <div class="flow-num flow-num-purple">3</div>
                    <div class="flow-info"><strong>QR Goster</strong><span>Dinamik QR kod otomatik uretilir ve periyodik yenilenir</span></div>
                </div>
                <div class="flow-step">
                    <div class="flow-num flow-num-purple">4</div>
                    <div class="flow-info"><strong>Canli Takip</strong><span>Anlik katilim durumunu panelden izleyin, rapor alin</span></div>
                </div>
            </div>
            <div class="flow-col">
                <h3><span class="flow-tag flow-tag-cyan">Ogrenci</span> Yoklama Ver</h3>
                <div class="flow-step">
                    <div class="flow-num flow-num-cyan">1</div>
                    <div class="flow-info"><strong>Giris Yap</strong><span>E-posta ve sifre ile guvenli giris</span></div>
                </div>
                <div class="flow-step">
                    <div class="flow-num flow-num-cyan">2</div>
                    <div class="flow-info"><strong>Aktif Yoklama</strong><span>Kayitli derslerinizde aktif yoklama otomatik listelenir</span></div>
                </div>
                <div class="flow-step">
                    <div class="flow-num flow-num-cyan">3</div>
                    <div class="flow-info"><strong>QR Okut</strong><span>Kamera ile ogretmenin ekranindaki QR kodu tarayin</span></div>
                </div>
                <div class="flow-step">
                    <div class="flow-num flow-num-cyan">4</div>
                    <div class="flow-info"><strong>Otomatik Dogrulama</strong><span>QR + GPS cift katmanli dogrulama, sonuc aninda gosterilir</span></div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- SECURITY -->
<section class="sec">
    <div class="sec-inner">
        <div class="sec-head">
            <span class="sec-tag">Guvenlik</span>
            <h2>Kurumsal Standartlar</h2>
            <p>KVKK uyumlu, katmanli guvenlik mimarisi.</p>
        </div>
        <div class="sec-grid">
            @foreach([
                ['Hashlenmis Sifreler', 'Bcrypt 12 round ile guvenli hashleme'],
                ['Token Tabanli Auth', 'Laravel Sanctum ile API token yonetimi'],
                ['Rol Bazli Yetkilendirme', 'Ogrenci, ogretim elemani ve admin rolleri'],
                ['Detayli Loglama', 'Tum islemler zaman damgasiyla kayit altinda'],
                ['KVKK Uyumlulugu', 'Veri minimizasyonu ve onay mekanizmasi'],
                ['Sahte Konum Korumasi', 'Mock location ve cihaz tabanli dogrulama'],
            ] as $item)
            <div class="sec-item">
                <div class="sec-check"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg></div>
                <div><strong>{{ $item[0] }}</strong><span>{{ $item[1] }}</span></div>
            </div>
            @endforeach
        </div>
    </div>
</section>

<!-- TECH -->
<section class="sec sec-alt">
    <div class="sec-inner">
        <div class="sec-head">
            <span class="sec-tag">Teknoloji</span>
            <h2>Kullanilan Teknolojiler</h2>
        </div>
        <div class="tech-row">
            <div class="tech-card">
                <div class="tech-ico"><svg width="36" height="36" viewBox="0 0 36 36" fill="none"><rect width="36" height="36" rx="10" fill="rgba(248,113,113,0.08)"/><path d="M18 8L10 12.5v11L18 28l8-4.5v-11L18 8z" stroke="#f87171" stroke-width="1.5" fill="none"/><path d="M18 18.5v9.5M10 12.5L18 17l8-4.5" stroke="#f87171" stroke-width="1.5"/></svg></div>
                <div class="tech-name">Laravel {{ explode('.', app()->version())[0] }}</div>
                <div class="tech-desc">PHP {{ PHP_MAJOR_VERSION }}.{{ PHP_MINOR_VERSION }} Backend</div>
            </div>
            <div class="tech-card">
                <div class="tech-ico"><svg width="36" height="36" viewBox="0 0 36 36" fill="none"><rect width="36" height="36" rx="10" fill="rgba(251,191,36,0.08)"/><circle cx="18" cy="18" r="7" stroke="#fbbf24" stroke-width="1.5" fill="none"/><path d="M18 11v14M11 18h14" stroke="#fbbf24" stroke-width="1.5"/></svg></div>
                <div class="tech-name">Sanctum</div>
                <div class="tech-desc">Token Auth</div>
            </div>
            <div class="tech-card">
                <div class="tech-ico"><svg width="36" height="36" viewBox="0 0 36 36" fill="none"><rect width="36" height="36" rx="10" fill="rgba(52,211,153,0.08)"/><rect x="11" y="11" width="14" height="14" rx="2" stroke="#34d399" stroke-width="1.5" fill="none"/><path d="M15 17h6M15 21h4" stroke="#34d399" stroke-width="1.5" stroke-linecap="round"/></svg></div>
                <div class="tech-name">Excel Export</div>
                <div class="tech-desc">Maatwebsite</div>
            </div>
            <div class="tech-card">
                <div class="tech-ico"><svg width="36" height="36" viewBox="0 0 36 36" fill="none"><rect width="36" height="36" rx="10" fill="rgba(99,102,241,0.08)"/><rect x="12" y="12" width="12" height="12" rx="1" stroke="#6366f1" stroke-width="1.5" fill="none"/><circle cx="18" cy="18" r="2" fill="#6366f1"/><path d="M12 16h2.5M21.5 16h2.5M12 20h2.5M21.5 20h2.5M16 12v2.5M20 12v2.5M16 21.5V24M20 21.5V24" stroke="#6366f1" stroke-width="1.5" stroke-linecap="round"/></svg></div>
                <div class="tech-name">QR + GPS</div>
                <div class="tech-desc">Haversine</div>
            </div>
        </div>
    </div>
</section>

<!-- CTA -->
<section class="sec">
    <div class="sec-inner">
        <div class="cta-box">
            <h2>Hemen Baslayin</h2>
            <p>Sisteme giris yapin ve dijital yoklamayi deneyimleyin.</p>
            <a href="/dashboard" class="btn btn-hero">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
                Panele Git
            </a>
        </div>
    </div>
</section>

@endsection