.face-header .btn-default,
.face-consult .btn-default,
.cta-actions .btn-default {
    padding-right: 45px !important;
}

.face-header .btn-default::before,
.face-consult .btn-default::before,
.cta-actions .btn-default::before {
    right: 22px !important;
    transform: translateY(-50%) !important;
}

.face-header .btn-default:hover::before,
.face-consult .btn-default:hover::before,
.cta-actions .btn-default:hover::before {
    right: 19px !important;
    transform: translateY(-50%) !important;
}

.face-header .navbar > .container {
    position: static;
}

.face-header .navbar {
    position: relative;
}

.products-menu-item {
    position: static !important;
    display: flex;
    align-items: center;
}

.mega-toggle {
    width: 24px;
    height: 32px;
    margin-left: -8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pz-navy);
    font-size: 10px;
}

.products-mega {
    position: absolute;
    z-index: 1000;
    top: calc(100% - 2px);
    left: 50%;
    width: min(1540px, calc(100vw - 24px));
    max-height: calc(100vh - 100px);
    padding: 10px 20px;
    border: 1px solid #dce6e8;
    border-radius: 0 0 18px 18px;
    background: #fff;
    box-shadow: 0 28px 65px rgba(4, 21, 34, .2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow-y: auto;
    transform: translate(-50%, 12px);
    transition: opacity .25s, visibility .25s, transform .25s;
}

.products-menu-item:focus-within .products-mega,
.products-menu-item.mega-open .products-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.products-menu-item.mega-open .mega-toggle i {
    transform: rotate(180deg);
}

@media (min-width: 992px) {
    .face-header .main-menu > .nav-menu-wrapper > ul > li.compact-menu {
        position: relative;
    }

    .face-header .main-menu > .nav-menu-wrapper > ul > li.compact-menu > ul {
        display: block;
        top: calc(100% - 2px);
        left: 0;
        width: 310px;
        padding: 10px !important;
        border: 1px solid #dce6e8;
        border-radius: 0 0 16px 16px;
        background: #fff;
        box-shadow: 0 24px 55px rgba(7, 27, 44, .16);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(12px);
        transform-origin: top;
        transition: opacity .25s, visibility .25s, transform .25s;
    }

    .face-header .main-menu > .nav-menu-wrapper > ul > li.compact-menu:hover > ul,
    .face-header .main-menu > .nav-menu-wrapper > ul > li.compact-menu:focus-within > ul {
        padding: 10px !important;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .face-header .main-menu > .nav-menu-wrapper > ul > li.compact-menu > ul::before {
        content: '';
        position: absolute;
        right: 0;
        bottom: 100%;
        left: 0;
        height: 12px;
    }

    .face-header .main-menu > .nav-menu-wrapper > ul > li.compact-menu > ul > li {
        border-bottom: 1px solid #edf1f2;
    }

    .face-header .main-menu > .nav-menu-wrapper > ul > li.compact-menu > ul > li:last-child {
        border-bottom: 0;
    }

    .face-header .main-menu > .nav-menu-wrapper > ul > li.compact-menu > ul > li > a {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 39px;
        padding: 9px 12px 9px 28px !important;
        border-radius: 7px;
        background: transparent;
        color: #314650;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.35;
        text-transform: none;
    }

    .face-header .main-menu > .nav-menu-wrapper > ul > li.compact-menu > ul > li > a::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 12px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #a9c7cc;
        transform: translateY(-50%);
        transition: background-color .2s, transform .2s;
    }

    .face-header .main-menu > .nav-menu-wrapper > ul > li.compact-menu > ul > li > a:hover,
    .face-header .main-menu > .nav-menu-wrapper > ul > li.compact-menu > ul > li > a:focus {
        background: #eff9fa;
        color: var(--pz-navy);
    }

    .face-header .main-menu > .nav-menu-wrapper > ul > li.compact-menu > ul > li > a:hover::before,
    .face-header .main-menu > .nav-menu-wrapper > ul > li.compact-menu > ul > li > a:focus::before {
        background: var(--pz-blue);
        transform: translateY(-50%) scale(1.25);
    }
}

.mega-menu-head {
    position: sticky;
    z-index: 2;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 22px 0 18px;
    border-bottom: 1px solid #e4ebed;
    background: #fff;
}

.mega-menu-head span,
.mega-menu-head strong {
    display: block;
}

.mega-menu-head span {
    color: var(--pz-blue);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .15em;
}

.mega-menu-head strong {
    color: var(--pz-navy);
    font-size: 18px;
}

.mega-menu-head > a {
    color: var(--pz-navy) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.mega-menu-head > a i {
    margin-left: 6px;
    color: var(--pz-blue);
}

.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 24px;
}

.mega-group {
    padding: 22px 0 17px;
    border-bottom: 1px solid #e8edef;
}

.mega-group h2 {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.4;
    text-align: left;
}

.mega-group h2 a {
    display: block;
    padding: 0 !important;
    color: var(--pz-navy) !important;
    font-size: inherit !important;
    font-weight: 800 !important;
}

.mega-group ul {
    position: static !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    list-style: none !important;
    text-align: left !important;
}

.mobile-products-list {
    display: none;
}

.mega-group li {
    margin: 0;
}

.mega-group li a {
    position: relative;
    display: block;
    padding: 1px 0 1px 14px !important;
    color: #687982 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2;
    text-align: left;
}

.mega-group li a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #bdd0d4;
    transform: translateY(-50%);
}

