/* ========================================
   STYLE-MAIN.CSS
   Ortak elemanlar:
   - Base / Reset / Variables
   - Navbar (Desktop & Mobile)
   - Mobile Offcanvas Menu
   - Buttons
   - Badge / Pill
   - Section Block / Header
   - Page Hero (alt sayfa hero)
   - Breadcrumb
   - CTA Banner
   - Bottom Nav (Mobil)
   - Scroll Top Button
   - Footer
   - Fade Animation
======================================== */

:root {
    --qr-primary: #ff0033;
    --qr-primary-soft: rgba(255, 0, 51, 0.06);
    --qr-primary-hover: #e0002e;
    --qr-dark: #020617;
    --qr-muted: #6b7280;
    --qr-bg: #f4f5fb;
    --qr-card-shadow: 0 30px 80px rgba(15, 23, 42, .12);
    --qr-radius: 1.75rem;
    --qr-radius-sm: 999px;
}

* {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    /* overflow-x: hidden gövdeyi scroll-konteynere çevirip position:sticky'yi
       KIRIYORDU (yan sütun kaymıyordu). 'clip' taşmayı keser ama scroll-konteyner
       oluşturmaz — sticky çalışır. hidden satırı eski tarayıcı fallback'i. */
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    margin: 0;
    background: radial-gradient(circle at top, #ffffff 0, #f5f6fb 40%, #e5e7f5 100%);
    color: var(--qr-dark);
    scroll-behavior: smooth;
}

/* ========================================
   NAVBAR (DESKTOP)
======================================== */
.navbar {
    backdrop-filter: blur(18px);
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid rgba(148, 163, 184, .2);
    padding: .65rem 0;
    transition: box-shadow .25s, padding .25s;
}
.navbar.scrolled {
    box-shadow: 0 6px 30px rgba(15, 23, 42, .08);
    padding: .5rem 0;
}
.navbar-brand {
    transition: transform .2s;
}
.navbar-brand:hover {
    transform: scale(1.02);
}

/* Navbar kırılma noktası: 1200px (tablet + küçük laptop hamburger menüde kalsın).
   Bootstrap'in navbar-expand-lg (992px) varsayılanı yerine özel sınıflarla
   kontrol edilir — .nav-desktop-menu / .nav-toggler-mobile (bkz. header.php).
   1024'ten 1200'e yükseltildi: menü artık 7 sayfa linki (Özellikler/Nasıl
   Çalışır/Kullanım Alanları/Paketler/Bölgeler/SSS/İletişim) + Demo CTA
   taşıyor — dar laptop genişliklerinde sıkışmadansa hamburger'de kalması tercih edilir.
   ÖNEMLİ (özgüllük): Bootstrap'in kendi `.navbar-expand-lg .navbar-collapse` (≥992px,
   display:flex!important) ve `.navbar-expand-lg .navbar-toggler` (≥992px, display:none)
   kuralları İKİ SINIFLI seçicidir (.nav-desktop-menu / .nav-toggler-mobile TEK sınıflı
   seçiciden daha özgül) — 992-1200px aralığında Bootstrap'inki KAZANIRDI (masaüstü menü
   erken açılıp CTA taşardı). Seçiciler burada ÜÇ sınıfa çıkarılarak (.navbar ile birlikte)
   Bootstrap'in özgüllüğü kaide-sırasından bağımsız olarak GEÇİLİR. */
.navbar .navbar-collapse.nav-desktop-menu {
    display: none !important;
}
.navbar .navbar-toggler.nav-toggler-mobile {
    display: inline-flex;
}
@media (min-width: 1200px) {
    .navbar .navbar-collapse.nav-desktop-menu {
        display: flex !important;
    }
    .navbar .navbar-toggler.nav-toggler-mobile {
        display: none;
    }
}
.navbar .navbar-nav .nav-link {
    color: var(--qr-muted);
    font-size: .82rem;
    font-weight: 500;
    padding: .55rem .6rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    transition: all .2s ease;
    position: relative;
    white-space: nowrap;
}
.navbar .navbar-nav .nav-link i {
    font-size: .95rem;
    transition: transform .2s ease;
}
/* ≥1400px: daha ferah — nav-link'ler eski (rahat) ölçülerine döner. */
@media (min-width: 1400px) {
    .navbar .navbar-nav .nav-link {
        font-size: .88rem;
        padding: .55rem .85rem;
        gap: .35rem;
    }
    .navbar .navbar-nav .nav-link i {
        font-size: 1rem;
    }
}
.navbar .navbar-nav .nav-link:hover {
    color: var(--qr-primary);
    background: var(--qr-primary-soft);
}
.navbar .navbar-nav .nav-link:hover i {
    transform: scale(1.15);
}
.navbar .navbar-nav .nav-link.active {
    color: var(--qr-primary);
    background: var(--qr-primary-soft);
}
.nav-cta {
    box-shadow: 0 10px 24px rgba(255, 0, 51, .25) !important;
}
/* 1200-1399px (dar aralık — 8 nav linki + CTA): kompakt buton, metin sarmasın.
   .navbar .nav-cta (2 sınıf) .btn-qr-primary + Bootstrap .btn-sm'in (tek sınıf)
   dolgusunu özgüllükle geçer — hero/fiyat kartı vb. diğer .btn-qr-primary kullanımları
   ETKİLENMEZ (yalnız navbar'daki .nav-cta hedeflenir). ≥1400px rahat ölçüye döner. */
.navbar .nav-cta {
    padding: .5rem 1rem;
    font-size: .82rem;
    white-space: nowrap;
}
@media (min-width: 1400px) {
    .navbar .nav-cta {
        padding: .75rem 1.6rem;
        font-size: .9rem;
    }
}

/* Hamburger */
.navbar-toggler {
    border: none;
    padding: .5rem;
    background: transparent;
}
.navbar-toggler:focus { box-shadow: none; }
.hamburger {
    width: 26px;
    height: 18px;
    position: relative;
    display: inline-block;
}
.hamburger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--qr-dark);
    border-radius: 2px;
    transition: all .3s ease;
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); width: 70%; }
.hamburger span:nth-child(3) { bottom: 0; }

