:root {

    --contact-blue: #20b6e8;

    --contact-blue-dark: #0d8fc7;

    --contact-navy: #061722;

    --contact-ink: #16232c;

    --contact-text: #738089;

    --contact-soft: #f4f8fa;

    --contact-line: #dfe9ee;

}



.saglam-contact-reveal {

    opacity: 0;

    transform: translateY(28px);

    transition:

        opacity .72s cubic-bezier(.22, .8, .32, 1),

        transform .72s cubic-bezier(.22, .8, .32, 1);

}



.saglam-contact-reveal[data-reveal="left"] {

    transform: translateX(-34px);

}



.saglam-contact-reveal[data-reveal="right"] {

    transform: translateX(34px);

}



.saglam-contact-reveal.is-visible {

    opacity: 1;

    transform: none;

}



.saglam-contact-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 14px;

    color: var(--contact-blue-dark);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .18em;

}



.saglam-contact-eyebrow::before {

    content: "";

    width: 38px;

    height: 2px;

    background: var(--contact-blue);

}



/* Giriş */

.saglam-contact-modern {

    position: relative;

    overflow: hidden;

    background: #fff;

}



.saglam-contact-grid-bg {

    position: absolute;

    inset: 0;

    opacity: .15;

    pointer-events: none;

    background-image:

        linear-gradient(rgba(32,182,232,.12) 1px, transparent 1px),

        linear-gradient(90deg, rgba(32,182,232,.12) 1px, transparent 1px);

    background-size: 58px 58px;

}



.saglam-contact-modern .container {

    position: relative;

    z-index: 2;

}



.saglam-contact-top-row {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

}



.saglam-contact-copy {

    padding-right: 45px;

}



.saglam-contact-copy h2 {

    margin: 0 0 22px;

    max-width: 720px;

    color: var(--contact-ink);

    font-size: clamp(42px, 5vw, 64px);

    line-height: 1.03;

    font-weight: 800;

    letter-spacing: -.045em;

}



.saglam-contact-lead {

    max-width: 720px;

    margin-bottom: 34px;

    color: var(--contact-text);

    font-size: 16px;

    line-height: 1.85;

}



/* İletişim kutuları */

.saglam-contact-list {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;

}



.saglam-contact-item {

    min-height: 135px;

    display: flex;

    align-items: flex-start;

    gap: 16px;

    padding: 20px;

    border: 1px solid var(--contact-line);

    background: #fff;

    transition: .28s ease;

}



.saglam-contact-item:hover {

    transform: translateY(-4px);

    border-color: rgba(32,182,232,.40);

    box-shadow: 0 15px 32px rgba(18,47,65,.08);

}



.saglam-contact-item-icon {

    width: 48px;

    height: 48px;

    flex: 0 0 48px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: #eef9fd;

    border: 1px solid #d7ebf2;

    color: var(--contact-blue-dark);

    font-size: 18px;

}



.saglam-contact-item-icon.whatsapp {

    background: rgba(37,211,102,.08);

    border-color: rgba(37,211,102,.22);

    color: #25d366;

}



.saglam-contact-item-label {

    display: block;

    margin-bottom: 4px;

    color: var(--contact-blue-dark);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .14em;

}



.saglam-contact-item strong {

    display: block;

    margin-bottom: 5px;

    color: var(--contact-ink);

    font-size: 15px;

}



.saglam-contact-item p {

    margin: 0;

    color: var(--contact-text);

    font-size: 12px;

    line-height: 1.65;

}



.saglam-contact-item a {

    color: inherit;

    text-decoration: none;

}



.saglam-contact-item a:hover {

    color: var(--contact-blue-dark);

}



/* Fotoğraf */

.saglam-contact-photo {

    position: relative;

    height: 535px;

    overflow: hidden;

    border: 1px solid rgba(32,182,232,.20);

    background: #dfe8eb;

    box-shadow: 0 28px 65px rgba(15,45,62,.15);

}



.saglam-contact-photo img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 7s cubic-bezier(.2,.7,.2,1);

}