.mega-group li a:hover,
.mega-group li a.current {
    color: var(--pz-blue) !important;
}

.mega-group li a.current::before {
    background: var(--pz-blue);
}

.face-hero {
    position: relative;
    isolation: isolate;
    padding: 85px 0 82px;
    overflow: hidden;
    background:
        radial-gradient(circle at 84% 18%, rgba(151, 36, 71, .28), transparent 34%),
        linear-gradient(118deg, #03121f 0%, #092840 34%, #442039 62%, #81203e 100%);
}

.face-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(90deg, rgba(3, 18, 31, .84) 0%, rgba(15, 27, 43, .53) 42%, rgba(104, 24, 51, .22) 100%),
        url('../images/yuz-tanima-baslik-arka-plan-v2.png') 72% center / cover no-repeat;
    opacity: .94;
    pointer-events: none;
}

.face-hero::after {
    content: none;
}

.fingerprint-page .face-hero {
    background:
        radial-gradient(circle at 84% 22%, rgba(25, 188, 208, .17), transparent 30%),
        linear-gradient(118deg, #03121f 0%, #082b42 48%, #173a4b 100%);
}

.fingerprint-page .face-hero::before {
    background:
        linear-gradient(90deg, rgba(3, 18, 31, .94) 0%, rgba(4, 29, 45, .62) 48%, rgba(76, 20, 42, .25) 100%),
        url('../images/parmak-izi-uygulama-hero.png') 72% center / cover no-repeat;
    opacity: 1;
}

.card-access-page .face-hero::before {
    background:
        linear-gradient(90deg, rgba(3, 18, 31, .95) 0%, rgba(8, 34, 53, .72) 48%, rgba(103, 25, 52, .42) 100%),
        url('../images/kartli-gecis-uygulama-hero.png') 72% center / cover no-repeat;
    opacity: 1;
}

.qr-pdks-page .face-hero::before {
    background:
        linear-gradient(90deg, rgba(3, 18, 31, .95) 0%, rgba(6, 37, 57, .70) 48%, rgba(112, 25, 54, .40) 100%),
        url('../images/qr-pdks-uygulama-hero.png') 72% center / cover no-repeat;
    opacity: 1;
}

.palm-vein-page .face-hero::before {
    background:
        linear-gradient(90deg, rgba(3, 18, 31, .95) 0%, rgba(7, 32, 50, .70) 48%, rgba(108, 24, 52, .40) 100%),
        url('../images/avuc-ici-uygulama-hero.png') 72% center / cover no-repeat;
    opacity: 1;
}

.break-bell-page .face-hero::before {
    background:
        linear-gradient(90deg, rgba(3, 18, 31, .95) 0%, rgba(9, 33, 50, .72) 48%, rgba(117, 27, 55, .43) 100%),
        url('../images/mola-zili-uygulama-hero.png') 72% center / cover no-repeat;
    opacity: 1;
}

.pdks-group-page .face-hero {
    background: linear-gradient(118deg, #03121f 0%, #082b42 48%, #771f3d 100%);
}

.pdks-group-page .face-hero::before {
    background:
        linear-gradient(90deg, rgba(3, 18, 31, .96) 0%, rgba(5, 29, 47, .73) 45%, rgba(105, 25, 52, .33) 100%),
        url('../images/personel-takip-sistemleri-uygulama-hero.png') 72% center / cover no-repeat;
    opacity: 1;
}

.door-group-page .face-hero,
.finger-door-page .face-hero,
.face-door-page .face-hero,
.door-button-page .face-hero,
.keypad-door-page .face-hero,
.electronic-lock-page .face-hero,
.access-card-page .face-hero {
    background: linear-gradient(118deg, #03121f 0%, #082b42 48%, #771f3d 100%);
}

.door-group-page .face-hero::before {
    background: linear-gradient(90deg, rgba(3,18,31,.96), rgba(7,31,49,.70) 48%, rgba(108,25,52,.34)), url('../images/kapi-gecis-kontrol-uygulama-hero.png') 72% center / cover no-repeat;
    opacity: 1;
}

.finger-door-page .face-hero::before {
    background: linear-gradient(90deg, rgba(3,18,31,.96), rgba(7,31,49,.70) 48%, rgba(108,25,52,.34)), url('../images/parmak-izi-kapi-acma-uygulama-hero.png') 72% center / cover no-repeat;
    opacity: 1;
}

.face-door-page .face-hero::before {
    background: linear-gradient(90deg, rgba(3,18,31,.96), rgba(7,31,49,.70) 48%, rgba(108,25,52,.34)), url('../images/yuz-tanima-kapi-acma-uygulama-hero.png') 72% center / cover no-repeat;
    opacity: 1;
}

.door-button-page .face-hero::before {
    background: linear-gradient(90deg, rgba(3,18,31,.96), rgba(7,31,49,.70) 48%, rgba(108,25,52,.34)), url('../images/kapi-butonlari-uygulama-hero.png') 72% center / cover no-repeat;
    opacity: 1;
}

.keypad-door-page .face-hero::before {
    background: linear-gradient(90deg, rgba(3,18,31,.96), rgba(7,31,49,.70) 48%, rgba(108,25,52,.34)), url('../images/kartli-sifreli-kapi-uygulama-hero.png') 72% center / cover no-repeat;
    opacity: 1;
}

.electronic-lock-page .face-hero::before {
    background: linear-gradient(90deg, rgba(3,18,31,.96), rgba(7,31,49,.70) 48%, rgba(108,25,52,.34)), url('../images/elektronik-kilit-uygulama-hero.png') 72% center / cover no-repeat;
    opacity: 1;
}

.access-card-page .face-hero::before {
    background: linear-gradient(90deg, rgba(3,18,31,.96), rgba(7,31,49,.70) 48%, rgba(108,25,52,.34)), url('../images/manyetik-kart-uygulama-hero.png') 72% center / cover no-repeat;
    opacity: 1;
}

.turnstile-group-page .face-hero,
.tripod-turnstile-page .face-hero,
.full-height-turnstile-page .face-hero,
.accessible-turnstile-page .face-hero,
.speed-gate-page .face-hero {
    background: linear-gradient(118deg, #03121f 0%, #082b42 45%, #811f42 100%);
}

.turnstile-group-page .face-hero::before,
.tripod-turnstile-page .face-hero::before,
.full-height-turnstile-page .face-hero::before,
.accessible-turnstile-page .face-hero::before,
.speed-gate-page .face-hero::before {
    opacity: 1;
    background-position: 72% center;
    background-size: cover;
    background-repeat: no-repeat;
}

.turnstile-group-page .face-hero::before { background-image: linear-gradient(90deg, rgba(3,18,31,.96), rgba(7,31,49,.67) 48%, rgba(125,27,61,.30)), url('../images/turnike-sistemleri-uygulama-hero.png'); }
.tripod-turnstile-page .face-hero::before { background-image: linear-gradient(90deg, rgba(3,18,31,.96), rgba(7,31,49,.67) 48%, rgba(125,27,61,.30)), url('../images/tripod-turnike-uygulama-hero.png'); }
.full-height-turnstile-page .face-hero::before { background-image: linear-gradient(90deg, rgba(3,18,31,.96), rgba(7,31,49,.67) 48%, rgba(125,27,61,.30)), url('../images/tam-boy-turnike-uygulama-hero.png'); }
.accessible-turnstile-page .face-hero::before { background-image: linear-gradient(90deg, rgba(3,18,31,.96), rgba(7,31,49,.67) 48%, rgba(125,27,61,.30)), url('../images/engelli-vip-turnike-uygulama-hero.png'); }
.speed-gate-page .face-hero::before { background-image: linear-gradient(90deg, rgba(3,18,31,.96), rgba(7,31,49,.67) 48%, rgba(125,27,61,.30)), url('../images/hizli-gecis-turnike-uygulama-hero.png'); }

.tracking-group-page .face-hero,
.member-tracking-page .face-hero,
.student-tracking-page .face-hero,
.elevator-access-page .face-hero,
.cafeteria-tracking-page .face-hero,
.rd-tracking-page .face-hero { background: linear-gradient(118deg,#03121f 0%,#082b42 46%,#811f42 100%); }

.tracking-group-page .face-hero::before,
.member-tracking-page .face-hero::before,
.student-tracking-page .face-hero::before,
.elevator-access-page .face-hero::before,
.cafeteria-tracking-page .face-hero::before,
.rd-tracking-page .face-hero::before { opacity:1; background-position:72% center; background-size:cover; background-repeat:no-repeat; }

.tracking-group-page .face-hero::before { background-image:linear-gradient(90deg,rgba(3,18,31,.96),rgba(7,31,49,.67) 48%,rgba(125,27,61,.30)),url('../images/takip-sistemleri-uygulama-hero.png'); }
.member-tracking-page .face-hero::before { background-image:linear-gradient(90deg,rgba(3,18,31,.96),rgba(7,31,49,.67) 48%,rgba(125,27,61,.30)),url('../images/uye-takip-uygulama-hero.png'); }
.student-tracking-page .face-hero::before { background-image:linear-gradient(90deg,rgba(3,18,31,.96),rgba(7,31,49,.67) 48%,rgba(125,27,61,.30)),url('../images/ogrenci-takip-uygulama-hero.png'); }
.elevator-access-page .face-hero::before { background-image:linear-gradient(90deg,rgba(3,18,31,.96),rgba(7,31,49,.67) 48%,rgba(125,27,61,.30)),url('../images/asansor-kat-yetkilendirme-uygulama-hero.png'); }
.cafeteria-tracking-page .face-hero::before { background-image:linear-gradient(90deg,rgba(3,18,31,.96),rgba(7,31,49,.67) 48%,rgba(125,27,61,.30)),url('../images/yemekhane-takip-uygulama-hero.png'); }
.rd-tracking-page .face-hero::before { background-image:linear-gradient(90deg,rgba(3,18,31,.96),rgba(7,31,49,.67) 48%,rgba(125,27,61,.30)),url('../images/arge-merkezi-takip-uygulama-hero.png'); }

.access-control-group-page .face-hero,
.access-panel-page .face-hero,
.wiegand-reader-page .face-hero,
.gsm-remote-page .face-hero { background:linear-gradient(118deg,#03121f 0%,#082b42 46%,#811f42 100%); }

.access-control-group-page .face-hero::before,
.access-panel-page .face-hero::before,
.wiegand-reader-page .face-hero::before,
.gsm-remote-page .face-hero::before { opacity:1; background-position:72% center; background-size:cover; background-repeat:no-repeat; }

.access-control-group-page .face-hero::before { background-image:linear-gradient(90deg,rgba(3,18,31,.96),rgba(7,31,49,.67) 48%,rgba(125,27,61,.30)),url('../images/access-kontrol-sistemleri-uygulama-hero.png'); }
.access-panel-page .face-hero::before { background-image:linear-gradient(90deg,rgba(3,18,31,.96),rgba(7,31,49,.67) 48%,rgba(125,27,61,.30)),url('../images/access-kontrol-panelleri-uygulama-hero.png'); }
.wiegand-reader-page .face-hero::before { background-image:linear-gradient(90deg,rgba(3,18,31,.96),rgba(7,31,49,.67) 48%,rgba(125,27,61,.30)),url('../images/wiegand-kart-okuyucular-uygulama-hero.png'); }
.gsm-remote-page .face-hero::before { background-image:linear-gradient(90deg,rgba(3,18,31,.96),rgba(7,31,49,.67) 48%,rgba(125,27,61,.30)),url('../images/gsm-uzaktan-kontrol-uygulama-hero.png'); }

/* Tüm kategori başlıklarında bordo ağırlıklı ortak kurumsal geçiş */
.face-hero {
    background:
        radial-gradient(circle at 78% 22%, rgba(174, 43, 83, .46), transparent 38%),
        linear-gradient(112deg, #071421 0%, #31172a 24%, #711d3e 52%, #9b2850 100%) !important;
}

.face-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(3, 18, 31, .22) 0%,
        rgba(83, 20, 47, .24) 28%,
        rgba(122, 25, 58, .42) 62%,
        rgba(151, 33, 72, .55) 100%
    );
}

.pdks-intro-strip {
    position: relative;
    z-index: 3;
    margin-top: -1px;
    padding: 0 0 28px;
    background: #f4f7f8;
}

.pdks-value-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-radius: 0 0 18px 18px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(4, 28, 45, .1);
    overflow: hidden;
}

.pdks-value-grid > div {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 2px 15px;
    align-items: center;
    padding: 25px 27px;
    border-right: 1px solid #e3eaec;
}

.pdks-value-grid > div:last-child { border-right: 0; }
.pdks-value-grid i { grid-row: 1 / 3; color: var(--pz-blue); font-size: 28px; }
.pdks-value-grid strong { color: var(--pz-navy); font-size: 17px; }
.pdks-value-grid span { color: #65747d; font-size: 13px; }

.pdks-category-section {
    padding: 85px 0 95px;
    background: #f4f7f8;
}

.pdks-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.pdks-category-card {
    overflow: hidden;
    border: 1px solid #dfe8ea;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 36px rgba(7, 29, 46, .07);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.pdks-category-card:hover {
    transform: translateY(-7px);
    border-color: rgba(18, 137, 166, .38);
    box-shadow: 0 25px 55px rgba(6, 31, 50, .15);
}

.pdks-category-media {
    position: relative;
    display: block;
    height: 230px;
    overflow: hidden;
    background: var(--pz-navy);
}

.pdks-category-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(3, 18, 31, .66));
}

.pdks-category-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s ease;
}

.pdks-category-card:hover .pdks-category-media img { transform: scale(1.045); }

.pdks-category-media > span {
    position: absolute;
    z-index: 2;
    right: 20px;
    bottom: 18px;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 12px;
    background: rgba(6, 34, 53, .78);
    color: #fff;
    font-size: 21px;
    backdrop-filter: blur(8px);
}

.pdks-category-body { padding: 27px 27px 29px; }
.pdks-category-body h2 { min-height: 58px; margin-bottom: 13px; font-size: 21px; line-height: 1.35; }
.pdks-category-body h2 a { color: var(--pz-navy); }
.pdks-category-body p { min-height: 83px; margin-bottom: 18px; color: #60717b; font-size: 15px; line-height: 1.7; }

.pdks-keywords { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; }
.pdks-keywords span { padding: 6px 9px; border-radius: 7px; background: #edf4f5; color: #3e5968; font-size: 11px; font-weight: 700; }

.pdks-guide-section { padding-top: 95px; }
.pdks-selection-panel { position: sticky; top: 115px; }

.pdks-search-intent {
    margin-top: 24px;
    padding: 28px;
    border: 1px solid #dfe7ea;
    border-radius: 16px;
    background: #fff;
}

.pdks-search-intent > span { color: var(--pz-blue); font-size: 11px; font-weight: 800; letter-spacing: 1.4px; }
.pdks-search-intent h2 { margin: 8px 0 17px; color: var(--pz-navy); font-size: 21px; }
.pdks-search-intent div { display: flex; flex-wrap: wrap; gap: 8px; }
.pdks-search-intent a { padding: 8px 10px; border-radius: 8px; background: #eff4f5; color: #3f5968; font-size: 12px; font-weight: 700; }
.pdks-search-intent a:hover { background: var(--pz-navy); color: #fff; }

@media (max-width: 991px) {
    .pdks-value-grid { grid-template-columns: repeat(2, 1fr); }
    .pdks-value-grid > div:nth-child(2) { border-right: 0; }
    .pdks-value-grid > div:nth-child(-n+2) { border-bottom: 1px solid #e3eaec; }
    .pdks-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pdks-selection-panel { position: static; }
}

@media (max-width: 767px) {
    .pdks-value-grid { grid-template-columns: 1fr; border-radius: 0 0 14px 14px; }
    .pdks-value-grid > div { border-right: 0; border-bottom: 1px solid #e3eaec; }
    .pdks-value-grid > div:last-child { border-bottom: 0; }
    .pdks-category-section { padding: 65px 0 70px; }
    .pdks-category-grid { grid-template-columns: 1fr; }
    .pdks-category-media { height: 215px; }
    .pdks-category-body h2, .pdks-category-body p { min-height: 0; }
}

.face-hero .container {
    position: relative;
    z-index: 2;
}

.face-hero h1 {
    color: #fff;
    font-size: clamp(48px, 6vw, 76px);
    line-height: 1.05;
    margin-bottom: 20px;
}

.face-hero h1 span {
    color: var(--pz-blue);
}

.face-hero p {
    max-width: 800px;
    margin: 0;
    color: rgba(255, 255, 255, .7);
    font-size: 18px;
    line-height: 1.75;
}

.hero-contact-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 15px;
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(10px);
}

.hero-contact-card > i {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--pz-blue);
    color: #fff;
    font-size: 23px;
}

.hero-contact-card small,
.hero-contact-card strong,
.hero-contact-card a {
    display: block;
}

.hero-contact-card small {
    color: rgba(255, 255, 255, .55);
    font-size: 10px;
}

.hero-contact-card strong {
    margin: 3px 0;
    color: #fff;
    font-size: 15px;
}

.hero-contact-card a {
    color: var(--pz-blue);
    font-size: 14px;
    font-weight: 800;
}

.face-products-section {
    padding: 48px 0 110px;
    background: #f4f8f9;
}

.all-groups-sidebar {
    position: static;
    border: 1px solid #dbe6e8;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}

.sidebar-heading {
    padding: 25px 22px 20px;
    border-bottom: 1px solid #e6edef;
    background: linear-gradient(145deg, #071b2c, #0b3b49);
}

.sidebar-heading > span {
    color: var(--pz-blue);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .14em;
}

.sidebar-heading h2 {
    margin: 5px 0;
    color: #fff;
    font-size: 23px;
}

.sidebar-heading p {
    margin: 0;
    color: rgba(255, 255, 255, .55);
    font-size: 11px;
}

.sidebar-groups {
    max-height: 680px;
    overflow-y: auto;
    scrollbar-color: #b7d3d7 transparent;
    scrollbar-width: thin;
}

.sidebar-groups details {
    border-bottom: 1px solid #e8edef;
}

.sidebar-groups details:last-child {
    border: 0;
}

.sidebar-groups summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 15px 18px;
    color: var(--pz-navy);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
    cursor: pointer;
    list-style: none;
}

.sidebar-groups summary::-webkit-details-marker {
    display: none;
}

.sidebar-groups summary i {
    flex: 0 0 auto;
    color: #95a5aa;
    font-size: 9px;
    transition: transform .25s;
}

.sidebar-groups details[open] summary {
    background: #edf9fa;
}

.sidebar-groups details.active-group {
    border-color: rgba(9, 91, 118, .28);
    box-shadow: 0 8px 22px rgba(5, 35, 52, .08);
}

.sidebar-groups details.active-group > summary {
    color: #fff;
    background: linear-gradient(112deg, #082b42 0%, #095b76 62%, #771f3d 100%);
}

.sidebar-groups details.active-group > summary i {
    color: #fff;
}

.sidebar-groups details[open] summary i {
    color: var(--pz-blue);
    transform: rotate(180deg);
}

.sidebar-groups ul {
    list-style: none;
    padding: 3px 18px 13px;
    margin: 0;
}

.sidebar-groups li a {
    position: relative;
    display: block;
    padding: 6px 4px 6px 14px;
    color: #6b7b83;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}

.sidebar-groups li a::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #c0cdd0;
}

.sidebar-groups li a:hover,
.sidebar-groups li a.active {
    color: var(--pz-blue);
}

.sidebar-groups li a.active {
    font-weight: 800;
}

.sidebar-groups li a.active::before {
    background: var(--pz-blue);
}

.face-consult {
    margin-top: 22px;
}

.face-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.face-product-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid #dce6e8;
    border-radius: 17px;
    background: #fff;
    overflow: hidden;
    transition: transform .35s, border-color .35s, box-shadow .35s, background-color .35s;
}

.face-product-card:hover {
    border-color: var(--pz-navy);
    background: var(--pz-navy);
    box-shadow: 0 24px 55px rgba(7, 27, 44, .26);
    transform: translateY(-6px);
}

.face-product-media {
    position: relative;
    height: 285px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: linear-gradient(145deg, #fff, #f0f4f5);
}

.face-product-media > span {
    position: absolute;
    z-index: 2;
    top: 15px;
    left: 15px;
    padding: 7px 9px;
    border-radius: 4px;
    background: var(--pz-navy);
    color: #fff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.face-product-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform .45s;
}

.face-product-card:hover .face-product-media img {
    transform: scale(1.045);
}

.face-product-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 23px;
    border-top: 1px solid #e6edef;
    transition: background-color .35s, border-color .35s;
}

.face-product-card:hover .face-product-body {
    border-top-color: rgba(255, 255, 255, .13);
    background: var(--pz-navy);
}

.face-brand {
    align-self: flex-start;
    display: inline-flex;
    padding: 7px 11px;
    margin-bottom: 13px;
    border-radius: 5px;
    background: #e7f8fa;
    color: #078b9e;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .13em;
    transition: background-color .35s, color .35s;
}

.face-product-card:hover .face-brand {
    background: var(--pz-blue);
    color: #fff;
}

.face-product-body h2 {
    min-height: 77px;
    margin: 0 0 14px;
    font-size: 18px;
    line-height: 1.42;
}

.face-product-body h2 a {
    color: var(--pz-navy);
    transition: color .35s;
}

.face-product-summary {
    min-height: 82px;
    margin: 0 0 16px;
    color: #667780;
    font-size: 12px;
    line-height: 1.65;
    transition: color .35s;
}

.face-product-card:hover .face-product-body h2 a,
.face-product-card:hover .face-product-summary {
    color: #fff;
}

.face-product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 17px;
}

.face-product-meta span {
    padding: 6px 8px;
    border-radius: 4px;
    background: #f2f6f7;
    color: #6b7b83;
    font-size: 9px;
    font-weight: 700;
    transition: background-color .35s, color .35s;
}

.face-product-card:hover .face-product-meta span {
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .84);
}

.face-product-meta i {
    margin-right: 4px;
    color: var(--pz-blue);
}

.face-product-link {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #e8edef;
    color: var(--pz-navy);
    font-size: 11px;
    font-weight: 800;
    transition: color .35s, border-color .35s;
}

.face-product-card:hover .face-product-link {
    border-top-color: rgba(255, 255, 255, .14);
    color: #fff;
}

.face-product-link i {
    float: right;
    color: var(--pz-blue);
}

.face-content-section {
    padding: 110px 0;
    background: #fff;
}

.face-seo-copy p {
    line-height: 1.85;
}

.face-seo-copy h2 {
    margin: 36px 0 12px;
    color: var(--pz-navy);
    font-size: 28px;
}

.face-seo-copy h3 {
    margin: 28px 0 10px;
    color: var(--pz-navy);
    font-size: 21px;
}

.selection-panel {
    position: sticky;
    top: 110px;
    padding: 35px 30px;
    border-radius: 17px;
    background: linear-gradient(145deg, #071b2c, #0b3b49);
    box-shadow: 0 25px 55px rgba(5, 25, 38, .17);
}

.selection-panel > span {
    color: var(--pz-blue);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .14em;
}

.selection-panel h2 {
    margin: 8px 0 22px;
    color: #fff;
    font-size: 27px;
}

.selection-panel ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.selection-panel li {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .11);
    color: rgba(255, 255, 255, .7);
    font-size: 12px;
}

.selection-panel li i {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    margin-right: 8px;
    border-radius: 50%;
    background: rgba(25, 188, 208, .14);
    color: var(--pz-blue);
    font-size: 9px;
}

.selection-panel > a {
    display: inline-block;
    margin-top: 23px;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.selection-panel > a i {
    margin-left: 6px;
    color: var(--pz-blue);
}

.face-references {
    padding: 105px 0;
    background: linear-gradient(125deg, #041522, #0b3544);
}

.face-references .section-title p {
    color: rgba(255, 255, 255, .58);
}

.face-reference-link {
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.face-reference-link i {
    margin-left: 6px;
    color: var(--pz-blue);
}

.face-reference-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.face-reference-grid > div {
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 13px;
    background: #fff;
    transition: transform .3s, box-shadow .3s;
}

.face-reference-grid > div:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
    transform: translateY(-5px);
}

.face-reference-grid img {
    max-width: 100%;
    max-height: 78px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .76;
    transition: filter .3s, opacity .3s;
}

.face-reference-grid > div:hover img {
    filter: grayscale(0);
    opacity: 1;
}

.face-faq {
    padding: 110px 0;
}

.face-cta {
    padding: 100px 0;
}

.face-footer .footer-main {
    padding-top: 72px;
}

@media (max-width: 1399px) {
    .mega-menu-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1199px) {
    .face-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .face-header .navbar > .container {
        position: relative;
    }

    .face-header .navbar-toggle {
        position: absolute;
        z-index: 1200;
        top: 50%;
        right: 15px;
        display: block !important;
        width: 38px;
        height: 38px;
        transform: translateY(-50%);
    }

    .face-header .responsive-menu {
        position: absolute;
        z-index: 1100;
        top: 100%;
        right: 0;
        left: 0;
        display: block;
        width: 100%;
    }

    .face-header .slicknav_menu {
        position: relative;
        width: 100%;
        padding: 0;
        background: transparent;
    }

    .face-header .navbar-toggle .slicknav_btn {
        position: static;
        z-index: 3;
        float: none;
        width: 38px;
        height: 38px;
    }

    .face-header .slicknav_nav {
        width: 100%;
        max-height: calc(100vh - 105px);
        margin: 0;
        padding: 9px 0;
        border-radius: 0 0 14px 14px;
        background: linear-gradient(120deg, #071b2c, #0b3b49);
        box-shadow: 0 20px 40px rgba(4, 21, 34, .22);
        overflow-x: hidden;
        overflow-y: auto;
    }

    .face-header .slicknav_nav > li > a,
    .face-header .slicknav_nav > li > .slicknav_row {
        padding-right: 48px;
    }

    .products-menu-item {
        position: relative !important;
        display: block;
    }

    .products-menu-item > .nav-link {
        padding-right: 48px !important;
    }

    .mega-toggle {
        position: absolute;
        z-index: 5;
        top: 2px;
        right: 5px;
        width: 42px;
        height: 42px;
        margin: 0;
    }

    .products-mega {
        position: static;
        width: 100%;
        max-height: 0;
        padding: 0 18px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        overflow: hidden;
        transform: none;
        transition: max-height .35s, padding .35s;
    }

    .products-menu-item > .nav-link:hover ~ .products-mega,
    .products-menu-item > .mega-toggle:hover + .products-mega,
    .products-menu-item > .products-mega:hover,
    .products-menu-item:focus-within .products-mega {
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        pointer-events: none;
    }

    .products-menu-item.mega-open .products-mega {
        max-height: 68vh;
        padding-top: 12px;
        padding-bottom: 20px;
        overflow-y: auto;
        pointer-events: auto;
    }

    .mega-menu-head {
        display: none;
    }

    .mega-menu-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0 20px;
    }

    .main-menu .mobile-products-list {
        display: none !important;
    }

    .slicknav_nav .products-mega,
    .slicknav_nav .mega-toggle {
        display: none !important;
    }

    .slicknav_nav .mobile-products-list {
        position: static !important;
        width: 100% !important;
        padding: 0 0 4px 12px !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .slicknav_nav .mobile-products-list > li {
        border-bottom: 1px solid rgba(7, 27, 44, .08);
    }

    .slicknav_nav .mobile-products-list > li > a {
        color: var(--pz-navy) !important;
        font-size: 14px !important;
        font-weight: 800 !important;
    }

    .slicknav_nav .mobile-products-list ul {
        position: static !important;
        visibility: visible;
        width: 100% !important;
        padding: 3px 0 10px 15px !important;
        margin: 0 !important;
        border: 0 !important;
        background: #f3f8f9 !important;
        box-shadow: none !important;
        opacity: 1;
        transform: none;
    }

    .slicknav_nav .mobile-products-list ul a {
        color: #60717a !important;
        font-size: 13px !important;
        font-weight: 600 !important;
    }

    .slicknav_nav .mobile-products-list ul a.current {
        color: var(--pz-blue) !important;
        font-weight: 800 !important;
    }

    .mega-group {
        padding: 15px 0;
    }

    .all-groups-sidebar,
    .selection-panel {
        position: static;
    }

    .face-hero {
        padding: 70px 0;
    }

    .hero-contact-card {
        margin-top: 10px;
    }

    .face-products-section,
    .face-content-section,
    .face-references,
    .face-faq {
        padding: 80px 0;
    }

    .face-reference-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .mega-menu-grid {
        grid-template-columns: 1fr;
    }

    .face-hero {
        padding: 55px 0;
    }

    .face-hero h1 {
        font-size: 42px;
    }

    .face-hero p {
        font-size: 15px;
    }

    .face-product-grid,
    .face-reference-grid {
        grid-template-columns: 1fr;
    }

    .face-product-media {
        height: 315px;
    }

    .face-product-body h2 {
        min-height: auto;
    }

    .face-reference-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .face-reference-grid > div {
        height: 110px;
    }

    .face-seo-copy h2 {
        font-size: 24px;
    }

    .face-cta {
        padding: 75px 0;
    }
}

/* Otopark geçiş ailesi: sayfaya özgü yüksek çözünürlüklü uygulama görselleri */
.parking-control-group-page .face-hero::before{background-image:url('../images/otopark-gecis-sistemleri-uygulama-hero.png')}
.parking-barrier-page .face-hero::before{background-image:url('../images/kollu-otopark-bariyeri-uygulama-hero.png')}
.sliding-gate-page .face-hero::before{background-image:url('../images/yana-kayar-kapi-motorlari-uygulama-hero.png')}
.uhf-parking-page .face-hero::before{background-image:url('../images/hgs-gecis-sistemleri-uygulama-hero.png')}
.lpr-page .face-hero::before{background-image:url('../images/plaka-tanima-sistemleri-uygulama-hero.png')}

/* Bekçi devriye tur ürün ailesi uygulama görselleri */
.guard-tour-group-page .face-hero::before{background-image:url('../images/bekci-devriye-tur-sistemleri-uygulama-hero.png')}
.guard-tour-device-page .face-hero::before{background-image:url('../images/bekci-tur-ve-devriye-kontrol-sistemleri-uygulama-hero.png')}
.qr-guard-tour-page .face-hero::before{background-image:url('../images/qr-kod-bekci-tur-devriye-sistemi-uygulama-hero.png')}
.pmr-radio-page .face-hero::before{background-image:url('../images/lisanssiz-el-telsizleri-uygulama-hero.png')}

/* Dört yeni kurumsal ürün ailesi uygulama görselleri */
.family-group-metal-ust-arama-dedektorleri .face-hero::before,.family-metal-ust-arama-dedektorleri .face-hero::before{background-image:url('../images/metal-ust-arama-dedektorleri-uygulama-hero.png')}
.family-group-cctv-guvenlik-kamera-ve-alarm-sistemleri .face-hero::before,.family-cctv-guvenlik-kamera-ve-alarm-sistemleri .face-hero::before{background-image:url('../images/cctv-guvenlik-kamera-ve-alarm-sistemleri-uygulama-hero.png')}
.family-group-plastik-kart-yazicilar .face-hero::before,.family-plastik-kart-yazicilar .face-hero::before{background-image:url('../images/plastik-kart-yazicilar-uygulama-hero.png')}
.family-group-yazilim-cozumlerimiz .face-hero::before,.family-yazilim-cozumlerimiz .face-hero::before{background-image:url('../images/yazilim-cozumlerimiz-uygulama-hero.png')}

/* Alt grup bazında özgün yüksek çözünürlüklü uygulama görselleri */
.sub-x-ray-cihazlari .face-hero::before{background-image:url('../images/x-ray-cihazlari-uygulama-hero.png')}
.sub-kapi-tipi-metal-dedektorleri .face-hero::before{background-image:url('../images/kapi-tipi-metal-dedektorleri-uygulama-hero.png')}
.sub-el-tipi-ust-arama-dedektoru .face-hero::before{background-image:url('../images/el-tipi-ust-arama-dedektoru-uygulama-hero.png')}
.sub-ip-kamera-sistemleri .face-hero::before{background-image:url('../images/ip-kamera-sistemleri-uygulama-hero.png')}
.sub-monitor .face-hero::before{background-image:url('../images/monitor-uygulama-hero.png')}
.sub-ahd-kamera-sistemleri .face-hero::before{background-image:url('../images/ahd-kamera-sistemleri-uygulama-hero.png')}
.sub-kablosuz-alarm-sistemleri .face-hero::before{background-image:url('../images/kablosuz-alarm-sistemleri-uygulama-hero.png')}
.sub-kablolu-alarm-sistemleri .face-hero::before{background-image:url('../images/kablolu-alarm-sistemleri-uygulama-hero.png')}
.sub-dvr-ve-nvr-kayit-cihazlari .face-hero::before{background-image:url('../images/dvr-ve-nvr-kayit-cihazlari-uygulama-hero.png')}
.sub-aksesuarlar .face-hero::before{background-image:url('../images/aksesuarlar-uygulama-hero.png')}
.sub-termal-kart-yazicilar .face-hero::before{background-image:url('../images/termal-kart-yazicilar-uygulama-hero.png')}
.sub-ribbon-cesitleri .face-hero::before{background-image:url('../images/ribbon-cesitleri-uygulama-hero.png')}
.sub-desktop-tabanli-yazilimlar .face-hero::before{background-image:url('../images/desktop-tabanli-yazilimlar-uygulama-hero.png')}
.sub-web-tabanli-yazilimlar .face-hero::before{background-image:url('../images/web-tabanli-yazilimlar-uygulama-hero.png')}
.sub-bekci-tur-sistemi-yazilimlari .face-hero::before{background-image:url('../images/bekci-tur-sistemi-yazilimlari-uygulama-hero.png')}
.sub-yardimci-yazilimlar .face-hero::before{background-image:url('../images/yardimci-yazilimlar-uygulama-hero.png')}