<!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: #f5f5f5;
        }

        /* 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 */
        .hero {
            position: relative;
height: 500px;
        }

        .hero h1 {
            font-size: 42px;
            line-height: 1;
        }

        .hero p {
            margin-top: 20px;
            font-size: 18px;
            color: #555;
            max-width: 500px;
        }

        .hero-btn {
            margin-top: 30px;
            background: #777;
            color: #fff;
            border-radius: 30px;
            padding: 9px 99px;
            border: none;
        }

        /* MAP AREA */
        .map-area {
            position: relative;
        }

        .map-area img.map {
            width: 100%;
            max-width: 700px;
        }

        .worker-img {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 600px;
        }

        /* RESPONSIVE */
        @media(max-width: 992px){
            .hero h1 {
                font-size: 36px;
            }

            .worker-img {
                position: relative;
                width: 200px;
                margin-top: 30px;
            }
        }
        .services {
    background-color: white;
}

.service-box {
    background: #f5f5f5;
    padding: 40px;
    border-radius: 20px;
    transition: 0.3s;
}

.service-box:hover {
    transform: translateY(-5px);
}

.service-box h4 {
    font-weight: 600;
}

.service-box p {
    color: #555;
    margin-top: 15px;
}

.service-box li {
    margin-bottom: 10px;
    font-weight: 500;
}

.icon {
    font-size: 30px;
}
.references {
    background: #f3f3f3;
}

/* Slider alanı */
.logo-slider {
    overflow: hidden;
    position: relative;
}

/* Track */
.logo-track {
    display: flex;
    width: calc(220px * 12);
    animation: scroll 30s linear infinite;
}

/* KUTU */
.logo-item {
    width: 200px;
    height: 100px;
    background: #fff;
    border-radius: 12px;
    margin: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: 0.3s;
}

/* Hover */
.logo-item:hover {
    transform: translateY(-5px);
}

/* Logo */
.logo-item img {
    max-width: 120px;
    max-height: 50px;
    object-fit: contain;
    opacity: 0.8;
    transition: 0.3s;
}

.logo-item:hover img {
    opacity: 1;
}

/* Animasyon */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.story {
    background-color: white;
    padding: 90px 0;
    overflow: hidden;
}

.story .container {
    max-width: 1320px;
}

.story-visual {
    position: relative;
    max-width: 760px;
    min-height: 620px;
    margin: 0 auto;
}

.puzzle-img {
    width: 90%;
    max-width: 760px;
    height: auto;
    display: block;
}

/* ortak yapı */
.story-label {
    position: absolute;
    z-index: 3;
}

.story-label .dot {
    width: 18px;
    height: 18px;
    background: #0f3b78;
    border-radius: 50%;
    display: block;
    position: absolute;
    z-index: 3;
}

.story-label .line {
    position: absolute;
    background: #0f3b78;
    z-index: 2;
}

.story-label .line.vertical {
    width: 4px;
    height: 118px;
    left: 7px;
    bottom: 100%;
}

.story-label .line.vertical.down {
    width: 4px;
    height: 118px;
    left: 7px;
    top: 100%;
}

.story-label .line.horizontal {
    width: 122px;
    height: 4px;
    left: 18px;
    top: 7px;
}

.story-label .label-text {
    position: absolute;
    font-size: 18px;
    font-weight: 700;
    color: #111;
    line-height: 1.2;
    white-space: nowrap;
}

/* yukarı yazılar */
.story-label .label-text.top {
    bottom: calc(100% + 128px);
    left: 50%;
    transform: translateX(-50%);
}

/* aşağı yazılar */
.story-label .label-text.bottom {
    top: calc(100% + 128px);
    left: 50%;
    transform: translateX(-50%);
}

/* sağ yazılar */
.story-label .label-text.right {
    left: 152px;
    top: -12px;
}

/* konumlar - görsele göre düzeltildi */
.label-top-left {
    left: 140px;
    top: 182px;
}

.label-top-center {
    left: 410px;
    top: 182px;
}
.story-content {
    padding-left: 60px;
}
.label-bottom-left {
    left: 150px;
    top: 390px;
}

.label-bottom-center {
    left: 410px;
    top: 390px;
}

.label-right-top {
    left: 412px;
    top: 255px;
}

.label-right-bottom {
    left: 439px;
    top: 320px;
}

/* sağ metin alanı */
.story-content {
    padding-left: 40px;
}