/* ========================================
   MOBILE OFFCANVAS MENU
======================================== */
.nav-offcanvas {
    width: 92% !important;
    max-width: 380px;
    border-left: none !important;
    background: linear-gradient(180deg, #fff 0%, #fafbfd 100%);
}
.nav-offcanvas .offcanvas-header {
    padding: 1.25rem 1.25rem .75rem;
    border-bottom: 1px solid rgba(148, 163, 184, .15);
}
.offcanvas-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.btn-close-custom {
    border: 1px solid rgba(148, 163, 184, .25);
    background: #fff;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--qr-dark);
    transition: all .2s;
    cursor: pointer;
}
.btn-close-custom:hover {
    background: var(--qr-primary);
    color: #fff;
    border-color: var(--qr-primary);
    transform: rotate(90deg);
}
.nav-offcanvas .offcanvas-body {
    padding: 1rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
}
.mobile-menu-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.mobile-menu-link {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem .95rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, .18);
    text-decoration: none;
    color: var(--qr-dark);
    transition: all .25s ease;
}
.mobile-menu-link:hover,
.mobile-menu-link:focus {
    transform: translateX(4px);
    border-color: var(--qr-primary);
    box-shadow: 0 10px 25px rgba(255, 0, 51, .08);
    color: var(--qr-dark);
}
.mobile-menu-link.highlight {
    background: linear-gradient(120deg, rgba(255,0,51,.04), rgba(255,0,51,0));
    border-color: rgba(255,0,51,.18);
}
/* Aktif sayfa (mevcut $aktifSayfa — header.php $navAktif basar). */
.mobile-menu-link.active {
    background: var(--qr-primary-soft);
    border-color: var(--qr-primary);
}
.mobile-menu-link.active .mm-icon {
    background: var(--qr-primary);
    color: #fff;
}
.mm-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--qr-primary-soft);
    color: var(--qr-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.mm-content { flex: 1; min-width: 0; }
.mm-title {
    display: block;
    font-weight: 700;
    font-size: .92rem;
    margin-bottom: .1rem;
}
.mm-desc {
    display: block;
    font-size: .75rem;
    color: var(--qr-muted);
    line-height: 1.35;
}
.mm-arrow {
    color: var(--qr-muted);
    font-size: .9rem;
    transition: transform .25s;
}
.mobile-menu-link:hover .mm-arrow {
    color: var(--qr-primary);
    transform: translateX(3px);
}
.mobile-menu-cta {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(148, 163, 184, .15);
}
.mobile-menu-contact { margin-top: .85rem; }
.mm-contact-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem .85rem;
    border-radius: 12px;
    background: rgba(34,197,94,.08);
    color: #16a34a;
    font-weight: 600;
    font-size: .85rem;
    text-decoration: none;
    justify-content: center;
    transition: all .2s;
}
.mm-contact-item:hover {
    background: #16a34a;
    color: #fff;
}
.mm-contact-item i { font-size: 1.05rem; }

