/*
 * Modern site tipografisi — style.css içindeki Mokko değişkenlerinin üzerine yazar
 * (Plus Jakarta Sans, Google Fonts: mokko.blade.php).
 */
:root {
    --font-primary: "Plus Jakarta Sans", "Neue Montreal", system-ui, sans-serif;
    --font-heading: "Plus Jakarta Sans", "Neue Montreal", system-ui, sans-serif;
    --color-brand-heading: #18589e;
    --color-brand-nav: #18589e;
}

body[data-mokko-theme="1"] {
    font-family: var(--font-primary);
}

/* Site başlıkları — marka mavisi (#18589e); alt öğeler + gradient metin dahil */
body[data-mokko-theme='1'] .ms-main :is(
        .heading-title,
        .content__title,
        .ms-sp--title,
        .ms-rp--title,
        .ms-rp__title,
        h1.title,
        h2.sub-title,
        .ms-single-product_title,
        .ms-product .ms-product-title,
        .ms-tm--title,
        .post-title,
        .ms-p-content h3,
        .post-header .post-title,
        .woocommerce-products-header__title,
        .label-title,
        .banner-area.inner .heading-title
    ),
body[data-mokko-theme='1'] .ms-main :is(.content__title, .heading-title, h1.title, h2.sub-title) :is(
        .split-line,
        .split-word,
        .split-char,
        .word,
        .char
    ) {
    color: #18589e !important;
    -webkit-text-fill-color: #18589e !important;
}

/* Mokko: proje alanında gradient / şeffaf dolgu metin */
body[data-mokko-theme='1'] .ms-main .project-area .e-con-inner .content__title,
body[data-mokko-theme='1'] .ms-main .project-area .e-con-inner .content__title.rts-has-mask-fill > span {
    background-image: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    color: #18589e !important;
    -webkit-text-fill-color: #18589e !important;
}

body[data-mokko-theme='1'] .ms-main .banner-area.inner .heading-title strong span {
    color: #18589e !important;
    -webkit-text-fill-color: #18589e !important;
}

/* Gri küçük başlık etiketleri (style.css #747474 / #797979) */
body[data-mokko-theme='1'] .ms-main .ms-ah-wrapper .heading-title,
body[data-mokko-theme='1'] .ms-main .team-rules-area .team-rules-area-inner .top .heading-title,
body[data-mokko-theme='1'] .ms-main .team-area .team-area-inner .team-content .heading-title {
    color: #18589e !important;
    -webkit-text-fill-color: #18589e !important;
}