.story-content h2 {
    font-size: 58px;
    font-weight: 700;
    line-height: 1.08;
    margin-bottom: 28px;
    color: #111;
}

.story-text p {
    color: #222;
    font-size: 18px;
    line-height: 1.75;
    margin-bottom: 20px;
    position: relative;
    padding-left: 18px;
}

.story-text p::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 3px;
    height: 200%;
    background: #163d74;
    border-radius: 3px;
}

/* tablet */
@media (max-width: 1199.98px) {
    .story-visual {
        max-width: 650px;
        min-height: 540px;
    }

    .puzzle-img {
        max-width: 650px;
    }

    .story-content {
        padding-left: 10px;
    }

    .story-content h2 {
        font-size: 46px;
    }

    .story-label .label-text {
        font-size: 16px;
    }

    .story-label .line.vertical,
    .story-label .line.vertical.down {
        height: 95px;
    }

    .story-label .line.horizontal {
        width: 95px;
    }

    .story-label .label-text.top {
        bottom: calc(100% + 104px);
    }

    .story-label .label-text.bottom {
        top: calc(100% + 104px);
    }

    .story-label .label-text.right {
        left: 118px;
        top: -8px;
    }

    .label-top-left { left: 150px; top: 155px; }
    .label-top-center { left: 350px; top: 155px; }
    .label-bottom-left { left: 150px; top: 430px; }
    .label-bottom-center { left: 350px; top: 430px; }
    .label-right-top { left: 390px; top: 215px; }
    .label-right-bottom { left: 390px; top: 355px; }
}

/* mobilde etiketleri kaldırmak en temiz çözüm */
@media (max-width: 991.98px) {
    .story {
        padding: 70px 0;
    }

    .story-visual {
        max-width: 560px;
        min-height: auto;
    }

    .puzzle-img {
        max-width: 560px;
    }

    .story-label {
        display: none;
    }

    .story-content {
        padding-left: 0;
        margin-top: 20px;
    }

    .story-content h2 {
        font-size: 38px;
    }

    .story-text p {
        font-size: 17px;
    }
}

@media (max-width: 575.98px) {
    .story-content h2 {
        font-size: 31px;
    }

    .story-text p {
        font-size: 16px;
        line-height: 1.65;
    }
}
.systems {
    background: #f3f3f3;
    padding-top: 34px !important;
    padding-bottom: 42px !important;
    overflow: hidden;
}

/* üst başlık alanı */
.systems-header {
    max-width: 1160px;
    margin-bottom: 14px !important;
}

.systems-header h2 {
    font-size: 26px;
    line-height: 1.25;
    font-weight: 700 !important;
    color: #111;
    margin-bottom: 18px;
    text-align: left;
}

.systems-header p {
    max-width: 1120px;
    font-size: 16px;
    line-height: 1.48;
    color: #111;
    margin-bottom: 0;
    text-align: left;
}

/* kart alanı */
.systems-cards-wrap {
    position: relative;
    margin-top: 8px;
    margin-bottom: 34px;
}

.systems-cards-row {
    position: relative;
    z-index: 2;
}

.systems-line-bg {
    position: absolute;
    left: -2000px;
    right: -2000px;
    top: 48px;
    height: 2px;
    background: #163f78;
    z-index: 1;
}

/* kutular */
    .system-box {
        position: relative;
        background-color: white;
        padding: 24px 18px 16px;
        border-radius: 19px;
        box-shadow: 0 2px 7px rgba(0, 0, 0, 0.10);
        min-height: 154px;
        transition: none;
            overflow: visible; /* TAŞMASI İÇİN ŞART */

    }

.system-box:hover {
    transform: none;
}

.system-box h4 {
    font-size: 17px;
    line-height: 1.2;
    font-weight: 700;
    color: #111;
    margin-bottom: 8px;
}

/* başlık altı çizgi */
.line {
    width: 178px;
    height: 2px;
    background: #163f78;
    border-radius: 0;
    margin: 0 auto 8px;
}

/* başlık altı çizgi */
.linee {
    width: 250px;
    height: 2px;
    background: #163f78;
    border-radius: 0;
    margin: 0 auto 8px;
}

/* kart iç yazı */
.system-box p {
    color: #111;
    font-size: 12px;
    line-height: 1.32;
    margin: 0;
}

/* alt alan */
.systems-bottom-row {
    align-items: flex-start !important;
}