/* ========================================
   BUTTONS
======================================== */
.btn-qr-primary {
    background: var(--qr-primary);
    color: #fff;
    border-radius: var(--qr-radius-sm);
    padding: .75rem 1.6rem;
    font-weight: 600;
    border: none;
    box-shadow: 0 16px 40px rgba(255, 0, 51, .35);
    font-size: .9rem;
    transition: all .2s;
}
.btn-qr-primary:hover {
    background: var(--qr-primary-hover);
    color: #fff;
    transform: translateY(-1px);
}
.btn-outline-light-soft {
    border-radius: var(--qr-radius-sm);
    padding: .75rem 1.4rem;
    font-weight: 500;
    border: 1px solid rgba(148, 163, 184, .45);
    background: rgba(255, 255, 255, .9);
    font-size: .9rem;
    color: var(--qr-dark);
    transition: all .2s;
}
.btn-outline-light-soft:hover {
    background: #fff;
    border-color: rgba(148, 163, 184, .6);
    color: var(--qr-dark);
}

/* ========================================
   BADGE / PILL STYLES
======================================== */
.badge-top {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .9rem;
    border-radius: var(--qr-radius-sm);
    background: rgba(15, 23, 42, .04);
    font-size: .78rem;
    color: var(--qr-muted);
    margin-bottom: 1rem;
    font-weight: 500;
}
.badge-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--qr-radius-sm);
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .2);
    flex-shrink: 0;
}
.soon-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .85rem;
    border-radius: var(--qr-radius-sm);
    background: var(--qr-primary-soft);
    color: var(--qr-primary);
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}
.tag-pill {
    display: inline-flex;
    align-items: center;
    border-radius: var(--qr-radius-sm);
    padding: .25rem .75rem;
    font-size: .72rem;
    background: rgba(15, 23, 42, .04);
    color: var(--qr-muted);
    margin-bottom: .75rem;
}

/* ========================================
   SECTION BLOCKS / HEADER
======================================== */
.section-block {
    padding: 3.5rem 0; /* 5rem'den sıkılaştırıldı — bölümler arası aşırı boşluk şikayeti */
}
.section-alt {
    background: rgba(255, 255, 255, .5);
}
.section-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 3rem;
}
.section-title {
    font-size: clamp(1.8rem, 2.5vw + 1rem, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: .75rem;
}
.section-title span {
    color: var(--qr-primary);
}
.section-subtitle {
    color: var(--qr-muted);
    font-size: .95rem;
    line-height: 1.7;
}

/* ========================================
   PAGE HERO (alt sayfa hero - ortak)
======================================== */
.page-hero {
    padding: 7rem 0 1.75rem; /* alt boşluk 2.5rem'den sıkılaştırıldı */
    position: relative;
}
.page-hero::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,0,51,.10), transparent 70%);
    top: -200px;
    right: -100px;
    z-index: -1;
}
.page-breadcrumb {
    margin-bottom: 1rem;
}
.page-breadcrumb .breadcrumb {
    margin: 0;
    padding: 0;
    background: transparent;
    font-size: .82rem;
}
.page-breadcrumb .breadcrumb-item a {
    color: var(--qr-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}
.page-breadcrumb .breadcrumb-item a:hover {
    color: var(--qr-primary);
}
.page-breadcrumb .breadcrumb-item.active {
    color: var(--qr-dark);
    font-weight: 600;
}
.page-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: var(--qr-muted);
}
.page-hero-content {
    max-width: 760px;
}
.page-title {
    font-size: clamp(2rem, 3vw + 1rem, 2.6rem);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.15;
    margin-bottom: .75rem;
}
.page-title span { color: var(--qr-primary); }
.page-subtitle {
    color: var(--qr-muted);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 680px;
}
.page-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.ps-item {
    background: #fff;
    border-radius: 16px;
    padding: .75rem 1.1rem;
    box-shadow: 0 10px 30px rgba(15,23,42,.06);
    min-width: 90px;
    text-align: center;
}
.ps-item strong {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--qr-primary);
    line-height: 1;
}
.ps-item span {
    display: block;
    font-size: .75rem;
    color: var(--qr-muted);
    margin-top: .2rem;
}