.saglam-contact-photo.is-visible img {

    transform: scale(1.05);

}



.saglam-contact-photo::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(180deg, transparent 58%, rgba(4,18,27,.55));

    pointer-events: none;

}



.saglam-contact-photo-scan {

    position: absolute;

    z-index: 3;

    left: 0;

    right: 0;

    top: 0;

    height: 2px;

    opacity: 0;

    background: linear-gradient(

        90deg,

        transparent,

        rgba(62,207,255,.9),

        transparent

    );

}



.saglam-contact-photo.is-visible .saglam-contact-photo-scan {

    animation: contactScan 5.5s ease-in-out 1s infinite;

}



@keyframes contactScan {

    0%, 15% {

        top: 2%;

        opacity: 0;

    }



    25% {

        opacity: .9;

    }



    100% {

        top: 98%;

        opacity: 0;

    }

}



.saglam-contact-corner {

    position: absolute;

    z-index: 4;

    width: 55px;

    height: 55px;

}



.saglam-contact-corner-tl {

    top: 16px;

    left: 16px;

    border-top: 2px solid var(--contact-blue);

    border-left: 2px solid var(--contact-blue);

}



.saglam-contact-corner-br {

    right: 16px;

    bottom: 16px;

    border-right: 2px solid var(--contact-blue);

    border-bottom: 2px solid var(--contact-blue);

}



.saglam-contact-photo-info {

    position: absolute;

    z-index: 5;

    left: 20px;

    right: 20px;

    bottom: 20px;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 15px 17px;

    border: 1px solid rgba(255,255,255,.13);

    background: rgba(5,22,33,.78);

    backdrop-filter: blur(9px);

}



.saglam-contact-live-dot {

    width: 9px;

    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;

    background: var(--contact-blue);

    box-shadow: 0 0 0 6px rgba(32,182,232,.12);

}



.saglam-contact-photo-info strong,

.saglam-contact-photo-info small {

    display: block;

}



.saglam-contact-photo-info strong {

    color: #fff;

    font-size: 14px;

}



.saglam-contact-photo-info small {

    margin-top: 3px;

    color: rgba(255,255,255,.60);

    font-size: 9px;

    letter-spacing: .08em;

}



/* Hızlı butonlar */

.saglam-contact-quick-actions {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-top: 12px;

}



.saglam-contact-call-btn,

.saglam-contact-mail-btn {

    min-height: 52px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    text-decoration: none !important;

    font-size: 12px;

    font-weight: 800;

    transition: .25s ease;

}



.saglam-contact-call-btn {

    background: var(--contact-blue);

    border: 1px solid var(--contact-blue);

    color: #fff !important;

}



.saglam-contact-mail-btn {

    background: #fff;

    border: 1px solid var(--contact-line);

    color: var(--contact-ink) !important;

}



.saglam-contact-call-btn:hover,

.saglam-contact-mail-btn:hover {

    transform: translateY(-3px);

}



/* Form alanı */

.saglam-contact-form-section {

    background: var(--contact-soft);

}



.saglam-contact-form-heading {

    max-width: 760px;

    margin-bottom: 42px;

}



.saglam-contact-form-heading h2 {

    margin: 0 0 16px;

    color: var(--contact-ink);

    font-size: clamp(38px, 4.5vw, 56px);

    line-height: 1.04;

    font-weight: 800;

    letter-spacing: -.04em;

}



.saglam-contact-form-heading p {

    margin: 0;

    color: var(--contact-text);

    font-size: 15px;

    line-height: 1.8;

}



.saglam-contact-form-row {

    display: flex;

    flex-wrap: wrap;

    align-items: stretch;

}



/* Sol bilgi paneli */