.systems-bottom-text {
    padding-top: 4px;
    padding-left: 8px;
}

.systems-bottom-title {
    font-size: 16px;
    line-height: 1.4;
    color: #111;
    margin-bottom: 18px;
}

.systems-bottom-paragraph {
    font-size: 16px;
    line-height: 1.55;
    color: #111;
    max-width: 710px;
}

/* sağ görsel */
.system-img {
    width: 208px;
    max-width: 208px;
    margin-top: -6px;
    margin-right: 28px;
}

/* lg altı */
@media (max-width: 991.98px) {
    .systems {
        padding-top: 28px !important;
        padding-bottom: 34px !important;
    }

    .systems-header h2 {
        font-size: 22px;
    }

    .systems-header p,
    .systems-bottom-title,
    .systems-bottom-paragraph {
        font-size: 15px;
    }

    .systems-line-bg {
        display: none;
    }

    .system-box {
        min-height: auto;
    }

    .systems-bottom-text {
        padding-left: 0;
    }

    .system-img {
        width: 190px;
        max-width: 190px;
        margin: 20px auto 0;
    }
}
/* default ortalı (ortadaki için) */
.system-box .line {
    position: absolute;
    top: 45px; /* başlık hizası (görsele göre ayarlandı) */
    height: 2px;
    background: #163f78;
    width: 470px;
}

/* SOL KUTU → sola taş */
.systems-cards-row .col-lg-4:nth-child(1) .line {
    left: -120px;
}

/* ORTA KUTU → ortada */
.systems-cards-row .col-lg-4:nth-child(2) .line {
    left: 50%;
    transform: translateX(-50%);
}

/* SAĞ KUTU → sağa taş */
.systems-cards-row .col-lg-4:nth-child(3) .line {
    right: -120px;
}
/* md altı */
@media (max-width: 767.98px) {
    .systems-header h2 {
        font-size: 20px;
    }

    .systems-header p,
    .systems-bottom-title,
    .systems-bottom-paragraph {
        font-size: 14px;
        line-height: 1.5;
    }

    .system-box {
        padding: 20px 16px 14px;
    }

    .system-box h4 {
        font-size: 16px;
    }

    .line {
        width: 150px;
    }

    .system-box p {
        font-size: 12px;
    }
}

.contact-section {
    background-color: white;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.contact-info h2 {
    font-size: 52px;
    font-weight: 700;
    margin-bottom: 24px;
    color: #111;
}

.contact-desc {
    font-size: 18px;
    line-height: 1.8;
    color: #222;
    margin-bottom: 60px;
}

.contact-item {
    margin-bottom: 26px;
}

.address-item {
    margin-top: 55px;
}

.contact-icon {
    width: 74px;
    min-width: 74px;
    font-size: 42px;
    color: #000;
    line-height: 1;
}

.contact-text {
    font-size: 18px;
    color: #111;
    line-height: 1.8;
    padding-top: 2px;
}

.contact-form-box {
    border: 1.5px solid #a9a9a9;
    border-radius: 18px;
    padding: 34px 32px;
    background: transparent;
    background-color: #f3f3f3;

}

.contact-form-box .form-label {
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 10px;
    color: #111;
}

.custom-input {
    height: 48px;
    border: 1.5px solid #a9a9a9;
    border-radius: 12px;
    background: transparent;
    box-shadow: none !important;
    font-size: 16px;
    padding: 10px 16px;
    background-color: white;

}

.custom-textarea {
    height: auto;
    min-height: 124px;
    resize: none;
    padding-top: 14px;
}

.custom-input:focus {
    border-color: #7a7a7a;
    background: transparent;
}

.contact-btn {
    min-width: 205px;
    height: 48px;
    border: none;
    border-radius: 14px;
    background: #7a7a7a;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    transition: 0.3s ease;
}

.contact-btn:hover {
    background: #5f5f5f;
}

@media (max-width: 991.98px) {
    .contact-info h2 {
        font-size: 38px;
    }

    .contact-desc {
        margin-bottom: 35px;
    }

    .address-item {
        margin-top: 30px;
    }

    .contact-form-box {
        padding: 24px 20px;
    }
}

@media (max-width: 575.98px) {
    .contact-info h2 {
        font-size: 30px;
    }

    .contact-text {
        font-size: 16px;
    }

    .contact-icon {
        width: 58px;
        min-width: 58px;
        font-size: 34px;
    }

    .contact-btn {
        width: 100%;
    }
}

.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;
    }
}
    </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>