/* ========================================
   CTA BANNER
======================================== */
.cta-banner {
    background: linear-gradient(135deg, var(--qr-dark), #1e293b);
    color: #f1f5f9;
    border-radius: var(--qr-radius);
    padding: 2.25rem 2rem;
    position: relative;
    overflow: hidden;
}
.cta-banner::before {
    content: "";
    position: absolute;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,0,51,.18), transparent 70%);
    right: -80px; top: -100px;
    pointer-events: none;
}
.cta-banner h3 {
    font-weight: 800;
    font-size: clamp(1.3rem, 2vw + .5rem, 1.7rem);
    margin: 0 0 .5rem;
}
.cta-banner p {
    color: #cbd5e1;
    margin: 0;
    font-size: .93rem;
    line-height: 1.6;
}

/* ========================================
   BOTTOM NAV (MOBILE)
======================================== */
.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid rgba(148, 163, 184, .3);
    backdrop-filter: blur(18px);
}
.bottom-nav .nav-link {
    font-size: .68rem;
    color: var(--qr-muted);
    padding: .55rem 0 .35rem;
    text-align: center;
    flex: 1;
    transition: color .2s;
}
.bottom-nav .nav-link i {
    display: block;
    font-size: 1.2rem;
    margin-bottom: .15rem;
}
.bottom-nav .nav-link.active {
    color: var(--qr-primary);
    font-weight: 600;
}
.bottom-nav .nav-link-cta {
    color: #fff;
    background: var(--qr-primary);
    border-radius: 18px;
    margin: .25rem .35rem .25rem;
    box-shadow: 0 10px 25px rgba(255,0,51,.35);
    padding: .35rem .55rem;
    transform: translateY(-12px);
    font-weight: 700;
}
.bottom-nav .nav-link-cta i {
    color: #fff;
    font-size: 1.4rem;
}
.content-wrapper {
    /* bottom-nav temizliği artık footer'ın <768 padding'inde (çifte boşluk önlendi) */
    padding-bottom: 0;
}

/* ========================================
   SCROLL TOP BUTTON
======================================== */
.scroll-top-btn {
    position: fixed;
    right: 18px;
    bottom: 90px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--qr-primary);
    color: #fff;
    border: none;
    box-shadow: 0 12px 30px rgba(255, 0, 51, .35);
    font-size: 1.15rem;
    z-index: 1029;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all .3s ease;
    cursor: pointer;
}
.scroll-top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.scroll-top-btn:hover {
    background: var(--qr-primary-hover);
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(255, 0, 51, .5);
}
@media (min-width: 768px) {
    .scroll-top-btn {
        right: 24px;
        bottom: 24px;
        width: 50px;
        height: 50px;
    }
}

/* ========================================
   FOOTER
======================================== */
.site-footer {
    padding: 1.6rem 0 5rem;
    background: var(--qr-dark);
    color: #e5e7eb;
    margin-top: 2rem;
}
.footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.footer-col-left,
.footer-col-right {
    display: flex;
    align-items: center;
}
.footer-text {
    margin: 0;
    font-size: .85rem;
    color: #cbd5e1;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
}
.footer-sep { color: #64748b; }
.footer-pipe { color: #475569; margin: 0 .15rem; }
.site-footer a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: color .2s;
}
.site-footer a:hover {
    color: var(--qr-primary);
}

/* Heart Beat Animation */
.heart-beat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--qr-primary);
    font-size: 1rem;
    animation: heartBeat 1.3s ease-in-out infinite;
    transform-origin: center;
    margin: 0 .15rem;
}
@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.25); }
    28% { transform: scale(1); }
    42% { transform: scale(1.25); }
    70% { transform: scale(1); }
}

@media (min-width: 992px) {
    .site-footer {
        padding: 1.8rem 0 1.8rem;
    }
}

@media (max-width: 767.98px) {
    .site-footer {
        padding: 1.25rem 0 6rem;
        text-align: center;
    }
    .footer-row {
        flex-direction: column;
        gap: .35rem;
        text-align: center;
    }
    .footer-col-left,
    .footer-col-right {
        width: 100%;
        justify-content: center;
    }
    .footer-text {
        justify-content: center;
        font-size: .78rem;
        line-height: 1.4;
    }
}