.saglam-contact-form-info {

    height: 100%;

    min-height: 590px;

    padding: 35px 30px;

    background:

        linear-gradient(145deg, #061722, #092632);

    color: #fff;

}



.saglam-contact-form-info-number {

    display: block;

    margin-bottom: 35px;

    color: var(--contact-blue);

    font-size: 38px;

    line-height: 1;

    font-weight: 800;

}



.saglam-contact-form-info h3 {

    margin: 0 0 16px;

    color: #fff;

    font-size: 26px;

    line-height: 1.3;

}



.saglam-contact-form-info > p {

    color: rgba(255,255,255,.62);

    font-size: 14px;

    line-height: 1.8;

}



.saglam-contact-project-points {

    display: grid;

    gap: 14px;

    margin-top: 30px;

}



.saglam-contact-project-points > div {

    display: flex;

    align-items: center;

    gap: 11px;

    color: rgba(255,255,255,.80);

    font-size: 13px;

}



.saglam-contact-project-points i {

    width: 26px;

    height: 26px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: rgba(32,182,232,.10);

    color: var(--contact-blue);

    border-radius: 50%;

    font-size: 10px;

}



.saglam-contact-security {

    display: flex;

    gap: 13px;

    margin-top: 40px;

    padding-top: 25px;

    border-top: 1px solid rgba(255,255,255,.10);

}



.saglam-contact-security > i {

    color: var(--contact-blue);

    font-size: 22px;

}



.saglam-contact-security strong,

.saglam-contact-security span {

    display: block;

}



.saglam-contact-security strong {

    margin-bottom: 4px;

    color: #fff;

    font-size: 12px;

}



.saglam-contact-security span {

    color: rgba(255,255,255,.55);

    font-size: 10px;

    line-height: 1.5;

}



/* Form kartı */

.saglam-contact-form-card {

    min-height: 590px;

    padding: 36px;

    border: 1px solid var(--contact-line);

    background: #fff;

    box-shadow: 0 15px 40px rgba(18,47,65,.07);

}



.saglam-form-group {

    margin-bottom: 22px;

}



.saglam-form-group label {

    display: block;

    margin-bottom: 8px;

    color: var(--contact-ink);

    font-size: 12px;

    font-weight: 700;

}



.saglam-form-group label span {

    color: #e04747;

}



.saglam-form-control {

    position: relative;

}



.saglam-form-control > i {

    position: absolute;

    z-index: 2;

    left: 16px;

    top: 50%;

    transform: translateY(-50%);

    color: #a3afb5;

    font-size: 13px;

    pointer-events: none;

}



.saglam-form-control input,

.saglam-form-control textarea {

    width: 100%;

    border: 1px solid #dce7eb;

    outline: 0;

    background: #fbfdfe;

    color: var(--contact-ink);

    font-size: 13px;

    transition: .22s ease;

}



.saglam-form-control input {

    height: 52px;

    padding: 0 15px 0 43px;

}



.saglam-form-control textarea {

    min-height: 175px;

    padding: 16px 15px 16px 43px;

    resize: vertical;

}



.saglam-textarea-control > i {

    top: 19px;

    transform: none;

}



.saglam-form-control input:focus,

.saglam-form-control textarea:focus {

    border-color: var(--contact-blue);

    background: #fff;

    box-shadow: 0 0 0 3px rgba(32,182,232,.08);

}



.saglam-form-control.is-focused > i {

    color: var(--contact-blue-dark);

}



.saglam-message-counter {

    margin-top: 6px;

    text-align: right;

    color: #a0aab0;

    font-size: 10px;

}



/* Honeypot */

.saglam-honeypot {

    position: absolute !important;

    left: -99999px !important;

    width: 1px !important;

    height: 1px !important;

    opacity: 0 !important;

}



/* Alerts */

.saglam-form-alert {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 24px;

    padding: 14px 16px;

    font-size: 12px;

}



.saglam-form-alert.success {

    border: 1px solid #ccebd8;

    background: #f0fbf4;

    color: #27844a;

}



.saglam-form-alert.error {

    border: 1px solid #f0cccc;

    background: #fff4f4;

    color: #be4242;

}



/* reCAPTCHA */

.saglam-recaptcha-area {

    margin: 2px 0 24px;

    padding: 18px;

    border: 1px solid #dce7eb;

    background: #f9fcfd;

}



.saglam-recaptcha-error,

.saglam-recaptcha-client-error {

    margin-top: 9px;

    color: #cf4141;

    font-size: 11px;

    font-weight: 600;

}



/* Submit */

.saglam-form-submit-row {

    display: flex;

    align-items: center;

    gap: 20px;

}



.saglam-contact-submit-btn {

    min-width: 190px;

    min-height: 54px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    border: 1px solid var(--contact-blue);

    background: var(--contact-blue);

    color: #fff;

    font-size: 12px;

    font-weight: 800;

    cursor: pointer;

    transition: .25s ease;

}



.saglam-contact-submit-btn:hover {

    transform: translateY(-3px);

    background: #2bc2f2;

}



.saglam-contact-submit-btn:disabled {

    opacity: .65;

    cursor: wait;

    transform: none;

}



.saglam-form-submit-row small {

    color: #929da3;

    font-size: 10px;

}



/* Tablet */

@media (min-width: 768px) and (max-width: 991px) {

    .saglam-contact-top-row {

        display: block;

    }



    .saglam-contact-copy {

        padding-right: 0;

        margin-bottom: 40px;

    }



    .saglam-contact-form-info {

        min-height: 0;

        margin-bottom: 25px;

    }



    .saglam-contact-form-card {

        min-height: 0;

    }

}



/* Mobil */

@media (max-width: 767px) {

    .saglam-contact-copy {

        padding-right: 0;

    }



    .saglam-contact-copy h2 {

        font-size: 38px;

    }



    .saglam-contact-lead {

        font-size: 14px;

    }



    .saglam-contact-list {

        grid-template-columns: 1fr;

    }



    .saglam-contact-photo {

        height: auto;

        margin-top: 35px;

        aspect-ratio: 4 / 3;

    }



    .saglam-contact-quick-actions {

        grid-template-columns: 1fr;

    }



    .saglam-contact-form-heading h2 {

        font-size: 36px;

    }



    .saglam-contact-form-row {

        display: block;

    }



    .saglam-contact-form-info {

        min-height: 0;

        margin-bottom: 24px;

        padding: 28px 22px;

    }



    .saglam-contact-form-card {

        min-height: 0;

        padding: 25px 18px;

    }



    .saglam-form-submit-row {

        display: block;

    }



    .saglam-contact-submit-btn {

        width: 100%;

        margin-bottom: 11px;

    }



    .saglam-recaptcha-area {

        overflow: hidden;

    }

}



@media (max-width: 360px) {

    .saglam-recaptcha-area .g-recaptcha {

        transform: scale(.84);

        transform-origin: left top;

        margin-bottom: -12px;

    }

}



@media (prefers-reduced-motion: reduce) {

    .saglam-contact-reveal,

    .saglam-contact-photo img,

    .saglam-contact-item {

        transition: none !important;

    }



    .saglam-contact-photo-scan {

        animation: none !important;

    }



    .saglam-contact-reveal {

        opacity: 1 !important;

        transform: none !important;

    }

}

/* =========================================================
   SAĞLAM MACHINE
   INDUSTRIAL MACHINE MAP
   ========================================================= */

.saglam-contact-map-section {
    position: relative;

    padding:
        105px 0
        115px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #f7fafb 0%,
            #ffffff 48%,
            #f4f8fa 100%
        );
}


