/* =====================================================================
   AquaQuality — 2026 UI Refresh (paylaşımlı override katmanı)
   Tüm sayfalarda style.css'ten SONRA yüklenir.
   Şeffaf + sticky header, sonsuz marka kayması, ürün kutucukları,
   modern footer, primary CTA butonu.
   ===================================================================== */

:root {
    --aq-primary: #0074ad;
    --aq-primary-light: #00b4eb;
    --aq-primary-dark: #005a86;
    --aq-grad: linear-gradient(90deg, #00b4eb 0%, #0070a9 100%);
    --aq-grad-hover: linear-gradient(90deg, #0070a9 0%, #00b4eb 100%);
    --aq-ink: #0b2a3d;
    --aq-purple: #a855f7;
    /* Referans buton (koyu lacivert → mavi) — tüm sitede primary buton */
    --aq-btn: linear-gradient(100deg, #16233f 0%, #223f6d 48%, #2f6cac 100%);
    --aq-btn-hover: linear-gradient(100deg, #1b2b4e 0%, #294c85 48%, #3a7fc4 100%);
}

/* =====================================================================
   PRIMARY BUTON — referans görsele göre (koyu lacivert → mavi, parlak kenar)
   Tüm .ss-btn butonları (Teklif Al, Bize Ulaşın, Gönder vb.)
   ===================================================================== */
.btn.ss-btn {
    background-image: var(--aq-btn) !important;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20), 0 14px 26px -12px rgba(16, 34, 63, .70);
    transition: background-image .4s ease, transform .3s ease, box-shadow .3s ease;
}
.btn.ss-btn:hover {
    background-image: var(--aq-btn-hover) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 20px 34px -12px rgba(16, 34, 63, .78);
    transform: translateY(-2px);
    color: #fff;
}

/* ---------------------------------------------------------------------
   1) HEADER — başlangıçta şeffaf (hero üstünde), scroll'da beyaz sticky
   --------------------------------------------------------------------- */
.header-three .menu-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin-bottom: 0;
    padding-top: 18px;
    padding-bottom: 18px;
    background-color: transparent;
    border-top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    transition: background-color .4s ease, padding .4s ease, box-shadow .4s ease;
    z-index: 999;
}

.header-area.header-three {
    position: relative;
    z-index: 999;
}

/* Logo iki katman: şeffafken beyaz, sticky'de renkli */
.header-three .logo a {
    display: inline-block;
    line-height: 1;
}
.header-three .logo img {
    max-height: 50px;
    width: auto;
    transition: opacity .3s ease;
}
#header-sticky .logo .aq-logo-light { display: none; }
#header-sticky:not(.sticky-menu) .logo .aq-logo-dark { display: none; }
#header-sticky:not(.sticky-menu) .logo .aq-logo-light { display: inline-block; }

/* Şeffaf durumda menü yazıları beyaz */
#header-sticky:not(.sticky-menu) .main-menu ul li a {
    color: #ffffff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .25);
}
#header-sticky:not(.sticky-menu) .main-menu ul li a:hover {
    color: var(--aq-primary-light);
}
/* Alt menü (dropdown) her zaman koyu yazı/beyaz zemin */
.header-three .main-menu ul li ul.submenu li a,
.header-three .main-menu ul li ul li a {
    color: var(--aq-primary) !important;
    text-shadow: none;
}

/* STICKY: beyaz, gölgeli, ince */
.header-three .menu-area.sticky-menu {
    position: fixed;
    top: 0;
    background: #ffffff;
    padding-top: 10px;
    padding-bottom: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .09);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
    animation: aqSlideDown .5s ease forwards;
}
.header-three .menu-area.sticky-menu .main-menu ul li a {
    color: var(--aq-primary);
    text-shadow: none;
}
.header-three .menu-area.sticky-menu .main-menu ul li a:hover {
    color: var(--aq-primary-light);
}

@keyframes aqSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

/* Mobil hamburger — CSS ile çizilmiş temiz 3 çizgili ikon (meanmenu iç
   yapısından bağımsız). Kapalıyken hamburger, tıklayınca menü açılır. */