<!-- HERO -->
<section class="hero">
    <div class="container">
        <div class="row align-items-center">

            <!-- LEFT -->
            <div class="col-lg-6">
                <h1>
                    Güvenli Geçiş Kontrol Sistemleri<br>
                    ve Ülke Çapında Teknik Destek
                </h1>

                <p>
                    Gelişmiş geçiş kontrol çözümlerimiz ve kapsamlı saha hizmeti ağımızla ülkenin her bölgesine ulaşıyoruz. 
                    Tesislerinizi, yenilikçi teknolojiler ve güvenilir destekle koruma altına alıyoruz.
                </p>

                <button class="hero-btn">
                    Destek almak için bize ulaşın
                </button>
            </div>

            <!-- RIGHT -->
            <div class="col-lg-6 text-center">
                <!-- Türkiye Haritası -->
                <img src="assets/images/slider.png" style="width:725px;" class="map" alt="Türkiye Haritası">

                <!-- Adam görseli -->
                <img src="assets/images/adam.png" class="worker-img" alt="">
            </div>

        </div>
    </div>
</section>
<!-- SERVICES -->
<section class="services py-5">
    <div class="container">

        <!-- TITLE -->
        <div class="text-center mb-5">
            <h2 class="fw-bold">Kapsamlı Çözümlerimiz</h2>
            <p class="text-muted mt-3">
                Sektörün önde gelen markalarının ürünlerini, güvenilir tedarik ve satış sonrası destek hizmetiyle sunuyoruz.
            </p>
        </div>

        <div class="row g-4">

            <!-- LEFT CARD -->
            <div class="col-lg-6">
                <div class="service-box h-100">
                    <div class="d-flex align-items-center mb-3">
                        <div class="icon me-3" ><img src="assets/images/kilitayar.png" style="width: 70px;
    height: auto;" alt=""></div>
                        <h4 class="mb-0">Geçiş Kontrol Sistemleri</h4>
                    </div>

                    <p>
                        Anlaşmalı olduğumuz markaların yetkili bayisi olarak gelişmiş geçiş kontrol sistemleri, kartlı geçiş çözümleri ve güvenlik ekipmanlarının satışını gerçekleştiriyoruz.
                    </p>

                    <ul class="list-unstyled mt-4">
                        <li>✔ Dormakaba</li>
                        <li>✔ ASSA ABLOY</li>
                        <li>✔ TANSA</li>
                    </ul>
                </div>
            </div>

            <!-- RIGHT CARD -->
            <div class="col-lg-6">
                <div class="service-box h-100">
                    <div class="d-flex align-items-center mb-3">
                        <div class="icon me-3"><img src="assets/images/operationicon.png" style="width: 70px;
    height: auto;" alt=""></div>
                        <h4 class="mb-0">Operasyon ve Saha Hizmetleri</h4>
                    </div>

                    <p>
                        Operasyon ekibimiz, ERP sistemi üzerinden saha ekiplerini etkin şekilde yöneterek tüm bölgelerde hızlı ve güvenilir teknik destek sağlar.
                    </p>

                    <ul class="list-unstyled mt-4">
                        <li>✔ ERP Sistemi ile Operasyon Yönetimi</li>
                        <li>✔ Saha Hizmetleri</li>
                        <li>✔ Teknik Destek ve Bakım</li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
</section>

<!-- REFERENCES -->
<section class="references py-5">
    <div class="container text-center">
        <h2 class="fw-bold mb-5">Referanslarımız</h2>

        <div class="logo-slider">
            <div class="logo-track">

                <!-- ITEM -->
                <div class="logo-item"><img src="assets/images/halkbank.png"></div>
                <div class="logo-item"><img src="assets/images/sekerbank.png"></div>
                <div class="logo-item"><img src="assets/images/teb.png"></div>
                <div class="logo-item"><img src="assets/images/ing.png"></div>
                <div class="logo-item"><img src="assets/images/aktifbank.png"></div>
                <div class="logo-item"><img src="assets/images/egeuni.png"></div>

                <!-- LOOP -->
                <div class="logo-item"><img src="assets/images/halkbank.png"></div>
                <div class="logo-item"><img src="assets/images/sekerbank.png"></div>
                <div class="logo-item"><img src="assets/images/teb.png"></div>
                <div class="logo-item"><img src="assets/images/ing.png"></div>
                <div class="logo-item"><img src="assets/images/aktifbank.png"></div>
                <div class="logo-item"><img src="assets/images/egeuni.png"></div>

            </div>
        </div>
    </div>