/* =========================================================
   TECHNICAL BACKGROUND
   ========================================================= */

.saglam-contact-map-grid {
    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .30;

    background-image:
        linear-gradient(
            rgba(32, 182, 232, .055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(32, 182, 232, .055) 1px,
            transparent 1px
        );

    background-size:
        54px 54px;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 14%,
            #000 84%,
            transparent
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 14%,
            #000 84%,
            transparent
        );
}


/* =========================================================
   HEADING
   ========================================================= */

.saglam-contact-map-heading {
    position: relative;

    z-index: 3;

    max-width: 720px;

    margin:
        0 auto
        52px;

    text-align: center;
}

.saglam-contact-map-heading
.saglam-contact-eyebrow {
    justify-content: center;
}

.saglam-contact-map-heading h2 {
    margin:
        0 0 17px;

    color:
        var(--contact-ink);

    font-size:
        clamp(38px, 5vw, 62px);

    line-height: 1;

    font-weight: 800;

    letter-spacing: -.045em;
}

.saglam-contact-map-heading h2 span {
    color:
        var(--contact-blue);
}

.saglam-contact-map-heading p {
    max-width: 590px;

    margin:
        0 auto;

    color:
        var(--contact-text);

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   MACHINE MAP WRAPPER
   ========================================================= */

.saglam-map-machine {
    position: relative;

    z-index: 4;

    width:
        min(100%, 1120px);

    margin:
        0 auto;
}

.saglam-map-machine-glow {
    position: absolute;

    z-index: -1;

    left: 50%;
    top: 46%;

    width: 88%;
    height: 62%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        rgba(32, 182, 232, .14);

    filter:
        blur(60px);

    opacity: .65;

    animation:
        saglamMachineGlow
        4.5s
        ease-in-out
        infinite;
}

@keyframes saglamMachineGlow {
    0%,
    100% {
        opacity: .40;

        transform:
            translate(-50%, -50%)
            scale(.96);
    }

    50% {
        opacity: .78;

        transform:
            translate(-50%, -50%)
            scale(1.04);
    }
}


/* =========================================================
   MACHINE BODY
   ========================================================= */

.saglam-map-machine-frame {
    position: relative;

    width: 100%;

    padding:
        17px 20px
        21px;

    overflow: hidden;

    clip-path:
        polygon(
            5.2% 0,
            94.8% 0,
            100% 10%,
            100% 31%,
            97.2% 36%,
            97.2% 64%,
            100% 69%,
            100% 90%,
            94.8% 100%,
            5.2% 100%,
            0 90%,
            0 69%,
            2.8% 64%,
            2.8% 36%,
            0 31%,
            0 10%
        );

    border:
        1px solid
        rgba(32, 182, 232, .35);

    background:
        linear-gradient(
            145deg,
            #0a202d 0%,
            #102f40 42%,
            #071b26 100%
        );

    box-shadow:
        0 30px 80px
        rgba(5, 28, 41, .20);

    opacity: 0;

    transform:
        translateY(22px)
        scale(.985);

    transition:
        opacity .8s ease,
        transform .8s
        cubic-bezier(.2, .75, .25, 1),
        box-shadow .35s ease;
}

.saglam-map-machine.is-loaded
.saglam-map-machine-frame {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}

.saglam-map-machine-frame::before {
    content: "";

    position: absolute;

    inset: 1px;

    z-index: 0;

    pointer-events: none;

    clip-path: inherit;

    background:
        linear-gradient(
            110deg,
            rgba(255, 255, 255, .08),
            transparent 28%,
            transparent 72%,
            rgba(32, 182, 232, .08)
        );
}

.saglam-map-machine-frame::after {
    content: "";

    position: absolute;

    inset:
        7px 9px;

    z-index: 0;

    pointer-events: none;

    clip-path:
        polygon(
            4.5% 0,
            95.5% 0,
            100% 9%,
            100% 91%,
            95.5% 100%,
            4.5% 100%,
            0 91%,
            0 9%
        );

    border:
        1px solid
        rgba(109, 215, 255, .12);
}


/* =========================================================
   MACHINE TOP BAR
   ========================================================= */

.saglam-map-machine-topbar {
    position: relative;

    z-index: 3;

    min-height: 42px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        0 42px;

    color:
        rgba(255, 255, 255, .62);
}

.saglam-map-machine-module {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color:
        rgba(255, 255, 255, .72);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .18em;
}

.saglam-map-machine-status-dot {
    width: 7px;
    height: 7px;

    flex:
        0 0 7px;

    border-radius: 50%;

    background:
        var(--contact-blue);

    box-shadow:
        0 0 0 5px
        rgba(32, 182, 232, .10);

    animation:
        saglamMachineStatus
        2s
        ease-out
        infinite;
}

@keyframes saglamMachineStatus {
    50% {
        box-shadow:
            0 0 0 10px
            rgba(32, 182, 232, 0);
    }
}

.saglam-map-machine-code {
    color:
        rgba(255, 255, 255, .34);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .18em;
}


/* =========================================================
   MAP SCREEN
   ========================================================= */

.saglam-map-machine-screen {
    position: relative;

    z-index: 2;

    width: 100%;

    aspect-ratio:
        16 / 7.4;

    overflow: hidden;

    clip-path:
        polygon(
            3.2% 0,
            96.8% 0,
            100% 8%,
            100% 92%,
            96.8% 100%,
            3.2% 100%,
            0 92%,
            0 8%
        );

    border:
        1px solid
        rgba(84, 204, 249, .35);

    background:
        #dfe8ec;

    box-shadow:
        inset 0 0 0 4px
        rgba(5, 24, 34, .32);
}

.saglam-map-machine-screen iframe {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;

    display: block;

    filter:
        saturate(.92)
        contrast(1.03);

    transform:
        scale(1.015);

    transition:
        filter .35s ease,
        transform .55s ease;
}

.saglam-map-machine-screen:hover iframe {
    filter:
        saturate(1)
        contrast(1);

    transform:
        scale(1.025);
}


/* =========================================================
   SCREEN OVERLAYS
   ========================================================= */

.saglam-map-machine-grid-overlay {
    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    opacity: .12;

    background-image:
        linear-gradient(
            rgba(14, 82, 108, .14) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(14, 82, 108, .14) 1px,
            transparent 1px
        );

    background-size:
        36px 36px;
}

.saglam-map-machine-scan {
    position: absolute;

    z-index: 4;

    left: 4%;
    right: 4%;

    top: 6%;

    height: 2px;

    pointer-events: none;

    opacity: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(32, 182, 232, .35),
            #70ddff,
            rgba(32, 182, 232, .35),
            transparent
        );

    box-shadow:
        0 0 14px
        rgba(32, 182, 232, .52);

    animation:
        saglamMachineScan
        5.8s
        ease-in-out
        infinite;
}

