/**
 * FerdiSoft Web Ajans Scripti - Tipografi, Yazı Boyutları ve Okunabilirlik Sistemi
 * Font Ailesi: Plus Jakarta Sans & Inter
 * Standart: UI/UX Modern Micro-Scale Tipografi
 * FerdiSoft.Com.TR
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   1. GENEL TİPOGRAFİ VE TEMEL FONT KURALLARI
   ========================================================================== */
:root {
    --fs-font-primary: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --fs-font-body: 'Inter', 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    
    /* Standart Font Boyutları */
    --fs-fs-h1: clamp(1.5rem, 3.2vw, 1.95rem);   /* 24px - 31px (Standart: 28-32px, mobilde %20 küçülme) */
    --fs-fs-h2: clamp(1.25rem, 2.6vw, 1.45rem);  /* 20px - 23.5px (Standart: 22-24px, mobilde %15 küçülme) */
    --fs-fs-h3: clamp(1.125rem, 2vw, 1.25rem);   /* 18px - 20px (Bölüm Başlığı) */
    --fs-fs-h4: 1.125rem;                         /* 18px */
    --fs-fs-h5: 0.975rem;                         /* 15.6px */
    --fs-fs-h6: 0.875rem;                         /* 14px */
    
    --fs-fs-lead: 0.975rem;                       /* 15.6px */
    --fs-fs-body: 0.9375rem;                      /* 15px (Standart Paragraf 14-15px) */
    --fs-fs-btn: 0.875rem;                        /* 14px */
    --fs-fs-input: 0.875rem;                      /* 14px */
    --fs-fs-small: 0.8125rem;                     /* 13px */
    --fs-fs-badge: 0.75rem;                       /* 12px */

    /* Satır & Harf Aralıkları */
    --fs-lh-heading: 1.28;
    --fs-lh-body: 1.6;
    --fs-lh-compact: 1.4;
    
    --fs-ls-h1: -0.025em;
    --fs-ls-h2: -0.02em;
    --fs-ls-h3: -0.015em;
    --fs-ls-body: -0.005em;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--fs-font-body) !important;
    font-size: var(--fs-fs-body) !important;
    font-weight: 400 !important;
    line-height: var(--fs-lh-body) !important;
    letter-spacing: var(--fs-ls-body);
    color: #334155;
    background-color: #f8fafc;
}

/* ==========================================================================
   2. BAŞLIK HİYERARŞİSİ (H1, H2, H3, H4, H5, H6)
   ========================================================================== */
h1, .h1 {
    font-family: var(--fs-font-primary) !important;
    font-size: var(--fs-fs-h1) !important;
    font-weight: 700 !important;
    line-height: var(--fs-lh-heading) !important;
    letter-spacing: var(--fs-ls-h1) !important;
    color: #0f172a;
    margin-bottom: 0.75rem;
}

h2, .h2 {
    font-family: var(--fs-font-primary) !important;
    font-size: var(--fs-fs-h2) !important;
    font-weight: 600 !important;
    line-height: 1.32 !important;
    letter-spacing: var(--fs-ls-h2) !important;
    color: #0f172a;
    margin-bottom: 0.65rem;
}

