/* =========================================================
   AKGÜL SU DEPOLARI
   TEMİZLENMİŞ ANA STİL DOSYASI
   ========================================================= */

/* =========================================================
   DEĞİŞKENLER
   ========================================================= */

:root {
    --navy: #0B172A;
    --navy-soft: #101F38;

    --blue: #1769FF;
    --blue-dark: #0F5BE5;
    --blue-light: #6EA0FF;

    --white: #FFFFFF;

    --background: #F5F7FA;

    --text: #172033;
    --text-light: #667085;

    --border: #E4E7EC;

    --container-width: 1280px;
    --header-height: 76px;

    --radius: 14px;
    --radius-small: 8px;

    --shadow-soft:
        0 12px 35px rgba(11, 23, 42, 0.07);

    --shadow-card:
        0 18px 45px rgba(11, 23, 42, 0.08);
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
    width: 100%;
    max-width: 100%;
}

body {
    margin: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;

    font-family:
        Arial,
        sans-serif;

    color: var(--text);
    background: var(--white);

    line-height: 1.6;
}

body.modal-open {
    overflow: hidden;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

img {
    display: block;
    max-width: 100%;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
    text-decoration: none;
}

a:focus-visible,
button:focus-visible {
    outline:
        3px solid
        rgba(23, 105, 255, 0.35);

    outline-offset: 4px;
}

section[id] {
    scroll-margin-top: 100px;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.container {
    width:
        min(
            calc(100% - 48px),
            var(--container-width)
        );

    margin-inline: auto;
}


/* =========================================================
   NAVBAR
   ========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    width: 100%;

    background:
        rgba(255, 255, 255, 0.98);

    border-bottom:
        1px solid var(--border);

    backdrop-filter:
        blur(10px);

    transition:
        box-shadow 220ms ease,
        background-color 220ms ease;
}

.site-header.is-scrolled {
    background:
        rgba(255, 255, 255, 0.97);

    box-shadow:
        0 8px 24px
        rgba(11, 23, 42, 0.08);
}


/* ---------- HEADER INNER ---------- */

.site-header .header-inner {
    width:
        min(
            calc(100% - 48px),
            var(--container-width)
        );

    min-height:
        var(--header-height);

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        24px;
}


/* ---------- LOGO ---------- */

.logo {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;

    color: var(--navy);

    font-size: 21px;
    font-weight: 800;

    line-height: 1.05;
    letter-spacing: -0.5px;

    transition:
        transform 220ms ease;
}

.logo span {
    margin-top: 5px;

    color: var(--blue);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;
}


/* ---------- DESKTOP MENU ---------- */

.main-nav {
    display: flex;
    align-items: center;

    gap: 24px;
    margin-left: auto;
}

.main-nav a {
    position: relative;

    color: var(--text);

    font-size: 14px;
    font-weight: 600;

    white-space: nowrap;

    transition:
        color 180ms ease;
}

.main-nav a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 2px;

    background:
        var(--blue);

    transition:
        width 180ms ease;
}

.main-nav a:hover {
    color:
        var(--blue);
}

.main-nav a:hover::after {
    width: 100%;
}


/* ---------- TEKLİF ---------- */

.quote-button {
    display: inline-flex;

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

    min-height: 46px;

    padding:
        0 20px;

    flex-shrink: 0;

    border: 0;

    border-radius:
        var(--radius-small);

    background:
        var(--blue);

    color:
        var(--white);

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        0.2px;

    transition:
        background-color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.quote-button:hover {
    background:
        var(--blue-dark);

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(23, 105, 255, 0.20);
}


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

.mobile-menu-button {
    display: none;

    width: 44px;
    height: 44px;

    padding: 0;

    border: 0;

    border-radius:
        var(--radius-small);

    background:
        transparent;

    cursor: pointer;

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

    flex-direction: column;

    gap: 5px;

    transition:
        background-color 180ms ease;
}

.mobile-menu-button span {
    display: block;

    width: 22px;
    height: 2px;

    border-radius: 2px;

    background:
        var(--navy);

    transition:
        transform 180ms ease,
        opacity 180ms ease;
}

.mobile-nav {
    display: none;
}

.mobile-nav.is-open {
    display: flex;
}

.mobile-nav a.is-touching {
    background:
        var(--background);

    color:
        var(--blue);
}


/* =========================================================
   ORTAK SECTION BAŞLIKLARI
   ========================================================= */

.section-heading {
    max-width:
        800px;

    margin-bottom:
        55px;
}

.section-eyebrow {
    margin:
        0 0 18px;

    color:
        var(--blue);

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;
}

.section-heading h2 {
    margin: 0;

    color:
        var(--navy);

    font-size:
        clamp(38px, 4vw, 58px);

    font-weight:
        800;

    line-height:
        1.05;

    letter-spacing:
        -0.04em;
}

.section-heading h2 span {
    display: block;
    color: var(--blue);
}

.section-description {
    max-width:
        650px;

    margin:
        24px 0 0;

    color:
        var(--text-light);

    font-size:
        18px;

    line-height:
        1.7;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    position: relative;

    overflow: hidden;
    isolation: isolate;

    min-height:
        540px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            135deg,
            var(--navy) 0%,
            var(--navy-soft) 55%,
            #12315C 100%
        );

    color:
        var(--white);
}

.hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        );

    background-size:
        60px 60px;

    opacity:
        0.45;

    pointer-events:
        none;

    z-index:
        -1;
}

.hero::after {
    content: "";

    position: absolute;

    width: 550px;
    height: 550px;

    right: 5%;
    top: 10%;

    border-radius: 50%;

    background:
        rgba(23, 105, 255, 0.10);

    filter:
        blur(120px);

    pointer-events:
        none;

    z-index:
        -1;
}

.hero-container {
    min-height:
        540px;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    align-items:
        center;

    gap:
        50px;

    padding:
        10px 0;
}

.hero-content {
    position:
        relative;

    z-index:
        2;

    max-width:
        620px;

    transform:
        translateY(-10px);
}

.hero-eyebrow {
    margin-bottom:
        22px;

    color:
        var(--blue-light);

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        2.5px;
}

.hero h1 {
    margin-bottom:
        26px;

    color:
        var(--white);

    font-size:
        clamp(46px, 4.5vw, 68px);

    font-weight:
        800;

    line-height:
        1.05;

    letter-spacing:
        -2.5px;
}

.hero h1 span {
    display:
        block;

    color:
        #4D8DFF;
}

.hero-description {
    max-width:
        570px;

    margin-bottom:
        32px;

    color:
        #B9C4D5;

    font-size:
        16px;

    line-height:
        1.65;
}

.hero-buttons {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        14px;
}

.hero-button {
    min-height:
        52px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 26px;

    border-radius:
        var(--radius-small);

    border:
        1px solid transparent;

    font-size:
        13px;

    font-weight:
        800;

    transition:
        transform 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.hero-button:hover {
    transform:
        translateY(-2px);
}

.hero-button:active,
.hero-button.is-touching {
    transform:
        translateY(1px)
        scale(0.99);
}

.hero-button.primary {
    background:
        var(--blue);

    color:
        var(--white);
}

.hero-button.primary:hover,
.hero-button.primary.is-touching {
    background:
        var(--blue-dark);

    box-shadow:
        0 10px 24px
        rgba(23,105,255,0.18);
}

.hero-button.secondary {
    border-color:
        rgba(255,255,255,0.22);

    background:
        rgba(255,255,255,0.04);

    color:
        var(--white);
}

.hero-button.secondary:hover,
.hero-button.secondary.is-touching {
    background:
        rgba(255,255,255,0.10);

    border-color:
        rgba(255,255,255,0.40);
}

.hero-button.secondary span {
    display:
        inline-block;

    margin-left:
        10px;

    font-size:
        18px;

    transition:
        transform 180ms ease;
}

.hero-button.secondary:hover span,
.hero-button.secondary.is-touching span {
    transform:
        translateX(4px);
}


/* ---------- HERO IMAGE ---------- */

.hero-visual {
    position:
        relative;

    z-index:
        2;

    width:
        100%;
}

.hero-image-frame {
    position:
        relative;

    width:
        100%;

    overflow:
        hidden;
}

.hero-image {
    display:
        block;

    width:
        100%;

    height:
        350px;

    object-fit:
        cover;

    object-position:
        center;

    border:
        none;

    border-radius:
        8px;

    box-shadow:
        0 30px 70px
        rgba(0,0,0,0.22);

    filter:
        saturate(0.96)
        contrast(1.04);

    transition:
        transform 500ms cubic-bezier(.2,.65,.2,1),
        filter 350ms ease;
}

.hero-image-overlay {
    position:
        absolute;

    inset:
        0;

    border-radius:
        8px;

    background:
        linear-gradient(
            90deg,
            rgba(11,23,42,0.24) 0%,
            rgba(11,23,42,0.04) 30%,
            transparent 65%,
            rgba(11,23,42,0.08) 100%
        );

    pointer-events:
        none;

    z-index:
        2;
}

.hero-image-frame:hover .hero-image,
.hero-image-frame.is-touching .hero-image {
    transform:
        scale(1.015);

    filter:
        saturate(1)
        contrast(1.04);
}


/* =========================================================
   SECTION GEÇİŞ ÇİZGİLERİ
   ========================================================= */

.products-section,
.hydrophore-section,
.services-section,
.experience-section,
.projects-section,
.information-section,
.contact-section {
    position:
        relative;
}

.products-section::before,
.services-section::before,
.projects-section::before {
    content: "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    right:
        0;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent 5%,
            rgba(23,105,255,0.10) 50%,
            transparent 95%
        );

    pointer-events:
        none;
}


/* =========================================================
   ORTAK KART TASARIMI
   ========================================================= */

.product-card,
.hydrophore-card,
.service-card,
.project-card,
.faq-item,
.contact-item,
.contact-detail-item {
    position:
        relative;

    overflow:
        hidden;

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

    box-shadow:
        0 10px 30px
        rgba(11,23,42,0.055),

        0 2px 8px
        rgba(23,105,255,0.025);

    transition:
        transform 240ms ease,
        box-shadow 240ms ease,
        border-color 240ms ease;
}


/* ---------- ÜST BEYAZ ÇİZGİ ---------- */

.product-card::before,
.hydrophore-card::before,
.service-card::before,
.project-card::before,
.faq-item::before,
.contact-item::before,
.contact-detail-item::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        7%;

    right:
        7%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.95),
            transparent
        );

    opacity:
        0.85;

    pointer-events:
        none;

    z-index:
        3;
}


/* ---------- ALT MAVİ YANSIMA ---------- */

.product-card::after,
.hydrophore-card::after,
.service-card::after,
.project-card::after,
.faq-item::after,
.contact-item::after,
.contact-detail-item::after {
    content:
        "";

    position:
        absolute;

    left:
        10%;

    right:
        10%;

    bottom:
        -35px;

    height:
        70px;

    background:
        radial-gradient(
            ellipse,
            rgba(23,105,255,0.08),
            transparent 70%
        );

    filter:
        blur(18px);

    opacity:
        0;

    transition:
        opacity 240ms ease;

    pointer-events:
        none;
}


/* ---------- HOVER / TOUCH ---------- */

.product-card:hover,
.hydrophore-card:hover,
.service-card:hover,
.project-card:hover,
.faq-item:hover,
.contact-item:hover,
.contact-detail-item:hover,
.product-card.is-touching,
.hydrophore-card.is-touching,
.service-card.is-touching,
.project-card.is-touching,
.faq-item.is-touching,
.contact-item.is-touching,
.contact-detail-item.is-touching {
    transform:
        translateY(-4px);

    border-color:
        rgba(23,105,255,0.14);

    box-shadow:
        0 18px 42px
        rgba(11,23,42,0.085),

        0 5px 18px
        rgba(23,105,255,0.055);
}

.product-card:hover::after,
.hydrophore-card:hover::after,
.service-card:hover::after,
.project-card:hover::after,
.faq-item:hover::after,
.contact-item:hover::after,
.contact-detail-item:hover::after,
.product-card.is-touching::after,
.hydrophore-card.is-touching::after,
.service-card.is-touching::after,
.project-card.is-touching::after,
.faq-item.is-touching::after,
.contact-item.is-touching::after,
.contact-detail-item.is-touching::after {
    opacity:
        1;
}


/* ---------- KART BAŞLIKLARI ---------- */

.product-card h3,
.hydrophore-card h3,
.service-card h3,
.project-card h3,
.faq-item h3,
.contact-item h3,
.contact-detail-item h3 {
    transition:
        color 220ms ease,
        transform 220ms ease;
}

.product-card:hover h3,
.hydrophore-card:hover h3,
.service-card:hover h3,
.project-card:hover h3,
.faq-item:hover h3,
.contact-item:hover h3,
.contact-detail-item:hover h3,
.product-card.is-touching h3,
.hydrophore-card.is-touching h3,
.service-card.is-touching h3,
.project-card.is-touching h3,
.faq-item.is-touching h3,
.contact-item.is-touching h3,
.contact-detail-item.is-touching h3 {
    transform:
        translateX(2px);
}


/* ---------- MAVİ ETİKETLER ---------- */

.product-card-number,
.hydrophore-card-number,
.service-card-number,
.project-card-label,
.contact-item-label {
    text-shadow:
        0 0 18px
        rgba(23,105,255,0.12);
}


/* =========================================================
   ÜRÜNLER
   ========================================================= */

.products-section {
    padding:
        90px 0;

    background:
        var(--background);
}

.product-grid {
    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap:
        22px;
}

.product-card {
    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    border-radius:
        var(--radius);

    background:
        var(--white);
}

.product-card-image {
    width:
        100%;

    height:
        215px;

    overflow:
        hidden;

    background:
        #E9EDF2;
}

.product-card-image img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 450ms cubic-bezier(.2,.65,.2,1),
        filter 300ms ease;
}

.product-card:hover .product-card-image img,
.product-card.is-touching .product-card-image img {
    transform:
        scale(1.025);

    filter:
        saturate(1.02);
}

.product-card-content {
    min-height:
        230px;

    display:
        flex;

    flex-direction:
        column;

    padding:
        26px 28px 24px;
}

.product-card-number {
    margin-bottom:
        14px;

    color:
        var(--blue);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        0.16em;
}

.product-card h3 {
    margin-bottom:
        10px;

    color:
        var(--navy);

    font-size:
        22px;

    line-height:
        1.2;
}

.product-card-content > p:not(.product-card-number) {
    margin-bottom:
        16px;

    color:
        var(--text-light);

    font-size:
        15px;

    line-height:
        1.55;
}

.product-card a,
.hydrophore-card a,
.service-card a {
    display:
        inline-flex;

    align-items:
        center;

    margin-top:
        auto;

    color:
        var(--blue);

    font-size:
        14px;

    font-weight:
        800;

    transition:
        transform 180ms ease,
        color 180ms ease;
}

.product-card a span,
.hydrophore-card a span,
.service-card a span {
    display:
        inline-block;

    margin-left:
        10px;

    font-size:
        18px;

    transition:
        transform 180ms ease;
}

.product-card a:hover,
.hydrophore-card a:hover,
.service-card a:hover {
    transform:
        translateX(4px);
}

.product-card a:hover span,
.hydrophore-card a:hover span,
.service-card a:hover span,
.product-card a.is-touching span,
.hydrophore-card a.is-touching span,
.service-card a.is-touching span {
    transform:
        translateX(4px);
}