@keyframes saglamMachineScan {
    0% {
        top: 6%;
        opacity: 0;
    }

    12% {
        opacity: .82;
    }

    50% {
        opacity: .62;
    }

    88% {
        opacity: .82;
    }

    100% {
        top: 94%;
        opacity: 0;
    }
}

.saglam-map-machine-focus {
    position: absolute;

    z-index: 5;

    width: 46px;
    height: 46px;

    pointer-events: none;

    opacity: .72;
}

.saglam-map-machine-focus.focus-one {
    left: 4.2%;
    top: 9%;

    border-top:
        2px solid
        var(--contact-blue);

    border-left:
        2px solid
        var(--contact-blue);
}

.saglam-map-machine-focus.focus-two {
    right: 4.2%;
    bottom: 9%;

    border-right:
        2px solid
        var(--contact-blue);

    border-bottom:
        2px solid
        var(--contact-blue);
}


/* =========================================================
   BOLTS
   ========================================================= */

.saglam-map-machine-bolt {
    position: absolute;

    z-index: 6;

    width: 15px;
    height: 15px;

    border-radius: 50%;

    border:
        1px solid
        rgba(153, 227, 255, .52);

    background:
        radial-gradient(
            circle at 35% 35%,
            #dff7ff 0,
            #55c8f2 28%,
            #176f92 58%,
            #061722 100%
        );

    box-shadow:
        inset 0 1px 2px
        rgba(255, 255, 255, .40),
        0 0 10px
        rgba(32, 182, 232, .18);
}

