@extends('lyt.app')

@section('title', 'Online Giriş')

@section('content')

<section class="pageBanner"
    style="background:url('https://figenkonak.com/storage/pages/breadcumbs/01JXYDAQ4KGJGFS4QTT1F0X2HK.webp') no-repeat center center / cover;">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="banner_content text-center">
                    <h4><a href="{{ url('/') }}">Anasayfa</a> - Online İşlemler</h4>
                    <h2>Online Giriş</h2>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
:root{
    --accent:#2563eb;
    --accent-soft:#dbeafe;
    --border:#e2e8f0;
    --muted:#64748b;
    --radius:16px;
}

.login-card{
    max-width:420px;
    margin:70px auto;
    background:#ffffff;
    border-radius:24px;
    padding:42px 36px;
    box-shadow:0 20px 50px rgba(15,23,42,.12);
}

.login-card h3{
    text-align:center;
    margin-bottom:10px;
}

.login-card p.sub{
    text-align:center;
    font-size:14px;
    color:var(--muted);
    margin-bottom:28px;
}

.field{
    position:relative;
    margin-bottom:22px;
}
.field input{
    width:100%;
    padding:18px 16px;
    border-radius:var(--radius);
    border:1px solid var(--border);
    background:#f9fafb;
    font-size:15px;
    outline:none;
}
.field input:focus{
    background:#fff;
    border-color:var(--accent);
    box-shadow:0 0 0 6px var(--accent-soft);
}
.field label{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    font-size:14px;
    color:var(--muted);
    background:#fff;
    padding:0 6px;
    pointer-events:none;
    transition:.2s;
}
.field input:focus+label,
.field input:not(:placeholder-shown)+label{
    top:-8px;
    font-size:12px;
    color:var(--accent);
}

.info{
    background:#f1f5f9;
    border-left:4px solid #2563eb;
    padding:14px 16px;
    border-radius:14px;
    font-size:13px;
    color:#334155;
    margin-bottom:22px;
    text-align:center;
    font-weight:500;
}

.btn-primary{
    border:none;
    border-radius:14px;
    padding:14px;
    font-weight:600;
    width:100%;
    box-shadow:0 12px 24px rgba(37,99,235,.25);
}

.login-footer{
    text-align:center;
    font-size:13px;
    color:var(--muted);
    margin-top:20px;
}
.login-footer a{
    color:var(--accent);
    text-decoration:none;
    font-weight:500;
}
</style>

<section class="commonSection">
<div class="login-card">

    <h3>Online Giriş</h3>
  <p class="sub">
    Marka, patent ve danışmanlık başvurularınıza ait
    tüm süreçleri online olarak kolayca takip edebilirsiniz.
</p>


    <div class="field">
        <input placeholder=" ">
        <label>E-posta Adresi</label>
    </div>

    <div class="field">
        <input type="password" placeholder=" ">
        <label>Şifre</label>
    </div>

    <button class="btn btn-primary" onclick="demoLogin()">
        Giriş Yap
    </button>

    <div class="login-footer">
        Şifrenizi mi unuttunuz?
        <a href="javascript:void(0)">Destek Al</a>
    </div>

</div>
</section>

<script>
function demoLogin(){
    Swal.fire({
        icon: 'info',
        title: 'Yakında Aktif',
        text: 'Online giriş sistemi kısa süre içerisinde aktif olacaktır.',
        confirmButtonText: 'Tamam'
    });
}
</script>

@endsection