.product-card:not(:has(.product-card-image)) {
    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F8FAFC
        );
}


/* =========================================================
   HİDROFOR
   ========================================================= */

.hydrophore-section {
    padding:
        65px 0 70px;

    background:
        var(--white);
}

.hydrophore-section .section-heading {
    margin-bottom:
        38px;
}

.hydrophore-grid {
    display:
        grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:
        22px;
}

.hydrophore-card {
    min-width:
        0;

    border-radius:
        var(--radius);

    background:
        var(--background);
}

.hydrophore-card-content {
    min-height:
        260px;

    display:
        flex;

    flex-direction:
        column;

    padding:
        34px 36px 30px;
}

.hydrophore-card-number {
    margin-bottom:
        18px;

    color:
        var(--blue);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        0.16em;
}

.hydrophore-card h3 {
    margin-bottom:
        14px;

    color:
        var(--navy);

    font-size:
        26px;

    line-height:
        1.2;
}

.hydrophore-card-content > p:not(.hydrophore-card-number) {
    margin-bottom:
        18px;

    color:
        var(--text-light);

    font-size:
        16px;

    line-height:
        1.6;
}


/* =========================================================
   HİZMETLER
   ========================================================= */

.services-section {
    padding:
        38px 0 48px;

    background:
        var(--background);
}

.services-section .section-heading {
    margin-bottom:
        22px;

    max-width:
        730px;
}

.services-section .section-eyebrow {
    margin-bottom:
        10px;

    font-size:
        12px;

    letter-spacing:
        0.17em;
}

.services-section .section-heading h2 {
    font-size:
        46px;

    line-height:
        1.02;

    letter-spacing:
        -0.035em;
}

.services-section .section-description {
    margin-top:
        10px;

    max-width:
        670px;

    font-size:
        15px;

    line-height:
        1.55;
}

.services-grid {
    display:
        grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:
        18px;
}

.service-card {
    min-width:
        0;

    border-radius:
        var(--radius);

    background:
        var(--white);
}

.service-card-content {
    min-height:
        175px;

    display:
        flex;

    flex-direction:
        column;

    padding:
        22px 26px 20px;
}

.service-card-number {
    margin-bottom:
        11px;

    color:
        var(--blue);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        0.16em;
}

.service-card h3 {
    margin-bottom:
        9px;

    color:
        var(--navy);

    font-size:
        20px;

    line-height:
        1.15;
}

.service-card-content > p:not(.service-card-number) {
    margin-bottom:
        11px;

    color:
        var(--text-light);

    font-size:
        14px;

    line-height:
        1.45;
}

.service-card-no-image {
    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F8FAFC
        );
}


/* =========================================================
   HAKKIMIZDA
   ========================================================= */

.experience-section {
    padding:
        48px 0;

    background:
        var(--white);
}

.experience-section .section-heading {
    margin-bottom:
        28px;

    max-width:
        780px;
}

.experience-section .section-eyebrow {
    margin-bottom:
        10px;

    font-size:
        12px;
}

.experience-section .section-heading h2 {
    font-size:
        46px;

    line-height:
        1.02;
}

.experience-section .section-description {
    margin-top:
        12px;

    font-size:
        15px;

    line-height:
        1.55;
}


/* ---------- FOUNDER INTRO ---------- */

.founder-intro {
    max-width:
        none;

    margin-bottom:
        38px;

    padding:
        26px 32px;

    background:
        var(--background);

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

.founder-label {
    margin-bottom:
        11px;

    color:
        var(--blue);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        0.18em;
}

.founder-intro h3 {
    margin-bottom:
        14px;

    color:
        var(--navy);

    font-size:
        30px;

    line-height:
        1.15;
}

.founder-intro p:not(.founder-label) {
    margin-bottom:
        11px;

    color:
        var(--text-light);

    font-size:
        14px;

    line-height:
        1.55;
}

.founder-intro p:last-child {
    margin-bottom:
        0;
}


/* ---------- STATS ---------- */

.experience-stats {
    display:
        grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:
        1px;

    margin:
        28px 0;

    background:
        var(--border);

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

    border-radius:
        var(--radius);

    overflow:
        hidden;
}

.experience-stat {
    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    min-height:
        92px;

    padding:
        18px 22px;

    background:
        var(--white);

    transition:
        background-color 180ms ease,
        transform 180ms ease;
}

.experience-stat:hover,
.experience-stat.is-touching {
    background:
        #FBFCFE;

    transform:
        translateY(-2px);
}

.experience-stat strong {
    color:
        var(--navy);

    font-size:
        27px;

    line-height:
        1.1;

    letter-spacing:
        -0.025em;
}

.experience-stat:first-child strong,
.experience-stat:nth-child(2) strong {
    color:
        var(--blue);
}

.experience-stat span {
    margin-top:
        7px;

    color:
        var(--text-light);

    font-size:
        13px;

    line-height:
        1.4;
}


/* ---------- EXPERIENCE CONTENT ---------- */

.experience-content {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        34px;
}

.experience-text {
    padding-right:
        0;
}

.experience-text p {
    margin-bottom:
        18px;

    color:
        var(--text-light);

    font-size:
        15px;

    line-height:
        1.7;
}

.experience-text p:last-child {
    margin-bottom:
        0;
}

.experience-timeline {
    border-left:
        1px solid
        var(--border);

    padding-left:
        28px;
}

.experience-item {
    position:
        relative;

    padding-bottom:
        26px;
}

.experience-item:last-child {
    padding-bottom:
        0;
}

.experience-item::before {
    content:
        "";

    position:
        absolute;

    left:
        -34px;

    top:
        5px;

    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

    background:
        var(--blue);

    box-shadow:
        0 0 0 5px
        var(--white);
}

.experience-year {
    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--blue);

    font-size:
        16px;

    font-weight:
        800;
}

.experience-item-content h3 {
    margin-bottom:
        7px;

    color:
        var(--navy);

    font-size:
        21px;

    line-height:
        1.2;
}

.experience-item-content p {
    margin:
        0;

    color:
        var(--text-light);

    font-size:
        14px;

    line-height:
        1.55;
}


/* ---------- WARRANTY ---------- */

.warranty-highlight {
    position:
        relative;

    overflow:
        hidden;

    margin-top:
        28px;

    padding:
        22px 30px;

    display:
        flex;

    align-items:
        center;

    gap:
        36px;

    background:
        var(--navy);

    color:
        var(--white);

    border-radius:
        var(--radius);

    box-shadow:
        0 18px 42px
        rgba(11,23,42,0.15),

        0 4px 18px
        rgba(23,105,255,0.06);
}

.warranty-highlight::before,
.contact-whatsapp-cta::before {
    content:
        "";

    position:
        absolute;

    top:
        -120px;

    right:
        -80px;

    width:
        280px;

    height:
        280px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.075),
            transparent 68%
        );

    pointer-events:
        none;
}

.warranty-highlight::after,
.contact-whatsapp-cta::after {
    content:
        "";

    position:
        absolute;

    left:
        15%;

    right:
        15%;

    bottom:
        -50px;

    height:
        100px;

    background:
        radial-gradient(
            ellipse,
            rgba(23,105,255,0.15),
            transparent 68%
        );

    filter:
        blur(20px);

    pointer-events:
        none;
}

.warranty-highlight > * {
    position:
        relative;

    z-index:
        2;
}

.warranty-label {
    margin:
        0;

    min-width:
        90px;

    color:
        var(--blue-light);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.17em;
}

.warranty-highlight h3 {
    margin:
        0;

    font-size:
        25px;

    line-height:
        1.15;
}

.warranty-highlight p:last-child {
    margin:
        0 0 0 auto;

    max-width:
        650px;

    color:
        #B9C4D5;

    font-size:
        15px;

    line-height:
        1.55;
}


/* =========================================================
   PROJELER
   ========================================================= */

.projects-section {
    padding:
        18px 0 24px;

    background:
        var(--background);
}

.projects-section .section-heading {
    max-width:
        900px;

    margin-bottom:
        13px;
}

.projects-section .section-eyebrow {
    margin-bottom:
        6px;

    font-size:
        12px;

    letter-spacing:
        0.17em;
}

.projects-section .section-heading h2 {
    font-size:
        40px;

    line-height:
        1;

    letter-spacing:
        -0.035em;
}

.projects-section .section-description {
    max-width:
        760px;

    margin-top:
        6px;

    font-size:
        14px;

    line-height:
        1.4;
}

.projects-grid {
    display:
        grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:
        20px;
}

.project-card {
    overflow:
        hidden;

    background:
        var(--white);

    border-radius:
        var(--radius);
}

.project-card-image {
    width:
        100%;

    height:
        190px;

    overflow:
        hidden;

    background:
        #E9EDF2;
}

.project-card-image img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 500ms cubic-bezier(.2,.65,.2,1),
        filter 350ms ease;
}

.projects-grid .project-card:nth-child(1)
.project-card-image img {
    object-position:
        center center;
}

.projects-grid .project-card:nth-child(2)
.project-card-image img {
    object-position:
        center 72%;
}

.project-card:hover .project-card-image img,
.project-card.is-touching .project-card-image img {
    transform:
        scale(1.025);

    filter:
        saturate(1.03)
        contrast(1.01);
}

.project-card-content {
    padding:
        14px 22px 16px;
}

.project-card-label {
    margin-bottom:
        6px;

    color:
        var(--blue);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.15em;
}

.project-card h3 {
    margin-bottom:
        5px;

    color:
        var(--navy);

    font-size:
        21px;

    line-height:
        1.12;
}

.project-card-content > p:last-child {
    margin:
        0;

    color:
        var(--text-light);

    font-size:
        13px;

    line-height:
        1.35;
}


/* =========================================================
   BİLGİ MERKEZİ
   ========================================================= */

.information-section {
    padding:
        42px 0 48px;

    background:
        var(--white);
}

.information-section .section-heading {
    max-width:
        900px;

    margin-bottom:
        22px;
}

.information-section .section-eyebrow {
    margin-bottom:
        9px;

    font-size:
        12px;

    letter-spacing:
        0.17em;
}

.information-section .section-heading h2 {
    font-size:
        44px;

    line-height:
        1.03;

    letter-spacing:
        -0.035em;
}

.information-section .section-description {
    max-width:
        760px;

    margin-top:
        10px;

    font-size:
        15px;

    line-height:
        1.5;
}

.faq-list {
    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;
}

.faq-item {
    padding:
        22px 28px;

    border-radius:
        var(--radius);

    background:
        var(--background);
}

.faq-item h3 {
    margin-bottom:
        9px;

    color:
        var(--navy);

    font-size:
        20px;

    line-height:
        1.25;
}

.faq-item p {
    margin:
        0;

    color:
        var(--text-light);

    font-size:
        14px;

    line-height:
        1.55;
}


/* =========================================================
   İLETİŞİM
   ========================================================= */

.contact-section {
    padding:
        38px 0;

    background:
        var(--background);
}

.contact-section .section-heading {
    max-width:
        900px;

    margin-bottom:
        28px;
}

.contact-section .section-eyebrow {
    margin-bottom:
        8px;

    font-size:
        12px;

    letter-spacing:
        0.17em;
}

.contact-section .section-heading h2 {
    font-size:
        44px;

    line-height:
        1.02;

    letter-spacing:
        -0.035em;
}

.contact-section .section-description {
    max-width:
        780px;

    margin-top:
        10px;

    font-size:
        15px;

    line-height:
        1.5;
}

.contact-content {
    display:
        grid;

    grid-template-columns:
        1.18fr 0.82fr;

    align-items:
        stretch;

    gap:
        22px;
}

.contact-info,
.contact-details {
    display:
        grid;

    grid-template-rows:
        1fr 1fr;

    gap:
        16px;
}

.contact-item,
.contact-detail-item {
    height:
        100%;

    min-height:
        0;

    padding:
        24px 28px;

    border-radius:
        var(--radius);

    background:
        var(--white);
}

.contact-item-label {
    margin-bottom:
        9px;

    color:
        var(--text-light);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.18em;
}

.contact-item h3,
.contact-detail-item h3 {
    margin-bottom:
        8px;

    color:
        var(--navy);

    font-size:
        23px;

    line-height:
        1.15;
}

.contact-item > p,
.contact-detail-item > p {
    margin-bottom:
        10px;

    color:
        var(--text-light);

    font-size:
        14px;

    line-height:
        1.5;
}

.contact-item p + p {
    margin-top:
        11px;
}

.contact-item strong {
    font-size:
        15px;
}

.contact-item a[href^="tel:"] {
    color:
        var(--blue);

    font-size:
        15px;

    font-weight:
        700;
}

.contact-item .hero-button {
    margin-top:
        6px;

    padding:
        13px 20px;

    font-size:
        12px;
}

.contact-whatsapp-cta {
    position:
        relative;

    overflow:
        hidden;

    margin-top:
        22px;

    min-height:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    padding:
        25px 30px;

    border-radius:
        var(--radius);

    background:
        var(--navy);

    color:
        var(--white);

    box-shadow:
        0 18px 42px
        rgba(11,23,42,0.15),

        0 4px 18px
        rgba(23,105,255,0.06);
}

.contact-whatsapp-cta > * {
    position:
        relative;

    z-index:
        2;
}

.contact-whatsapp-cta h3 {
    margin:
        0 0 5px;

    color:
        var(--white);

    font-size:
        27px;

    line-height:
        1.12;
}

.contact-whatsapp-cta p {
    margin:
        0;

    color:
        #B9C4D5;

    font-size:
        14px;

    line-height:
        1.45;
}

.contact-whatsapp-cta .hero-button {
    flex:
        0 0 auto;

    padding:
        14px 22px;

    font-size:
        12px;

    white-space:
        nowrap;
}


/* =========================================================
   FOOTER
   ========================================================= */

#site-footer {
    position:
        relative;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #0B172A 0%,
            #101F38 65%,
            #12315C 100%
        );

    color:
        var(--white);
}

#site-footer::before {
    content:
        "";

    position:
        absolute;

    top:
        -160px;

    right:
        -100px;

    width:
        420px;

    height:
        420px;

    background:
        radial-gradient(
            circle,
            rgba(23,105,255,0.14),
            transparent 68%
        );

    pointer-events:
        none;
}

.footer-main {
    position:
        relative;

    z-index:
        2;

    width:
        min(
            calc(100% - 48px),
            1240px
        );

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        1.45fr
        1fr
        1fr
        1.1fr;

    gap:
        60px;

    padding:
        54px 0 42px;
}

.footer-brand {
    max-width:
        300px;
}

.footer-logo {
    display:
        inline-flex;

    flex-direction:
        column;

    line-height:
        1;

    margin-bottom:
        18px;
}

.footer-logo strong {
    color:
        var(--white);

    font-size:
        24px;

    font-weight:
        800;

    letter-spacing:
        -0.6px;
}

.footer-logo span {
    margin-top:
        7px;

    color:
        var(--blue-light);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        2.2px;
}

.footer-brand p {
    margin:
        0;

    max-width:
        270px;

    color:
        rgba(255,255,255,0.68);

    font-size:
        14px;

    line-height:
        1.6;
}

.footer-column {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;
}

.footer-column h3 {
    margin:
        2px 0 17px;

    color:
        rgba(255,255,255,0.48);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.18em;
}