/* ========================================
   ANIMATIONS
======================================== */
.fade-section {
    opacity: 0;
    transform: translateY(30px);
    transition: all .7s ease-out;
}
.fade-section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   GENEL RESPONSIVE
======================================== */
@media (max-width: 991.98px) {
    .section-block {
        padding: 4rem 0;
    }
    .page-hero { padding: 6.5rem 0 2rem; }
}

@media (max-width: 767.98px) {
    .section-title {
        font-size: 1.6rem;
    }
    .page-stats { gap: .75rem; }
    .ps-item { padding: .55rem .85rem; min-width: 80px; }
    .ps-item strong { font-size: 1.15rem; }
    .cta-banner { padding: 1.6rem 1.4rem; text-align: center; }
}

@media (max-width: 480px) {
    .section-title {
        font-size: 1.4rem;
    }
    .btn-qr-primary,
    .btn-outline-light-soft {
        width: 100%;
        justify-content: center;
    }
}

@media (min-width: 992px) {
    .content-wrapper {
        padding-bottom: 0;
    }
}

/* ==== SITE FOOTER ==== */
/* Ana site footer'ı — 4 sütunlu grid, koyu zemin, tasarım token'ları ile uyumlu */
.main-footer {
    background: linear-gradient(180deg, #0b1120 0%, var(--qr-dark) 100%);
    color: #94a3b8;
    padding: 3.5rem 0 1.5rem;
    margin-top: 4rem;
    border-top: 3px solid var(--qr-primary);
}

.main-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
    gap: 2.5rem;
}

/* Marka sütunu */
.mf-logo-link {
    display: inline-block;
    text-decoration: none;
    margin-bottom: 1rem;
}

.mf-logo {
    height: 40px;
    width: auto;
    /* logo-white.svg zaten koyu zemin için (beyaz + kırmızı QR) — filter hack'i kaldırıldı */
}

.mf-slogan {
    font-size: .875rem;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0;
    max-width: 320px;
}

/* Sütun başlıkları */
.mf-title {
    color: #f8fafc;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .02em;
    margin-bottom: 1.1rem;
    position: relative;
    padding-bottom: .6rem;
}

.mf-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: var(--qr-primary);
}

/* Link listeleri */
.mf-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mf-links li + li {
    margin-top: .55rem;
}

.mf-links a {
    color: #94a3b8;
    text-decoration: none;
    font-size: .875rem;
    transition: color .2s ease, padding-left .2s ease;
}

.mf-links a:hover {
    color: #ffffff;
    padding-left: .25rem;
}

.mf-link-all {
    color: var(--qr-primary) !important;
    font-weight: 600;
}

.mf-link-all:hover {
    color: #ff4d6d !important;
}

/* İletişim sütunu */
.mf-contact a i {
    color: var(--qr-primary);
    margin-right: .4rem;
}

.mf-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: .35rem;
    padding: .55rem 1.25rem;
    border-radius: var(--qr-radius-sm);
    background: var(--qr-primary);
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(255, 0, 51, .3);
    transition: background .2s ease, transform .2s ease;
}

.mf-cta-btn:hover {
    background: var(--qr-primary-hover);
    transform: translateY(-2px);
    padding-left: 1.25rem !important;
}

.mf-cta-btn i {
    color: #ffffff !important;
}

