<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Biyometrik Sistemler</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: white;
        }

        /* NAVBAR */
        .navbar {
            background-color: white;
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 24px;
        }

        .nav-link {
            color: #333 !important;
            margin-right: 15px;
            font-weight: 500;
        }

        .btn-contact {
            background: #777;
            color: #fff;
            border-radius: 20px;
            padding: 8px 18px;
        }

        /* HERO */
.brands-page {
    background: white;
    padding: 34px 0 64px;
}

.brands-container {
    max-width: 1280px;
}

.brands-main-title {
    text-align: center;
    font-size: 29px;
    line-height: 1.2;
    font-weight: 700;
    color: #111;
    margin: 0 0 72px 0;
}

/* üst kart alanı */
.brands-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    align-items: start;
    margin-bottom: 42px;
}

.brand-card {
    position: relative;
    padding-top: 32px;
}

.brand-top-logo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    object-fit: contain;
    z-index: 2;
}

/* logo ölçüleri */
.dormakaba-top {
    width: 178px;
}

.assa-top {
    width: 168px;
}

.tansa-top {
    width: 96px;
}

/* ana görsel */
.brand-card-image {
    width: 100%;
    height: 184px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

/* alt başlık */
.brands-sub-title {
    text-align: center;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
    color: #111;
    margin: 0 0 24px 0;
}

/* referanslar */
.brands-refs-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0;
    align-items: stretch;
    border-left: 1px solid #e3e3e3;
    border-top: 1px solid #e3e3e3;
    background: transparent;
    background-color: white;
}

.ref-item {
    height: 56px;
    border-right: 1px solid #e3e3e3;
    border-bottom: 1px solid #e3e3e3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
}

.ref-item img {
    max-width: 100%;
    max-height: 34px;
    object-fit: contain;
    display: block;
}