.footer-column a,
.footer-column span {
    margin-bottom:
        9px;

    color:
        rgba(255,255,255,0.78);

    font-size:
        13px;

    line-height:
        1.5;

    transition:
        color 180ms ease,
        transform 180ms ease;
}

.footer-column a:hover,
.footer-column a.is-touching {
    color:
        var(--white);

    transform:
        translateX(3px);
}

.footer-contact a {
    font-weight:
        600;
}

.footer-contact > span {
    color:
        rgba(255,255,255,0.58);
}

.footer-whatsapp {
    display:
        inline-flex !important;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        8px !important;

    color:
        var(--blue-light) !important;

    font-weight:
        700 !important;
}

.footer-whatsapp span {
    margin:
        0;

    color:
        var(--blue-light);

    transition:
        transform 180ms ease;
}

.footer-whatsapp:hover span,
.footer-whatsapp.is-touching span {
    transform:
        translateX(3px);
}

.footer-bottom {
    position:
        relative;

    z-index:
        2;

    width:
        min(
            calc(100% - 48px),
            1240px
        );

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        18px 0 22px;

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

    color:
        rgba(255,255,255,0.40);

    font-size:
        11px;

    letter-spacing:
        0.03em;
}


/* =========================================================
   WHATSAPP SABİT BUTON
   DESKTOP
   ========================================================= */

.floating-whatsapp {
    position:
        fixed;

    right:
        22px;

    bottom:
        22px;

    width:
        52px;

    height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    border:
        2px solid
        rgba(255,255,255,0.88);

    border-radius:
        50%;

    background:
        #25D366;

    color:
        #FFFFFF;

    box-shadow:
        0 10px 26px
        rgba(11,23,42,0.18),

        0 0 0 1px
        rgba(37,211,102,0.12);

    z-index:
        3000;

    overflow:
        visible;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

.floating-whatsapp:hover,
.floating-whatsapp.is-touching {
    transform:
        translateY(-3px)
        scale(1.04);

    box-shadow:
        0 14px 30px
        rgba(11,23,42,0.22),

        0 0 0 5px
        rgba(37,211,102,0.08);
}

.floating-whatsapp:active {
    transform:
        scale(0.96);
}

.floating-whatsapp .whatsapp-icon {
    width:
        26px;

    height:
        26px;

    display:
        block;

    flex:
        0 0 auto;

    color:
        #FFFFFF;

    fill:
        currentColor;
}


/* =========================================================
   DETAY MODAL
   ========================================================= */

.detail-modal {
    position:
        fixed;

    inset:
        0;

    z-index:
        5000;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        24px;

    visibility:
        hidden;

    opacity:
        0;

    pointer-events:
        none;

    background:
        rgba(5,13,27,0.72);

    backdrop-filter:
        blur(8px);

    transition:
        opacity 220ms ease,
        visibility 220ms ease;
}

.detail-modal.is-open {
    visibility:
        visible;

    opacity:
        1;

    pointer-events:
        auto;
}

.detail-modal-backdrop {
    position:
        absolute;

    inset:
        0;
}

.detail-modal-dialog {
    position:
        relative;

    width:
        min(
            760px,
            100%
        );

    max-height:
        calc(100vh - 48px);

    overflow-y:
        auto;

    padding:
        42px 44px 38px;

    border:
        1px solid
        rgba(23,105,255,0.16);

    border-radius:
        20px;

    background:
        linear-gradient(
            145deg,
            #FFFFFF 0%,
            #F8FAFD 100%
        );

    box-shadow:
        0 30px 90px
        rgba(0,0,0,0.28),

        0 0 50px
        rgba(23,105,255,0.08);

    transform:
        translateY(20px)
        scale(0.98);

    opacity:
        0;

    transition:
        transform 280ms ease,
        opacity 280ms ease;
}

.detail-modal.is-open .detail-modal-dialog {
    transform:
        translateY(0)
        scale(1);

    opacity:
        1;
}

.detail-modal-dialog::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        44px;

    right:
        44px;

    height:
        2px;

    border-radius:
        0 0 4px 4px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(23,105,255,0.9),
            transparent
        );
}

.detail-modal-close {
    position:
        absolute;

    top:
        18px;

    right:
        20px;

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        10px;

    background:
        rgba(255,255,255,0.8);

    color:
        var(--text);

    font-size:
        28px;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}

.detail-modal-close:hover,
.detail-modal-close.is-touching {
    background:
        var(--background);

    border-color:
        rgba(23,105,255,0.25);

    color:
        var(--blue);

    transform:
        rotate(4deg);
}

.detail-modal-label {
    margin:
        0 0 10px;

    color:
        var(--blue);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.18em;
}

#detailModalTitle {
    margin:
        0 60px 22px 0;

    color:
        var(--navy);

    font-size:
        clamp(30px,4vw,44px);

    font-weight:
        800;

    line-height:
        1.05;

    letter-spacing:
        -0.035em;
}

#detailModalDescription {
    margin:
        0;

    display:
        flex;

    flex-direction:
        column;
}

.detail-section-title {
    display:
        block;

    margin:
        20px 0 7px;

    color:
        var(--blue);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.16em;
}

.detail-section-title:first-child {
    margin-top:
        0;
}

.detail-section-text {
    display:
        block;

    max-width:
        680px;

    color:
        var(--text);

    font-size:
        15px;

    line-height:
        1.65;
}

.detail-modal-note {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    margin-top:
        28px;

    padding:
        16px 18px;

    border:
        1px solid
        rgba(23,105,255,0.12);

    border-radius:
        12px;

    background:
        rgba(23,105,255,0.04);

    color:
        var(--text-light);

    font-size:
        13px;

    line-height:
        1.55;
}

.detail-modal-note > span {
    flex:
        0 0 auto;

    width:
        7px;

    height:
        7px;

    margin-top:
        6px;

    border-radius:
        50%;

    background:
        var(--blue);

    box-shadow:
        0 0 0 5px
        rgba(23,105,255,0.08);
}

.detail-modal-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        26px;
}

.detail-modal-actions .hero-button {
    min-height:
        50px;

    padding:
        0 22px;

    font-size:
        12px;
}


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

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

    .container {
        width:
            min(
                calc(100% - 40px),
                1000px
            );
    }

    .hero-container {
        grid-template-columns:
            1fr;

        gap:
            40px;

        padding:
            45px 0;
    }

    .hero-content {
        max-width:
            760px;
    }

    .hero-visual {
        max-width:
            760px;
    }

    .hero h1 {
        font-size:
            clamp(46px,6vw,64px);
    }

    .hero-description {
        max-width:
            500px;
    }

    .hero-image {
        height:
            420px;
    }

    .product-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .services-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .projects-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .experience-content {
        grid-template-columns:
            1fr;

        gap:
            35px;
    }

    .contact-content {
        display:
            block;
    }

    .contact-info,
    .contact-details {
        display:
            flex;

        flex-direction:
            column;

        gap:
            14px;
    }

    .contact-item,
    .contact-detail-item {
        height:
            auto;
    }

    .contact-whatsapp-cta {
        display:
            block;
    }

    .floating-whatsapp {
        right:
            20px;

        bottom:
            20px;
    }

    .footer-main {
        grid-template-columns:
            1fr 1fr;

        gap:
            38px 35px;
    }

    .footer-brand {
        grid-column:
            1 / -1;
    }
}


/* =========================================================
   MOBİL NAVBAR
   ========================================================= */

@media (max-width: 900px) {

    .site-header {
        width:
            100%;

        max-width:
            100vw;

        overflow:
            visible;
    }

    .site-header .header-inner {
        width:
            100%;

        min-height:
            72px;

        margin:
            0;

        padding:
            0 16px;

        display:
            flex;

        flex-direction:
            row;

        align-items:
            center;

        justify-content:
            space-between;

        gap:
            12px;

        position:
            relative;
    }

    .site-header .header-inner .logo {
        display:
            flex;

        flex-direction:
            column;

        flex:
            0 0 auto;

        width:
            auto;

        margin:
            0;
    }

    .site-header .header-inner .main-nav,
    .site-header .header-inner .quote-button {
        display:
            none;
    }

    .site-header .header-inner .mobile-menu-button {
        display:
            flex;

        position:
            relative;

        flex:
            0 0 44px;

        width:
            44px;

        min-width:
            44px;

        max-width:
            44px;

        height:
            44px;

        min-height:
            44px;

        max-height:
            44px;

        margin:
            0 0 0 auto;

        padding:
            0;

        border:
            0;

        background:
            transparent;

        visibility:
            visible;

        opacity:
            1;

        align-items:
            center;

        justify-content:
            center;

        flex-direction:
            column;

        gap:
            5px;

        z-index:
            20;
    }

    .site-header .header-inner .mobile-menu-button span {
        display:
            block;

        width:
            22px;

        min-width:
            22px;

        height:
            2px;

        margin:
            0;

        padding:
            0;

        background:
            var(--navy);

        border-radius:
            2px;

        opacity:
            1;
    }

    .mobile-nav {
        width:
            100%;

        max-width:
            100%;

        padding:
            10px 24px 24px;

        background:
            var(--white);

        border-top:
            1px solid var(--border);

        flex-direction:
            column;

        gap:
            4px;
    }

    .mobile-nav a {
        display:
            flex;

        align-items:
            center;

        min-height:
            50px;

        padding:
            0 12px;

        border-radius:
            var(--radius-small);

        color:
            var(--text);

        font-size:
            15px;

        font-weight:
            600;
    }

    .mobile-nav a:hover,
    .mobile-nav a.is-touching {
        background:
            var(--background);

        color:
            var(--blue);
    }

    .mobile-nav .mobile-quote-button {
        margin-top:
            10px;

        justify-content:
            center;

        background:
            var(--blue);

        color:
            var(--white);

        font-weight:
            800;
    }

    .mobile-nav .mobile-quote-button:hover,
    .mobile-nav .mobile-quote-button.is-touching {
        background:
            var(--blue-dark);

        color:
            var(--white);
    }

    .mobile-menu-button.is-open span:nth-child(1) {
        transform:
            translateY(7px)
            rotate(45deg);
    }

    .mobile-menu-button.is-open span:nth-child(2) {
        opacity:
            0;
    }

    .mobile-menu-button.is-open span:nth-child(3) {
        transform:
            translateY(-7px)
            rotate(-45deg);
    }
}


/* =========================================================
   MOBİL
   ========================================================= */

@media (max-width: 767px) {

    html {
        scroll-padding-top:
            82px;
    }

    body {
        width:
            100%;

        min-width:
            0;

        max-width:
            100%;

        overflow-x:
            hidden;
    }

    section[id] {
        scroll-margin-top:
            82px;
    }

    .container {
        width:
            calc(100% - 32px);

        max-width:
            none;

        min-width:
            0;

        margin-left:
            16px;

        margin-right:
            16px;
    }


    /* ---------- SECTION ---------- */

    .section-heading {
        margin-bottom:
            40px;
    }

    .section-heading h2 {
        font-size:
            clamp(34px,9vw,48px);

        line-height:
            1.08;
    }

    .section-description {
        margin-top:
            20px;

        font-size:
            16px;

        line-height:
            1.7;
    }


    /* ---------- HERO ---------- */

    .hero {
        min-height:
            auto;
    }

    .hero-container {
        width:
            100%;

        max-width:
            100%;

        min-width:
            0;

        min-height:
            620px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            35px;

        padding:
            42px 0;
    }

    .hero-content {
        width:
            100%;

        max-width:
            100%;

        order:
            1;

        transform:
            none;
    }

    .hero-visual {
        width:
            100%;

        max-width:
            100%;

        order:
            2;
    }

    .hero h1 {
        width:
            100%;

        max-width:
            100%;

        margin-bottom:
            22px;

        font-size:
            clamp(42px,12vw,58px);

        line-height:
            0.98;

        letter-spacing:
            -0.045em;

        overflow-wrap:
            break-word;
    }

    .hero-eyebrow {
        font-size:
            11px;

        letter-spacing:
            2px;
    }

    .hero-description {
        width:
            100%;

        max-width:
            100%;

        font-size:
            15px;

        line-height:
            1.55;

        overflow-wrap:
            anywhere;
    }

    .hero-buttons {
        width:
            100%;

        max-width:
            100%;

        flex-direction:
            column;

        align-items:
            stretch;
    }

    .hero-button {
        width:
            100%;

        max-width:
            100%;

        justify-content:
            center;
    }

    .hero-image-frame {
        width:
            100%;

        max-width:
            100%;

        overflow:
            hidden;
    }

    .hero-image {
        width:
            100%;

        max-width:
            100%;

        height:
            320px;

        border-radius:
            6px;
    }

    .hero-image-overlay {
        border-radius:
            6px;

        background:
            linear-gradient(
                180deg,
                rgba(11,23,42,0.06),
                transparent 45%,
                rgba(11,23,42,0.16)
            );
    }


    /* ---------- SECTIONS ---------- */

    .products-section,
    .hydrophore-section,
    .services-section,
    .experience-section,
    .projects-section,
    .information-section,
    .contact-section {
        padding:
            65px 0;
    }


    /* ---------- PRODUCTS ---------- */

    .product-grid,
    .services-grid,
    .projects-grid {
        width:
            100%;

        max-width:
            100%;

        min-width:
            0;

        grid-template-columns:
            1fr;
    }

    .product-card {
        width:
            100%;

        max-width:
            100%;

        min-width:
            0;
    }

    .product-card-image {
        height:
            210px;
    }

    .product-card-content {
        min-height:
            240px;

        padding:
            30px 28px 28px;
    }

    .product-card h3 {
        font-size:
            25px;
    }


    /* ---------- HYDROFOR ---------- */

    .hydrophore-grid {
        width:
            100%;

        max-width:
            100%;

        min-width:
            0;

        grid-template-columns:
            1fr;

        gap:
            20px;
    }

    .hydrophore-card {
        width:
            100%;

        max-width:
            100%;

        min-width:
            0;
    }

    .hydrophore-card-content {
        min-height:
            240px;

        padding:
            34px 28px;
    }

    .hydrophore-card h3 {
        font-size:
            26px;
    }


    /* ---------- SERVICES ---------- */

    .service-card {
        width:
            100%;

        max-width:
            100%;

        min-width:
            0;
    }

    .service-card-content {
        min-height:
            285px;

        padding:
            32px 28px 28px;
    }

    .service-card h3 {
        font-size:
            25px;
    }


    /* ---------- EXPERIENCE ---------- */

    .experience-section {
        padding:
            65px 0;
    }

    .experience-stats {
        grid-template-columns:
            1fr;

        margin-top:
            28px;
    }

    .experience-stat {
        min-height:
            82px;

        padding:
            17px 20px;
    }

    .founder-intro {
        margin-bottom:
            40px;

        padding:
            34px 28px;
    }

    .founder-intro h3 {
        font-size:
            32px;
    }

    .founder-intro p:not(.founder-label) {
        font-size:
            16px;

        line-height:
            1.75;
    }

    .experience-content {
        grid-template-columns:
            1fr;

        gap:
            55px;
    }

    .experience-text {
        padding-right:
            0;
    }

    .experience-text p {
        font-size:
            16px;

        line-height:
            1.8;
    }

    .experience-timeline {
        padding-left:
            28px;
    }

    .experience-item::before {
        left:
            -34px;
    }

    .warranty-highlight {
        display:
            block;

        margin-top:
            55px;

        padding:
            24px 22px;
    }

    .warranty-label {
        min-width:
            auto;

        margin-bottom:
            10px;
    }

    .warranty-highlight h3 {
        margin-bottom:
            10px;

        font-size:
            30px;
    }

    .warranty-highlight p:last-child {
        margin:
            0;

        font-size:
            14px;
    }


    /* ---------- PROJECTS ---------- */

    .projects-section {
        padding:
            65px 0;
    }

    .project-card {
        width:
            100%;

        max-width:
            100%;

        min-width:
            0;
    }

    .project-card-image {
        height:
            210px;
    }

    .project-card-content {
        padding:
            21px 26px 23px;
    }

    .project-card-label {
        margin-bottom:
            9px;

        font-size:
            12px;

        letter-spacing:
            0.15em;
    }

    .project-card h3 {
        margin-bottom:
            8px;

        font-size:
            24px;

        line-height:
            1.15;
    }

    .project-card-content > p:last-child {
        margin:
            0;

        font-size:
            14px;

        line-height:
            1.5;
    }

    .projects-grid .project-card:nth-child(2)
    .project-card-image img {
        object-position:
            center 72%;
    }


    /* ---------- FAQ ---------- */

    .information-section {
        padding:
            65px 0;
    }

    .faq-item {
        width:
            100%;

        max-width:
            100%;

        min-width:
            0;

        padding:
            21px 20px;
    }

    .faq-item h3 {
        font-size:
            20px;
    }

    .faq-item p {
        font-size:
            15px;

        line-height:
            1.65;
    }


    /* ---------- CONTACT ---------- */

    .contact-section {
        padding:
            65px 0;
    }

    .contact-content {
        display:
            block;
    }

    .contact-info,
    .contact-details {
        display:
            flex;

        flex-direction:
            column;

        gap:
            14px;
    }

    .contact-item,
    .contact-detail-item {
        width:
            100%;

        max-width:
            100%;

        min-width:
            0;

        height:
            auto;

        min-height:
            0;

        padding:
            22px;
    }

    .contact-item h3,
    .contact-detail-item h3 {
        font-size:
            25px;
    }

    .contact-whatsapp-cta {
        display:
            block;

        margin-top:
            18px;

        padding:
            23px;
    }

    .contact-whatsapp-cta h3 {
        font-size:
            24px;
    }

    .contact-whatsapp-cta .hero-button {
        width:
            100%;

        margin-top:
            18px;
    }


    /* ---------- FOOTER ---------- */

    .footer-main {
        width:
            calc(100% - 32px);

        max-width:
            none;

        min-width:
            0;

        margin-left:
            16px;

        margin-right:
            16px;

        grid-template-columns:
            1fr;

        gap:
            32px;

        padding:
            42px 0 30px;
    }

    .footer-brand {
        max-width:
            100%;

        grid-column:
            auto;
    }

    .footer-bottom {
        width:
            calc(100% - 32px);

        max-width:
            none;

        min-width:
            0;

        margin-left:
            16px;

        margin-right:
            16px;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            6px;

        padding:
            16px 0 20px;
    }


    /* ---------- MODAL ---------- */

    .detail-modal {
        padding:
            14px;
    }

    .detail-modal-dialog {
        width:
            100%;

        max-height:
            calc(100vh - 28px);

        padding:
            34px 22px 24px;

        border-radius:
            17px;
    }

    .detail-modal-dialog::before {
        left:
            22px;

        right:
            22px;
    }

    .detail-modal-close {
        top:
            13px;

        right:
            14px;

        width:
            38px;

        height:
            38px;
    }

    .detail-modal-label {
        font-size:
            10px;
    }

    #detailModalTitle {
        margin-right:
            44px;

        font-size:
            30px;

        line-height:
            1.08;
    }

    .detail-section-title {
        margin-top:
            18px;

        font-size:
            9px;
    }

    .detail-section-text {
        font-size:
            14px;

        line-height:
            1.6;
    }

    .detail-modal-note {
        margin-top:
            22px;

        padding:
            14px 15px;

        font-size:
            12px;
    }

    .detail-modal-actions {
        flex-direction:
            column;

        align-items:
            stretch;

        margin-top:
            22px;
    }

    .detail-modal-actions .hero-button {
        width:
            100%;
    }


    /* ---------- MOBILE WHATSAPP ---------- */

    .floating-whatsapp {
        display:
            none !important;
    }


    /* ---------- MOBILE SECTION WIDTH ---------- */

    .hero,
    main,
    section,
    #site-footer {
        width:
            100%;

        max-width:
            100%;

        overflow:
            hidden;
    }

    .hero h1 {
        overflow-wrap:
            anywhere;
    }

    .product-card h3,
    .hydrophore-card h3,
    .service-card h3,
    .project-card h3,
    .faq-item h3,
    .contact-item h3,
    .contact-detail-item h3 {
        overflow-wrap:
            anywhere;
    }
}