/* Alt şerit: solda telif, sağda atan-kalpli geliştirici imzası */
.mf-bottom {
    margin-top: 2.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(148, 163, 184, .15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.mf-copy,
.mf-dev {
    margin: 0;
    font-size: .82rem;
    color: #64748b;
}

.mf-dev {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.mf-dev a {
    color: #94a3b8;
    text-decoration: none;
    font-weight: 600;
    position: relative;
    transition: color .2s ease;
}
/* Hover'da soldan sağa büyüyen alt çizgi */
.mf-dev a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 1.5px;
    background: var(--qr-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}
.mf-dev a:hover { color: var(--qr-primary); }
.mf-dev a:hover::after { transform: scaleX(1); }

/* Atan kalp — çift vuruşlu gerçekçi ritim + hafif kırmızı ışıma */
.mf-heart {
    display: inline-block;
    color: var(--qr-primary);
    animation: mfHeartBeat 1.6s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(255, 0, 51, .45));
    will-change: transform;
}

@keyframes mfHeartBeat {
    0%, 40%, 100% { transform: scale(1); }
    8%  { transform: scale(1.28); }
    16% { transform: scale(1); }
    24% { transform: scale(1.18); }
}
/* Hareket azaltma tercihi olan kullanıcıda animasyon durur */
@media (prefers-reduced-motion: reduce) {
    .mf-heart { animation: none; }
}

/* Mobil: alt şerit dikey ve ortalı */
@media (max-width: 575.98px) {
    .mf-bottom { flex-direction: column; justify-content: center; text-align: center; gap: .4rem; }
}

/* ==== FOOTER RESPONSIVE MATRİSİ — 320 / 360 / 480 / 768 / 1024 / 1200 ====
   >=1200: 4 sütun (taban kural). 1024-1199: 4 sütun, dar gap. 768-1023: 2x2 grid.
   <768 (bottom-nav görünür): marka tam satır + link listeleri ÇİFT SÜTUN yan yana +
   iletişim tam satır; footer altına bottom-nav temizleme boşluğu. 360/320: tipografi sıkışır. */

@media (max-width: 1199.98px) {
    .main-footer-grid { gap: 2rem; }
}

@media (max-width: 1023.98px) {
    .main-footer-grid { grid-template-columns: 1fr 1fr; }
    .mf-slogan { max-width: 100%; }
}

@media (max-width: 767.98px) {
    .main-footer {
        margin-top: 3rem;
        /* bottom-nav (fixed, ~64px) + nefes payı: alt şerit her zaman görünür */
        padding: 2.75rem 0 calc(1rem + 76px);
    }
    .main-footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 1.25rem; }
    .mf-col-brand { grid-column: 1 / -1; }
    .mf-col:last-child { grid-column: 1 / -1; } /* İletişim sütunu tam satır */
    .mf-title { margin-bottom: .85rem; padding-bottom: .5rem; font-size: .9rem; }
    .mf-links li + li { margin-top: .45rem; }
    .mf-links a { font-size: .84rem; }
}

@media (max-width: 479.98px) {
    .main-footer { padding-top: 2.25rem; }
    .mf-slogan { font-size: .82rem; }
    .mf-links a { font-size: .8rem; }
    .mf-copy, .mf-dev { font-size: .76rem; }
}

@media (max-width: 359.98px) {
    .main-footer-grid { gap: 1.25rem .85rem; }
    .mf-logo { height: 34px; }
    .mf-links a { font-size: .76rem; }
    .mf-cta-btn { padding: .5rem 1rem; font-size: .82rem; }
}

/* ==== TEKLIF FORMU (ortak partial: tema/core/teklif-form.php) ==== */
/* iletisim.css .contact-form-card görünümünün sayfa-bağımsız kopyası —
   partial anasayfa / iletisim / ilçe sayfalarında da aynı görünür. */
.teklif-form-card {
    background: #fff;
    border-radius: var(--qr-radius);
    padding: 1.8rem 1.5rem;
    box-shadow: var(--qr-card-shadow);
    position: relative;
    overflow: hidden;
}
.teklif-form-card::before {
    content: "";
    position: absolute;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 0, 51, .06), transparent 70%);
    right: -60px; top: -60px;
    pointer-events: none;
}
.teklif-form-card h5 {
    font-weight: 700;
    margin-bottom: 1.2rem;
}
.teklif-form-card .form-control {
    border-radius: .75rem;
    border: 1px solid rgba(148, 163, 184, .35);
    padding: .7rem 1rem;
    font-size: .9rem;
}
.teklif-form-card .form-control:focus {
    border-color: var(--qr-primary);
    box-shadow: 0 0 0 3px rgba(255, 0, 51, .1);
}
.teklif-form-card .form-label {
    font-weight: 500;
    color: var(--qr-dark);
}
/* Başarı (teşekkür) durumu */
.teklif-tesekkur {
    text-align: center;
    padding: 2rem 1rem;
}
.teklif-tesekkur i {
    font-size: 2.6rem;
    color: #16a34a;
    display: block;
    margin-bottom: .75rem;
}
.teklif-tesekkur h6 {
    font-weight: 700;
    margin-bottom: .35rem;
}
.teklif-tesekkur p {
    color: var(--qr-muted);
    margin: 0;
    font-size: .92rem;
}
@media (max-width: 575.98px) {
    .teklif-form-card {
        padding: 1.4rem 1.2rem;
    }
}