.saglam-map-machine-bolt::after {
    content: "";

    position: absolute;

    left: 3px;
    right: 3px;

    top: 50%;

    height: 1px;

    background:
        rgba(4, 28, 40, .66);

    transform:
        translateY(-50%)
        rotate(-28deg);
}

.saglam-map-machine-bolt.bolt-one {
    left: 20px;
    top: 20px;
}

.saglam-map-machine-bolt.bolt-two {
    right: 20px;
    top: 20px;
}

.saglam-map-machine-bolt.bolt-three {
    left: 20px;
    bottom: 20px;
}

.saglam-map-machine-bolt.bolt-four {
    right: 20px;
    bottom: 20px;
}


/* =========================================================
   MACHINE VENTS
   ========================================================= */

.saglam-map-machine-vent {
    position: absolute;

    z-index: 5;

    width: 12px;
    height: 86px;

    top: 50%;

    transform:
        translateY(-50%);

    opacity: .62;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(99, 209, 249, .50) 0,
            rgba(99, 209, 249, .50) 2px,
            transparent 2px,
            transparent 8px
        );
}

.saglam-map-machine-vent.vent-left {
    left: 8px;
}

.saglam-map-machine-vent.vent-right {
    right: 8px;
}


/* =========================================================
   MACHINE CONSOLE
   ========================================================= */