/* =========================================================
   390PX VE DAHA KÜÇÜK
   ========================================================= */

@media (max-width: 390px) {

    .container {
        width:
            calc(100% - 28px);

        margin-left:
            14px;

        margin-right:
            14px;
    }

    .site-header .header-inner {
        padding:
            0 14px;
    }

    .site-header .header-inner .mobile-menu-button {
        flex:
            0 0 42px;

        width:
            42px;

        min-width:
            42px;

        max-width:
            42px;

        height:
            42px;

        min-height:
            42px;

        max-height:
            42px;
    }

    .site-header .header-inner .mobile-menu-button span {
        width:
            21px;

        min-width:
            21px;
    }

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

    .hero h1 {
        font-size:
            38px;

        line-height:
            1;

        letter-spacing:
            -1.3px;
    }

    .hero-eyebrow {
        font-size:
            10px;

        letter-spacing:
            1.8px;
    }

    .hero-image {
        height:
            280px;
    }

    .product-card-image,
    .project-card-image {
        height:
            195px;
    }

    .section-heading h2 {
        font-size:
            34px;
    }

    .detail-modal {
        padding:
            10px;
    }

    .detail-modal-dialog {
        max-height:
            calc(100vh - 20px);

        padding:
            31px 18px 20px;
    }

    .detail-modal-dialog::before {
        left:
            18px;

        right:
            18px;
    }

    #detailModalTitle {
        font-size:
            27px;
    }

    .detail-section-text {
        font-size:
            13px;
    }
}


/* =========================================================
   TOUCH EFFECTS
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    .product-card,
    .hydrophore-card,
    .service-card,
    .project-card,
    .faq-item,
    .contact-item,
    .contact-detail-item,
    .experience-stat {
        -webkit-user-select:
            none;

        user-select:
            none;
    }

    .product-card,
    .hydrophore-card,
    .service-card,
    .project-card,
    .faq-item,
    .contact-item,
    .contact-detail-item {
        transition:
            transform 220ms ease,
            box-shadow 220ms ease,
            border-color 220ms ease;
    }

    .product-card.is-touching,
    .hydrophore-card.is-touching,
    .service-card.is-touching,
    .project-card.is-touching,
    .faq-item.is-touching,
    .contact-item.is-touching,
    .contact-detail-item.is-touching {
        transform:
            translateY(-4px) !important;

        border-color:
            rgba(23, 105, 255, 0.22) !important;

        box-shadow:
            0 18px 42px
            rgba(11, 23, 42, 0.10),

            0 5px 18px
            rgba(23, 105, 255, 0.08) !important;
    }

    .product-card.is-touching::after,
    .hydrophore-card.is-touching::after,
    .service-card.is-touching::after,
    .project-card.is-touching::after,
    .faq-item.is-touching::after,
    .contact-item.is-touching::after,
    .contact-detail-item.is-touching::after {
        opacity:
            1 !important;
    }

    .product-card.is-touching
    .product-card-image img,
    .project-card.is-touching
    .project-card-image img {
        transform:
            scale(1.03) !important;

        filter:
            saturate(1.04) !important;
    }

    .hero-image-frame.is-touching
    .hero-image {
        transform:
            scale(1.02) !important;

        filter:
            saturate(1.02)
            contrast(1.04) !important;
    }

    .hero-button.is-touching {
        transform:
            translateY(1px)
            scale(0.985) !important;
    }

    .product-card a.is-touching,
    .hydrophore-card a.is-touching,
    .service-card a.is-touching {
        transform:
            translateX(4px) !important;
    }

    .product-card a.is-touching span,
    .hydrophore-card a.is-touching span,
    .service-card a.is-touching span {
        transform:
            translateX(4px) !important;
    }

    .experience-stat.is-touching {
        transform:
            translateY(-2px) !important;

        background:
            #FBFCFE !important;
    }

    .floating-whatsapp.is-touching {
        transform:
            translateY(-3px)
            scale(1.04);
    }
}


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

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

    html {
        scroll-behavior:
            auto;
    }

    *,
    *::before,
    *::after {
        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }
} 

/* =========================================================
   SU DEPOLARI + HİDROFOR SİSTEMLERİ
   DESKTOP KOMPAKT ÖLÇÜLER
   ========================================================= */

@media (min-width: 901px) {

    /* ---------- SU DEPOLARI ---------- */

    .products-section {
        padding:
            65px 0 70px;
    }

    .products-section .section-heading {
        max-width:
            850px;

        margin-bottom:
            36px;
    }

    .products-section .section-heading h2 {
        font-size:
            44px;

        line-height:
            1.05;
    }

    .products-section .section-description {
        margin-top:
            14px;

        max-width:
            720px;

        font-size:
            15px;

        line-height:
            1.55;
    }

    .product-grid {
        gap:
            20px;
    }

    .product-card-image {
        height:
            180px;
    }

    .product-card-content {
        min-height:
            205px;

        padding:
            22px 24px 20px;
    }

    .product-card-number {
        margin-bottom:
            11px;
    }

    .product-card h3 {
        margin-bottom:
            8px;

        font-size:
            20px;

        line-height:
            1.2;
    }

    .product-card-content > p:not(.product-card-number) {
        margin-bottom:
            13px;

        font-size:
            14px;

        line-height:
            1.5;
    }


    /* ---------- HİDROFOR SİSTEMLERİ ---------- */

    .hydrophore-section {
        padding:
            50px 0 58px;
    }

    .hydrophore-section .section-heading {
        max-width:
            850px;

        margin-bottom:
            30px;
    }

    .hydrophore-section .section-heading h2 {
        font-size:
            44px;

        line-height:
            1.05;
    }

    .hydrophore-section .section-description {
        margin-top:
            14px;

        max-width:
            720px;

        font-size:
            15px;

        line-height:
            1.55;
    }

    .hydrophore-grid {
        gap:
            20px;
    }

    .hydrophore-card-content {
        min-height:
            220px;

        padding:
            28px 32px 26px;
    }

    .hydrophore-card-number {
        margin-bottom:
            14px;
    }

    .hydrophore-card h3 {
        margin-bottom:
            11px;

        font-size:
            23px;

        line-height:
            1.2;
    }

    .hydrophore-card-content > p:not(.hydrophore-card-number) {
        margin-bottom:
            15px;

        font-size:
            15px;

        line-height:
            1.55;
    }
}


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

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

    .products-section {
        padding:
            65px 0;
    }

    .products-section .section-heading,
    .hydrophore-section .section-heading {
        margin-bottom:
            32px;
    }

    .products-section .section-heading h2,
    .hydrophore-section .section-heading h2 {
        font-size:
            42px;
    }

    .product-card-image {
        height:
            190px;
    }

    .product-card-content {
        min-height:
            215px;

        padding:
            24px;
    }

    .hydrophore-section {
        padding:
            55px 0;
    }

    .hydrophore-card-content {
        min-height:
            225px;

        padding:
            28px;
    }
} 

/* =========================================================
   FOOTER LOGO + SEMBOL
   ========================================================= */

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-direction: row;
    line-height: 1;
    margin-bottom: 18px;
}

.footer-symbol {
    width: 46px;
    height: 58px;
    object-fit: contain;
    flex: 0 0 auto;
    display: block;
}

.footer-logo-text {
    display: flex;
    flex-direction: column;
}

.footer-logo-text strong {
    color: var(--white);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.6px;
}

.footer-logo-text span {
    margin-top: 7px;
    color: var(--blue-light);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.2px;
}


/* ---------- MOBİL ---------- */

@media (max-width: 767px) {

    .footer-logo {
        gap: 12px;
    }

    .footer-symbol {
        width: 40px;
        height: 50px;
    }

    .footer-logo-text strong {
        font-size: 21px;
    }

    .footer-logo-text span {
        font-size: 9px;
        letter-spacing: 1.8px;
    }
} 


/* ========================================
   SU DEPOLARI KARTLARI
   PREMIUM HOVER
======================================== */

.product-card {
    position: relative;
    overflow: hidden;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


/* Sağ alt teknik köşe çizgisi */
.product-card::after {
    content: "";
    position: absolute;

    right: 0;
    bottom: 0;

    width: 0;
    height: 3px;

    background: #1769FF;

    transition:
        width 0.4s cubic-bezier(.22, .61, .36, 1);

    pointer-events: none;
}


/* Hover */
.product-card:hover {
    transform: translateY(-6px);

    border-color: rgba(23, 105, 255, 0.28);

    box-shadow:
        0 18px 40px rgba(11, 23, 42, 0.10);
}


.product-card:hover::after {
    width: 85px;
}


/* Görsel */
.product-card-image {
    overflow: hidden;
}


.product-card-image img {
    transition:
        transform 0.55s cubic-bezier(.22, .61, .36, 1);
}


.product-card:hover .product-card-image img {
    transform: scale(1.035);
}


/* İncele bağlantısı */
.product-card a {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    transition:
        gap 0.3s ease,
        color 0.3s ease;
}


.product-card a span {
    transition:
        transform 0.3s ease;
}


.product-card:hover a {
    gap: 14px;
    color: #1769FF;
}


.product-card:hover a span {
    transform: translateX(3px);
}


/* ========================================
   TELEFON / TOUCH
======================================== */

.product-card.is-touching {
    transform: translateY(-4px);

    border-color: rgba(23, 105, 255, 0.28);

    box-shadow:
        0 14px 32px rgba(11, 23, 42, 0.09);
}


.product-card.is-touching::after {
    width: 70px;
}


.product-card.is-touching .product-card-image img {
    transform: scale(1.025);
}


.product-card.is-touching a {
    gap: 14px;
}


.product-card.is-touching a span {
    transform: translateX(3px);
} 

/* ========================================
   SU DEPOLARI
   KOYU TON + PREMIUM IŞIK
======================================== */

.product-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background: #ffffff;

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}


/* Sağ üstten çok hafif mavi ışık */
.product-card::before {
    content: "";

    position: absolute;

    width: 260px;
    height: 180px;

    top: -110px;
    right: -100px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(23, 105, 255, 0.16) 0%,
            rgba(23, 105, 255, 0.08) 35%,
            rgba(23, 105, 255, 0) 72%
        );

    opacity: 0;

    filter: blur(18px);

    pointer-events: none;

    z-index: 0;

    transition:
        opacity 0.5s ease,
        transform 0.6s ease;
}


/* Hover'da ışık belirginleşsin */
.product-card:hover::before {
    opacity: 1;
    transform: translate(-15px, 18px);
}


/* İçerik ışığın üzerinde */
.product-card-content {
    position: relative;
    z-index: 2;
}


/* Görsel */
.product-card-image {
    position: relative;
    z-index: 1;
    overflow: hidden;
}


