

<?php $__env->startSection('title', 'Hesaplamalar'); ?>

<?php $__env->startSection('content'); ?>
<style>
    .calc-page {
        max-width: 1200px;
        margin: 0 auto;
        padding: 40px 24px 80px;
    }

    .calc-header {
        text-align: center;
        margin-bottom: 48px;
    }

    .calc-badge {
        display: inline-block;
        padding: 8px 20px;
        background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(124, 58, 237, 0.1));
        border: 1px solid rgba(37, 99, 235, 0.2);
        border-radius: 50px;
        color: #2563eb;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 16px;
    }

    .calc-title {
        font-size: 42px;
        font-weight: 900;
        color: #0f172a;
        margin-bottom: 12px;
        letter-spacing: -0.02em;
    }

    .calc-subtitle {
        font-size: 16px;
        color: #64748b;
        max-width: 600px;
        margin: 0 auto;
    }

    .calc-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 24px;
    }

    .calc-card {
        background: #ffffff;
        border-radius: 16px;
        border: 1px solid #e2e8f0;
        padding: 32px 24px;
        text-decoration: none;
        color: inherit;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .calc-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--card-color, #3b82f6), var(--card-color, #3b82f6));
        transform: scaleX(0);
        transition: transform 0.3s;
    }

    .calc-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        border-color: var(--card-color, #3b82f6);
    }

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

    .calc-icon {
        width: 64px;
        height: 64px;
        background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(124, 58, 237, 0.1));
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        margin-bottom: 20px;
        transition: all 0.3s;
    }

    .calc-card:hover .calc-icon {
        background: linear-gradient(135deg, var(--card-color, #3b82f6), var(--card-color, #3b82f6));
        transform: scale(1.1) rotate(-5deg);
    }

    .calc-name {
        font-size: 18px;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 8px;
    }

    .calc-desc {
        font-size: 14px;
        color: #64748b;
        line-height: 1.6;
        margin-bottom: 16px;
    }

    .calc-action {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 10px 20px;
        background: linear-gradient(135deg, var(--card-color, #3b82f6), var(--card-color, #3b82f6));
        color: white;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 600;
        transition: all 0.3s;
    }

    .calc-card:hover .calc-action {
        box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
    }

    .calc-history {
        margin-top: 48px;
        padding: 24px;
        background: linear-gradient(135deg, #eff6ff, #f0fdf4);
        border-radius: 16px;
        border: 1px solid #bfdbfe;
        text-align: center;
    }

    .calc-history h3 {
        font-size: 18px;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 8px;
    }

    .calc-history p {
        font-size: 14px;
        color: #64748b;
        margin-bottom: 16px;
    }

    .calc-history a {
        display: inline-block;
        padding: 10px 24px;
        background: linear-gradient(135deg, #2563eb, #3b82f6);
        color: white;
        border-radius: 10px;
        font-weight: 600;
        font-size: 14px;
        text-decoration: none;
        transition: all 0.3s;
    }

    .calc-history a:hover {
        box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
        transform: translateY(-2px);
    }

    @media (max-width: 768px) {
        .calc-page { padding: 24px 16px 48px; }
        .calc-title { font-size: 28px; }
        .calc-grid { grid-template-columns: 1fr; }
    }
</style>

<div class="calc-page">
    <div class="calc-header">
        <span class="calc-badge">🧮 Hesaplama Araçları</span>
        <h1 class="calc-title">Askeri Hesaplamalar</h1>
        <p class="calc-subtitle">Askeri kariyeriniz için gereken tüm hesaplamaları hızlı ve kolay bir şekilde yapın</p>
    </div>

    <div class="calc-grid">
        <a href="<?php echo e(route('calculators.bmi')); ?>" class="calc-card" style="--card-color: #3b82f6;">
            <div class="calc-icon">⚖️</div>
            <h3 class="calc-name">BMI Hesaplama</h3>
            <p class="calc-desc">Vücut Kitle İndeksi hesaplayarak sağlık durumunuzu öğrenin</p>
            <span class="calc-action">Hesapla →</span>
        </a>

        <a href="<?php echo e(route('calculators.maas')); ?>" class="calc-card" style="--card-color: #10b981;">
            <div class="calc-icon">💰</div>
            <h3 class="calc-name">Maaş Hesaplama</h3>
            <p class="calc-desc">Rütbe ve hizmet yılına göre askeri maaşınızı hesaplayın</p>
            <span class="calc-action">Hesapla →</span>
        </a>

        <a href="<?php echo e(route('calculators.kpss')); ?>" class="calc-card" style="--card-color: #f59e0b;">
            <div class="calc-icon">📊</div>
            <h3 class="calc-name">KPSS Puan Hesaplama</h3>
            <p class="calc-desc">KPSS puanınızı doğru ve hızlı bir şekilde hesaplayın</p>
            <span class="calc-action">Hesapla →</span>
        </a>

        <a href="<?php echo e(route('calculators.age_position')); ?>" class="calc-card" style="--card-color: #8b5cf6;">
            <div class="calc-icon">📅</div>
            <h3 class="calc-name">Yaş & Görev Hesaplama</h3>
            <p class="calc-desc">Yaşınız ve görevinizin uygunluğunu kontrol edin</p>
            <span class="calc-action">Hesapla →</span>
        </a>

        <a href="<?php echo e(route('calculators.safak')); ?>" class="calc-card" style="--card-color: #ef4444;">
            <div class="calc-icon">🌅</div>
            <h3 class="calc-name">Asker Şafak Hesaplama</h3>
            <p class="calc-desc">Asker şafak vaktini hesaplayın, namaz vakitlerini öğrenin</p>
            <span class="calc-action">Hesapla →</span>
        </a>
    </div>

    <?php if(auth()->check()): ?>
    <div class="calc-history">
        <h3>📜 Hesaplama Geçmişiniz</h3>
        <p>Daha önce yaptığınız tüm hesaplamaları görüntüleyin ve takip edin</p>
        <a href="<?php echo e(route('calculators.history')); ?>">Geçmişi Görüntüle</a>
    </div>
    <?php endif; ?>
</div>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.welcome', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\xampp\htdocs\askeribilgiler\resources\views\calculators\index.blade.php ENDPATH**/ ?>