.mean-container a.meanmenu-reveal {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 46px !important;
    height: 42px !important;
    padding: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
    background: var(--aq-btn);
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 20px -8px rgba(16, 34, 63, .6);
}
.mean-container a.meanmenu-reveal span { display: none !important; }
.mean-container a.meanmenu-reveal::before {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff;
}

/* ---------------------------------------------------------------------
   2) PRIMARY CTA — "TEKLİF AL!" afili buton
   --------------------------------------------------------------------- */
.btn.ss-btn.aq-cta {
    position: relative;
    overflow: hidden;
    border-radius: 50px;
    padding: 15px 34px;
    font-weight: 700;
    letter-spacing: .4px;
    background-image: var(--aq-btn);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20), 0 12px 26px -10px rgba(16, 34, 63, .7);
    transition: transform .3s ease, box-shadow .3s ease;
    z-index: 1;
}
.btn.ss-btn.aq-cta::after {
    content: "";
    position: absolute;
    top: 0;
    left: -130%;
    width: 65%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-20deg);
    transition: left .6s ease;
    z-index: -1;
}
.btn.ss-btn.aq-cta:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 18px 34px -10px rgba(16, 34, 63, .8);
    color: #fff;
}
.btn.ss-btn.aq-cta:hover::after { left: 140%; }

/* ---------------------------------------------------------------------
   3) MARKA LOGOLARI — sonsuz kayan şerit (marquee)
   --------------------------------------------------------------------- */
.aq-marquee-area {
    overflow: hidden;
}
.aq-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.aq-marquee__track {
    display: flex;
    width: max-content;
    animation: aqScroll 30s linear infinite;
}
.aq-marquee:hover .aq-marquee__track {
    animation-play-state: paused;
}
.aq-marquee__item {
    flex: 0 0 auto;
    padding: 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aq-marquee__item img {
    max-height: 55px;
    width: auto;
    filter: grayscale(100%);
    opacity: .5;
    transition: filter .4s ease, opacity .4s ease, transform .4s ease;
}
.aq-marquee__item img:hover {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.06);
}
@keyframes aqScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ---------------------------------------------------------------------
   4) ÜRÜN KARTLARI — hafif kutucuklar
   --------------------------------------------------------------------- */
.shop-area .row { row-gap: 4px; }
.shop-area .product {
    background: #ffffff;
    border: 1px solid #e9f1f6;
    border-radius: 18px;
    padding: 22px 22px 28px;
    height: 100%;
    box-shadow: 0 10px 30px rgba(11, 63, 99, .06);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.shop-area .product:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 45px rgba(0, 116, 173, .16);
    border-color: #cde9fb;
}
.shop-area .product__img { border-radius: 12px; overflow: hidden; }
.shop-area .product__img img { border-radius: 12px; width: 100%; }
.shop-area .product__content { padding-top: 22px !important; }
.shop-area .pro-title a { transition: color .3s ease; }
.shop-area .product:hover .pro-title a { color: var(--aq-primary); }

/* ---------------------------------------------------------------------
   5) FOOTER — modern degrade (aynı koyu tonlar) + üst aksan çizgisi
   --------------------------------------------------------------------- */
.footer-bg {
    position: relative;
    background-image: linear-gradient(155deg, #0a1f2e 0%, #123147 55%, #0a2a3f 100%) !important;
    background-color: #0a1f2e !important;
}
.footer-bg::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 4px;
    background: var(--aq-grad);
}
.footer-bg .footer-link a { transition: color .3s ease, padding-left .3s ease; }
.footer-bg .footer-link a:hover { color: var(--aq-primary-light); padding-left: 6px; }
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    margin-right: 8px;
    transition: background .3s ease, transform .3s ease;
}
.footer-social a:hover { background: var(--aq-grad); transform: translateY(-3px); }