/* Görsele hafif koyu ton */
.product-card-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(11, 23, 42, 0.02),
            rgba(11, 23, 42, 0.12)
        );

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.45s ease;
}


.product-card:hover .product-card-image::after {
    opacity: 1;
}


/* Görsel hareketi */
.product-card-image img {
    transition:
        transform 0.6s cubic-bezier(.22, .61, .36, 1),
        filter 0.45s ease;
}


.product-card:hover .product-card-image img {
    transform: scale(1.035);

    filter:
        contrast(1.03)
        saturate(0.96);
}


/* Hover gölgesi */
.product-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(23, 105, 255, 0.30);

    box-shadow:
        0 20px 45px rgba(11, 23, 42, 0.13),
        0 5px 18px rgba(23, 105, 255, 0.06);
}


/* ========================================
   MOBİL TOUCH
======================================== */

.product-card.is-touching::before {
    opacity: 1;
    transform: translate(-15px, 18px);
}


.product-card.is-touching .product-card-image::after {
    opacity: 1;
}


.product-card.is-touching .product-card-image img {
    transform: scale(1.025);

    filter:
        contrast(1.02)
        saturate(0.97);
}


.product-card.is-touching {
    transform: translateY(-4px);

    border-color:
        rgba(23, 105, 255, 0.28);

    box-shadow:
        0 16px 35px rgba(11, 23, 42, 0.11);
}  


/* ========================================
   SU DEPOLARI
   TEKNİK DETAY VURGUSU
======================================== */

/* Üst kenar ışığı */
.product-card {
    --card-accent-opacity: 0;
}

.product-card::marker {
    display: none;
}

.product-card:hover {
    --card-accent-opacity: 1;
}


/* Üstte ince mavi çizgi */
.product-card-content::before {
    content: "";

    position: absolute;

    top: -1px;
    left: 0;

    width: 0;
    height: 2px;

    background: linear-gradient(
        90deg,
        #0B172A 0%,
        #1769FF 55%,
        rgba(23, 105, 255, 0) 100%
    );

    opacity: 0;

    transition:
        width 0.45s cubic-bezier(.22, .61, .36, 1),
        opacity 0.35s ease;
}

.product-card:hover .product-card-content::before {
    width: 150px;
    opacity: 1;
}


/* Kart numarası */
.product-card-number {
    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.product-card:hover .product-card-number {
    color: #0B172A;

    transform: translateX(2px);
}


/* Mobil */
.product-card.is-touching .product-card-content::before {
    width: 120px;
    opacity: 1;
}

.product-card.is-touching .product-card-number {
    color: #0B172A;
    transform: translateX(2px);
} 


/* =========================================================
   PREMIUM SITE DETAILS
   SECTION REVEAL + HERO DETAIL + PROJECT HOVER
========================================================= */


/* =========================================================
   1. SECTION REVEAL
========================================================= */

.reveal-section {
    opacity: 0;
    transform: translateY(24px);

    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(.22, .61, .36, 1);
}

.reveal-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   2. HERO - HAFİF TEKNİK DOKU
========================================================= */

.hero {
    position: relative;
    overflow: hidden;
}


/* Çok hafif teknik grid */

.hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(23, 105, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(23, 105, 255, 0.035) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    opacity: 0.45;

    pointer-events: none;
}


/* Hero içeriği grid'in üzerinde */

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


/* Hero'nun sol tarafında çok hafif teknik çizgi */

.hero-content {
    position: relative;
}


.hero-content::before {
    content: "";

    position: absolute;

    left: -22px;
    top: 4px;

    width: 3px;
    height: 48px;

    background:
        linear-gradient(
            to bottom,
            #1769FF,
            rgba(23, 105, 255, 0)
        );

    opacity: 0.65;

    border-radius: 3px;
}


/* Hero görselinde ince premium çerçeve */

.hero-image-frame {
    position: relative;
}


.hero-image-frame::after {
    content: "";

    position: absolute;

    inset: 10px;

    border: 1px solid rgba(255, 255, 255, 0.16);

    border-radius: inherit;

    pointer-events: none;

    opacity: 0;

    transition:
        opacity 0.45s ease;
}


.hero-image-frame:hover::after {
    opacity: 1;
}


/* =========================================================
   3. PROJE FOTOĞRAFLARI
========================================================= */

.project-card {
    position: relative;
    overflow: hidden;

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}


.project-card-image {
    position: relative;
    overflow: hidden;
}


.project-card-image img {
    transition:
        transform 0.65s cubic-bezier(.22, .61, .36, 1),
        filter 0.45s ease;
}


/* Fotoğrafın üzerine hafif koyu katman */

.project-card-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(11, 23, 42, 0.04),
            rgba(11, 23, 42, 0.42)
        );

    opacity: 0;

    transition:
        opacity 0.45s ease;

    pointer-events: none;
}


/* Küçük proje etiketi */

.project-card-image::before {
    content: "PROJE DENEYİMİ  →";

    position: absolute;

    left: 22px;
    bottom: 20px;

    padding: 8px 12px;

    background: rgba(11, 23, 42, 0.86);

    color: #ffffff;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;

    border: 1px solid rgba(255, 255, 255, 0.16);

    border-radius: 4px;

    opacity: 0;
    transform: translateY(8px);

    transition:
        opacity 0.4s ease,
        transform 0.4s ease;

    pointer-events: none;

    z-index: 2;
}


.project-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 18px 38px rgba(11, 23, 42, 0.11);
}


.project-card:hover .project-card-image img {
    transform: scale(1.045);

    filter:
        contrast(1.04)
        saturate(0.95);
}


.project-card:hover .project-card-image::after {
    opacity: 1;
}


.project-card:hover .project-card-image::before {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   MOBİL TOUCH
========================================================= */

.project-card.is-touching {
    transform: translateY(-4px);

    box-shadow:
        0 14px 30px rgba(11, 23, 42, 0.10);
}


.project-card.is-touching .project-card-image img {
    transform: scale(1.03);
}


.project-card.is-touching .project-card-image::after {
    opacity: 1;
}


.project-card.is-touching .project-card-image::before {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   MOBİLDE HERO TEKNİK ÇİZGİYİ KORU
========================================================= */

@media (max-width: 767px) {

    .hero::before {
        background-size: 42px 42px;
        opacity: 0.30;
    }

    .hero-content::before {
        left: -12px;
        height: 38px;
        opacity: 0.5;
    }

    .project-card-image::before {
        left: 16px;
        bottom: 16px;

        font-size: 9px;

        padding: 7px 10px;
    }

} 

/* =========================================================
   AKGÜL SU DEPOLARI
   PREMIUM SITE-WIDE DETAILS
   ========================================================= */


/* =========================================================
   01 — ACTIVE NAVBAR
   ========================================================= */

.main-nav a {
    position: relative;
    transition: color 0.3s ease;
}

.main-nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;

    width: 0;
    height: 2px;

    border-radius: 2px;
    background: #1769FF;

    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.main-nav a:hover {
    color: #1769FF;
}

.main-nav a:hover::after,
.main-nav a.active::after {
    width: 22px;
}

.main-nav a.active {
    color: #1769FF;
}


/* =========================================================
   02 — HERO BUTTON PREMIUM HOVER
   ========================================================= */

.hero-button {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease;
}

.hero-button::before {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        110deg,
        transparent 25%,
        rgba(255,255,255,0.12) 50%,
        transparent 75%
    );

    transform: translateX(-120%);
    transition: transform 0.6s ease;

    pointer-events: none;
    z-index: -1;
}

.hero-button:hover::before {
    transform: translateX(120%);
}

.hero-button:hover {
    transform: translateY(-2px);
}

.hero-button.primary:hover {
    box-shadow:
        0 10px 24px rgba(23,105,255,0.20);
}

.hero-button.secondary:hover {
    box-shadow:
        0 8px 20px rgba(11,23,42,0.08);
}


/* =========================================================
   03 — 81 İL / EXPERIENCE STAT
   ========================================================= */

.experience-stat {
    position: relative;
    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.experience-stat::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;

    width: 3px;
    height: 0;

    background: linear-gradient(
        to bottom,
        #1769FF,
        rgba(23,105,255,0)
    );

    transition: height 0.4s ease;
}

.experience-stat:hover {
    transform: translateY(-4px);

    border-color:
        rgba(23,105,255,0.25);

    box-shadow:
        0 14px 30px rgba(11,23,42,0.08);
}

.experience-stat:hover::before {
    height: 100%;
}

.experience-stat strong,
.experience-stat .stat-number {
    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.experience-stat:hover strong,
.experience-stat:hover .stat-number {
    color: #1769FF;
    transform: translateX(2px);
}


/* =========================================================
   04 — SERVICE CARDS
   ========================================================= */

.service-card {
    position: relative;
    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


/* Teknik grid */

.service-card::after {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(23,105,255,0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(23,105,255,0.035) 1px,
            transparent 1px
        );

    background-size: 28px 28px;

    opacity: 0;

    transition:
        opacity 0.45s ease;

    pointer-events: none;
}


/* Teknik sembol */

.service-card-content {
    position: relative;
}

.service-card-content::after {
    position: absolute;

    right: 22px;
    top: 20px;

    width: 34px;
    height: 34px;

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

    border:
        1px solid rgba(23,105,255,0.16);

    border-radius: 6px;

    color: #1769FF;

    font-size: 17px;
    font-weight: 500;

    opacity: 0.65;

    transition:
        transform 0.35s ease,
        opacity 0.35s ease,
        background 0.35s ease;
}


/* Üretim */

.service-card:nth-child(1)
.service-card-content::after {
    content: "✦";
}


/* Satış */

.service-card:nth-child(2)
.service-card-content::after {
    content: "↗";
}


/* Montaj */

.service-card:nth-child(3)
.service-card-content::after {
    content: "⌗";
}


/* Bakım */

.service-card:nth-child(4)
.service-card-content::after {
    content: "↻";
}


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

    border-color:
        rgba(23,105,255,0.24);

    box-shadow:
        0 16px 34px rgba(11,23,42,0.09);
}

.service-card:hover::after {
    opacity: 1;
}

.service-card:hover
.service-card-content::after {
    opacity: 1;

    transform:
        translateY(-2px)
        rotate(4deg);

    background:
        rgba(23,105,255,0.045);
}


/* Touch */

.service-card.is-touching {
    transform: translateY(-4px);

    border-color:
        rgba(23,105,255,0.24);

    box-shadow:
        0 14px 30px rgba(11,23,42,0.09);
}

.service-card.is-touching::after {
    opacity: 1;
}

.service-card.is-touching
.service-card-content::after {
    opacity: 1;

    background:
        rgba(23,105,255,0.045);
}


/* =========================================================
   05 — SERVICE NUMBERS
   ========================================================= */

.service-card-number {
    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.service-card:hover
.service-card-number {
    color: #1769FF;
    transform: translateX(2px);
}

.service-card.is-touching
.service-card-number {
    color: #1769FF;
    transform: translateX(2px);
}


/* =========================================================
   06 — CONTACT ACTION CARDS
   ========================================================= */

.contact-item {
    position: relative;
    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.contact-item::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;

    width: 3px;
    height: 0;

    background: linear-gradient(
        to bottom,
        #1769FF,
        rgba(23,105,255,0)
    );

    transition: height 0.4s ease;
}

.contact-item:hover {
    transform: translateY(-4px);

    border-color:
        rgba(23,105,255,0.24);

    box-shadow:
        0 15px 32px rgba(11,23,42,0.08);
}

.contact-item:hover::before {
    height: 100%;
}

.contact-item-label {
    transition:
        color 0.3s ease;
}

.contact-item:hover
.contact-item-label {
    color: #1769FF;
}


/* =========================================================
   07 — COMMON BUTTON LANGUAGE
   ========================================================= */

.hero-button,
.product-card a,
.service-card a,
.hydrophore-card a,
.contact-item a,
.contact-whatsapp-cta a {
    transition:
        transform 0.3s ease,
        gap 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.product-card a span,
.service-card a span,
.hydrophore-card a span,
.contact-item a span,
.contact-whatsapp-cta a span {
    display: inline-block;

    transition:
        transform 0.3s ease;
}

.product-card a:hover span,
.service-card a:hover span,
.hydrophore-card a:hover span,
.contact-item a:hover span,
.contact-whatsapp-cta a:hover span {
    transform: translateX(4px);
}


/* =========================================================
   08 — FOOTER GIANT BRAND SYMBOL
   ========================================================= */

#site-footer {
    position: relative;
    overflow: hidden;
}

#site-footer::before {
    content: "";

    position: absolute;

    right: -90px;
    bottom: -150px;

    width: 420px;
    height: 420px;

    background-image:
        url("../assets/images/akgul-sembol.png");

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    opacity: 0.035;

    pointer-events: none;
}

#site-footer > * {
    position: relative;
    z-index: 2;
}


/* =========================================================
   09 — FAQ
   ========================================================= */

.faq-section {
    padding-top: 90px;
    padding-bottom: 90px;

    background: #F5F7FA;
}

.faq-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-item {
    position: relative;

    background: #FFFFFF;

    border:
        1px solid #E4E7EC;

    border-radius: 8px;

    overflow: hidden;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.faq-item:hover {
    border-color:
        rgba(23,105,255,0.20);

    box-shadow:
        0 10px 25px rgba(11,23,42,0.05);
}

.faq-question {
    width: 100%;

    padding:
        22px 58px 22px 24px;

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

    background: transparent;
    border: 0;

    color: #172033;

    font-family: inherit;
    font-size: 15px;
    font-weight: 600;

    text-align: left;

    cursor: pointer;

    position: relative;
}

.faq-question::after {
    content: "+";

    position: absolute;

    right: 22px;
    top: 50%;

    width: 25px;
    height: 25px;

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

    transform:
        translateY(-50%);

    color: #1769FF;

    font-size: 21px;
    font-weight: 300;

    transition:
        transform 0.3s ease,
        color 0.3s ease;
}

.faq-item.open
.faq-question::after {
    content: "−";

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

.faq-answer {
    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows 0.4s ease;
}

.faq-answer-inner {
    overflow: hidden;
}

.faq-answer p {
    margin: 0;

    padding:
        0 24px 22px;

    color: #667085;

    font-size: 14px;
    line-height: 1.75;
}

.faq-item.open
.faq-answer {
    grid-template-rows: 1fr;
}

.faq-item.open {
    border-color:
        rgba(23,105,255,0.22);

    box-shadow:
        0 12px 28px rgba(11,23,42,0.06);
}


/* =========================================================
   10 — MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .faq-section {
        padding-top: 65px;
        padding-bottom: 65px;
    }

    .faq-question {
        padding:
            18px 50px 18px 18px;

        font-size: 14px;
    }

    .faq-question::after {
        right: 16px;
    }

    .faq-answer p {
        padding:
            0 18px 18px;

        font-size: 13px;
    }

    #site-footer::before {
        right: -130px;
        bottom: -110px;

        width: 330px;
        height: 330px;

        opacity: 0.025;
    }

    .service-card-content::after {
        right: 16px;
        top: 16px;
    }
}


/* =========================================================
   11 — REDUCED MOTION
   ========================================================= */

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

    .hero-button,
    .product-card,
    .service-card,
    .hydrophore-card,
    .project-card,
    .contact-item,
    .faq-item,
    .experience-stat {
        transition: none !important;
    }

    .hero-button::before {
        display: none;
    }
} 


/* ========================================
   FOOTER KOLON DÜZENİ
   ======================================== */

.footer-container {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 50px;
    align-items: start;
}

.footer-brand {
    min-width: 0;
}

.footer-column {
    min-width: 0;
}


/* TABLET */

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

    .footer-container {
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 32px;
    }

    .footer-contact {
        grid-column: span 1;
    }

}


/* MOBİL */

@media (max-width: 767px) {

    .footer-container {
        grid-template-columns: 1fr;
        gap: 32px;
    }

} 

/* =========================================================
   FOOTER — KOMPAKT & DENGELİ DÜZEN
   ========================================================= */

#site-footer {
    padding-top: 0;
}