h3, .h3 {
    font-family: var(--fs-font-primary) !important;
    font-size: var(--fs-fs-h3) !important;
    font-weight: 600 !important;
    line-height: var(--fs-lh-compact) !important;
    letter-spacing: var(--fs-ls-h3) !important;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

h4, .h4 {
    font-family: var(--fs-font-primary) !important;
    font-size: var(--fs-fs-h4) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

h5, .h5 {
    font-family: var(--fs-font-primary) !important;
    font-size: var(--fs-fs-h5) !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    color: #334155;
    margin-bottom: 0.4rem;
}

h6, .h6 {
    font-family: var(--fs-font-primary) !important;
    font-size: var(--fs-fs-h6) !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    color: #475569;
    margin-bottom: 0.4rem;
}

/* ==========================================================================
   3. GÖVDE METİNLERİ, PARAGRAFLAR VE LİSTELER
   ========================================================================== */
p {
    font-size: var(--fs-fs-body);
    font-weight: 400;
    line-height: var(--fs-lh-body);
    letter-spacing: var(--fs-ls-body);
    color: #475569;
    margin-bottom: 0.85rem;
}

.lead {
    font-size: var(--fs-fs-lead) !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: #475569 !important;
}

small, .small {
    font-size: var(--fs-fs-small) !important;
    line-height: 1.45 !important;
}

.text-muted {
    color: #64748b !important;
}

/* Rozetler / Etiketler */
.badge {
    font-size: var(--fs-fs-badge) !important;
    font-weight: 600 !important;
    letter-spacing: 0.015em;
    padding: 0.38em 0.72em;
    line-height: 1.25;
}

.badge.bg-success, .badge.bg-success-solid { background-color: #10b981 !important; color: #ffffff !important; }
.badge.bg-danger, .badge.bg-danger-solid { background-color: #ef4444 !important; color: #ffffff !important; }
.badge.bg-primary, .badge.bg-primary-solid { background-color: #2563eb !important; color: #ffffff !important; }
.badge.bg-warning, .badge.bg-warning-solid { background-color: #f59e0b !important; color: #0f172a !important; }
.badge.bg-info, .badge.bg-info-solid { background-color: #06b6d4 !important; color: #ffffff !important; }

.badge-soft-success, .badge.bg-success.bg-opacity-10, .badge.bg-success.bg-opacity-15, .badge.bg-success.bg-opacity-20, .badge.bg-success.bg-opacity-25 { background-color: #d1fae5 !important; color: #047857 !important; border: 1px solid #a7f3d0 !important; }
.badge-soft-danger, .badge.bg-danger.bg-opacity-10, .badge.bg-danger.bg-opacity-15, .badge.bg-danger.bg-opacity-20, .badge.bg-danger.bg-opacity-25 { background-color: #fee2e2 !important; color: #b91c1c !important; border: 1px solid #fca5a5 !important; }
.badge-soft-warning, .badge.bg-warning.bg-opacity-10, .badge.bg-warning.bg-opacity-15, .badge.bg-warning.bg-opacity-20, .badge.bg-warning.bg-opacity-25 { background-color: #fef3c7 !important; color: #b45309 !important; border: 1px solid #fde68a !important; }
.badge-soft-info, .badge.bg-info.bg-opacity-10, .badge.bg-info.bg-opacity-15, .badge.bg-info.bg-opacity-20, .badge.bg-info.bg-opacity-25 { background-color: #e0f2fe !important; color: #0369a1 !important; border: 1px solid #bae6fd !important; }
.badge-soft-primary, .badge.bg-primary.bg-opacity-10, .badge.bg-primary.bg-opacity-15, .badge.bg-primary.bg-opacity-20, .badge.bg-primary.bg-opacity-25 { background-color: #e0e7ff !important; color: #4338ca !important; border: 1px solid #c7d2fe !important; }

/* ==========================================================================
   4. FORM VE BUTON ELEMANLARI (14px - 0.875rem Standart)
   ========================================================================== */
.btn {
    font-size: var(--fs-fs-btn) !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
    line-height: 1.45 !important;
}

.btn-lg {
    font-size: 0.9375rem !important; /* 15px */
    padding: 10px 22px !important;
    font-weight: 600 !important;
}

.btn-sm {
    font-size: var(--fs-fs-small) !important; /* 13px */
    padding: 5px 12px !important;
    font-weight: 500 !important;
}

.form-control,
.form-select,
.input-group-text {
    font-size: var(--fs-fs-input) !important;
    line-height: 1.5 !important;
    font-weight: 400;
    letter-spacing: -0.005em;
}

.form-label,
label {
    font-size: 0.845rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.35rem;
}

/* ==========================================================================
   5. BOOTSTRAP DISPLAY VE FS YARDIMCI SINIFLARININ DİZGİNLENMESİ
   (Aşırı büyük font boyutlarının UI standardına çekilmesi)
   ========================================================================== */
.display-1, .display-2, .display-3, .display-4 {
    font-size: var(--fs-fs-h1) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: var(--fs-ls-h1) !important;
}

.display-5, .display-6 {
    font-size: var(--fs-fs-h2) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: var(--fs-ls-h2) !important;
}

.fs-1 {
    font-size: var(--fs-fs-h1) !important; /* 28-31px */
    letter-spacing: var(--fs-ls-h1);
}

.fs-2 {
    font-size: var(--fs-fs-h2) !important; /* 22-24px */
    letter-spacing: var(--fs-ls-h2);
}

.fs-3 {
    font-size: 1.25rem !important; /* 20px */
    letter-spacing: var(--fs-ls-h3);
}

.fs-4 {
    font-size: 1.125rem !important; /* 18px */
}

.fs-5 {
    font-size: 0.95rem !important; /* 15.2px */
}

.fs-6 {
    font-size: var(--fs-fs-btn) !important; /* 14px */
}

/* ==========================================================================
   6. ÖZEL HERO, BANNER VE KART BAŞLIKLARININ MODERNİZE EDİLMESİ
   ========================================================================== */
.home-hero-title {
    font-family: var(--fs-font-primary) !important;
    font-size: clamp(1.5rem, 3.4vw, 1.95rem) !important; /* 24px - 31px (eski: 2.8rem ~45px) */
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.home-hero-subtitle {
    font-size: 0.9375rem !important; /* 15px (eski: 1.15rem) */
    font-weight: 400 !important;
    line-height: 1.6 !important;
    max-width: 620px;
    margin: 0 auto 24px auto !important;
}

.hero-title {
    font-family: var(--fs-font-primary) !important;
    font-size: clamp(1.4rem, 3vw, 1.85rem) !important; /* 22px - 29.5px (eski: 2.3rem) */
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.28 !important;
    margin-bottom: 10px !important;
}

.hero-subtitle {
    font-size: 0.9375rem !important; /* 15px (eski: 1.05rem) */
    line-height: 1.6 !important;
}

.cta-banner-title {
    font-family: var(--fs-font-primary) !important;
    font-size: clamp(1.25rem, 2.5vw, 1.45rem) !important; /* 20px - 23px (eski: 2.1rem) */
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
}

.cta-banner-desc {
    font-size: 0.875rem !important; /* 14px (eski: 1.05rem) */
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
}

.cta-feature-list li {
    font-size: 0.845rem !important; /* 13.5px */
    line-height: 1.5 !important;
}

.hosting-category {
    font-size: 1.125rem !important; /* 18px (eski: 1.25rem) */
    font-weight: 700 !important;
}

.hosting-price {
    font-size: 1.65rem !important; /* 26.4px (eski: 2rem) */
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

.bayi-discount-text {
    font-size: 1.65rem !important; /* 26.4px (eski: 2.2rem) */
    font-weight: 800 !important;
}

.calc-price-main {
    font-size: 1.35rem !important; /* 21.6px (eski: 1.55rem) */
    font-weight: 800 !important;
}

.product-list-card h4 {
    font-size: 1.05rem !important; /* 16.8px */
    font-weight: 600 !important;
}

.product-showcase-card h4,
.product-showcase-card h5 {
    font-size: 1rem !important; /* 16px */
    font-weight: 600 !important;
}

/* ==========================================================================
   7. MOBİL VE RESPONSİVE UYUM (@media max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
    body {
        font-size: 0.875rem !important; /* Mobilde gövde 14px */
    }

    h1, .h1 {
        font-size: 1.5rem !important; /* 24px (~%20 küçülme) */
        line-height: 1.25 !important;
    }

    h2, .h2 {
        font-size: 1.25rem !important; /* 20px (~%15 küçülme) */
        line-height: 1.3 !important;
    }

    h3, .h3 {
        font-size: 1.125rem !important; /* 18px */
    }

    .home-hero-title {
        font-size: 1.45rem !important; /* 23px */
    }

    .home-hero-subtitle {
        font-size: 0.875rem !important; /* 14px */
    }

    .cta-banner-title {
        font-size: 1.2rem !important;
    }

    .hosting-price,
    .bayi-discount-text {
        font-size: 1.45rem !important;
    }
}

/* ==========================================================================
   SAYFA VE KART GİRİŞ ANİMASYONLARI (Staggered Fade-In-Up)
   ========================================================================== */
@keyframes fadeInUpStagger {
    0% {
        opacity: 0;
        transform: translateY(22px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up,
.card-setting-hover,
.card-animate,
.stat-card,
.service-card {
    animation: fadeInUpStagger 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.stagger-1, .row > div:nth-child(1) .card, .row > div:nth-child(1) .card-setting-hover { animation-delay: 0.05s !important; }
.stagger-2, .row > div:nth-child(2) .card, .row > div:nth-child(2) .card-setting-hover { animation-delay: 0.12s !important; }
.stagger-3, .row > div:nth-child(3) .card, .row > div:nth-child(3) .card-setting-hover { animation-delay: 0.19s !important; }
.stagger-4, .row > div:nth-child(4) .card, .row > div:nth-child(4) .card-setting-hover { animation-delay: 0.26s !important; }