/* Copyright — modern degrade şerit, aynı koyu renkler */
.copyright-wrap {
    background: linear-gradient(90deg, #08161f 0%, #0d2739 100%) !important;
    padding: 16px 0 !important;
}
.copyright-wrap a { color: #fff; text-decoration: none; }
.copyright-wrap a:hover { color: var(--aq-primary-light); }
.aq-copyright-heart { color: var(--aq-purple); font-style: normal; }

/* ---------------------------------------------------------------------
   6) Sabit WhatsApp / Telefon butonları — premium, ikon tabanlı
   --------------------------------------------------------------------- */
.whatsapp-fixed-btn,
.call-fixed-btn {
    position: fixed;
    left: 26px;
    z-index: 9999999;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 14px 30px -8px rgba(0, 0, 0, .35);
    transition: transform .35s cubic-bezier(.19,1,.22,1), box-shadow .35s ease, width .35s ease;
    overflow: hidden;
    white-space: nowrap;
}
.whatsapp-fixed-btn { bottom: 26px; background: linear-gradient(135deg, #29d366 0%, #0e9f6e 100%); }
.call-fixed-btn { bottom: 96px; background: linear-gradient(135deg, #16b1e3 0%, #0071ad 100%); }

/* Eski PNG görselleri gizle, yerine ikon kullan */
.whatsapp-fixed-btn img,
.call-fixed-btn img { display: none !important; }

.whatsapp-fixed-btn::before,
.call-fixed-btn::before {
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 24px;
    line-height: 1;
    flex: 0 0 auto;
}
.whatsapp-fixed-btn::before { content: "\f232"; font-family: "Font Awesome 5 Brands"; font-weight: 400; }
.call-fixed-btn::before { content: "\f095"; }

/* Nabız halkası */
.whatsapp-fixed-btn::after,
.call-fixed-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: -1;
    animation: aqPulseWa 2.2s ease-out infinite;
}
.whatsapp-fixed-btn::after { animation-name: aqPulseWa; }
.call-fixed-btn::after { animation-name: aqPulseCall; }
@keyframes aqPulseWa {
    0%   { box-shadow: 0 0 0 0 rgba(41, 211, 102, .5); }
    70%  { box-shadow: 0 0 0 16px rgba(41, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(41, 211, 102, 0); }
}
@keyframes aqPulseCall {
    0%   { box-shadow: 0 0 0 0 rgba(22, 177, 227, .5); }
    70%  { box-shadow: 0 0 0 16px rgba(22, 177, 227, 0); }
    100% { box-shadow: 0 0 0 0 rgba(22, 177, 227, 0); }
}
.whatsapp-fixed-btn:hover,
.call-fixed-btn:hover {
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 20px 38px -8px rgba(0, 0, 0, .4);
}
@media (prefers-reduced-motion: reduce) {
    .whatsapp-fixed-btn::after, .call-fixed-btn::after { animation: none; }
}
@media (max-width: 767px) {
    .whatsapp-fixed-btn, .call-fixed-btn { width: 52px; height: 52px; left: 18px; }
    .whatsapp-fixed-btn { bottom: 20px; }
    .call-fixed-btn { bottom: 84px; }
    .whatsapp-fixed-btn::before, .call-fixed-btn::before { font-size: 21px; }
}

/* ---------------------------------------------------------------------
   7) "20 Yıllık Deneyim" kutusu — buton rengiyle aynı (koyu lacivert→mavi)
   --------------------------------------------------------------------- */
.about-text,
.about-text.second-about,
.Bg {
    background-image: var(--aq-btn) !important;
}

/* ---------------------------------------------------------------------
   8) MOBİL — hamburger butonunu header çubuğunda dikey ortala
   --------------------------------------------------------------------- */
@media (max-width: 991px) {
    .header-three .second-menu { position: relative; }
    .header-three .second-menu .row { position: relative; }
    /* Bootstrap sütunu (position:relative) hamburger'a kapsayıcı oluyordu;
       statik yapınca buton logo satırına (row) göre dikey ortalanır. */
    .header-three .second-menu .row > .col-12 { position: static; }
    .header-three .mobile-menu { position: static; }
    .header-three .mean-container .mean-bar { position: static; }
    .header-three .mean-container a.meanmenu-reveal {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 15px;
        margin: auto 0 !important;
    }
}