/* ==========================================================================
   SKYZEN Flexible — tema
   ========================================================================== */
:root {
    --sky:        #0FA3C4;   /* turkuaz mavi */
    --sky-600:    #0A86A3;
    --mint:       #19C3A3;   /* turkuaz yeşil */
    --leaf:       #7ED957;   /* slogan yeşili */
    --ink:        #0B2A3A;   /* koyu petrol: yazılar */
    --ink-soft:   #47606C;
    --cloud:      #EFFBF8;   /* açık nane zemin */
    --foam:       #E3F6FA;
    --silver:     #C9D3D9;
    --white:      #FFFFFF;

    --grad:       linear-gradient(120deg, var(--sky) 0%, var(--mint) 60%, var(--leaf) 100%);
    --grad-soft:  linear-gradient(160deg, #E6F8FC 0%, #EAFBF4 100%);

    --radius:     24px;
    --radius-sm:  14px;
    --shadow:     0 18px 40px -18px rgba(11, 42, 58, .28);
    --shadow-sm:  0 8px 22px -12px rgba(11, 42, 58, .25);

    --font-head:  'Rubik', system-ui, sans-serif;
    --font-body:  'Nunito Sans', system-ui, sans-serif;

    --bs-body-font-family: var(--font-body);
    --bs-body-color: var(--ink);
    --bs-link-color-rgb: 15, 163, 196;
}

html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { background: var(--white); color: var(--ink); font-family: var(--font-body); overflow-x: hidden; }
h1, h2, h3, h4, .h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.12; }
img { max-width: 100%; height: auto; }
::selection { background: var(--mint); color: #fff; }

.text-gradient { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.text-muted-brand { color: var(--ink-soft); }

/* Butonlar */
.btn { font-weight: 800; white-space: nowrap; border-radius: 999px; transition: transform .25s ease, box-shadow .25s ease, background-position .4s ease; }
.btn-brand {
    color: #fff; border: 0;
    background: linear-gradient(120deg, var(--sky), var(--mint), var(--sky));
    background-size: 200% 100%;
    box-shadow: 0 12px 24px -12px rgba(15, 163, 196, .8);
}
.btn-brand:hover, .btn-brand:focus-visible { color: #fff; background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 16px 28px -12px rgba(25, 195, 163, .9); }
.btn-soft { color: var(--sky-600); background: var(--foam); border: 2px solid transparent; }
.btn-soft:hover, .btn-soft:focus-visible { color: var(--sky-600); background: #fff; border-color: var(--sky); transform: translateY(-2px); }
.btn-brand .btn-loading { display: none; }
.btn-brand.is-loading .btn-label { display: none; }
.btn-brand.is-loading .btn-loading { display: inline-flex; align-items: center; }

/* ==========================================================================
   Navigasyon
   ========================================================================== */
.site-nav { padding: 18px 0; transition: padding .3s ease, background .3s ease, box-shadow .3s ease; }
.site-nav .navbar-brand img { width: 190px; height: auto; transition: width .3s ease; }
.site-nav.is-scrolled { padding: 8px 0; background: rgba(255, 255, 255, .9); backdrop-filter: blur(12px); box-shadow: 0 6px 20px -14px rgba(11, 42, 58, .5); }
.site-nav.is-scrolled .navbar-brand img { width: 160px; }
.site-nav .nav-link { font-weight: 700; white-space: nowrap; color: var(--ink); padding: 8px 14px !important; border-radius: 999px; position: relative; }
.site-nav .nav-link:hover { color: var(--sky-600); }
.site-nav .nav-link.active { color: var(--sky-600); background: var(--foam); }

.navbar-toggler { border: 0; padding: 10px; display: flex; flex-direction: column; gap: 5px; box-shadow: none !important; }
.toggler-bar { width: 26px; height: 3px; border-radius: 3px; background: var(--ink); transition: transform .3s ease, opacity .3s ease; }
.toggler-bar:nth-child(2) { width: 18px; align-self: flex-end; }

/* Mobil menü: sağdan kayarak gelen tam ekran panel */
.mobile-menu.offcanvas-end {
    --bs-offcanvas-width: 100vw;
    --bs-offcanvas-transition: transform .55s cubic-bezier(.77, 0, .18, 1);
    border: 0;
    background: linear-gradient(150deg, var(--sky-600) 0%, var(--sky) 45%, var(--mint) 100%);
    color: #fff;
    overflow: hidden;
}
.mobile-menu-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; }
.mobile-menu-head img { width: 170px; height: auto; filter: brightness(0) invert(1); }
.mobile-menu-close { width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .18); color: #fff; font-size: 1.3rem; display: grid; place-items: center; transition: transform .4s ease, background .2s ease; }
.mobile-menu-close:hover { background: rgba(255, 255, 255, .3); transform: rotate(90deg); }
.mobile-menu-body { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 10px 24px 30px; overflow-x: hidden; overflow-x: clip; overflow-y: auto; }
.mobile-menu-links { list-style: none; padding: 0; margin: 0 0 26px; }
.mobile-menu-links a { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; color: #fff; text-decoration: none; font-family: var(--font-head); font-size: clamp(1.6rem, 7vw, 2.2rem); font-weight: 700; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.mobile-menu-links a i { font-size: 1.3rem; opacity: .6; transition: transform .25s ease, opacity .25s ease; }
.mobile-menu-links a:hover i, .mobile-menu-links a:focus-visible i { opacity: 1; transform: translateX(6px); }
.mobile-menu-cta { align-self: flex-start; color: var(--sky-600) !important; font-weight: 800; position: relative; z-index: 1; }
.mobile-menu-contact { display: grid; gap: 10px; margin-top: 22px; position: relative; z-index: 1; }
.mobile-menu-contact a { color: #fff; text-decoration: none; font-weight: 700; display: inline-flex; align-items: center; gap: 10px; }
.mobile-menu-mascot { position: absolute; z-index: 0; right: -24px; bottom: -36px; width: min(190px, 42vw); opacity: .95; pointer-events: none; transform: rotate(-8deg); -webkit-mask-image: linear-gradient(to top, transparent 0, #000 25%); mask-image: linear-gradient(to top, transparent 0, #000 25%); }

/* Menü açılınca içerik sırayla içeri girsin */
.mobile-menu-links li, .mobile-menu-cta, .mobile-menu-contact, .mobile-menu-mascot { opacity: 0; transform: translateX(40px); transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1); transition-delay: 0s; }
.mobile-menu.showing .mobile-menu-links li, .mobile-menu.show .mobile-menu-links li,
.mobile-menu.showing .mobile-menu-cta, .mobile-menu.show .mobile-menu-cta,
.mobile-menu.showing .mobile-menu-contact, .mobile-menu.show .mobile-menu-contact { opacity: 1; transform: none; transition-delay: calc(.2s + var(--i) * .06s); }
.mobile-menu.showing .mobile-menu-mascot, .mobile-menu.show .mobile-menu-mascot { opacity: .95; transform: rotate(-8deg); transition-delay: .5s; }

body.menu-open .float-actions, body.menu-open .to-top { opacity: 0; pointer-events: none; }
.offcanvas-backdrop { display: none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; min-height: 100vh; min-height: min(100vh, 960px); display: flex; align-items: center; padding: 130px 0 120px; background: var(--grad-soft); overflow: hidden; }
.hero-air { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; }
.blob-1 { width: 460px; height: 460px; background: #9BE6F2; top: -120px; right: -80px; animation: blob 14s ease-in-out infinite; }
.blob-2 { width: 380px; height: 380px; background: #B5F0C8; bottom: -100px; left: -120px; animation: blob 16s ease-in-out infinite reverse; }
@keyframes blob { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, 30px) scale(1.12); } }

.pill-tag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: #fff; color: var(--sky-600); font-weight: 800; box-shadow: var(--shadow-sm); margin-bottom: 20px; }
.pill-tag i { color: var(--leaf); }
.hero-title { font-size: clamp(2.3rem, 5vw, 3.9rem); font-weight: 800; margin-bottom: 18px; }
.hero-lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 520px; margin: 0 auto 30px; }
@media (min-width: 992px) { .hero-lead { margin-left: 0; } }

.hero-stats { list-style: none; display: flex; gap: 14px; padding: 0; margin: 36px 0 0; justify-content: center; flex-wrap: wrap; }
@media (min-width: 992px) { .hero-stats { justify-content: flex-start; } }
.hero-stats li { background: #fff; border-radius: var(--radius-sm); padding: 12px 20px; box-shadow: var(--shadow-sm); text-align: center; min-width: 110px; }
.hero-stats strong { display: block; font-family: var(--font-head); font-size: 1.7rem; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-stats span { font-size: .85rem; font-weight: 700; color: var(--ink-soft); }

.hero-visual { position: relative; max-width: 560px; margin: 0 auto; }
.hero-ring { position: absolute; inset: 8% 4% 4% 4%; border-radius: 50%; background: var(--grad); opacity: .18; animation: pulse 5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(.96); } 50% { transform: scale(1.04); } }
.hero-mascot { position: relative; z-index: 1; display: block; width: 100%;
    /* Fotoğraftan kesilen borunun düz kenarlarını yumuşat */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(to top, transparent 0, #000 16%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
    mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(to top, transparent 0, #000 16%); filter: drop-shadow(0 30px 30px rgba(11, 42, 58, .25)); animation: float 5s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }

.float-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #fff; font-weight: 800; font-size: .92rem; box-shadow: var(--shadow); white-space: nowrap; animation: float 6s ease-in-out infinite; }
.float-chip i { color: var(--mint); font-size: 1.1rem; }
.chip-1 { top: 6%; left: 0; animation-delay: -1s; }
.chip-2 { top: 38%; right: -4%; animation-delay: -3s; }
.chip-3 { bottom: 10%; left: 6%; animation-delay: -2s; }
@media (max-width: 575.98px) { .float-chip { font-size: .78rem; padding: 7px 12px; } .chip-2 { right: 0; } }


/* Oluklu boruyu andıran dalga ayraçlar */
.wave { position: absolute; left: 0; width: 100%; height: 70px; display: block; }
.wave path { fill: #fff; }
.wave-bottom { bottom: -1px; }
.wave-top { top: -1px; }

/* ==========================================================================
   Genel bölüm
   ========================================================================== */
.section { position: relative; padding: 110px 0; }
.section-head { max-width: 680px; margin-bottom: 50px; }
.section-kicker { display: inline-block; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; color: var(--sky-600); background: var(--foam); padding: 6px 14px; border-radius: 999px; margin-bottom: 14px; }
.section-kicker.light { background: rgba(255, 255, 255, .2); color: #fff; }
.section-title { font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-weight: 800; margin-bottom: 16px; }
.section-lead { color: var(--ink-soft); font-size: 1.1rem; }

/* Hakkımızda */
.about-mascot { max-width: 360px; width: 80%; filter: drop-shadow(0 24px 24px rgba(11, 42, 58, .2)); }
.speech-bubble { position: relative; background: var(--grad); color: #fff; padding: 30px 32px; border-radius: 34px; font-size: 1.05rem; line-height: 1.7; box-shadow: var(--shadow); }
.speech-bubble::before { content: ""; position: absolute; left: -18px; bottom: 34px; width: 40px; height: 40px; background: var(--sky); border-radius: 0 0 0 40px; transform: skewY(30deg); }
@media (max-width: 991.98px) { .speech-bubble::before { left: 50%; bottom: -16px; margin-left: -20px; transform: rotate(45deg); border-radius: 4px; background: #15b5b5; } }
.mini-card { display: flex; align-items: center; gap: 14px; background: var(--cloud); border-radius: var(--radius-sm); padding: 16px 18px; font-weight: 700; height: 100%; }
.mini-card i { font-size: 1.6rem; color: var(--mint); }

/* Neden SKYZEN */
.features { background: var(--cloud); }
.feature-card { background: #fff; border-radius: var(--radius); padding: 34px 26px; text-align: center; height: 100%; box-shadow: var(--shadow-sm); transition: transform .35s ease, box-shadow .35s ease; }
.feature-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.feature-icon { width: 86px; height: 86px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; font-size: 2.1rem; color: #fff; background: var(--grad); box-shadow: 0 0 0 10px var(--foam); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.feature-card:hover .feature-icon { transform: rotate(-12deg) scale(1.08); }
.feature-card h3 { font-size: 1.4rem; font-weight: 800; }
.feature-card p { color: var(--ink-soft); margin: 0; }

/* Ürünler */
.products { background: var(--white); }
.series-tabs { gap: 10px; margin-bottom: 18px; background: var(--cloud); padding: 8px; border-radius: 999px; width: fit-content; margin-left: auto; margin-right: auto; }
.series-tabs .nav-link { border-radius: 999px; font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; color: var(--ink); padding: 10px 26px; border: 0; background: transparent; transition: all .3s ease; }
.series-tabs .nav-link small { font-family: var(--font-body); font-size: .75rem; font-weight: 700; opacity: .7; margin-left: 4px; }
.series-tabs .nav-link.active { background: var(--grad); color: #fff; box-shadow: var(--shadow-sm); }
.series-intro { color: var(--ink-soft); margin-bottom: 34px; }

.product-card { background: #fff; border-radius: var(--radius); overflow: hidden; height: 100%; display: flex; flex-direction: column; border: 1px solid #E4EEF1; box-shadow: var(--shadow-sm); transition: transform .35s ease, box-shadow .35s ease; }
.product-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.product-media { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(160deg, #F3F7F9, #E8F1F4); overflow: hidden; display: grid; place-items: center; }
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; mix-blend-mode: multiply; }
.product-card:hover .product-media img { transform: scale(1.07); }
.product-badge { position: absolute; top: 14px; left: 14px; background: #fff; color: var(--sky-600); font-weight: 800; font-size: .8rem; padding: 6px 12px; border-radius: 999px; box-shadow: var(--shadow-sm); }
.product-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.product-body h3 { font-size: 1.35rem; font-weight: 800; margin-bottom: 6px; }
.product-body > p { color: var(--ink-soft); }
.product-specs { list-style: none; padding: 0; margin: 0 0 20px; flex: 1; }
.product-specs li { display: flex; flex-direction: column; padding: 10px 0; border-top: 1px dashed var(--silver); font-size: .92rem; }
.product-specs span { color: var(--ink-soft); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* Teknik */
.specs { background: var(--grad-soft); }
.spec-tile { background: #fff; border-radius: var(--radius-sm); padding: 22px 14px; text-align: center; height: 100%; box-shadow: var(--shadow-sm); transition: transform .3s ease; }
.spec-tile:hover { transform: translateY(-6px); }
.spec-tile i { font-size: 1.6rem; color: var(--mint); display: block; margin-bottom: 8px; }
.spec-tile strong { font-family: var(--font-head); font-size: 1.6rem; line-height: 1; }
.spec-tile small { font-weight: 800; color: var(--sky-600); margin-left: 3px; }
.spec-tile span { display: block; margin-top: 6px; color: var(--ink-soft); font-weight: 700; font-size: .88rem; }

.diameter-box { margin-top: 40px; background: #fff; border-radius: var(--radius); padding: 36px; box-shadow: var(--shadow); }
.duct-preview { height: 240px; display: grid; place-items: center; }
.duct-ring {
    --size: 90px;
    width: var(--size); height: var(--size); border-radius: 50%;
    background: repeating-radial-gradient(circle, #F4F7F9 0 4px, #C9D3D9 5px 7px, #E9EEF1 8px 10px);
    box-shadow: inset 0 0 0 6px #fff, 0 0 0 6px var(--sky), 0 18px 30px -10px rgba(11, 42, 58, .4);
    display: grid; place-items: center;
    transition: width .45s cubic-bezier(.34, 1.56, .64, 1), height .45s cubic-bezier(.34, 1.56, .64, 1);
}
.duct-core { width: 38%; height: 38%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3a5866, var(--ink)); }
.diameter-value { font-family: var(--font-head); font-size: 2.6rem; line-height: 1; margin-bottom: 10px; }
.diameter-value span { color: var(--sky); margin-right: 2px; }
.diameter-value small { font-size: 1rem; color: var(--ink-soft); }
.brand-range::-webkit-slider-thumb { background: var(--sky); width: 22px; height: 22px; margin-top: -7px; box-shadow: 0 0 0 5px rgba(15, 163, 196, .2); }
.brand-range::-moz-range-thumb { background: var(--sky); width: 22px; height: 22px; border: 0; box-shadow: 0 0 0 5px rgba(15, 163, 196, .2); }
.brand-range::-webkit-slider-runnable-track { background: var(--foam); height: 8px; }
.brand-range::-moz-range-track { background: var(--foam); height: 8px; }
.diameter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip { border: 2px solid var(--foam); background: #fff; color: var(--ink); font-weight: 800; font-size: .85rem; padding: 6px 12px; border-radius: 999px; transition: all .2s ease; }
.chip:hover { border-color: var(--mint); }
.chip.active { background: var(--grad); color: #fff; border-color: transparent; }

/* Kullanım */
.usage-card { position: relative; background: var(--cloud); border-radius: var(--radius); padding: 30px 24px; height: 100%; overflow: hidden; transition: transform .35s ease, background .35s ease; }
.usage-card::after { content: ""; position: absolute; width: 140px; height: 140px; border-radius: 50%; background: var(--grad); opacity: .12; right: -40px; bottom: -40px; transition: transform .5s ease; }
.usage-card:hover { transform: translateY(-6px); background: #fff; box-shadow: var(--shadow); }
.usage-card:hover::after { transform: scale(1.6); }
.usage-icon { width: 58px; height: 58px; border-radius: 18px; background: #fff; color: var(--sky); display: grid; place-items: center; font-size: 1.6rem; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.usage-card h3 { font-size: 1.3rem; font-weight: 800; }
.usage-card p { color: var(--ink-soft); margin: 0; position: relative; z-index: 1; }

/* Sertifikalar */
.certs { padding-top: 0; }
.certs-band { background: var(--cloud); border-radius: var(--radius); padding: 40px; }
.certs-band p { color: var(--ink-soft); }
.cert-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.cert-logo { background: #fff; border-radius: var(--radius-sm); padding: 14px; height: 130px; display: grid; place-items: center; box-shadow: var(--shadow-sm); transition: transform .3s ease; }
.cert-logo:hover { transform: translateY(-4px) rotate(-1deg); }
.cert-logo img { max-height: 100%; width: auto; border-radius: 8px; }

/* İletişim / teklif */
.contact { background: linear-gradient(140deg, var(--sky-600) 0%, var(--sky) 45%, var(--mint) 100%); color: #fff; padding-top: 150px; overflow: hidden; }
.contact::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: rgba(255, 255, 255, .08); top: 10%; left: -200px; }
.contact-lead { font-size: 1.1rem; opacity: .92; }
.contact-mascot { width: 220px; margin: 10px auto 16px; display: block; filter: drop-shadow(0 20px 20px rgba(0, 0, 0, .25)); animation: float 5.5s ease-in-out infinite; }
@media (min-width: 992px) { .contact-mascot { margin-left: 0; } }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.contact-list li { display: flex; align-items: center; gap: 12px; justify-content: center; font-weight: 700; }
@media (min-width: 992px) { .contact-list li { justify-content: flex-start; } }
.contact-list i { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .2); display: grid; place-items: center; font-size: 1.1rem; flex-shrink: 0; }
.contact-list a { color: #fff; text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }

.quote-form { background: #fff; color: var(--ink); border-radius: var(--radius); padding: 34px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .35); }
.quote-form .form-label { font-weight: 800; font-size: .9rem; }
.quote-form .form-control, .quote-form .form-select { border-radius: 12px; border: 2px solid #E1ECEF; padding: 11px 14px; background-color: #FAFDFD; transition: border-color .2s ease, box-shadow .2s ease; }
.quote-form .form-control:focus, .quote-form .form-select:focus { border-color: var(--mint); box-shadow: 0 0 0 4px rgba(25, 195, 163, .15); background-color: #fff; }
.quote-form .form-check-input:checked { background-color: var(--mint); border-color: var(--mint); }
.quote-form .form-check-label { font-size: .9rem; color: var(--ink-soft); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-weight: 800; }
.form-status.ok { color: #138a6f; }
.form-status.err { color: #c0392b; }
.quote-form.is-pulse { animation: pop .5s ease; }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.015); box-shadow: 0 0 0 6px rgba(126, 217, 87, .5); } 100% { transform: scale(1); } }

.map-wrap { position: relative; }
.factory-map { width: 100%; height: 440px; background: var(--foam); z-index: 0; }
.map-card-holder { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; }
.map-card { pointer-events: auto; display: flex; gap: 16px; align-items: flex-start; max-width: 380px; background: #fff; border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.map-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 6px; }
.map-card p { color: var(--ink-soft); margin-bottom: 14px; font-size: .95rem; }
.map-pin { flex-shrink: 0; width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; font-size: 1.4rem; color: #fff; background: var(--grad); animation: float 3.5s ease-in-out infinite; }
@media (max-width: 767.98px) {
    .factory-map { height: 320px; }
    .map-card-holder { position: static; padding: 0 16px; margin-top: -60px; }
    .map-card { max-width: none; position: relative; margin-bottom: 30px; }
}

/* Footer */
.site-footer { background: var(--ink); color: rgba(255, 255, 255, .75); padding: 60px 0 30px; }
.site-footer img { width: 210px; }
.site-footer a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.site-footer a:hover { color: var(--leaf); }
.site-footer hr { border-color: rgba(255, 255, 255, .15); margin: 30px 0 20px; opacity: 1; }
.footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 0; margin: 0 0 16px; font-weight: 700; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .1); display: grid; place-items: center; font-size: 1.1rem; }

/* Yüzen butonlar: başa dön solda, WhatsApp ve arama sağda */
.to-top { position: fixed; left: 20px; bottom: 20px; z-index: 1030; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.3rem; text-decoration: none; background: var(--ink); box-shadow: var(--shadow); opacity: 0; transform: translateY(20px); pointer-events: none; transition: transform .3s ease, opacity .3s ease; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { color: #fff; transform: translateY(-3px); }

.float-actions { position: fixed; right: 20px; bottom: 20px; z-index: 1030; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.fab { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.fab-icon { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 12px 24px -10px rgba(11, 42, 58, .55); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.fab-icon svg { width: 28px; height: 28px; }
.fab-wa .fab-icon { background: #25D366; }
.fab-wa .fab-icon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid #25D366; animation: fab-pulse 2.4s ease-out infinite; }
.fab-call .fab-icon { background: var(--grad); }
.fab-call .fab-icon svg { width: 23px; height: 23px; animation: ring 3.2s ease-in-out infinite; }
.fab-label { background: #fff; color: var(--ink); font-weight: 800; font-size: .9rem; padding: 9px 14px; border-radius: 999px; box-shadow: var(--shadow-sm); white-space: nowrap; opacity: 0; transform: translateX(10px); pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.fab:hover .fab-label, .fab:focus-visible .fab-label { opacity: 1; transform: none; }
.fab:hover .fab-icon { transform: scale(1.08) rotate(-6deg); }
@keyframes fab-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes ring { 0%, 70%, 100% { transform: rotate(0); } 74%, 82%, 90% { transform: rotate(-14deg); } 78%, 86%, 94% { transform: rotate(14deg); } }
@media (max-width: 575.98px) {
    .float-actions { right: 14px; bottom: 14px; }
    .to-top { left: 14px; bottom: 14px; }
    .fab-icon { width: 52px; height: 52px; }
    .fab-label { display: none; }
}

/* ==========================================================================
   Kaydırma animasyonları (JS yoksa içerik görünür kalır)
   ========================================================================== */
.js .reveal, .js .reveal-left { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .js .reveal, .js .reveal-left { opacity: 1; }
}

/* ==========================================================================
   İnce ayarlar
   ========================================================================== */
/* Ürünler bölümünün üst dalgası bir önceki bölümün (Neden SKYZEN) rengini alsın */
.products .wave path { fill: var(--cloud); }

/* Kesilmiş maskot fotoğraflarının alt kenarını yumuşat */
.about-mascot, .contact-mascot {
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 18%);
    mask-image: linear-gradient(to top, transparent 0, #000 18%);
}

.cert-logos { align-items: center; }
.cert-logo { height: 128px; padding: 12px 16px; max-width: 100%; }
.cert-logo img { height: 104px; width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 575.98px) { .cert-logos { gap: 12px; } .cert-logo { height: 96px; padding: 10px 12px; } .cert-logo img { height: 76px; } }

/* Rubik başlıklarda biraz sıkı aralıkla daha derli toplu duruyor */
h1, h2, h3, .h4 { letter-spacing: -.02em; }
.hero-title, .section-title { font-weight: 700; }

/* Haritadaki SKYZEN işareti */
.skyzen-marker { background: none; border: 0; }
.skyzen-marker-pin {
    position: absolute; left: 4px; top: 0; width: 48px; height: 48px;
    border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
    background: var(--grad); box-shadow: 0 10px 20px -6px rgba(11, 42, 58, .55);
    display: grid; place-items: center;
    animation: pin-drop .8s cubic-bezier(.34, 1.56, .64, 1) both;
}
.skyzen-marker-pin img { width: 30px; height: 30px; transform: rotate(45deg); border-radius: 50%; background: #fff; padding: 4px; }
.skyzen-marker-pulse { position: absolute; left: 16px; top: 56px; width: 24px; height: 10px; border-radius: 50%; background: rgba(15, 163, 196, .45); animation: fab-pulse 2s ease-out infinite; }
@keyframes pin-drop { from { transform: translateY(-40px) rotate(-45deg); opacity: 0; } to { transform: rotate(-45deg); opacity: 1; } }

.skyzen-popup .leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: var(--shadow); }
.skyzen-popup .leaflet-popup-content { margin: 12px 16px; font-family: var(--font-body); font-size: .88rem; line-height: 1.45; color: var(--ink-soft); }
.skyzen-popup strong { font-family: var(--font-head); font-size: 1rem; color: var(--ink); }
.skyzen-popup a { font-weight: 800; color: var(--sky-600); text-decoration: none; }
.leaflet-container { font-family: var(--font-body); }
.map-card-holder { z-index: 500; }
.factory-map .leaflet-tile-pane { filter: saturate(.75) hue-rotate(-8deg); }

/* Küçük ekran düzeltmeleri */
@media (max-width: 575.98px) {
    .hero { padding-top: 110px; }
    .hero-stats { gap: 8px; flex-wrap: nowrap; }
    .hero-stats li { min-width: 0; flex: 1; padding: 10px 8px; }
    .hero-stats strong { font-size: 1.4rem; }
    .hero .btn-lg { padding: 10px 20px; font-size: 1rem; }
    .series-tabs { flex-wrap: nowrap; gap: 4px; padding: 5px; }
    .series-tabs .nav-link { padding: 9px 14px; font-size: .95rem; }
    .series-tabs .nav-link small { display: none; }
    .section { padding: 80px 0; }
    .speech-bubble { padding: 22px 20px; }
    .diameter-box, .quote-form, .certs-band { padding: 24px 18px; }
}

/* Sık sorulan sorular */
.faq { background: var(--white); padding-top: 40px; }
.faq-intro { position: sticky; top: 110px; }
.faq-list .accordion-item { border: 0; background: var(--cloud); border-radius: var(--radius-sm) !important; margin-bottom: 12px; overflow: hidden; }
.faq-list .accordion-button { font-family: var(--font-head); font-weight: 600; font-size: 1.08rem; color: var(--ink); background: transparent; padding: 20px 22px; box-shadow: none !important; }
.faq-list .accordion-button:not(.collapsed) { color: var(--sky-600); background: transparent; }
.faq-list .accordion-button::after {
    width: 30px; height: 30px; background-size: 14px; background-position: center; border-radius: 50%; background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230A86A3'%3e%3cpath d='M8 2a.75.75 0 0 1 .75.75v4.5h4.5a.75.75 0 0 1 0 1.5h-4.5v4.5a.75.75 0 0 1-1.5 0v-4.5h-4.5a.75.75 0 0 1 0-1.5h4.5v-4.5A.75.75 0 0 1 8 2z'/%3e%3c/svg%3e");
    transition: transform .3s ease;
}
.faq-list .accordion-button:not(.collapsed)::after { transform: rotate(45deg); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230A86A3'%3e%3cpath d='M8 2a.75.75 0 0 1 .75.75v4.5h4.5a.75.75 0 0 1 0 1.5h-4.5v4.5a.75.75 0 0 1-1.5 0v-4.5h-4.5a.75.75 0 0 1 0-1.5h4.5v-4.5A.75.75 0 0 1 8 2z'/%3e%3c/svg%3e"); }
.faq-list .accordion-body { padding: 0 22px 22px; color: var(--ink-soft); line-height: 1.7; }
@media (max-width: 991.98px) { .faq-intro { position: static; text-align: center; } }
.mobile-menu-links a span { min-width: 0; overflow-wrap: anywhere; }

/* Bayilik */
.dealer { padding-top: 20px; }
.dealer-card { position: relative; overflow: hidden; border-radius: 32px; padding: 56px; color: #fff; background: linear-gradient(135deg, var(--ink) 0%, #0D3B4E 45%, var(--sky-600) 100%); box-shadow: var(--shadow); }
.dealer-glow { position: absolute; width: 520px; height: 520px; right: -140px; top: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(25, 195, 163, .45), transparent 65%); animation: blob 14s ease-in-out infinite; }
.dealer-lead { font-size: 1.08rem; opacity: .9; margin: 0; }
.dealer-btn { color: var(--sky-600) !important; }
.dealer-card .btn-outline-light:hover { color: var(--ink); }
.dealer-point { height: 100%; padding: 20px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); transition: transform .3s ease, background .3s ease; }
.dealer-point:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .13); }
.dealer-point i { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font-size: 1.3rem; background: var(--grad); margin-bottom: 12px; }
.dealer-point h3 { font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: 6px; }
.dealer-point p { margin: 0; font-size: .92rem; opacity: .82; }
@media (max-width: 575.98px) { .dealer-card { padding: 32px 20px; border-radius: 24px; } }

/* Fiyat listesi */
.prices { background: var(--white); }
.price-date { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 14px; border-radius: 999px; background: var(--cloud); color: var(--ink-soft); font-weight: 700; font-size: .85rem; }
.price-card { max-width: 980px; margin: 0 auto; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; border: 1px solid #E4EEF1; }
.price-table { width: 100%; border-collapse: collapse; }
.price-table thead th { background: var(--ink); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: .9rem; padding: 16px 22px; text-align: left; white-space: nowrap; }
.price-table .num { text-align: right; }
.price-chip { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .82rem; }
.chip-plain { background: rgba(15, 163, 196, .22); color: #8FE3F5; }
.chip-iso { background: rgba(126, 217, 87, .2); color: #B6F09A; }
.price-table tbody th, .price-table tbody td { padding: 14px 22px; border-top: 1px solid #EDF3F5; vertical-align: middle; }
.price-table tbody tr:nth-child(even) { background: #FAFDFD; }
.price-table tbody tr { transition: background .2s ease; }
.price-table tbody tr:hover { background: var(--cloud); }
.price-table tbody th { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; white-space: nowrap; }
.price-table tbody th .dia { color: var(--sky); margin-right: 2px; }
.price-table tbody th small { font-family: var(--font-body); font-weight: 600; font-size: .75rem; color: var(--ink-soft); }
.price-table td strong { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--sky-600); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-table td.iso strong { color: #2F9E4F; }
.price-table td small { display: block; font-size: .75rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-notes { max-width: 980px; margin: 22px auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; border-radius: var(--radius-sm); background: #FFF8E8; border-left: 4px solid #F0AD4E; }
.price-notes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-weight: 700; font-size: .9rem; color: #7A5410; }
.price-notes i { margin-right: 6px; }
@media (max-width: 575.98px) {
    .price-table thead th, .price-table tbody th, .price-table tbody td { padding: 12px 12px; }
    .price-table tbody th { font-size: 1rem; }
    .price-table td strong { font-size: 1rem; }
    .price-chip { padding: 3px 9px; font-size: .75rem; }
    .price-notes { padding: 16px; }
    .price-notes .btn { width: 100%; }
}

/* Oyun bandı (footer üstü) */
.game-band { padding: 70px 0 60px; background: var(--white); }
.game-card { position: relative; display: flex; align-items: center; gap: 28px; padding: 26px 36px 26px 190px; border-radius: 28px; background: linear-gradient(120deg, #FFF6DD 0%, #E6F8FC 55%, #E5F9EC 100%); border: 2px dashed rgba(15, 163, 196, .35); overflow: visible; }
.game-mascot { position: absolute; left: 22px; bottom: 0; width: 150px; transform: rotate(-6deg); transform-origin: bottom center; -webkit-mask-image: linear-gradient(to top, transparent 0, #000 22%); mask-image: linear-gradient(to top, transparent 0, #000 22%); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.game-card:hover .game-mascot { transform: rotate(4deg) translateY(-8px); }
.game-text { flex: 1; }
.game-tag { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: #B7791F; background: #FFF0C7; padding: 4px 12px; border-radius: 999px; margin-bottom: 8px; }
.game-text h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 700; margin-bottom: 4px; }
.game-text p { margin: 0; color: var(--ink-soft); }
.game-btn { flex-shrink: 0; }
@media (max-width: 767.98px) {
    .game-card { flex-direction: column; text-align: center; padding: 150px 22px 26px; }
    .game-mascot { left: 50%; top: -40px; bottom: auto; width: 130px; margin-left: -65px; }
    .game-btn { width: 100%; }
}