/* Ana footer alanı */

#site-footer .footer-container {
    width: min(calc(100% - 72px), 1320px);

    display: grid;
    grid-template-columns:
        1.45fr
        1fr
        1fr
        1.1fr;

    gap: 55px;

    margin: 0 auto;

    padding:
        32px 0
        26px;

    align-items: start;
}


/* Marka alanı */

#site-footer .footer-brand {
    max-width: 310px;
}


/* Logo */

#site-footer .footer-logo {
    display: inline-flex;
    flex-direction: row;
    align-items: center;

    gap: 14px;

    margin-bottom: 14px;
}


/* Logo sembolü */

#site-footer .footer-symbol {
    width: 72px;
    height: 72px;

    object-fit: contain;

    flex: 0 0 72px;
}


/* Logo yazısı */

#site-footer .footer-logo-text {
    display: flex;
    flex-direction: column;
}


#site-footer .footer-logo-text strong {
    color: #FFFFFF;

    font-size: 27px;
    line-height: 1;

    letter-spacing: -0.03em;
}


#site-footer .footer-logo-text span {
    margin-top: 6px;

    color: #6EA0FF;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.18em;
}


/* Marka açıklaması */

#site-footer .footer-brand > p {
    max-width: 300px;

    margin: 4px 0 0;

    color: rgba(255,255,255,0.66);

    font-size: 13px;

    line-height: 1.55;
}


/* Kolonlar */

#site-footer .footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


#site-footer .footer-column h3 {
    margin:
        3px 0
        16px;

    color: rgba(255,255,255,0.50);

    font-size: 10px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.18em;
}


#site-footer .footer-column a,
#site-footer .footer-column span {
    margin-bottom: 8px;

    color: rgba(255,255,255,0.78);

    font-size: 13px;

    line-height: 1.35;

    text-decoration: none;

    transition:
        color 180ms ease,
        transform 180ms ease;
}


#site-footer .footer-column a:hover {
    color: #FFFFFF;

    transform: translateX(3px);
}


/* Telefonlar */

#site-footer .footer-contact a {
    font-weight: 600;
}


/* WhatsApp */

#site-footer .footer-contact a:last-child {
    margin-top: 2px;

    color: #FFFFFF;

    font-weight: 700;
}


/* Alt çizgi ve copyright */

#site-footer .footer-bottom {
    width: min(calc(100% - 72px), 1320px);

    margin: 0 auto;

    padding:
        15px 0
        18px;

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

    color: rgba(255,255,255,0.40);

    font-size: 11px;
}


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

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

    #site-footer .footer-container {
        width: min(calc(100% - 48px), 1000px);

        grid-template-columns:
            1fr 1fr;

        gap:
            32px
            38px;

        padding:
            38px 0
            30px;
    }

    #site-footer .footer-brand {
        grid-column: 1 / -1;
        max-width: 100%;
    }

    #site-footer .footer-bottom {
        width: min(calc(100% - 48px), 1000px);
    }

}


/* =========================================================
   MOBİL
   ========================================================= */

@media (max-width: 767px) {

    #site-footer .footer-container {
        width: calc(100% - 32px);

        grid-template-columns: 1fr;

        gap: 28px;

        padding:
            34px 0
            28px;
    }


    #site-footer .footer-brand {
        max-width: 100%;
    }


    #site-footer .footer-symbol {
        width: 60px;
        height: 60px;

        flex-basis: 60px;
    }


    #site-footer .footer-logo {
        gap: 12px;
    }


    #site-footer .footer-logo-text strong {
        font-size: 24px;
    }


    #site-footer .footer-brand > p {
        max-width: 300px;

        font-size: 13px;
    }


    #site-footer .footer-bottom {
        width: calc(100% - 32px);

        padding:
            15px 0
            18px;
    }

} 

/* =========================================================
   EXPERIENCE STATISTICS
   ========================================================= */

.experience-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: 42px;
    background: rgba(23, 105, 255, 0.16);
    border: 1px solid rgba(23, 105, 255, 0.14);
    border-radius: 10px;
    overflow: hidden;
}

.experience-stat {
    position: relative;
    min-height: 118px;
    padding: 25px 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    background: #ffffff;
    transition:
        transform 0.35s ease,
        background-color 0.35s ease,
        box-shadow 0.35s ease;
}

.experience-stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 0;
    background: linear-gradient(
        to bottom,
        #1769FF,
        rgba(23, 105, 255, 0)
    );
    transition: height 0.4s ease;
}

.experience-stat:hover {
    transform: translateY(-3px);
    background: #fbfcff;
    box-shadow: 0 14px 30px rgba(11, 23, 42, 0.08);
    z-index: 2;
}

.experience-stat:hover::before {
    height: 100%;
}

.experience-stat-number {
    flex: 0 0 auto;
    min-width: 92px;
}

.experience-stat-number strong {
    display: block;
    color: #0B172A;
    font-size: 36px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.04em;
    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.experience-stat:hover .experience-stat-number strong {
    color: #1769FF;
    transform: translateX(2px);
}

.experience-stat-content {
    position: relative;
    padding-left: 20px;
    border-left: 1px solid #E4E7EC;
}

.experience-stat-content span {
    display: block;
    margin-bottom: 5px;
    color: #1769FF;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.experience-stat-content p {
    margin: 0;
    color: #667085;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* Touch / mobile interaction */
.experience-stat.is-touching {
    transform: translateY(-3px);
    background: #fbfcff;
    box-shadow: 0 12px 26px rgba(11, 23, 42, 0.08);
    z-index: 2;
}

.experience-stat.is-touching::before {
    height: 100%;
}

.experience-stat.is-touching .experience-stat-number strong {
    color: #1769FF;
    transform: translateX(2px);
}


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

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

    .experience-stats {
        gap: 1px;
        margin-top: 34px;
    }

    .experience-stat {
        min-height: 108px;
        padding: 22px 18px;
        gap: 14px;
    }

    .experience-stat-number {
        min-width: 70px;
    }

    .experience-stat-number strong {
        font-size: 30px;
    }

    .experience-stat-content {
        padding-left: 14px;
    }

    .experience-stat-content p {
        font-size: 10px;
    }
}


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

@media (max-width: 767px) {

    .experience-stats {
        grid-template-columns: 1fr;
        gap: 1px;
        margin-top: 30px;
        border-radius: 8px;
    }

    .experience-stat {
        min-height: 92px;
        padding: 20px 20px;
        gap: 18px;
    }

    .experience-stat-number {
        min-width: 88px;
    }

    .experience-stat-number strong {
        font-size: 30px;
    }

    .experience-stat-content {
        padding-left: 18px;
    }

    .experience-stat-content span {
        font-size: 9px;
    }

    .experience-stat-content p {
        font-size: 10px;
    }
} 

/* ==================================================
   EXPERIENCE STATS — FINAL
================================================== */

.experience-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    margin-top: 40px;
    background: #F8FAFC;
    border-top: 1px solid #E4E7EC;
    border-bottom: 1px solid #E4E7EC;
    box-sizing: border-box;
}

.experience-stat {
    position: relative;
    min-height: 102px;
    padding: 17px 30px;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    gap: 18px;

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.experience-stat:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 22px;
    right: 0;
    width: 1px;
    height: calc(100% - 44px);
    background: #E2E6EC;
}

.experience-stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 2px;
    height: 30px;
    transform: translateY(-50%);
    background: #1769FF;
    border-radius: 0 2px 2px 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.experience-stat:hover {
    background: rgba(23, 105, 255, 0.018);
    transform: translateY(-1px);
}

.experience-stat:hover::before {
    opacity: 1;
}


/* ANA DEĞER */

.experience-stat-number {
    flex: 0 0 auto;
    min-width: 78px;
}

.experience-stat-number strong {
    display: block;
    margin: 0;

    font-size: 28px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: -0.045em;

    color: #1769FF;
}


/* AÇIKLAMA */

.experience-stat-content {
    padding-left: 17px;
    border-left: 1px solid #E4E7EC;
}

.experience-stat-content span {
    display: block;
    margin-bottom: 4px;

    font-size: 9px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.19em;

    color: #1769FF;
}

.experience-stat-content p {
    margin: 0;

    font-size: 10px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0.025em;

    color: #667085;
}


/* YURT DIŞI */

.experience-stat:nth-child(3) .experience-stat-number {
    min-width: 124px;
}

.experience-stat:nth-child(3) .experience-stat-number strong {
    font-size: 20px;
    font-weight: 750;
    letter-spacing: -0.035em;
    color: #0B172A;
}


/* TABLET */

@media (max-width: 1000px) {

    .experience-stats {
        grid-template-columns: 1fr;
    }

    .experience-stat {
        min-height: 92px;
        padding: 18px 24px;
    }

    .experience-stat:not(:last-child)::after {
        top: auto;
        bottom: 0;
        right: 24px;
        width: calc(100% - 48px);
        height: 1px;
    }
}


/* MOBILE */

@media (max-width: 767px) {

    .experience-stats {
        margin-top: 34px;
    }

    .experience-stat {
        min-height: 88px;
        padding: 17px 20px;
        gap: 15px;
    }

    .experience-stat-number {
        min-width: 68px;
    }

    .experience-stat-number strong {
        font-size: 28px;
    }

    .experience-stat-content {
        padding-left: 14px;
    }

    .experience-stat-content span {
        font-size: 8px;
    }

    .experience-stat-content p {
        font-size: 10px;
    }

    .experience-stat:nth-child(3) .experience-stat-number {
        min-width: 96px;
    }

    .experience-stat:nth-child(3) .experience-stat-number strong {
        font-size: 19px;
    }
} 


/* ==================================================
   BİLGİ MERKEZİ / SSS / İLETİŞİM
   LARGE DESKTOP SIZE REFINEMENT
================================================== */

/* ---------- ORTA - BÜYÜK EKRAN ---------- */

@media (min-width: 1200px) {

    /* SECTION HEADINGS */

    .information-section .section-heading h2,
    .faq-section .section-heading h2,
    .contact-section .section-heading h2 {
        font-size: clamp(46px, 3.2vw, 58px);
        line-height: 1.03;
        letter-spacing: -0.045em;
    }

    .information-section .section-heading .section-description,
    .faq-section .section-heading .section-description,
    .contact-section .section-heading .section-description {
        max-width: 900px;
        font-size: 17px;
        line-height: 1.6;
        margin-top: 18px;
    }


    /* ---------- BİLGİ MERKEZİ ---------- */

    .information-section .section-heading {
        margin-bottom: 34px;
    }

    .information-section .faq-list {
        gap: 14px;
    }

    .information-section .faq-item {
        padding: 28px 32px;
        border-radius: 10px;
    }

    .information-section .faq-item h3 {
        font-size: 22px;
        line-height: 1.3;
        margin-bottom: 12px;
    }

    .information-section .faq-item p {
        font-size: 15px;
        line-height: 1.55;
    }


    /* ---------- SSS ---------- */

    .faq-section .section-heading {
        margin-bottom: 38px;
    }

    .faq-section .faq-wrapper {
        max-width: 1080px;
        margin-left: auto;
        margin-right: auto;
    }

    .faq-section .faq-item {
        border-radius: 10px;
    }

    .faq-section .faq-question {
        min-height: 78px;
        padding: 22px 30px;
        font-size: 18px;
        line-height: 1.35;
    }

    .faq-section .faq-answer-inner {
        padding: 0 30px 24px;
    }

    .faq-section .faq-answer-inner p {
        font-size: 15px;
        line-height: 1.6;
    }


    /* ---------- İLETİŞİM ---------- */

    .contact-section .section-heading {
        margin-bottom: 36px;
    }

    .contact-section .contact-content {
        gap: 28px;
    }

    .contact-section .contact-item,
    .contact-section .contact-detail-item {
        padding: 32px 36px;
    }

    .contact-section .contact-item h3,
    .contact-section .contact-detail-item h3 {
        font-size: 26px;
        line-height: 1.2;
        margin-bottom: 12px;
    }

    .contact-section .contact-item p,
    .contact-section .contact-detail-item p {
        font-size: 16px;
        line-height: 1.55;
    }

    .contact-section .contact-item-label {
        font-size: 10px;
        letter-spacing: 0.18em;
        margin-bottom: 14px;
    }

    .contact-section .contact-whatsapp-cta {
        padding: 36px 40px;
        margin-top: 28px;
    }

    .contact-section .contact-whatsapp-cta h3 {
        font-size: 28px;
        line-height: 1.2;
    }

    .contact-section .contact-whatsapp-cta p {
        font-size: 15px;
    }

}


/* ==================================================
   ÇOK BÜYÜK EKRANLAR
================================================== */

@media (min-width: 1600px) {

    .information-section .section-heading h2,
    .faq-section .section-heading h2,
    .contact-section .section-heading h2 {
        font-size: 54px;
    }

    .information-section .section-description,
    .faq-section .section-description,
    .contact-section .section-description {
        font-size: 16px;
    }

    .information-section .faq-item {
        padding: 26px 30px;
    }

    .information-section .faq-item h3 {
        font-size: 21px;
    }

    .information-section .faq-item p {
        font-size: 14px;
    }

    .faq-section .faq-wrapper {
        max-width: 1060px;
    }

    .faq-section .faq-question {
        min-height: 72px;
        font-size: 17px;
    }

    .contact-section .contact-item,
    .contact-section .contact-detail-item {
        padding: 30px 34px;
    }

    .contact-section .contact-item h3,
    .contact-section .contact-detail-item h3 {
        font-size: 24px;
    }

    .contact-section .contact-whatsapp-cta {
        padding: 32px 36px;
    }

    .contact-section .contact-whatsapp-cta h3 {
        font-size: 26px;
    }

}


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

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

    .information-section .section-heading h2,
    .faq-section .section-heading h2,
    .contact-section .section-heading h2 {
        font-size: 48px;
    }

    .information-section .faq-item {
        padding: 24px 28px;
    }

    .information-section .faq-item h3 {
        font-size: 20px;
    }

    .information-section .faq-item p,
    .faq-section .faq-answer-inner p,
    .contact-section .contact-item p,
    .contact-section .contact-detail-item p {
        font-size: 15px;
    }

} 

/* ==================================================
   BİLGİ MERKEZİ + SSS + İLETİŞİM
   COMPACT DESKTOP REFINEMENT
================================================== */


/* ==================================================
   1. BİLGİ MERKEZİ
================================================== */