</section>

<!-- STORY SECTION -->
<section class="story">
    <div class="container">
        <div class="row align-items-center">

            <div class="col-lg-6 mb-5 mb-lg-0">
                <div class="story-visual">
                    <img src="assets/images/storyactio.png" class="puzzle-img" alt="">

                    <div class="story-label label-top-left">
                        <span class="dot"></span>
                        <span class="line vertical"></span>
                        <span class="label-text top">Hizmetlerimiz</span>
                    </div>

                    <div class="story-label label-top-center">
                        <span class="dot"></span>
                        <span class="line vertical"></span>
                        <span class="label-text top">Sistemimiz</span>
                    </div>

                    <div class="story-label label-bottom-left">
                        <span class="dot"></span>
                        <span class="line vertical down"></span>
                        <span class="label-text bottom">Referanslarımız</span>
                    </div>

                    <div class="story-label label-bottom-center">
                        <span class="dot"></span>
                        <span class="line vertical down"></span>
                        <span class="label-text bottom">Saha Hizmetlerimiz</span>
                    </div>

                    <div class="story-label label-right-top">
                        <span class="dot"></span>
                        <span class="line horizontal"></span>
                        <span class="label-text right">Çözüm<br>Ortaklarımız</span>
                    </div>

                    <div class="story-label label-right-bottom">
                        <span class="dot"></span>
                        <span class="line horizontal"></span>
                        <span class="label-text right">Operasyon<br>Ekibimiz</span>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="story-content">
                    <h2>
                        Parçalar Birleştiğinde,<br>Ortaya Biz Çıkarız
                    </h2>

                    <div class="story-text">
                        <p><strong>Her şey tek bir parçayla başladı...</strong></p>

                        <p>
                            Zamanla o parçanın yanına yenileri eklendi: hizmetlerimiz, sistemimiz, referanslarımız, saha hizmetlerimiz, çözüm ortaklarımız ve operasyon ekibimiz.
                        </p>

                        <p>
                            Her biri farklı bir anlam, farklı bir katkı getirdi.
                        </p>

                        <p>
                            Bugün geriye dönüp baktığımızda görüyoruz ki, bu parçalar sadece yan yana gelmedi,
                            <strong>birbirine kenetlendi.</strong>
                            Tıpkı bir puzzle gibi, her parça kendi yerinde, kendi renginde ve kendi değeriyle
                            <strong>bütünün anlamını tamamladı.</strong>
                        </p>

                        <p>
                            Bizim için bu bütün, sadece bir şirket değil; bir emek, bir ekip ruhu, bir güven hikâyesi.
                        </p>

                        <p><strong>Ve her yeni proje, o hikâyeye eklenen yepyeni bir parça...</strong></p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>