.saglam-map-machine-console {
    position: relative;

    z-index: 8;

    width:
        min(90%, 890px);

    min-height: 106px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin:
        -28px auto
        0;

    padding:
        20px 22px
        20px 24px;

    border:
        1px solid
        rgba(32, 182, 232, .18);

    border-radius: 5px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .98),
            rgba(247, 251, 253, .96)
        );

    box-shadow:
        0 20px 50px
        rgba(11, 44, 59, .13);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}

.saglam-map-machine-console::before,
.saglam-map-machine-console::after {
    content: "";

    position: absolute;

    width: 32px;
    height: 32px;

    pointer-events: none;
}

.saglam-map-machine-console::before {
    left: 8px;
    top: 8px;

    border-top:
        1px solid
        rgba(32, 182, 232, .42);

    border-left:
        1px solid
        rgba(32, 182, 232, .42);
}

.saglam-map-machine-console::after {
    right: 8px;
    bottom: 8px;

    border-right:
        1px solid
        rgba(32, 182, 232, .42);

    border-bottom:
        1px solid
        rgba(32, 182, 232, .42);
}


/* =========================================================
   LOCATION
   ========================================================= */

.saglam-map-location {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 17px;
}

.saglam-map-location-icon {
    position: relative;

    width: 52px;
    height: 52px;

    flex:
        0 0 52px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(32, 182, 232, .26);

    border-radius: 50%;

    background:
        #eefafd;

    color:
        var(--contact-blue-dark);

    font-size: 20px;
}

.saglam-map-location-pulse {
    position: absolute;

    inset: -1px;

    border:
        1px solid
        rgba(32, 182, 232, .40);

    border-radius: 50%;

    animation:
        saglamMapPinPulse
        2.1s
        ease-out
        infinite;
}

@keyframes saglamMapPinPulse {
    0% {
        opacity: .8;

        transform:
            scale(.84);
    }

    100% {
        opacity: 0;

        transform:
            scale(1.65);
    }
}

.saglam-map-label {
    display: block;

    margin-bottom: 4px;

    color:
        var(--contact-blue);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .18em;
}

.saglam-map-location strong {
    display: block;

    margin-bottom: 5px;

    color:
        var(--contact-ink);

    font-size: 15px;

    font-weight: 800;
}

.saglam-map-location p {
    max-width: 550px;

    margin: 0;

    color:
        #7e8b92;

    font-size: 10px;

    line-height: 1.55;
}


/* =========================================================
   DIRECTIONS
   ========================================================= */

.saglam-map-direction-btn {
    min-width: 158px;

    min-height: 49px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    padding:
        0 18px;

    border:
        1px solid
        var(--contact-blue);

    border-radius: 4px;

    background:
        linear-gradient(
            135deg,
            var(--contact-blue),
            #149bd3
        );

    color:
        #ffffff !important;

    font-size: 10px;

    font-weight: 750;

    text-decoration:
        none !important;

    box-shadow:
        0 10px 24px
        rgba(32, 182, 232, .16);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease;
}

.saglam-map-direction-btn:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 15px 31px
        rgba(32, 182, 232, .24);

    filter:
        brightness(1.04);
}

.saglam-map-direction-btn i {
    font-size: 13px;

    transition:
        transform .25s ease;
}