@media (min-width: 1200px) {

    .information-section {
        padding-top: 68px;
        padding-bottom: 72px;
    }

    .information-section .section-heading {
        margin-bottom: 30px;
    }

    .information-section .section-eyebrow {
        font-size: 10px;
        letter-spacing: 0.18em;
        margin-bottom: 14px;
    }

    .information-section .section-heading h2 {
        max-width: 800px;

        font-size: 44px;
        line-height: 1.06;
        letter-spacing: -0.045em;
    }

    .information-section .section-heading .section-description {
        max-width: 760px;

        margin-top: 14px;

        font-size: 15px;
        line-height: 1.55;
    }


    /* FAQ KUTULARI */

    .information-section .faq-list {
        gap: 12px;
    }

    .information-section .faq-item {
        padding: 22px 28px;

        border-radius: 9px;
    }

    .information-section .faq-item h3 {
        margin: 0 0 9px;

        font-size: 19px;
        line-height: 1.3;
        letter-spacing: -0.02em;
    }

    .information-section .faq-item p {
        margin: 0;

        font-size: 14px;
        line-height: 1.5;
    }
}


/* ==================================================
   2. SSS
================================================== */

@media (min-width: 1200px) {

    .faq-section {
        padding-top: 68px;
        padding-bottom: 76px;
    }

    .faq-section .section-heading {
        margin-bottom: 34px;
    }

    .faq-section .section-eyebrow {
        font-size: 10px;
        letter-spacing: 0.18em;
        margin-bottom: 14px;
    }

    .faq-section .section-heading h2 {
        max-width: 700px;

        font-size: 44px;
        line-height: 1.04;
        letter-spacing: -0.045em;
    }

    .faq-section .section-heading .section-description {
        max-width: 760px;

        margin-top: 14px;

        font-size: 15px;
        line-height: 1.55;
    }


    /* SSS ALANI */

    .faq-section .faq-wrapper {
        max-width: 980px;
        margin-left: auto;
        margin-right: auto;
    }

    .faq-section .faq-list {
        gap: 12px;
    }

    .faq-section .faq-item {
        border-radius: 9px;
    }


    /* SORU */

    .faq-section .faq-question {
        min-height: 68px;

        padding: 20px 26px;

        font-size: 17px;
        line-height: 1.3;

        letter-spacing: -0.01em;
    }


    /* CEVAP */

    .faq-section .faq-answer-inner {
        padding: 0 26px 20px;
    }

    .faq-section .faq-answer-inner p {
        font-size: 14px;
        line-height: 1.55;
    }


    /* + İŞARETİ */

    .faq-section .faq-question::after {
        font-size: 20px;
    }
}


/* ==================================================
   3. İLETİŞİM
================================================== */

@media (min-width: 1200px) {

    .contact-section {
        padding-top: 68px;
        padding-bottom: 72px;
    }

    .contact-section .section-heading {
        margin-bottom: 32px;
    }

    .contact-section .section-eyebrow {
        font-size: 10px;
        letter-spacing: 0.18em;
        margin-bottom: 14px;
    }

    .contact-section .section-heading h2 {
        max-width: 600px;

        font-size: 44px;
        line-height: 1.04;
        letter-spacing: -0.045em;
    }

    .contact-section .section-heading .section-description {
        max-width: 900px;

        margin-top: 14px;

        font-size: 15px;
        line-height: 1.55;
    }


    /* ANA İLETİŞİM GRID */

    .contact-section .contact-content {
        gap: 22px;
    }


    /* KARTLAR */

    .contact-section .contact-item,
    .contact-section .contact-detail-item {
        padding: 28px 32px;

        border-radius: 10px;
    }


    /* ETİKET */

    .contact-section .contact-item-label {
        margin-bottom: 11px;

        font-size: 10px;
        line-height: 1;
        letter-spacing: 0.18em;
    }


    /* KART BAŞLIKLARI */

    .contact-section .contact-item h3,
    .contact-section .contact-detail-item h3 {
        margin-bottom: 10px;

        font-size: 22px;
        line-height: 1.25;
        letter-spacing: -0.025em;
    }


    /* KART AÇIKLAMALARI */

    .contact-section .contact-item p,
    .contact-section .contact-detail-item p {
        font-size: 14px;
        line-height: 1.5;
    }


    /* TELEFON NUMARALARI */

    .contact-section .contact-item a {
        font-size: 15px;
    }


    /* WHATSAPP BUTONU */

    .contact-section .contact-item .hero-button {
        min-height: 48px;

        padding: 14px 22px;

        font-size: 11px;
    }


    /* ALT WHATSAPP CTA */

    .contact-section .contact-whatsapp-cta {
        margin-top: 22px;

        padding: 30px 34px;

        border-radius: 10px;
    }

    .contact-section .contact-whatsapp-cta h3 {
        margin-bottom: 8px;

        font-size: 24px;
        line-height: 1.2;
        letter-spacing: -0.02em;
    }

    .contact-section .contact-whatsapp-cta p {
        font-size: 14px;
        line-height: 1.5;
    }

    .contact-section .contact-whatsapp-cta .hero-button {
        min-height: 48px;

        padding: 14px 22px;

        font-size: 11px;
    }
}


/* ==================================================
   ÇOK BÜYÜK EKRANLAR
================================================== */

@media (min-width: 1600px) {

    .information-section,
    .faq-section,
    .contact-section {
        padding-top: 62px;
        padding-bottom: 68px;
    }

    .information-section .section-heading h2,
    .faq-section .section-heading h2,
    .contact-section .section-heading h2 {
        font-size: 42px;
    }

    .information-section .section-heading .section-description,
    .faq-section .section-heading .section-description,
    .contact-section .section-heading .section-description {
        font-size: 14px;
    }

    .information-section .faq-item h3 {
        font-size: 18px;
    }

    .information-section .faq-item p {
        font-size: 13px;
    }

    .faq-section .faq-question {
        font-size: 16px;
        min-height: 64px;
    }

    .faq-section .faq-answer-inner p {
        font-size: 13px;
    }

    .contact-section .contact-item,
    .contact-section .contact-detail-item {
        padding: 26px 30px;
    }

    .contact-section .contact-item h3,
    .contact-section .contact-detail-item h3 {
        font-size: 21px;
    }

    .contact-section .contact-item p,
    .contact-section .contact-detail-item p {
        font-size: 13px;
    }

    .contact-section .contact-whatsapp-cta h3 {
        font-size: 23px;
    }
}


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

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

    .information-section,
    .faq-section,
    .contact-section {
        padding-top: 56px;
        padding-bottom: 60px;
    }

    .information-section .section-heading h2,
    .faq-section .section-heading h2,
    .contact-section .section-heading h2 {
        font-size: 40px;
        line-height: 1.05;
    }

    .information-section .section-heading .section-description,
    .faq-section .section-heading .section-description,
    .contact-section .section-heading .section-description {
        font-size: 14px;
    }

    .information-section .faq-item {
        padding: 22px 24px;
    }

    .information-section .faq-item h3 {
        font-size: 18px;
    }

    .information-section .faq-item p {
        font-size: 14px;
    }

    .faq-section .faq-wrapper {
        max-width: 900px;
    }

    .faq-section .faq-question {
        min-height: 64px;
        padding: 18px 24px;
        font-size: 16px;
    }

    .faq-section .faq-answer-inner {
        padding: 0 24px 18px;
    }

    .faq-section .faq-answer-inner p {
        font-size: 14px;
    }

    .contact-section .contact-item,
    .contact-section .contact-detail-item {
        padding: 24px 26px;
    }

    .contact-section .contact-item h3,
    .contact-section .contact-detail-item h3 {
        font-size: 21px;
    }

    .contact-section .contact-item p,
    .contact-section .contact-detail-item p {
        font-size: 14px;
    }
} 

/* ==================================================
   CONTACT SECTION — REFINED CORPORATE LAYOUT
================================================== */

@media (min-width: 1200px) {

    /* -----------------------------------------------
       ANA İLETİŞİM ALANI
    ----------------------------------------------- */

    .contact-section .contact-content {
        display: grid;
        grid-template-columns: 1.18fr 0.82fr;
        gap: 20px;

        align-items: start;
    }


    /* -----------------------------------------------
       SOL / SAĞ KOLONLAR
    ----------------------------------------------- */

    .contact-section .contact-info,
    .contact-section .contact-details {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;

        align-content: start;
        align-items: start;
    }


    /* -----------------------------------------------
       TÜM İLETİŞİM KARTLARI
    ----------------------------------------------- */

    .contact-section .contact-item,
    .contact-section .contact-detail-item {

        height: auto;
        min-height: 0;

        padding: 27px 32px;

        border-radius: 10px;

        box-sizing: border-box;

        align-self: start;

        background: #FFFFFF;

        border: 1px solid #E4E7EC;

        box-shadow:
            0 8px 22px rgba(11, 23, 42, 0.045);

        transition:
            transform 0.3s ease,
            border-color 0.3s ease,
            box-shadow 0.3s ease;
    }


    /* -----------------------------------------------
       KART HOVER
    ----------------------------------------------- */

    .contact-section .contact-item:hover,
    .contact-section .contact-detail-item:hover {

        transform: translateY(-3px);

        border-color: rgba(23, 105, 255, 0.22);

        box-shadow:
            0 14px 30px rgba(11, 23, 42, 0.075);
    }


    /* -----------------------------------------------
       KART ETİKETLERİ
    ----------------------------------------------- */

    .contact-section .contact-item-label {

        margin: 0 0 12px;

        font-size: 10px;
        line-height: 1;

        font-weight: 800;
        letter-spacing: 0.19em;

        color: #667085;
    }


    /* WHATSAPP ETİKETİ */

    .contact-section .contact-item:first-child .contact-item-label {

        color: #1769FF;
    }


    /* -----------------------------------------------
       KART BAŞLIKLARI
    ----------------------------------------------- */

    .contact-section .contact-item h3,
    .contact-section .contact-detail-item h3 {

        margin: 0 0 10px;

        font-size: 23px;
        line-height: 1.2;

        font-weight: 750;

        letter-spacing: -0.028em;

        color: #0B172A;
    }


    /* -----------------------------------------------
       AÇIKLAMA METİNLERİ
    ----------------------------------------------- */

    .contact-section .contact-item p,
    .contact-section .contact-detail-item p {

        margin: 0;

        font-size: 14px;
        line-height: 1.55;

        color: #667085;
    }


    /* -----------------------------------------------
       WHATSAPP KARTI
    ----------------------------------------------- */

    .contact-section .contact-item:first-child {

        padding-bottom: 26px;
    }


    .contact-section .contact-item:first-child .hero-button {

        margin-top: 20px;

        min-height: 46px;

        padding: 13px 21px;

        font-size: 10px;

        letter-spacing: 0.01em;
    }


    /* -----------------------------------------------
       TELEFON KARTI
    ----------------------------------------------- */

    .contact-section .contact-info .contact-item:nth-child(2) {

        padding-bottom: 25px;
    }


    .contact-section .contact-info .contact-item:nth-child(2) p + p {

        margin-top: 15px;
    }


    .contact-section .contact-info .contact-item strong {

        display: inline-block;

        margin-bottom: 3px;

        font-size: 14px;

        color: #667085;
    }


    .contact-section .contact-info .contact-item a[href^="tel"] {

        font-size: 15px;

        font-weight: 700;

        color: #1769FF;

        text-decoration: none;
    }


    /* -----------------------------------------------
       KONUM + HİZMET ALANI
    ----------------------------------------------- */

    .contact-section .contact-detail-item {

        padding-bottom: 27px;
    }


    .contact-section .contact-detail-item h3 {

        font-size: 22px;
    }


    /* -----------------------------------------------
       ALT WHATSAPP CTA
    ----------------------------------------------- */

    .contact-section .contact-whatsapp-cta {

        display: grid;

        grid-template-columns: 1.1fr 1fr auto;

        align-items: center;

        gap: 28px;

        margin-top: 22px;

        padding: 24px 30px;

        min-height: 88px;

        box-sizing: border-box;

        border-radius: 10px;

        background: #0B172A;

        box-shadow:
            0 14px 30px rgba(11, 23, 42, 0.10);
    }


    .contact-section .contact-whatsapp-cta h3 {

        margin: 0;

        font-size: 22px;
        line-height: 1.2;

        font-weight: 750;

        letter-spacing: -0.025em;

        color: #FFFFFF;
    }


    .contact-section .contact-whatsapp-cta p {

        margin: 0;

        font-size: 13px;
        line-height: 1.45;

        color: rgba(255, 255, 255, 0.70);
    }


    .contact-section .contact-whatsapp-cta .hero-button {

        min-height: 46px;

        padding: 13px 21px;

        font-size: 10px;

        white-space: nowrap;
    }

}


/* ==================================================
   EXTRA LARGE DESKTOP
================================================== */

@media (min-width: 1600px) {

    .contact-section .contact-content {

        grid-template-columns: 1.15fr 0.85fr;

        gap: 18px;
    }


    .contact-section .contact-info,
    .contact-section .contact-details {

        gap: 16px;
    }


    .contact-section .contact-item,
    .contact-section .contact-detail-item {

        padding: 24px 30px;
    }


    .contact-section .contact-item h3,
    .contact-section .contact-detail-item h3 {

        font-size: 21px;
    }


    .contact-section .contact-item p,
    .contact-section .contact-detail-item p {

        font-size: 13px;
    }


    .contact-section .contact-whatsapp-cta {

        min-height: 82px;

        padding: 22px 28px;

        gap: 24px;
    }


    .contact-section .contact-whatsapp-cta h3 {

        font-size: 21px;
    }


    .contact-section .contact-whatsapp-cta p {

        font-size: 13px;
    }

}


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

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

    .contact-section .contact-content {

        grid-template-columns: 1fr 1fr;

        gap: 16px;
    }


    .contact-section .contact-info,
    .contact-section .contact-details {

        gap: 16px;
    }


    .contact-section .contact-item,
    .contact-section .contact-detail-item {

        padding: 23px 25px;
    }


    .contact-section .contact-item h3,
    .contact-section .contact-detail-item h3 {

        font-size: 20px;
    }


    .contact-section .contact-item p,
    .contact-section .contact-detail-item p {

        font-size: 13px;
    }


    .contact-section .contact-whatsapp-cta {

        grid-template-columns: 1fr;

        gap: 12px;

        padding: 24px;
    }

}


/* ==================================================
   MOBİL — MEVCUT SİSTEM KORUNUR
================================================== */

@media (max-width: 767px) {

    .contact-section .contact-content {

        display: grid;

        grid-template-columns: 1fr;

        gap: 14px;
    }


    .contact-section .contact-info,
    .contact-section .contact-details {

        display: grid;

        grid-template-columns: 1fr;

        gap: 14px;
    }


    .contact-section .contact-item,
    .contact-section .contact-detail-item {

        min-height: 0;

        padding: 22px 20px;
    }


    .contact-section .contact-whatsapp-cta {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

        padding: 24px 20px;
    }

} 

/* ==================================================
   CONTACT SECTION — FINAL LAYOUT REFINEMENT
================================================== */