<!-- SYSTEMS -->
<section class="systems py-5">
    <div class="container">

        <!-- TITLE -->
        <div class="systems-header mb-5">
            <h2 class="fw-bold">
                Entegre Sistemlerle Verimli ve Güvenli Süreç Yönetimi
            </h2>
            <p class="mt-3">
                Şirketimizde tüm süreçlerimizi verimli, güvenli ve izlenebilir hale getirmek için ERP, Work Cube (W3) ve B2B altyapı sistemlerini entegre şekilde kullanıyoruz.
                Personel iş gücünü en yüksek verim ve doğrulukla yönetmek için yapay zekâ destekli çözümlerimizi sürekli geliştiriyoruz.
            </p>
        </div>

        <!-- CARDS -->
        <div class="systems-cards-wrap">

            <div class="row g-3 mb-5 systems-cards-row">

                <div class="col-lg-4">
                    <div class="system-box h-100 text-center">
                        <h4>ERP</h4>
                        <div class="line"></div>
                        <p>
                            Tüm satış, stok, proje ve finansal süreçlerimizi tek bir merkezden yönetiyoruz. Bu sayede kaynaklarımızı daha verimli kullanıyor, operasyonel hataları en aza indiriyor ve raporlama süreçlerimizi hızlandırıyoruz.
                        </p>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="system-box h-100 text-center">
                        <h4>Workcube (W3)</h4>
                        <div class="linee"></div>
                        <p>
                            İş süreçlerimizin dijital dönüşümünü destekleyen, bulut tabanlı bir kurumsal iş yönetim platformu kullanıyoruz. Proje, görev, servis ve müşteri yönetimini tek bir ekosistemde birleştiriyoruz.
                        </p>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="system-box h-100 text-center">
                        <h4>B2B Sistemi</h4>
                        <div class="line"></div>
                        <p>
                            B2B sistemimiz, taşeron çözüm ortaklarımıza servis çağrısı oluşturmak amacıyla kullanılmaktadır. Çağrılar SLA takibi ile yönetilir ve saha ekipleriyle entegre çalışır.
                        </p>
                    </div>
                </div>

            </div>
        </div>

        <!-- ALT ALAN -->
        <div class="row align-items-start systems-bottom-row">

            <!-- TEXT -->
            <div class="col-lg-7">
                <div class="systems-bottom-text">
                    <p class="systems-bottom-title">Bu sistemler sayesinde;</p>

                    <div class="systems-bottom-paragraph">
                        Satış ve proje süreçlerimizi uçtan uca takip edebiliyor,<br>
                        Müşterilerimize hızlı ve şeffaf hizmet sunabiliyor,<br>
                        Operasyonel verimliliğimizi sürekli artırıyoruz.<br>
                        Amacımız, güçlü teknolojik altyapımızla müşterilerimize güvenli, sürdürülebilir ve yenilikçi çözümler sunmaktır.
                    </div>
                </div>
            </div>

            <!-- IMAGE -->
            <div class="col-lg-5 text-center text-lg-end">
                <img src="assets/images/system.png" class="img-fluid system-img" alt="">
            </div>

        </div>

    </div>
</section>


<!-- CONTACT -->
<section class="contact-section py-5">
    <div class="container">
        <div class="row align-items-start g-5">

            <!-- LEFT -->
            <div class="col-lg-5">
                <div class="contact-info">
                    <h2>Bize Ulaşın!</h2>
                    <p class="contact-desc">
                        Danışmanlık veya destek için bizimle iletişime geçin.<br>
                        Ekibimiz tesisinizi güvence altına almak için hazırdır.
                    </p>

                    <div class="contact-item d-flex align-items-center">
                        <div class="contact-icon">
                            <i class="bi bi-telephone-fill"></i>
                        </div>
                        <div class="contact-text">+90 312 911 99 93</div>
                    </div>

                    <div class="contact-item d-flex align-items-center">
                        <div class="contact-icon">
                            <i class="bi bi-envelope-fill"></i>
                        </div>
                        <div class="contact-text">info@biyometrik.com.tr</div>
                    </div>

                    <div class="contact-item address-item d-flex align-items-start">
                        <div class="contact-icon mt-1">
                            <i class="bi bi-geo-alt-fill"></i>
                        </div>
                        <div class="contact-text">
                            <div class="mb-4">
                                <strong>Ankara:</strong><br>
                                Gökkuşağı Mah. Cevizlidere Cad. 1200 Sok. 12/A-B<br>
                                Çankaya- ANKARA
                            </div>

                            <div>
                                <strong>İstanbul:</strong><br>
                                Küçükbakkalköy Mah. Kayışdağı Cad.<br>
                                Allianz Plaza 1/108<br>
                                Ataşehir İstanbul
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- RIGHT -->
            <div class="col-lg-7">
                <div class="contact-form-box">
                    <form action="" method="post">
                        <div class="row g-4">
                            <div class="col-md-6">
                                <label class="form-label">İsim</label>
                                <input type="text" name="isim" class="form-control custom-input">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Soyismi</label>
                                <input type="text" name="soyisim" class="form-control custom-input">
                            </div>

                            <div class="col-12">
                                <label class="form-label">E-mail</label>
                                <input type="email" name="email" class="form-control custom-input">
                            </div>

                            <div class="col-12">
                                <label class="form-label">Konu</label>
                                <input type="text" name="konu" class="form-control custom-input">
                            </div>

                            <div class="col-12">
                                <label class="form-label">Mesaj</label>
                                <textarea name="mesaj" rows="6" class="form-control custom-input custom-textarea"></textarea>
                            </div>

                            <div class="col-12">
                                <button type="submit" class="contact-btn">Mesaj Gönder</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</section>

<!-- FOOTER -->
<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>