.saglam-map-direction-btn:hover i {
    transform:
        translate(3px, -2px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .saglam-contact-map-section {
        padding:
            85px 0
            95px;
    }

    .saglam-map-machine-frame {
        padding:
            14px 16px
            18px;
    }

    .saglam-map-machine-screen {
        aspect-ratio:
            16 / 8.3;
    }

    .saglam-map-machine-topbar {
        padding:
            0 34px;
    }

    .saglam-map-machine-console {
        width: 92%;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .saglam-contact-map-section {
        padding:
            70px 0
            80px;
    }

    .saglam-contact-map-heading {
        margin-bottom:
            34px;

        padding:
            0 8px;
    }

    .saglam-contact-map-heading h2 {
        font-size:
            36px;
    }

    .saglam-contact-map-heading p {
        font-size:
            12px;
    }

    .saglam-map-machine {
        padding:
            0 4px;
    }

    .saglam-map-machine-frame {
        padding:
            10px 11px
            14px;

        clip-path:
            polygon(
                4% 0,
                96% 0,
                100% 6%,
                100% 94%,
                96% 100%,
                4% 100%,
                0 94%,
                0 6%
            );
    }

    .saglam-map-machine-topbar {
        min-height: 36px;

        padding:
            0 24px;
    }

    .saglam-map-machine-module {
        font-size:
            7px;
    }

    .saglam-map-machine-code {
        display: none;
    }

    .saglam-map-machine-screen {
        aspect-ratio:
            4 / 3;

        clip-path:
            polygon(
                3% 0,
                97% 0,
                100% 5%,
                100% 95%,
                97% 100%,
                3% 100%,
                0 95%,
                0 5%
            );
    }

    .saglam-map-machine-bolt {
        width: 12px;
        height: 12px;
    }

    .saglam-map-machine-bolt.bolt-one {
        left: 11px;
        top: 13px;
    }

    .saglam-map-machine-bolt.bolt-two {
        right: 11px;
        top: 13px;
    }

    .saglam-map-machine-bolt.bolt-three {
        left: 11px;
        bottom: 13px;
    }

    .saglam-map-machine-bolt.bolt-four {
        right: 11px;
        bottom: 13px;
    }

    .saglam-map-machine-vent {
        display: none;
    }

    .saglam-map-machine-focus {
        width: 30px;
        height: 30px;
    }

    .saglam-map-machine-console {
        width:
            calc(100% - 24px);

        min-height: 0;

        flex-direction: column;

        align-items: stretch;

        gap: 17px;

        margin-top:
            -14px;

        padding:
            18px 16px;

        border-radius: 5px;
    }

    .saglam-map-location {
        align-items:
            flex-start;
    }

    .saglam-map-location-icon {
        width: 45px;
        height: 45px;

        flex-basis: 45px;
    }

    .saglam-map-location p {
        font-size:
            9px;
    }

    .saglam-map-direction-btn {
        width: 100%;

        min-height: 48px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .saglam-contact-map-heading h2 {
        font-size:
            31px;
    }

    .saglam-map-machine-frame {
        padding:
            8px 9px
            12px;
    }

    .saglam-map-machine-topbar {
        min-height: 32px;

        padding:
            0 20px;
    }

    .saglam-map-machine-module {
        letter-spacing:
            .12em;
    }

    .saglam-map-machine-screen {
        aspect-ratio:
            1 / 1;
    }

    .saglam-map-machine-grid-overlay {
        background-size:
            28px 28px;
    }

    .saglam-map-location {
        gap: 12px;
    }

    .saglam-map-location-icon {
        width: 40px;
        height: 40px;

        flex-basis: 40px;

        font-size: 17px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .saglam-map-machine-glow,
    .saglam-map-machine-status-dot,
    .saglam-map-machine-scan,
    .saglam-map-location-pulse {
        animation:
            none !important;
    }

    .saglam-map-machine-frame {
        opacity: 1 !important;

        transform:
            none !important;
    }

    .saglam-map-machine-screen iframe {
        transition:
            none !important;
    }
}