/* tablet */
@media (max-width: 991.98px) {
    .brands-main-title {
        font-size: 25px;
        margin-bottom: 54px;
    }

    .brands-cards {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-bottom: 34px;
    }

    .brand-card {
        max-width: 520px;
        width: 100%;
        margin: 0 auto;
    }

    .brand-card-image {
        height: 220px;
    }

    .brands-refs-row {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* mobil */
@media (max-width: 575.98px) {
    .brands-page {
        padding: 26px 0 42px;
    }

    .brands-main-title {
        font-size: 22px;
        margin-bottom: 42px;
    }

    .brand-card {
        padding-top: 26px;
    }

    .dormakaba-top {
        width: 150px;
    }

    .assa-top {
        width: 142px;
    }

    .tansa-top {
        width: 82px;
    }

    .brand-card-image {
        height: 170px;
        border-radius: 6px;
    }

    .brands-sub-title {
        font-size: 16px;
        margin-bottom: 18px;
    }

    .brands-refs-row {
        grid-template-columns: repeat(3, 1fr);
    }

    .ref-item {
        height: 54px;
    }

    .ref-item img {
        max-height: 28px;
    }
}
.site-footer {
    background-color: white;
    border-top: 1px solid #d7d7d7;
    padding: 26px 0 18px;
    overflow: hidden;
}

.footer-wrapper {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 34px;
}

/* SOL TARAF */
.footer-left {
    width: 52%;
    padding-right: 10px;
}

.footer-brand-wrap {
    display: flex;
    align-items: center;
    min-height: 100%;
}

.footer-logo {
    width: 105px;
    max-width: 105px;
    height: auto;
    display: block;
    object-fit: contain;
}

.footer-logo-footer {
    width: 110px;
    height: auto;
    display: block;
    object-fit: contain;
}

.footer-logo-footers {
    width: 160px;
    max-width: 160px;
    height: auto;
    display: block;
    object-fit: contain;
}

.footer-brand-text {
    flex: 1;
}

.footer-brand-text p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #111;
    font-weight: 400;
}

/* ORTADAKİ KESİK ÇİZGİ */
.footer-divider {
    width: 1px;
    min-width: 1px;
    background-image: linear-gradient(to bottom, #8c8c8c 50%, rgba(255,255,255,0) 0%);
    background-position: center;
    background-size: 1px 8px;
    background-repeat: repeat-y;
    margin: 0 8px;
}

/* SAĞ TARAF */
.footer-right {
    width: 48%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-left: 6px;
}

.footer-social {
    text-align: right;
    margin-bottom: 26px;
}

.footer-social h4 {
    font-size: 18px;
    font-weight: 700;
    color: #111;
    margin-bottom: 12px;
    padding-right: 60px;

}

.social-icons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
}

.social-icons a {
    color: #163b73;
    font-size: 22px;
    line-height: 1;
    transition: 0.3s ease;
}

.social-icons a:hover {
    color: #0f2850;
    transform: translateY(-2px);
}

.footer-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    column-gap: 34px;
    row-gap: 12px;
    align-items: start;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.footer-contact-icon {
    color: #163b73;
    font-size: 16px;
    line-height: 1;
    min-width: 16px;
    margin-top: 3px;
}

.footer-contact-text {
    font-size: 13px;
    line-height: 1.6;
    color: #111;
    font-weight: 400;
}

.footer-contact-text strong {
    font-weight: 700;
}

/* TABLET */
@media (max-width: 1199.98px) {
    .footer-logo {
        width: 210px;
        min-width: 210px;
        max-width: 210px;
    }

    .footer-brand-text p {
        font-size: 13px;
    }

    .footer-contact-grid {
        grid-template-columns: 1fr;
    }

    .footer-social {
        text-align: left;
    }

    .social-icons {
        justify-content: flex-start;
    }
}

/* MOBİL */
@media (max-width: 991.98px) {
    .footer-wrapper {
        flex-direction: column;
        gap: 24px;
    }

    .footer-left,
    .footer-right {
        width: 100%;
    }

    .footer-divider {
        width: 100%;
        height: 1px;
        min-width: 100%;
        background-image: linear-gradient(to right, #8c8c8c 50%, rgba(255,255,255,0) 0%);
        background-size: 8px 1px;
        background-repeat: repeat-x;
        margin: 0;
    }

    .footer-brand-wrap {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-logo {
        width: 180px;
        min-width: 180px;
        max-width: 180px;
    }

    .footer-right {
        padding-left: 0;
    }

    .footer-social {
        text-align: left;
        margin-bottom: 20px;
    }

    .social-icons {
        justify-content: flex-start;
    }

    .footer-contact-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

@media (max-width: 575.98px) {
    .site-footer {
        padding: 24px 0 16px;
    }

    .footer-logo {
        width: 155px;
        min-width: 155px;
        max-width: 155px;
    }

    .footer-brand-text p,
    .footer-contact-text {
        font-size: 12px;
    }

    .footer-social h4 {
        font-size: 16px;
    }

    .social-icons a {
        font-size: 20px;
    }
}
.brand-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.brand-card:hover {
    transform: translateY(-2px);
}
    </style>
</head>
<body><!-- NAVBAR -->
<nav class="navbar navbar-expand-lg ">
    <div class="container">
        <a class="navbar-brand" href="#"><img src="assets/images/logoname.png" alt="Biyometrik Logo" class="footer-logo-footer"></a>

        <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#menu">
            ☰
        </button>

        <div class="collapse navbar-collapse justify-content-end" id="menu">
            <ul class="navbar-nav align-items-center">
                <li class="nav-item"><a class="nav-link" href="GecisKontrol.php">Geçiş Kontrol</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Operasyon</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Şirketimiz</a></li>
                <li class="nav-item">
                    <a class="btn btn-contact" href="#">Bize Ulaşın</a>
                </li>
            </ul>
        </div>
    </div>
</nav>








































<footer class="site-footer">
    <div class="container">
        <div class="footer-wrapper">

            <!-- SOL -->
            <div class="footer-left">
                <div class="footer-brand-wrap">
                    <img src="assets/images/logo.png" alt="Biyometrik Logo" class="footer-logo">

                    <div class="footer-brand-text">
                        <img src="assets/images/footerlogoname.png" alt="Biyometrik Logo" class="footer-logo-footers">

                        <p>
                            Biyometrik, 2021 yılı itibari ile piyasada geçiş kontrol sistemleri üzerine uzmanlaşmış 
                            bir firma olarak hizmet vermekteyiz. Müşterilerimize özel tasarım ve kurulum hizmetleri
                            sunarak, onların güvenlik ihtiyaçlarını en iyi şekilde karşılamak için çalışıyoruz. Yüksek
                            kaliteli ekipmanlarımız ve deneyimli ekibimiz ile, müşterilerimize 81 ilde hizmet sunmayı
                            amaçlıyoruz.
                        </p>
                    </div>
                </div>
            </div>

            <!-- AYIRICI -->

            <!-- SAĞ -->
            <div class="footer-right">
                <div class="footer-social">
                    <h4>Bizi Takip Edin!</h4>
                    <div class="social-icons">
                        <a href="#" aria-label="Facebook"><i class="bi bi-facebook"></i></a>
                        <a href="#" aria-label="Linkedin"><i class="bi bi-linkedin"></i></a>
                        <a href="#" aria-label="Instagram"><i class="bi bi-instagram"></i></a>
                        <a href="#" aria-label="Youtube"><i class="bi bi-youtube"></i></a>
                        <a href="#" aria-label="X"><i class="bi bi-twitter-x"></i></a>
                    </div>
                </div>

                <div class="footer-contact-grid">
                    <div class="footer-contact-item">
                        <div class="footer-contact-icon">
                            <i class="bi bi-telephone"></i>
                        </div>
                        <div class="footer-contact-text">+90 312 911 99 93</div>
                    </div>

                    <div class="footer-contact-item">
                        <div class="footer-contact-icon">
                            <i class="bi bi-geo-alt"></i>
                        </div>
                        <div class="footer-contact-text">
                            <strong>Ankara (Ana) Ofis:</strong><br>
                            Gökkuşağı Mah. Cevizlidere Cad. 1200 Sok. 12/A-B Çankaya - ANKARA
                        </div>
                    </div>

                    <div class="footer-contact-item">
                        <div class="footer-contact-icon">
                            <i class="bi bi-envelope"></i>
                        </div>
                        <div class="footer-contact-text">info@biyometrik.com.tr</div>
                    </div>

                    <div class="footer-contact-item">
                        <div class="footer-contact-icon">
                            <i class="bi bi-geo-alt"></i>
                        </div>
                        <div class="footer-contact-text">
                            <strong>İstanbul Ofis:</strong><br>
                            Küçükbakkalköy Mah. Kayışdağı Cad. Allianz Plaza 1/108 Ataşehir İstanbul
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</footer>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>