@media (min-width: 1200px) {

    /* ANA GRID */

    .contact-section .contact-content {
        display: grid;
        grid-template-columns: 1.18fr 0.82fr;
        gap: 18px;

        align-items: start;
    }


    /* NESTED YAPILARI GRID AKIŞINA DAHİL ET */

    .contact-section .contact-info,
    .contact-section .contact-details {
        display: contents;
    }


    /* TÜM 4 KART */

    .contact-section .contact-item,
    .contact-section .contact-detail-item {

        min-height: 0;
        height: auto;

        padding: 24px 28px;

        box-sizing: border-box;

        border-radius: 10px;

        background: #FFFFFF;

        border: 1px solid #E4E7EC;

        box-shadow:
            0 7px 20px rgba(11, 23, 42, 0.04);

        transition:
            transform 0.3s ease,
            border-color 0.3s ease,
            box-shadow 0.3s ease;
    }


    /* KART SIRALAMASI

       SOL ÜST   = WhatsApp
       SAĞ ÜST   = Konum
       SOL ALT   = Telefon
       SAĞ ALT   = Hizmet Alanı
    */

    .contact-section .contact-item:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .contact-section .contact-detail-item:nth-child(1) {
        grid-column: 2;
        grid-row: 1;
    }

    .contact-section .contact-item:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
    }

    .contact-section .contact-detail-item:nth-child(2) {
        grid-column: 2;
        grid-row: 2;
    }


    /* HOVER */

    .contact-section .contact-item:hover,
    .contact-section .contact-detail-item:hover {

        transform: translateY(-2px);

        border-color: rgba(23, 105, 255, 0.20);

        box-shadow:
            0 12px 26px rgba(11, 23, 42, 0.065);
    }


    /* SOL MAVİ VURGU */

    .contact-section .contact-item:first-of-type::before {
        content: "";

        position: absolute;

        left: 0;
        top: 24px;

        width: 2px;
        height: 34px;

        background: #1769FF;

        border-radius: 0 2px 2px 0;
    }


    /* ETİKETLER */

    .contact-section .contact-item-label {

        margin: 0 0 10px;

        font-size: 9px;
        line-height: 1;

        font-weight: 800;

        letter-spacing: 0.19em;

        color: #667085;
    }

    .contact-section .contact-item:first-of-type .contact-item-label {
        color: #1769FF;
    }


    /* BAŞLIKLAR */

    .contact-section .contact-item h3,
    .contact-section .contact-detail-item h3 {

        margin: 0 0 9px;

        font-size: 21px;
        line-height: 1.22;

        font-weight: 750;

        letter-spacing: -0.025em;

        color: #0B172A;
    }


    /* AÇIKLAMA */

    .contact-section .contact-item p,
    .contact-section .contact-detail-item p {

        margin: 0;

        font-size: 13px;
        line-height: 1.5;

        color: #667085;
    }


    /* WHATSAPP BUTONU */

    .contact-section .contact-item:first-of-type .hero-button {

        margin-top: 17px;

        min-height: 44px;

        padding: 12px 19px;

        font-size: 10px;

        letter-spacing: 0;
    }


    /* TELEFON */

    .contact-section .contact-item:nth-child(2) p + p {

        margin-top: 13px;
    }

    .contact-section .contact-item strong {

        display: inline-block;

        margin-bottom: 2px;

        font-size: 13px;

        color: #667085;
    }

    .contact-section .contact-item a[href^="tel"] {

        font-size: 14px;

        font-weight: 700;

        color: #1769FF;

        text-decoration: none;
    }


    /* ALT CTA */

    .contact-section .contact-whatsapp-cta {

        display: grid;

        grid-template-columns: 1fr auto auto;

        align-items: center;

        gap: 26px;

        margin-top: 18px;

        padding: 21px 27px;

        min-height: 76px;

        box-sizing: border-box;

        border-radius: 10px;

        background: #0B172A;

        box-shadow:
            0 12px 26px rgba(11, 23, 42, 0.09);
    }

    .contact-section .contact-whatsapp-cta h3 {

        margin: 0;

        font-size: 21px;
        line-height: 1.2;

        font-weight: 750;

        letter-spacing: -0.025em;

        color: #FFFFFF;
    }

    .contact-section .contact-whatsapp-cta p {

        margin: 0;

        font-size: 12px;
        line-height: 1.4;

        color: rgba(255, 255, 255, 0.68);
    }

    .contact-section .contact-whatsapp-cta .hero-button {

        min-height: 44px;

        padding: 12px 19px;

        font-size: 10px;

        white-space: nowrap;
    }
}


/* ==================================================
   EXTRA LARGE DESKTOP
================================================== */

@media (min-width: 1600px) {

    .contact-section .contact-content {
        gap: 16px;
    }

    .contact-section .contact-item,
    .contact-section .contact-detail-item {
        padding: 22px 26px;
    }

    .contact-section .contact-item h3,
    .contact-section .contact-detail-item h3 {
        font-size: 20px;
    }

    .contact-section .contact-item p,
    .contact-section .contact-detail-item p {
        font-size: 12px;
    }

    .contact-section .contact-whatsapp-cta {
        min-height: 72px;
        padding: 19px 25px;
    }

    .contact-section .contact-whatsapp-cta h3 {
        font-size: 20px;
    }

    .contact-section .contact-whatsapp-cta p {
        font-size: 12px;
    }
}


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

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

    .contact-section .contact-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .contact-section .contact-info,
    .contact-section .contact-details {
        display: contents;
    }

    .contact-section .contact-item,
    .contact-section .contact-detail-item {
        padding: 22px 24px;
    }

    .contact-section .contact-item h3,
    .contact-section .contact-detail-item h3 {
        font-size: 20px;
    }

    .contact-section .contact-item p,
    .contact-section .contact-detail-item p {
        font-size: 13px;
    }

    .contact-section .contact-whatsapp-cta {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 22px 24px;
    }
}


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

@media (max-width: 767px) {

    .contact-section .contact-content {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .contact-section .contact-info,
    .contact-section .contact-details {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .contact-section .contact-item,
    .contact-section .contact-detail-item {
        padding: 21px 20px;
    }

    .contact-section .contact-whatsapp-cta {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 22px 20px;
    }
} 


/* ==================================================
   CONTACT SECTION — BALANCED FINAL DESIGN
================================================== */

@media (min-width: 1200px) {

    /* --------------------------------------------------
       SECTION SPACING
    -------------------------------------------------- */

    .contact-section {
        padding-top: 60px;
        padding-bottom: 64px;
    }

    .contact-section .section-heading {
        margin-bottom: 30px;
    }

    .contact-section .section-eyebrow {
        margin-bottom: 12px;

        font-size: 10px;
        line-height: 1;
        letter-spacing: 0.18em;
    }

    .contact-section .section-heading h2 {
        max-width: 560px;

        font-size: 42px;
        line-height: 1.03;

        letter-spacing: -0.045em;
    }

    .contact-section .section-heading .section-description {
        max-width: 860px;

        margin-top: 12px;

        font-size: 14px;
        line-height: 1.55;
    }


    /* --------------------------------------------------
       MAIN CONTACT GRID
    -------------------------------------------------- */

    .contact-section .contact-content {
        display: grid;

        grid-template-columns: 1.18fr 0.82fr;

        grid-template-rows: repeat(2, 188px);

        column-gap: 18px;
        row-gap: 18px;

        align-items: stretch;
    }


    /* --------------------------------------------------
       NESTED WRAPPERS
    -------------------------------------------------- */

    .contact-section .contact-info,
    .contact-section .contact-details {
        display: contents;
    }


    /* --------------------------------------------------
       ALL FOUR CARDS
    -------------------------------------------------- */

    .contact-section .contact-item,
    .contact-section .contact-detail-item {

        position: relative;

        width: 100%;
        height: 188px;
        min-height: 188px;

        box-sizing: border-box;

        padding: 24px 28px;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        background: #FFFFFF;

        border: 1px solid #E4E7EC;
        border-radius: 10px;

        box-shadow:
            0 7px 20px rgba(11, 23, 42, 0.04);

        overflow: hidden;

        transition:
            transform 0.3s ease,
            border-color 0.3s ease,
            box-shadow 0.3s ease;
    }


    /* --------------------------------------------------
       CARD ORDER
    -------------------------------------------------- */

    .contact-section .contact-item:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .contact-section .contact-detail-item:nth-child(1) {
        grid-column: 2;
        grid-row: 1;
    }

    .contact-section .contact-item:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
    }

    .contact-section .contact-detail-item:nth-child(2) {
        grid-column: 2;
        grid-row: 2;
    }


    /* --------------------------------------------------
       SUBTLE BLUE ACCENT
    -------------------------------------------------- */

    .contact-section .contact-item:first-child::before,
    .contact-section .contact-detail-item:first-of-type::before {

        content: "";

        position: absolute;

        left: 0;
        top: 24px;

        width: 2px;
        height: 34px;

        background: #1769FF;

        border-radius: 0 2px 2px 0;

        opacity: 0.95;
    }


    /* --------------------------------------------------
       HOVER
    -------------------------------------------------- */

    .contact-section .contact-item:hover,
    .contact-section .contact-detail-item:hover {

        transform: translateY(-2px);

        border-color: rgba(23, 105, 255, 0.20);

        box-shadow:
            0 12px 26px rgba(11, 23, 42, 0.065);
    }


    /* --------------------------------------------------
       LABELS
    -------------------------------------------------- */

    .contact-section .contact-item-label {

        margin: 0 0 10px;

        font-size: 9px;
        line-height: 1;

        font-weight: 800;

        letter-spacing: 0.19em;

        color: #667085;
    }

    .contact-section .contact-item:first-child .contact-item-label {
        color: #1769FF;
    }


    /* --------------------------------------------------
       CARD HEADINGS
    -------------------------------------------------- */

    .contact-section .contact-item h3,
    .contact-section .contact-detail-item h3 {

        margin: 0 0 8px;

        font-size: 21px;
        line-height: 1.2;

        font-weight: 750;

        letter-spacing: -0.025em;

        color: #0B172A;
    }


    /* --------------------------------------------------
       CARD TEXT
    -------------------------------------------------- */

    .contact-section .contact-item > p,
    .contact-section .contact-detail-item > p {

        margin: 0;

        font-size: 13px;
        line-height: 1.45;

        color: #667085;
    }


    /* --------------------------------------------------
       WHATSAPP CARD
    -------------------------------------------------- */

    .contact-section .contact-item:first-child .hero-button {

        align-self: flex-start;

        margin-top: 17px;

        min-height: 42px;

        padding: 11px 18px;

        font-size: 10px;

        line-height: 1;

        white-space: nowrap;
    }


    /* --------------------------------------------------
       PHONE CARD
    -------------------------------------------------- */

    .contact-section .contact-info .contact-item:nth-child(2) p + p {

        margin-top: 10px;
    }

    .contact-section .contact-item strong {

        display: block;

        margin-bottom: 2px;

        font-size: 13px;

        line-height: 1.2;

        color: #667085;
    }

    .contact-section .contact-item a[href^="tel"] {

        font-size: 14px;
        line-height: 1.2;

        font-weight: 700;

        color: #1769FF;

        text-decoration: none;
    }


    /* --------------------------------------------------
       LOCATION
    -------------------------------------------------- */

    .contact-section .contact-detail-item h3 {

        font-size: 21px;
    }


    /* --------------------------------------------------
       SERVICE AREA
    -------------------------------------------------- */

    .contact-section .contact-details .contact-detail-item:nth-child(2) h3 {

        max-width: 360px;
    }


    /* --------------------------------------------------
       BOTTOM WHATSAPP CTA
    -------------------------------------------------- */

    .contact-section .contact-whatsapp-cta {

        display: grid;

        grid-template-columns: 1fr auto auto;

        align-items: center;

        column-gap: 28px;

        min-height: 76px;

        margin-top: 18px;

        padding: 20px 26px;

        box-sizing: border-box;

        border-radius: 10px;

        background: #0B172A;

        box-shadow:
            0 12px 28px rgba(11, 23, 42, 0.09);
    }


    .contact-section .contact-whatsapp-cta h3 {

        margin: 0;

        font-size: 21px;
        line-height: 1.2;

        font-weight: 750;

        letter-spacing: -0.025em;

        color: #FFFFFF;
    }


    .contact-section .contact-whatsapp-cta p {

        margin: 0;

        font-size: 12px;
        line-height: 1.4;

        color: rgba(255, 255, 255, 0.68);
    }


    .contact-section .contact-whatsapp-cta .hero-button {

        min-height: 43px;

        padding: 12px 19px;

        font-size: 10px;

        line-height: 1;

        white-space: nowrap;
    }
}


/* ==================================================
   EXTRA LARGE DESKTOP
================================================== */

@media (min-width: 1600px) {

    .contact-section {
        padding-top: 58px;
        padding-bottom: 62px;
    }

    .contact-section .contact-content {
        grid-template-rows: repeat(2, 178px);
        gap: 16px;
    }

    .contact-section .contact-item,
    .contact-section .contact-detail-item {

        height: 178px;
        min-height: 178px;

        padding: 22px 26px;
    }

    .contact-section .contact-item h3,
    .contact-section .contact-detail-item h3 {
        font-size: 20px;
    }

    .contact-section .contact-item > p,
    .contact-section .contact-detail-item > p {
        font-size: 12px;
    }

    .contact-section .contact-whatsapp-cta {
        min-height: 72px;

        margin-top: 16px;

        padding: 18px 24px;
    }

    .contact-section .contact-whatsapp-cta h3 {
        font-size: 20px;
    }
}


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

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

    .contact-section .contact-content {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 16px;
    }

    .contact-section .contact-info,
    .contact-section .contact-details {
        display: contents;
    }

    .contact-section .contact-item,
    .contact-section .contact-detail-item {

        height: 170px;
        min-height: 170px;

        padding: 22px 24px;
    }

    .contact-section .contact-item h3,
    .contact-section .contact-detail-item h3 {
        font-size: 20px;
    }

    .contact-section .contact-item > p,
    .contact-section .contact-detail-item > p {
        font-size: 13px;
    }

    .contact-section .contact-whatsapp-cta {

        display: grid;

        grid-template-columns: 1fr;

        gap: 12px;

        padding: 22px 24px;
    }
}


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

@media (max-width: 767px) {

    .contact-section .contact-content {

        display: grid;

        grid-template-columns: 1fr;

        gap: 14px;
    }

    .contact-section .contact-info,
    .contact-section .contact-details {

        display: grid;

        grid-template-columns: 1fr;

        gap: 14px;
    }

    .contact-section .contact-item,
    .contact-section .contact-detail-item {

        width: 100%;
        height: auto;
        min-height: 0;

        padding: 21px 20px;
    }

    .contact-section .contact-whatsapp-cta {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

        padding: 22px 20px;
    }
} 


/* =========================================================
   ÜRÜN DETAY FOTOĞRAFLARI
   ========================================================= */

.detail-image-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.detail-image-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #F5F7FA;
    border: 1px solid #E4E7EC;
}

.detail-image-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.detail-image-item:hover img {
    transform: scale(1.025);
}


@media (max-width: 767px) {

    .detail-image-gallery {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .detail-image-item img {
        height: 230px;
    }

}


@media (max-width: 390px) {

    .detail-image-item img {
        height: 210px;
    }

} 

/* ========================================
   SSS AÇILIR-KAPANIR SİSTEM
======================================== */

.faq-item .faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}

.faq-item .faq-answer-inner {
    overflow: hidden;
    min-height: 0;
}

.faq-item.is-open .faq-answer {
    grid-template-rows: 1fr;
}

.faq-item .faq-question {
    position: relative;
    cursor: pointer;
    width: 100%;
    text-align: left;
    padding-right: 55px;
}

/* Artı işareti */
.faq-item .faq-question::after {
    content: "+";
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 25px;
    font-weight: 300;
    line-height: 1;
    color: #1769FF;
    transition: transform 0.3s ease;
}

/* Açıkken eksi işareti */
.faq-item.is-open .faq-question::after {
    content: "−";
    transform: translateY(-50%);
}