/* Hero / koyu parallax bandı: başlık metni beyaz kalsın */
body[data-mokko-theme='1'] .ms-hero.hero-video .ms-hero-title,
body[data-mokko-theme='1'] .ms-hero.welcome-hero .ms-hero-title,
body[data-mokko-theme='1'] .ms-hero.four .ms-hero-title,
body[data-mokko-theme='1'] .ms-footer .footer-title h2 {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

body[data-mokko-theme='1'] .ms-hero.hero-video .ms-hero-title,
body[data-mokko-theme='1'] .ms-hero.welcome-hero .ms-hero-title,
body[data-mokko-theme='1'] .ms-hero.four .ms-hc .ms-hero-title {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/*
 * Ana sayfa: Hizmetler bölümünden sonraki tam genişlik parallax bandı.
 * Jarallax geç yüklenmeden önce de arka plan ve yükseklik korunur.
 */
body.mokko-welcome .ms-page-content .ms-hero.four {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

body.mokko-welcome .ms-page-content .ms-hero.four > .ms-parallax.jarallax-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    min-height: 100%;
    width: 100%;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

body.mokko-welcome .ms-page-content .ms-hero.four > .ms-hc {
    position: relative;
    z-index: 1;
}

/* Inertia kökü: Mokko gövde düzenini bozmaması için */
#app {
    display: block;
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

/*
 * WooCommerce / ürünler: footer-effect ile gelen .ms-main { display: inline-block }
 * Bootstrap .row negatif marj + kolonları daraltıyor / kırıyordu.
 */
body.woocommerce-page[data-footer-effect='on'] .ms-main {
    display: block;
    width: 100%;
}

/* Sabit üst menü — içerik başlığın altında kalsın (8vh tek başına yetmiyor) */
body.woocommerce-page[data-menu='fixed'] main.ms-main {
    padding-top: var(--main-header-height-md);
}

/* padding-top ile birlikte çift dev boşluk olmasın diye başlık üst marjı sıkılaştırıldı */
body.woocommerce-page .ms-sp--header .ms-sp--title {
    margin-top: clamp(0.5rem, 2vh, 1.75rem);
    color: var(--color-brand-heading) !important;
}

/* Woo loop başlık satırı taşmasın */
body.woocommerce-page .woocommerce-content-loop-header {
    gap: 1rem;
    flex-wrap: wrap;
}

/* Ürün kartı görsel oranı (dış URL görselleri için) */
body.woocommerce-page .ms-product .ms-product-media img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1;
}

/* Ürünler: kategori pill hover / seçili — marka mavisi */
body.woocommerce-page .ms-woocommerce-product-category .product-category:hover,
body.woocommerce-page .woocommerce .product-category:hover,
body.woocommerce-page .ms-woocommerce-product-category .product-category.product-category--active,
body.woocommerce-page .woocommerce .product-category.product-category--active {
    background-color: #18589e !important;
}

body.woocommerce-page .woocommerce .product-category:hover .ms-product-media,
body.woocommerce-page .woocommerce .product-category.product-category--active .ms-product-media {
    background-color: #18589e !important;
    border-color: #18589e !important;
}

body.woocommerce-page .product-category--active {
    box-shadow: inset 0 0 0 2px #18589e;
    border-radius: 40px;
}

body[data-mokko-theme='1'].woocommerce-page .ms-woocommerce-product-category .product-category:hover .ms-product-content,
body[data-mokko-theme='1'].woocommerce-page .ms-woocommerce-product-category .product-category:hover .ms-product-title,
body[data-mokko-theme='1'].woocommerce-page .ms-woocommerce-product-category .product-category:hover .ms-product-title a,
body[data-mokko-theme='1'].woocommerce-page .ms-woocommerce-product-category .product-category:hover a,
body[data-mokko-theme='1'].woocommerce-page .ms-woocommerce-product-category .product-category.product-category--active .ms-product-content,
body[data-mokko-theme='1'].woocommerce-page .ms-woocommerce-product-category .product-category.product-category--active .ms-product-title,
body[data-mokko-theme='1'].woocommerce-page .ms-woocommerce-product-category .product-category.product-category--active .ms-product-title a,
body[data-mokko-theme='1'].woocommerce-page .ms-woocommerce-product-category .product-category.product-category--active a {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/*
 * Hero: yatay 16:9 çerçeve — kaynak 9:16 olsa bile cover ile doldurulur.
 * style.css içindeki .ms-hero { height: 100vh } kuralını geçersiz kılar.
 */
.ms-main .ms-page-content .ms-hero.hero-aspect-16x9 {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9;
    width: 100%;
}

/*
 * Ana sayfa (welcome): üst şeffaf header hero’nun üzerinde; ana blok için ekstra
 * padding-top uygulanmaz (tam genişlik kahraman bozulur). WooCommerce sayfaları
 * woocommerce-page kuralıyla ayrı yönetilir.
 */
body.mokko-welcome .ms-page-content section[id] {
    scroll-margin-top: calc(var(--main-header-height-md, 88px) + 0.75rem);
}

body.mokko-welcome footer#iletisim {
    scroll-margin-top: calc(var(--main-header-height-md, 88px) + 0.75rem);
}

/* Temanın .video-container 100vh kuralı 16:9 kahramanında taşma/çift yükseklik yapmasın */
body.mokko-welcome .ms-main .ms-page-content .ms-hero.hero-aspect-16x9.hero-video {
    position: relative;
    overflow: hidden;
}

body.mokko-welcome .ms-main .ms-page-content .ms-hero.hero-aspect-16x9.hero-video .video-container {
    height: 100% !important;
    min-height: 100%;
}

/* Blade’de Mokko’nun #goo SVG filtresi yok; geçersiz filter bazı tarayıcılarda başlığı gizler */
body.mokko-welcome .ms-posts--card .grid-item.has-post-thumbnail .post-content .post-header {
    filter: none;
}

/* Arama ikonu: sabit gri stroke karanlık temada kontrast kaybını önler */
body.mokko-welcome .main-header .header__search-icon {
    color: var(--color-contrast-higher);
}

body.mokko-welcome .main-header .header__search-icon svg path {
    stroke: currentColor;
}

/* Header logosu — masaüstü yatay, mobil kare ikon */
body[data-mokko-theme='1'] .main-header__logo .site-header-logo {
    width: auto;
    object-fit: contain;
    object-position: left center;
}

body[data-mokko-theme='1'] .main-header__logo .site-header-logo--desktop {
    display: block;
    height: 50px;
    max-width: 220px;
}

body[data-mokko-theme='1'] .main-header__logo .site-header-logo--mobile {
    display: none;
}

@media (max-width: 1023px) {
    body[data-mokko-theme='1'] .main-header__logo .site-header-logo--desktop {
        display: none !important;
    }

    body[data-mokko-theme='1'] .main-header__logo .site-header-logo--mobile {
        display: block !important;
        height: 50px;
        width: 50px;
        max-width: none;
    }
}

@media (max-width: 480px) {
    body[data-mokko-theme='1'] .main-header,
    body[data-mokko-theme='1'] .main-header__layout {
        width: calc(100% - 1.75rem);
        max-width: calc(100% - 1.75rem);
    }

    body[data-mokko-theme='1'] .main-header__logo .site-header-logo--mobile {
        height: 46px;
        width: 46px;
    }

    body[data-mokko-theme='1'] .container-menu .action-menu {
        height: 36px;
        min-height: 36px;
        padding-inline: 0.6rem;
    }
}

/* İç sayfalar: menu-center yatay nav kaldırıldı — anasayfa ile aynı slide menü */
body[data-mokko-theme='1'] .main-header.menu-right .main-header__nav {
    display: none !important;
}

/* Giriş / Kayıt / Panel: yalnızca slide menüde */
body[data-mokko-theme='1'] .header-auth-bar {
    display: none !important;
}

body[data-mokko-theme='1'] .menu-item-auth-divider {
    margin-top: 1rem;
    padding-top: 0;
    border-top: 1px solid rgb(255 255 255 / 18%);
    height: 0;
    list-style: none;
    pointer-events: none;
}

body[data-mokko-theme='1'] .ms-menu-wrapper .menu-item-auth a {
    font-weight: 600;
    font-size: 1.05em;
}

@media (max-width: 1023px) {
    /* Header şeridi kenarlardan hafif içeride — tam genişlik taşmasın */
    body[data-mokko-theme='1'] .main-header,
    body[data-mokko-theme='1'] .main-header__layout {
        width: calc(100% - 1.5rem);
        max-width: calc(100% - 1.5rem);
        margin-inline: auto;
        padding-inline: 0.35rem;
        box-sizing: border-box;
    }

    body[data-mokko-theme='1'] .main-header__inner {
        width: 100%;
        max-width: 100%;
        padding-inline: 0.15rem;
        box-sizing: border-box;
    }

    body[data-mokko-theme='1'] .main-header.menu-right .main-header__inner {
        align-items: center;
        gap: 0.25rem;
    }

    body[data-mokko-theme='1'] .main-header__widgets .main-header--widgets {
        flex-wrap: nowrap;
        gap: 0.1rem;
    }

    body[data-mokko-theme='1'] .main-header.menu-right .container-menu {
        flex-shrink: 0;
    }

    body[data-mokko-theme='1'] .main-header__logo .site-header-logo--mobile {
        height: 50px;
        width: 50px;
    }

    body[data-mokko-theme='1'] .header__search-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }

    body[data-mokko-theme='1'] .header__search-icon svg {
        width: 20px;
        height: 20px;
    }

    body[data-mokko-theme='1'] .container-menu .action-menu {
        height: 38px;
        min-height: 38px;
        padding-inline: 0.75rem;
    }

    body[data-mokko-theme='1'] .container-menu .menu-text span {
        font-size: 0.875rem;
    }

    body.mokko-welcome .move .ms-menu-wrapper,
    body[data-mokko-theme='1'] .main-header.menu-right .ms-menu-wrapper {
        right: 0.65rem;
        top: 0.4rem;
    }

    body[data-mokko-theme='1'] .header-widget-cart {
        display: none !important;
    }
}

/*
 * Ana sayfa hero: metin üst menünün altında kalsın; mobilde 16:9 çok kısa olduğu için
 * yükseklik artırılır ve içerik header altından başlar.
 */
body.mokko-welcome .ms-hero.welcome-hero {
    position: relative;
    overflow: hidden;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

body.mokko-welcome .ms-hero.welcome-hero .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-color: rgb(0 0 0 / 40%);
    pointer-events: none;
}

body.mokko-welcome .ms-hero.welcome-hero .video-container {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}

body.mokko-welcome .ms-hero.welcome-hero .background-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

body.mokko-welcome .ms-hero.welcome-hero .welcome-hero__content .ms-hc--inner .ms-hero-title {
    font-size: clamp(2rem, 4.25vw, 3.25rem) !important;
    line-height: 1.12 !important;
    max-width: 100% !important;
    margin-inline: auto;
    padding: 0 1rem;
    text-align: center !important;
}

body.mokko-welcome .ms-hero.welcome-hero .welcome-hero__content .ms-hc--inner {
    width: 100%;
    text-align: center;
}

body.mokko-welcome .ms-hero.welcome-hero .welcome-hero__subtitle {
    margin: 1.25rem auto 0;
    max-width: 36rem;
    padding: 0 0.5rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.55;
    font-weight: 400;
    color: #fff;
    text-transform: none;
    opacity: 0.95;
    text-shadow:
        0 1px 3px rgb(0 0 0 / 45%),
        0 0 1.25rem rgb(0 0 0 / 25%);
}

@media (min-width: 1024px) {
    body.mokko-welcome .ms-hero.welcome-hero.hero-video .welcome-hero__content {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 3;
        width: 100%;
        max-width: 48rem;
        margin-inline: auto;
        padding: 1.5rem 1.25rem;
        box-sizing: border-box;
        text-align: center;
    }
}

@media (max-width: 1023px) {
    body.mokko-welcome .ms-main .ms-page-content .ms-hero.welcome-hero.hero-video.hero-aspect-16x9 {
        aspect-ratio: auto;
        min-height: 100svh;
        height: auto !important;
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-end;
        padding-top: calc(var(--main-header-height-md, 88px) + 1rem);
        padding-bottom: 2.5rem;
        box-sizing: border-box;
    }

    /* style.css .hero-video .ms-hc { top:50% } mobilde başlığı kesiyor */
    body.mokko-welcome .ms-hero.welcome-hero.hero-video .ms-hc.welcome-hero__content,
    body.mokko-welcome .ms-hero.welcome-hero.hero-video .welcome-hero__content {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        z-index: 3;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 1rem 0.25rem !important;
        box-sizing: border-box;
    }

    body.mokko-welcome .ms-hero.welcome-hero.hero-video .ms-hc .ms-hc--inner .ms-hero-title {
        max-width: 100% !important;
        font-size: clamp(1.35rem, 6.25vw, 2rem) !important;
        line-height: 1.15 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    body.mokko-welcome .ms-hero.welcome-hero .welcome-hero__subtitle {
        font-size: 0.9375rem;
        line-height: 1.5;
        margin-top: 0.875rem;
        padding: 0 0.25rem;
    }
}

@media (max-width: 390px) {
    body.mokko-welcome .ms-main .ms-page-content .ms-hero.welcome-hero.hero-video.hero-aspect-16x9 {
        padding-bottom: 2rem;
    }

    body.mokko-welcome .ms-hero.welcome-hero.hero-video .ms-hc .ms-hc--inner .ms-hero-title {
        font-size: clamp(1.2rem, 7vw, 1.65rem) !important;
    }
}

/*
 * Başlık rengi — style.css sonrası en yüksek öncelik (deploy / önbellek sonrası da geçerli).
 */
body[data-mokko-theme='1'] .ms-main .ms-ah-wrapper .content__title.hero-title,
body[data-mokko-theme='1'] .ms-main .ms-page-content .content__title,
body[data-mokko-theme='1'] .ms-main .team-rules-area .team-rules-area-inner .top h1.title,
body[data-mokko-theme='1'] .ms-main .team-area .team-area-inner .team-content h1.title,
body[data-mokko-theme='1'] .ms-main .banner-area.inner h1.heading-title {
    color: #18589e !important;
    -webkit-text-fill-color: #18589e !important;
}

body[data-mokko-theme='1'] .ms-main .ms-ah-wrapper .content__title.hero-title .split-line,
body[data-mokko-theme='1'] .ms-main .ms-ah-wrapper .content__title.hero-title .split-char {
    color: #18589e !important;
    -webkit-text-fill-color: #18589e !important;
}

/* Ürünler kategori pill — mavi zemin üzerinde beyaz yazı (başlık rengi kuralından sonra) */
body[data-mokko-theme='1'].woocommerce-page .ms-woocommerce-product-category .product-category:is(:hover, .product-category--active) :is(.ms-product-content, .ms-product-title, .ms-product-title a, a) {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/*
 * Yalnızca «Menü» butonu (.action-menu) ve açılan menü paneli (.ms-menu-wrapper) — #18589e.
 * Header şeridi, logo, arama ve giriş alanı dokunulmaz.
 */
body[data-mokko-theme='1'] .action-menu {
    background-color: var(--color-brand-nav) !important;
    color: #fff !important;
}

body[data-mokko-theme='1'] .action-menu .menu-line {
    background-color: #fff !important;
}

body[data-mokko-theme='1'] .ms-menu-wrapper {
    background-color: var(--color-brand-nav) !important;
}

body[data-mokko-theme='1'] .ms-menu-wrapper .ms-menu .ms-menu-container .menu-item a {
    color: rgb(255 255 255 / 92%) !important;
}

body[data-mokko-theme='1'] .ms-menu-wrapper .ms-menu .ms-menu-container .menu-item a:hover,
body[data-mokko-theme='1'] .ms-menu-wrapper .ms-menu .menu-item-has-children > .sub-menu.show > li > a,
body[data-mokko-theme='1'] .ms-menu-wrapper .ms-menu .menu-item-has-children > .sub-menu .sub-menu.show > li > a {
    color: #fff !important;
    border-left-color: #fff !important;
}

body[data-mokko-theme='1'] .ms-menu-wrapper .ms-menu-container .menu-title a,
body[data-mokko-theme='1'] .ms-menu-wrapper .ms-menu-container .menu-back a {
    color: rgb(255 255 255 / 75%) !important;
}

/* Hizmetler accordion — React kontrollü, kapalı panel gizli */
.mokko-services-accordion .ms_ac--content[hidden] {
    display: none !important;
}

.mokko-services-accordion__trigger {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: inherit;
    font: inherit;
    cursor: pointer;
}

.mokko-services-accordion .ms_ac_panel.is-open .accordion_icon--open svg {
    transform: rotate(180deg);
    transition: transform 0.25s ease;
}

button.header__search-icon {
    border: none;
    padding: 0;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    line-height: inherit;
}

/* Arama overlay — body portal (React) */
body[data-mokko-theme='1'] .header__search-modal.modal--is-visible {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 9999 !important;
}

/* Ürünler: kategori şeridi tam genişlik satır */
body.woocommerce-page .ms-woo-feed > .col-12 {
    width: 100%;
}

body.woocommerce-page .ms-woocommerce-product-category {
    width: 100%;
    flex-wrap: wrap;
    gap: 0.5rem;
}

body.woocommerce-page .ms-woo-feed .ms-product .ms-product-media img {
    width: 100%;
    height: auto;
    display: block;
}

/* İletişim: Instagram kullanıcı adı ikon yanında */
body[data-mokko-theme='1'] .contact-area.contact-2 .ms-s-w {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

body[data-mokko-theme='1'] .contact-area.contact-2 .ms-contact-instagram-handle {
    color: var(--color-heading-1, #18589e);
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: none;
}

body[data-mokko-theme='1'] .contact-area.contact-2 .ms-contact-instagram-handle:hover {
    text-decoration: underline;
}

/* WhatsApp FAB — tüm Mokko sayfalarında (mokko.blade.php) */
body[data-mokko-theme='1'] .mokko-whatsapp-fab {
    position: fixed;
    left: 1.25rem;
    bottom: 1.25rem;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    background-color: #25d366;
    color: #fff;
    text-decoration: none;
    box-shadow:
        0 4px 14px rgb(37 211 102 / 45%),
        0 2px 6px rgb(0 0 0 / 12%);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

body[data-mokko-theme='1'] .mokko-whatsapp-fab i {
    font-size: 1.75rem;
    line-height: 1;
}

body[data-mokko-theme='1'] .mokko-whatsapp-fab:hover {
    color: #fff;
    background-color: #1ebe57;
    transform: translateY(-2px);
    box-shadow:
        0 8px 20px rgb(37 211 102 / 50%),
        0 4px 10px rgb(0 0 0 / 15%);
}

body[data-mokko-theme='1'] .mokko-whatsapp-fab:focus-visible {
    outline: 2px solid #18589e;
    outline-offset: 3px;
}

@media (min-width: 768px) {
    body[data-mokko-theme='1'] .mokko-whatsapp-fab {
        left: 1.5rem;
        bottom: 5.5rem;
    }
}