/*
Theme Name: Kadence Mikla Child
Theme URI: https://swordadvertising.com
Description: Custom child theme for Mikla Cosmetics catalog site
Author: Swordadvertising
Author URI: https://swordadvertising.com
Template: kadence
Version: 1.0.3
Text Domain: kadence-mikla-child
*/

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

/* Top bar — full-width black band */
.site-top-header-wrap {
    background-color: #1a1a1a !important;
}

.site-top-header-wrap .site-header-row-container-inner {
    background-color: #1a1a1a !important;
}

/* Top bar inner layout */
.top-bar-inner {
    font-family: Inter, sans-serif;
    font-size: 12px;
}

.top-bar-inner .top-since {
    color: #999999;
    white-space: nowrap;
}

/* Slogan — centered relative to full top bar row */
.top-bar-inner .top-slogan {
    display: none;
}

.site-top-header-wrap .site-header-row-container-inner {
    position: relative;
}

.site-top-header-wrap .site-header-row-container-inner::after {
    content: "PREMIUM KOZMETİK ÜRETİMİ";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    white-space: nowrap;
    pointer-events: none;
}

/* Force top bar section full width */
.site-top-header-wrap .site-header-section {
    flex: 1;
}

/* Header — menu items */
.main-navigation .primary-menu-container > ul > li.menu-item > a {
    text-transform: uppercase !important;
    font-size: 13px !important;
    font-weight: 400;
}

/* Logo image — large and prominent like reference */
.site-branding .custom-logo {
    max-width: 200px;
    height: auto;
}

/* =============================================
   HERO BEHIND HEADER — full overlap
   ============================================= */

/* Pull hero section up behind the header (top bar 40px + main header 100px = 140px) */
/* No-JS fallback: first slide is the direct first child of entry-content. */
.home .entry-content > .kb-row-layout-wrap:first-child:not(.mikla-v3-hero) {
    margin-top: -140px !important;
    padding-top: 200px !important;
    position: relative;
    z-index: 0;
    min-height: auto !important;
    overflow: hidden;
}

/* NOTE: No extra overlap rule is needed for the JS-enhanced slider. The
   transparent header is position:absolute, so it already sits over the top of
   the slider (which starts at the top of .entry-content). Each slide's own top
   padding keeps the heading clear of the menu. Slide 1's image has a flat top
   band, so its bgImgPosition is set to "right bottom" (in the post content) to
   crop that band out from behind the header. */

/* Transparent header — nav links dark on cream hero bg */
.transparent-header #main-header .main-navigation .primary-menu-container > ul > li.menu-item > a {
    color: #1a1a1a !important;
}

.transparent-header #main-header .main-navigation .primary-menu-container > ul > li.menu-item > a:hover {
    color: #c9a890 !important;
}

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

/* Footer background & text color */
.site-footer {
    background-color: #1a1a1a !important;
    color: #e8e0d4;
}

.site-footer a {
    color: #c9a890;
}

.site-footer a:hover {
    color: #ffffff;
}

/* Footer row backgrounds — override Kadence defaults */
.site-top-footer-wrap,
.site-bottom-footer-wrap {
    background-color: #1a1a1a !important;
}

/* Footer top row padding */
.site-top-footer-wrap .site-footer-row {
    padding: 60px 0 40px;
}

/* All footer columns align top-left */
.site-top-footer-wrap .site-footer-row {
    align-items: flex-start !important;
}

.site-top-footer-wrap .site-footer-section {
    align-self: flex-start !important;
}

.site-top-footer-wrap .footer-widget-area {
    text-align: left !important;
    padding-top: 0 !important;
}

/* Override Kadence center/middle alignment on navigation column */
.footer-navigation-wrap,
.footer-navigation-wrap.content-align-center,
.footer-navigation-wrap[class*="content-align"] {
    text-align: left !important;
}

.footer-navigation-wrap.content-valign-middle,
.footer-navigation-wrap[class*="content-valign"] {
    align-self: flex-start !important;
    justify-content: flex-start !important;
}

/* Footer bottom row */
.site-bottom-footer-wrap .site-footer-row {
    border-top: 1px solid #333;
    padding: 20px 0;
}

.site-bottom-footer-wrap,
.site-bottom-footer-wrap .footer-html,
.site-bottom-footer-wrap p {
    color: #8a7a6c !important;
    font-size: 14px;
}

/* Footer navigation — heading */
.footer-navigation-inner {
    text-align: left !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
}

.footer-navigation-inner::before {
    content: "HIZLI LİNKLER";
    display: block;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
}

/* Footer navigation — vertical list */
#footer-navigation .footer-menu-container ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

#footer-navigation .footer-menu-container ul li {
    margin: 0;
}

#footer-navigation .footer-menu-container ul li a,
#footer-navigation .footer-menu-container ul li a:visited {
    color: #8a7a6c !important;
    text-decoration: none;
    font-size: 15px;
}

#footer-navigation .footer-menu-container ul li a:hover {
    color: #ffffff !important;
}

/* Widget headings in footer */
.site-footer .widget-title,
.site-footer .widget strong {
    color: #ffffff !important;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 16px;
    display: block;
}

/* Footer widget text */
.site-footer .widget p {
    color: #8a7a6c;
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 4px;
}

/* =============================================
   HERO — TEKLİF AL outline button
   ============================================= */

.kb-btnhero_b2_v2 {
    background: transparent !important;
    border: 2px solid #1a1a1a !important;
    color: #1a1a1a !important;
}

.kb-btnhero_b2_v2:hover {
    border-color: #c9a890 !important;
    color: #c9a890 !important;
    background: transparent !important;
}

/* =============================================
   CATALOG MODE — Quote Button
   ============================================= */

.mikla-quote-btn {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 14px 32px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px;
    transition: background-color 0.3s ease;
    display: inline-block;
    margin-top: 16px;
}

.mikla-quote-btn:hover {
    background-color: #c9a890 !important;
    color: #ffffff !important;
}

/* =============================================
   PRODUCT CARDS — Premium styling
   ============================================= */

/* Product card container */
.kadence-column-prd_c1,
.kadence-column-prd_c2,
.kadence-column-prd_c3,
.kadence-column-prd_c4,
.kadence-column-prd_c5,
.kadence-column-prd_c6 {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

/* Hover — subtle lift + shadow */
.kadence-column-prd_c1:hover,
.kadence-column-prd_c2:hover,
.kadence-column-prd_c3:hover,
.kadence-column-prd_c4:hover,
.kadence-column-prd_c5:hover,
.kadence-column-prd_c6:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Product image — smooth zoom on card hover */
.kadence-column-prd_c1 .wp-block-image img,
.kadence-column-prd_c2 .wp-block-image img,
.kadence-column-prd_c3 .wp-block-image img,
.kadence-column-prd_c4 .wp-block-image img,
.kadence-column-prd_c5 .wp-block-image img,
.kadence-column-prd_c6 .wp-block-image img {
    transition: transform 0.4s ease;
    padding: 12px;
}

.kadence-column-prd_c1:hover .wp-block-image img,
.kadence-column-prd_c2:hover .wp-block-image img,
.kadence-column-prd_c3:hover .wp-block-image img,
.kadence-column-prd_c4:hover .wp-block-image img,
.kadence-column-prd_c5:hover .wp-block-image img,
.kadence-column-prd_c6:hover .wp-block-image img {
    transform: scale(1.03);
}

/* =============================================
   PERFORMANCE CARDS — Photo overlay hover
   ============================================= */

/* Performance cards — shared styles */
.kadence-column-tc_c1,
.kadence-column-tc_c2,
.kadence-column-tc_c3,
.kadence-column-tc_c4 {
    overflow: hidden;
    border-radius: 8px;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Hover — lift + shadow */
.kadence-column-tc_c1:hover,
.kadence-column-tc_c2:hover,
.kadence-column-tc_c3:hover,
.kadence-column-tc_c4:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

/* Inner col — background image via CSS (bypass Kadence selector mismatch) */
.kadence-column-tc_c1 .kt-inside-inner-col,
.kadence-column-tc_c2 .kt-inside-inner-col,
.kadence-column-tc_c3 .kt-inside-inner-col,
.kadence-column-tc_c4 .kt-inside-inner-col {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 220px;
    padding: 24px 20px 20px 20px !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    border-radius: 8px;
}

/* Per-card background images */
.kadence-column-tc_c1 .kt-inside-inner-col {
    background-image: url('/wp-content/uploads/2026/06/perf_high_shine_v3-1.webp') !important;
}
.kadence-column-tc_c2 .kt-inside-inner-col {
    background-image: url('/wp-content/uploads/2026/06/perf_velvet_touch_v3-1.webp') !important;
}
.kadence-column-tc_c3 .kt-inside-inner-col {
    background-image: url('/wp-content/uploads/2026/06/perf_long_lasting_v3-1.webp') !important;
}
.kadence-column-tc_c4 .kt-inside-inner-col {
    background-image: url('/wp-content/uploads/2026/06/perf_waterproof_v3-1.webp') !important;
}

/* Gradient overlay — bottom-to-top like reference */
.kadence-column-tc_c1 .kt-inside-inner-col::before,
.kadence-column-tc_c2 .kt-inside-inner-col::before,
.kadence-column-tc_c3 .kt-inside-inner-col::before,
.kadence-column-tc_c4 .kt-inside-inner-col::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.1) 60%, transparent 100%);
    border-radius: 8px;
    z-index: 1;
    transition: background 0.3s ease;
}

/* Hover — gradient slightly darker */
.kadence-column-tc_c1:hover .kt-inside-inner-col::before,
.kadence-column-tc_c2:hover .kt-inside-inner-col::before,
.kadence-column-tc_c3:hover .kt-inside-inner-col::before,
.kadence-column-tc_c4:hover .kt-inside-inner-col::before {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.15) 60%, transparent 100%);
}

/* Text content — above overlay */
.kadence-column-tc_c1 .kt-inside-inner-col > *,
.kadence-column-tc_c2 .kt-inside-inner-col > *,
.kadence-column-tc_c3 .kt-inside-inner-col > *,
.kadence-column-tc_c4 .kt-inside-inner-col > * {
    position: relative;
    z-index: 2;
}

/* =============================================
   DENEYİM + TEKNOLOJİ — Dark section styling
   ============================================= */

/* Image photos — rounded corners + overflow hidden */
.kb-row-layout-idexp_v3 .exp-photo img {
    border-radius: 8px;
    width: 100%;
    height: auto;
    display: block;
}

/* Play button CTA — with circle icon */
[data-kb-block="kb-adv-heading-exp_play_v3"] {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    opacity: 0.9;
    transition: opacity 0.3s ease, color 0.3s ease;
}

[data-kb-block="kb-adv-heading-exp_play_v3"]:hover {
    opacity: 1;
    color: #c9a890 !important;
}

/* =============================================
   SIZE ÖZEL RENKLER — Color palette section
   ============================================= */

.kb-row-layout-idcolor_v3 .color-swatch-photo img {
    border-radius: 12px;
    width: 100%;
    height: auto;
    display: block;
}

/* =============================================
   AMBALAJ — Packaging section
   ============================================= */

.kb-row-layout-idpack_v3 .pack-photo img {
    border-radius: 12px;
    width: 100%;
    height: auto;
    display: block;
}

/* =============================================
   PRODUCT GRID — Desktop 3 columns (single 6-col row, CSS grid override)
   ============================================= */

.kb-row-layout-idprod_grid_v4 > .kt-row-column-wrap {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 36px !important;
}

/* =============================================
   AVANTAJLAR — Premium card grid (6 cols → 3 col CSS override)
   ============================================= */

.kb-row-layout-idwhy_grid_v3 > .kt-row-column-wrap {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
}

/* Card hover effect */
.kadence-column-wg3_c1,
.kadence-column-wg3_c2,
.kadence-column-wg3_c3,
.kadence-column-wg3_c4,
.kadence-column-wg3_c5,
.kadence-column-wg3_c6 {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kadence-column-wg3_c1:hover,
.kadence-column-wg3_c2:hover,
.kadence-column-wg3_c3:hover,
.kadence-column-wg3_c4:hover,
.kadence-column-wg3_c5:hover,
.kadence-column-wg3_c6:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* =============================================
   RESPONSIVE
   ============================================= */

/* Large screens — contain hero height */
@media (min-width: 1441px) {
    .home .entry-content > .kb-row-layout-wrap:first-child:not(.mikla-v3-hero) {
        max-height: 700px;
    }

    .home .entry-content > .kb-row-layout-wrap:first-child:not(.mikla-v3-hero) > .kt-row-column-wrap {
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Tablet */
@media (max-width: 1024px) {
    /* Kadence row padding */
    .kb-row-layout-wrap .kt-row-column-wrap {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    /* Hero overlap — top bar 40px + header 80px = 120px */
    .home .entry-content > .kb-row-layout-wrap:first-child:not(.mikla-v3-hero) {
        margin-top: -120px !important;
        padding-top: 170px !important;
    }


    /* Performance cards — 2 columns on tablet */
    .kb-row-layout-idtouch_cards_v2 > .kt-row-column-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    /* Product grid — 2 columns on tablet */
    .kb-row-layout-idprod_grid_v4 > .kt-row-column-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }

    /* Avantajlar — 2 columns on tablet */
    .kb-row-layout-idwhy_grid_v3 > .kt-row-column-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    /* Product card images — slightly less padding on tablet */
    .kadence-column-prd_c1 .wp-block-image img,
    .kadence-column-prd_c2 .wp-block-image img,
    .kadence-column-prd_c3 .wp-block-image img,
    .kadence-column-prd_c4 .wp-block-image img,
    .kadence-column-prd_c5 .wp-block-image img,
    .kadence-column-prd_c6 .wp-block-image img {
        padding: 8px !important;
    }
}

/* ==========================================================================
   HAKKIMIZDA PAGE (page-id-22) — Complete Styling
   ========================================================================== */

/* 1. Global page rhythm — breathing room between sections */
.page-id-22 .entry-content > .kb-row-layout-wrap + .kb-row-layout-wrap {
    margin-top: 0;
}

/* 2. Image containers — overflow hidden prevents hover bleed */
.hk-hero-img,
.hk-section-img {
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10);
}

/* 3. Images — aspect ratio preserved, fill container */
.hk-hero-img img,
.hk-section-img img {
    border-radius: 12px;
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

/* 4. Hover on container, not image — no bleed outside */
.hk-hero-img:hover img,
.hk-section-img:hover img {
    transform: scale(1.03);
}

/* 5. Feature lists — accent colored markers */
.hk-feature-list li {
    padding-left: 4px;
}

.hk-feature-list li::marker {
    color: #c9a890;
}

/* 6. Certificate cards — subtle hover */
[class*="kadence-column_hk_cert"] {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

[class*="kadence-column_hk_cert"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

/* 7. Brand support mini cards — subtle hover */
[class*="kadence-column_hk_bg"] {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

[class*="kadence-column_hk_bg"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

/* 8. Stats row — separator lines between numbers */
.kadence-column_hk_s1,
.kadence-column_hk_s2,
.kadence-column_hk_s3 {
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

/* 9. Tablet adjustments */
@media (max-width: 1024px) {
    .hk-hero-img img,
    .hk-section-img img {
        max-width: 100%;
    }
}

/* 10. Mobile — Hakkımızda specific */
@media (max-width: 767px) {
    .kadence-column_hk_s1,
    .kadence-column_hk_s2,
    .kadence-column_hk_s3 {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        padding-bottom: 16px;
        margin-bottom: 16px;
    }
}

/* ==========================================================================
   FASON ÜRETİM PAGE (page-id-23)
   ========================================================================== */

/* Hero image */
.fu-hero-img {
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10);
}

.fu-hero-img img {
    border-radius: 12px;
    width: 100%;
    height: auto;
    display: block;
}

/* Step images — zigzag sections */
.fu-step-img {
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10);
}

.fu-step-img img {
    border-radius: 12px;
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.fu-step-img:hover img {
    transform: scale(1.03);
}

/* Large step numbers — watermark style */
[class*="fu2_s"][class*="_n"] {
    margin-bottom: -8px !important;
    line-height: 1 !important;
}

/* Service grid — 3 columns via CSS */
.kb-row-id-fu2_svc_grid > .kt-row-column-wrap {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
}

/* Service cards hover */
[class*="kadence-column_fu2_sv"] {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

[class*="kadence-column_fu2_sv"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* Stats separator lines */
.kadence-column_fu2_st1,
.kadence-column_fu2_st2,
.kadence-column_fu2_st3 {
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

/* Tablet */
@media (max-width: 1024px) {
    .kb-row-id-fu2_svc_grid > .kt-row-column-wrap {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile — Fason Üretim specific */
@media (max-width: 767px) {
    .kb-row-id-fu2_svc_grid > .kt-row-column-wrap {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .kadence-column_fu2_st1,
    .kadence-column_fu2_st2,
    .kadence-column_fu2_st3 {
        border-right: none;
    }
}

/* ==========================================================================
   AR-GE PAGE (page-id-47)
   ========================================================================== */

/* Hero image */
.rg-hero-img {
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10);
}

.rg-hero-img img {
    border-radius: 12px;
    width: 100%;
    height: auto;
    display: block;
}

/* Section images */
.rg-section-img {
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10);
}

.rg-section-img img {
    border-radius: 12px;
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.rg-section-img:hover img {
    transform: scale(1.03);
}

/* Feature lists */
.rg-feature-list li::marker {
    color: #c9a890;
}

/* Step cards hover */
.kadence-column_rg2_step1,
.kadence-column_rg2_step2,
.kadence-column_rg2_step3,
.kadence-column_rg2_step4 {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kadence-column_rg2_step1:hover,
.kadence-column_rg2_step2:hover,
.kadence-column_rg2_step3:hover,
.kadence-column_rg2_step4:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   AMBALAJ PAGE (page-id-48)
   ========================================================================== */

/* Hero + section images */
.amb-hero-img,
.amb-section-img {
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10);
}

.amb-hero-img img,
.amb-section-img img {
    border-radius: 12px;
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.amb-section-img:hover img {
    transform: scale(1.03);
}

/* Category grid — 3 columns */
.wp-block-kadence-rowlayout:has(.kadence-column_amb_cc1) > .kt-row-column-wrap {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
}

/* Category card hover */
[class*="kadence-column_amb_cc"] {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

[class*="kadence-column_amb_cc"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* Process step cards hover */
[class*="kadence-column_amb_ps"] {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

[class*="kadence-column_amb_ps"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

/* Stats bar separators */
.kadence-column_amb_st1,
.kadence-column_amb_st2,
.kadence-column_amb_st3 {
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

/* Zigzag step numbers — reduce bottom margin */
[class*="amb_z"][class*="_n"] {
    margin-bottom: -8px;
}

/* Tablet */
@media (max-width: 1024px) {
    .wp-block-kadence-rowlayout:has(.kadence-column_amb_cc1) > .kt-row-column-wrap {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile — Ambalaj specific */
@media (max-width: 767px) {
    .wp-block-kadence-rowlayout:has(.kadence-column_amb_cc1) > .kt-row-column-wrap {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .kadence-column_amb_st1,
    .kadence-column_amb_st2,
    .kadence-column_amb_st3 {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        padding-bottom: 16px;
        margin-bottom: 16px;
    }
}

/* ==========================================================================
   İLETİŞİM PAGE (page-id-25)
   ========================================================================== */

/* Hero image */
.ilt-hero-img {
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10);
}

.ilt-hero-img img {
    border-radius: 12px;
    width: 100%;
    height: auto;
    display: block;
}

/* Info cards hover */
[class*="kadence-column_ilt_ic"] {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

[class*="kadence-column_ilt_ic"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* Info card links — hover underline */
[class*="kadence-column_ilt_ic"] a:hover {
    color: #c9a890 !important;
}

/* Stats bar separators */
.kadence-column_ilt_st1,
.kadence-column_ilt_st2,
.kadence-column_ilt_st3 {
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

/* Mobile — İletişim specific */
@media (max-width: 767px) {
    .kadence-column_ilt_st1,
    .kadence-column_ilt_st2,
    .kadence-column_ilt_st3 {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        padding-bottom: 16px;
        margin-bottom: 16px;
    }
}

/* ==========================================================================
   DARK SECTION BG FALLBACKS — Kadence bgColor may not render as CSS
   ========================================================================== */

/*
 * Kadence rowlayout renders <style>#kt-layout-id...{bg}</style> but does NOT
 * add id="kt-layout-id..." to the <div>.  So the inline bg never applies.
 * Fix: target the parent row via :has() on the column class that IS rendered.
 *
 * Column classes present in rendered HTML:
 *   .kadence-column_hk_s1        → Hakkımızda stats row
 *   .kadence-column_hk_cta_c1    → Hakkımızda CTA
 *   .kadence-column_fu2_st1      → Fason stats row
 *   .kadence-column_rg2_cta_c1   → AR-GE CTA
 *   .kadence-column-cta_v2_c1    → Anasayfa CTA (dash separator)
 *   .kadence-column-exp_v3_c1    → Anasayfa Deneyim (dash separator)
 *   .kadence-column_amb_st1      → Ambalaj stats row
 *   .kadence-column_ilt_st1      → İletişim stats row
 */

/* Dark backgrounds (#1a1a1a) */
.wp-block-kadence-rowlayout:has(.kadence-column_hk_s1),
.wp-block-kadence-rowlayout:has(.kadence-column_hk_cta_c1),
.wp-block-kadence-rowlayout:has(.kadence-column_fu2_st1),
.wp-block-kadence-rowlayout:has(.kadence-column_rg2_cta_c1),
.wp-block-kadence-rowlayout:has(.kadence-column-cta_v2_c1),
.wp-block-kadence-rowlayout:has(.kadence-column-fv2_c1),
.wp-block-kadence-rowlayout:has(.kadence-column_amb_st1),
.wp-block-kadence-rowlayout:has(.kadence-column_ilt_st1) {
    background-color: #1a1a1a !important;
}

/* Hide column inner :before overlay on the feature band (dark) */
.wp-block-kadence-rowlayout:has(.kadence-column-fv2_c1) .kt-inside-inner-col:before {
    display: none !important;
}

/* Dark navy background (#1a1a2e) — Anasayfa Deneyim */
.wp-block-kadence-rowlayout:has(.kadence-column-exp_v3_c1) {
    background-color: #1a1a2e !important;
}

/* Force white text on dark sections */
.wp-block-kadence-rowlayout:has(.kadence-column_hk_s1) .wp-block-kadence-advancedheading,
.wp-block-kadence-rowlayout:has(.kadence-column_hk_cta_c1) .wp-block-kadence-advancedheading,
.wp-block-kadence-rowlayout:has(.kadence-column_fu2_st1) .wp-block-kadence-advancedheading,
.wp-block-kadence-rowlayout:has(.kadence-column_rg2_cta_c1) .wp-block-kadence-advancedheading,
.wp-block-kadence-rowlayout:has(.kadence-column-cta_v2_c1) .wp-block-kadence-advancedheading,
.wp-block-kadence-rowlayout:has(.kadence-column-exp_v3_c1) .wp-block-kadence-advancedheading,
.wp-block-kadence-rowlayout:has(.kadence-column_amb_st1) .wp-block-kadence-advancedheading,
.wp-block-kadence-rowlayout:has(.kadence-column_ilt_st1) .wp-block-kadence-advancedheading {
    color: #ffffff !important;
}

/* White links in CTA buttons */
.wp-block-kadence-rowlayout:has(.kadence-column_hk_cta_c1) .wp-block-kadence-advancedheading a,
.wp-block-kadence-rowlayout:has(.kadence-column_rg2_cta_c1) .wp-block-kadence-advancedheading a,
.wp-block-kadence-rowlayout:has(.kadence-column-cta_v2_c1) .wp-block-kadence-advancedheading a {
    color: #ffffff !important;
}

/* Hide column inner :before overlay on dark sections */
.wp-block-kadence-rowlayout:has(.kadence-column_hk_s1) .kt-inside-inner-col:before,
.wp-block-kadence-rowlayout:has(.kadence-column_hk_cta_c1) .kt-inside-inner-col:before,
.wp-block-kadence-rowlayout:has(.kadence-column_fu2_st1) .kt-inside-inner-col:before,
.wp-block-kadence-rowlayout:has(.kadence-column_rg2_cta_c1) .kt-inside-inner-col:before,
.wp-block-kadence-rowlayout:has(.kadence-column-cta_v2_c1) .kt-inside-inner-col:before,
.wp-block-kadence-rowlayout:has(.kadence-column-exp_v3_c1) .kt-inside-inner-col:before,
.wp-block-kadence-rowlayout:has(.kadence-column_amb_st1) .kt-inside-inner-col:before,
.wp-block-kadence-rowlayout:has(.kadence-column_ilt_st1) .kt-inside-inner-col:before {
    display: none !important;
}

/* Mobile */
@media (max-width: 767px) {
    /* Hero overlap — top bar 40px + header 70px = 110px */
    .home .entry-content > .kb-row-layout-wrap:first-child:not(.mikla-v3-hero) {
        margin-top: -110px !important;
        padding-top: 150px !important;
        background-position: center bottom !important;
        min-height: 500px !important;
    }


    /* Stack most Kadence columns vertically */
    .kt-row-column-wrap {
        flex-direction: column !important;
    }

    .kt-row-column-wrap > .wp-block-kadence-column {
        flex-basis: 100% !important;
        max-width: 100% !important;
        margin-bottom: 24px;
    }

    /* Product grid — 2 columns on mobile (override Kadence's 1-col grid) */
    .kb-row-layout-idprod_grid_v4 > .kt-row-column-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    /* Avantajlar — 2 columns on mobile */
    .kb-row-layout-idwhy_grid_v3 > .kt-row-column-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    /* Product card images — less padding on mobile */
    .kadence-column-prd_c1 .wp-block-image img,
    .kadence-column-prd_c2 .wp-block-image img,
    .kadence-column-prd_c3 .wp-block-image img,
    .kadence-column-prd_c4 .wp-block-image img,
    .kadence-column-prd_c5 .wp-block-image img,
    .kadence-column-prd_c6 .wp-block-image img {
        padding: 6px !important;
    }

    /* Product card text — smaller on mobile */
    .kb-row-layout-idprod_grid_v4 .wp-block-kadence-advancedheading {
        font-size: 13px !important;
        line-height: 1.3 !important;
        margin-bottom: 4px !important;
    }

    /* Reduce heading sizes on mobile */
    .entry-content h1 {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }

    .entry-content h2 {
        font-size: 24px !important;
    }

    /* Reduce section padding on mobile */
    .kb-row-layout-wrap .kt-row-column-wrap {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* WooCommerce product grid — 2 columns on mobile */
    .woocommerce ul.products.grid-lg-col-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Footer columns stack */
    .site-top-footer-wrap .site-footer-row {
        flex-direction: column;
        gap: 32px;
        padding: 40px 20px 30px;
    }

    .site-top-footer-wrap .site-footer-section {
        width: 100% !important;
    }
}

/* ==========================================================================
   HERO SLIDER (post 46) — vanilla JS slider, progressive enhancement
   ========================================================================== */

/*
 * Progressive enhancement:
 *   - No JS  → only the .is-active slide shows (rule below).
 *   - With JS → hero-slider.js adds .is-enhanced to the slider wrapper,
 *     which lets us stack all slides absolutely and cross-fade them.
 */

/* Fallback: before JS runs, hide every non-active slide. */
.mikla-hero-slide:not(.is-active) {
    display: none;
}

/* Slider container (created at runtime by hero-slider.js). */
.mikla-hero-slider {
    position: relative;
    overflow: hidden;
}

/* Once enhanced, all slides are visible to the layout (stacked) and the
   fallback "display:none" no longer applies — fade controls visibility. */
.mikla-hero-slider.is-enhanced .mikla-hero-slide {
    display: block;
}

/* Stack slides on top of each other; first slide defines container height. */
.mikla-hero-slider.is-enhanced .mikla-hero-slider__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.7s ease;
    pointer-events: none;
    z-index: 1;
}

.mikla-hero-slider.is-enhanced .mikla-hero-slider__slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    position: relative; /* active slide drives container height */
    z-index: 2;
}

/* Honour reduced-motion: no fade animation. */
@media (prefers-reduced-motion: reduce) {
    .mikla-hero-slider.is-enhanced .mikla-hero-slider__slide {
        transition: none;
    }
}

/* --- Arrows --- */
.mikla-hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: #1a1a1a;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, color 0.25s ease;
}

.mikla-hero-arrow:hover {
    background: #1a1a1a;
    color: #ffffff;
}

.mikla-hero-arrow--prev {
    left: 24px;
}

.mikla-hero-arrow--next {
    right: 24px;
}

/* --- Dots --- */
.mikla-hero-dots {
    position: absolute;
    bottom: 28px;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.mikla-hero-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(26, 26, 26, 0.3);
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

.mikla-hero-dot:hover {
    background: rgba(26, 26, 26, 0.55);
}

.mikla-hero-dot.is-active {
    background: #c9a890;
    transform: scale(1.3);
}

/* ==========================================================================
   FEATURE BAND (feat_v2) — 5-item dark strip, responsive grid
   ========================================================================== */

/* Tablet: 3 + 2 layout */
@media (max-width: 1024px) {
    .kb-row-layout-idfeat_v2 > .kt-row-column-wrap {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 20px 12px !important;
    }

    /* Remove vertical divider borders (set on the inner col by Kadence). */
    .kadence-column-fv2_c1 > .kt-inside-inner-col,
    .kadence-column-fv2_c2 > .kt-inside-inner-col,
    .kadence-column-fv2_c3 > .kt-inside-inner-col,
    .kadence-column-fv2_c4 > .kt-inside-inner-col,
    .kadence-column-fv2_c5 > .kt-inside-inner-col {
        border-right: none !important;
        align-items: center !important;
    }
}

/* Mobile: 2 + 2 + 1 layout. The 5th item centers across the row. */
@media (max-width: 767px) {
    .kb-row-layout-idfeat_v2 > .kt-row-column-wrap {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px 10px !important;
    }

    /* 5th item spans the full row and centers. */
    .kadence-column-fv2_c5 {
        grid-column: 1 / -1 !important;
    }

    /* Center each band cell's content and drop dividers on the 2-col grid. */
    .kadence-column-fv2_c1 > .kt-inside-inner-col,
    .kadence-column-fv2_c2 > .kt-inside-inner-col,
    .kadence-column-fv2_c3 > .kt-inside-inner-col,
    .kadence-column-fv2_c4 > .kt-inside-inner-col,
    .kadence-column-fv2_c5 > .kt-inside-inner-col {
        border-right: none !important;
        align-items: center !important;
    }

    /* Hero arrows hidden on mobile; dots remain visible. */
    .mikla-hero-arrow {
        display: none !important;
    }

    /* Hero buttons: stack instead of overflowing off the right edge. */
    .mikla-hero-slide .wp-block-kadence-advancedbtn {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    .mikla-hero-slide .wp-block-kadence-singlebtn,
    .mikla-hero-slide .wp-block-kadence-singlebtn .kt-button {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Readability scrim: cream gradient behind the hero text column so
       headings stay legible over the product imagery on small screens. */
    .mikla-hero-slide .kt-inside-inner-col {
        background: linear-gradient(180deg,
            rgba(249, 245, 240, 0.92) 0%,
            rgba(249, 245, 240, 0.78) 55%,
            rgba(249, 245, 240, 0) 100%);
        padding: 24px 18px 32px !important;
        border-radius: 10px;
    }
}

/* ==========================================================================
   Anasayfa V3 (draft) — referans tasarım hizalaması
   ========================================================================== */

/* --- Hero: statik split (slider değil) --- */
.mikla-v3-hero {
    overflow: visible;
}

.v3h-wrap {
    max-width: 560px;
}

.v3h-eyebrow {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #b8905f !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
}

.v3h-title {
    font-family: 'Inter', sans-serif !important;
    font-weight: 800 !important;
    font-size: 50px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em !important;
    color: #1a1a1a !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
}

.v3h-desc {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    color: #5a5049 !important;
    margin: 0 0 26px !important;
    padding: 0 !important;
    max-width: 46ch;
}

.v3h-checks {
    display: flex;
    flex-wrap: wrap;
    row-gap: 12px;
    column-gap: 36px;
    margin: 0 0 30px;
}

.v3h-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #2d2d2d;
    white-space: nowrap;
}

.v3h-check svg {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    color: #b8905f;
}

.v3h-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
}

.v3h-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none;
    border-radius: 3px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

.v3h-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.v3h-btn-solid {
    background: #b8905f;
    color: #1a1a1a;
    border: 1px solid #b8905f;
}

.v3h-btn-solid:hover {
    background: #1a1a1a;
    color: #ffffff;
    border-color: #1a1a1a;
}

.v3h-btn-outline {
    background: #ffffff;
    color: #1a1a1a;
    border: 1px solid #dcd3c6;
}

.v3h-btn-outline:hover {
    border-color: #1a1a1a;
}

@media (max-width: 991px) {
    .v3h-title {
        font-size: 36px;
    }
}

@media (max-width: 767px) {
    .v3h-title {
        font-size: 30px;
    }
    .v3h-desc {
        font-size: 15px;
    }
    .v3h-checks {
        column-gap: 20px;
    }
    .v3h-btn {
        padding: 13px 20px;
        font-size: 12px;
    }
}

/* --- 5'li ikon şeridi (açık zemin) --- */
.v3-stats-row {
    background: #f4f1eb;
}

.v3-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 28px 20px;
    width: 100%;
}

.v3-stat {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 180px;
    min-width: 150px;
}

.v3-stat svg {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    color: #b8905f;
}

.v3-stat-num {
    display: block;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.15;
    color: #1a1a1a;
}

.v3-stat-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a7a6c;
    margin-top: 2px;
}

@media (max-width: 991px) {
    .v3-stats {
        justify-content: flex-start;
    }
    .v3-stat {
        flex: 1 1 40%;
    }
}

@media (max-width: 600px) {
    .v3-stat {
        flex: 1 1 100%;
    }
}

/* --- Kategori kartları (referans: açık zemin, solda metin / sağda görsel) --- */
.v3-cats-row {
    background: #ffffff;
}

.v3-cats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.v3-cat-card {
    position: relative;
    display: block;
    min-height: 250px;
    background: var(--cardbg, #efe9e2);
    overflow: hidden;
    text-decoration: none;
}

/* product photo occupies the right side, fading into the card ground */
.v3-cat-img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 60%;
    background-size: cover;
    background-position: center;
}

.v3-cat-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        var(--cardbg, #efe9e2) 0%,
        var(--cardbg, #efe9e2) 34%,
        rgba(255,255,255,0) 72%);
}

.v3-cat-text {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 250px;
    max-width: 58%;
    padding: 26px 10px 24px 24px;
}

.v3-cat-title {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 1.22 !important;
    letter-spacing: 0.005em;
    color: #1a1a1a !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    text-transform: uppercase;
}

.v3-cat-list {
    font-family: 'Inter', sans-serif !important;
    font-size: 12.5px !important;
    line-height: 1.85 !important;
    color: #4d453f !important;
    margin: 0 !important;
    padding: 0 !important;
}

.v3-cat-btn {
    align-self: flex-start;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 15px;
    border: 1px solid #b3a698;
    border-radius: 2px;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #1a1a1a;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.v3-cat-btn svg {
    width: 14px;
    height: 14px;
}

.v3-cat-card:hover .v3-cat-btn {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #ffffff;
}

@media (max-width: 1200px) {
    .v3-cats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .v3-cats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 540px) {
    .v3-cats {
        grid-template-columns: minmax(0, 1fr);
    }
    .v3-cat-card,
    .v3-cat-text {
        min-height: 210px;
    }
    .v3-cat-text {
        max-width: 55%;
    }
}

/* --- Alt koyu ikon şeridi --- */
.v3-caps-row {
    background: #1a1a1a;
}

.v3-caps {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px 20px;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.v3-cap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1 1 170px;
    min-width: 150px;
}

.v3-cap svg {
    width: 34px;
    height: 34px;
    color: #c9a890;
    margin-bottom: 14px;
}

.v3-cap-line1 {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #f9f5f0;
    text-transform: uppercase;
}

.v3-cap-line2 {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #9c9088;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-top: 3px;
}

@media (max-width: 900px) {
    .v3-cap {
        flex: 1 1 40%;
    }
}

@media (max-width: 500px) {
    .v3-cap {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   Anasayfa V4 (draft) — compact: tüm yapı tek ekranda
   V3 ile aynı bileşenler, sıkıştırılmış ölçüler + net HTML rozet
   ========================================================================== */

/* --- Hero: oran kilitli, görsel hiç kırpılmadan/ezilmeden tam görünür ---
   Referans ölçüleri (1536x1024 mockup): header 96px, hero 526px -> 2.92 oran.
   Kadence min-height'ı iç sarmalayıcıya yazdığı için orada sıfırlanmalı,
   yoksa sabit yükseklik oranı ezip görseli kırpar. */
.mikla-v3-hero,
.mikla-v4-hero {
    position: relative;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #ede0d8 !important;
}

@media (min-width: 992px) {
    .mikla-v3-hero > .kt-row-column-wrap,
    .mikla-v4-hero > .kt-row-column-wrap {
        min-height: 0 !important;
    }
    /* V3 — referans oranıyla birebir */
    .mikla-v3-hero {
        aspect-ratio: 1536 / 526;
    }
    /* V4 — daha geniş bant, tüm yapı ilk ekrana sığsın diye */
    .mikla-v4-hero {
        aspect-ratio: 3.4;
    }
}

/* --- "SINCE 1999" rozeti: referanstaki konum ve oran ---
   Referansta 144x119px, sağ kenardan 48px (=%3.13) içeride, hero'nun tepesine bitişik. */
.v4-badge {
    position: absolute;
    top: 0;
    right: 3.13%;
    z-index: 3;
    background: #171310;
    width: clamp(115px, 9.4vw, 175px);
    aspect-ratio: 144 / 119;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: clamp(12px, 1.05vw, 18px);
    line-height: 1;
    text-align: center;
    pointer-events: none;
}

.v4-badge-since {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.78em;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    text-transform: uppercase;
    color: #efe6da;
    margin-bottom: 0.45em;
}

.v4-badge-year {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 2.85em;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #c9a163;
    margin-bottom: 0.28em;
}

.v4-badge-brand {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.6em;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-indent: 0.16em;
    text-transform: uppercase;
    color: #efe6da;
}

/* --- V4 kompakt tipografi --- */
.mikla-v4-hero .v3h-eyebrow {
    font-size: 12.5px !important;
    margin-bottom: 10px !important;
}

.mikla-v4-hero .v3h-title {
    font-size: 40px !important;
    margin-bottom: 13px !important;
}

.mikla-v4-hero .v3h-desc {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    margin-bottom: 18px !important;
}

.mikla-v4-hero .v3h-checks {
    row-gap: 9px;
    column-gap: 26px;
    margin-bottom: 20px;
}

.mikla-v4-hero .v3h-check {
    font-size: 13px;
}

.mikla-v4-hero .v3h-btn {
    padding: 12px 19px;
    font-size: 12px;
}

/* --- V4 kompakt istatistik şeridi --- */
.v4-stats .v3-stat svg {
    width: 33px;
    height: 33px;
}

.v4-stats .v3-stat-num {
    font-size: 22px;
}

.v4-stats .v3-stat-label {
    font-size: 11px;
}

/* --- V4 kompakt kategori kartları --- */
.v4-cats .v3-cat-card,
.v4-cats .v3-cat-text {
    min-height: 200px;
}

.v4-cats .v3-cat-text {
    padding: 20px 8px 18px 20px;
}

.v4-cats .v3-cat-title {
    font-size: 17px !important;
    margin-bottom: 10px !important;
}

.v4-cats .v3-cat-list {
    font-size: 11.5px !important;
    line-height: 1.7 !important;
}

.v4-cats .v3-cat-btn {
    padding: 8px 12px;
    font-size: 10px;
    gap: 7px;
}

/* --- V4 kompakt alt şerit --- */
.v4-caps .v3-cap svg {
    width: 28px;
    height: 28px;
    margin-bottom: 10px;
}

.v4-caps .v3-cap-line1 {
    font-size: 12px;
}

.v4-caps .v3-cap-line2 {
    font-size: 11px;
}

/* Dar ekranlarda oran serbest bırakılır; görsel sağ tarafa yaslanıp
   ürünler kadrajda kalır, metin kendi yüksekliğini belirler. */
@media (max-width: 991px) {
    .mikla-v3-hero,
    .mikla-v4-hero {
        background-position: 78% center !important;
    }
    .v4-badge {
        width: clamp(96px, 15vw, 130px);
        font-size: clamp(10px, 1.6vw, 13px);
    }
}

@media (max-width: 767px) {
    .mikla-v4-hero .v3h-title {
        font-size: 28px !important;
    }
}

/* ==========================================================================
   Anasayfa V5 (draft) — gerçekten tek ekran
   Hero yüksekliği ekran yüksekliğinden hesaplanır, böylece en alttaki koyu
   bant da ilk açılışta kadrajda kalır. Sabit bantların toplamı ~450px:
   header 117 + istatistik 84 + kartlar 175 + koyu bant 70.
   ========================================================================== */

.mikla-v5-hero {
    position: relative;
    background-size: cover !important;
    background-position: right center !important;
    background-repeat: no-repeat !important;
    background-color: #ede0d8 !important;
}

@media (min-width: 992px) {
    .mikla-v5-hero > .kt-row-column-wrap {
        min-height: 0 !important;
    }
    .mikla-v5-hero {
        height: clamp(270px, calc(100vh - 450px), 620px);
    }
}

/* --- V5 hero tipografisi --- */
.mikla-v5-hero .v3h-eyebrow {
    font-size: 12px !important;
    margin-bottom: 9px !important;
}

.mikla-v5-hero .v3h-title {
    font-size: 37px !important;
    margin-bottom: 12px !important;
}

.mikla-v5-hero .v3h-desc {
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin-bottom: 15px !important;
}

.mikla-v5-hero .v3h-checks {
    row-gap: 8px;
    column-gap: 24px;
    margin-bottom: 17px;
}

.mikla-v5-hero .v3h-check {
    font-size: 12.5px;
}

.mikla-v5-hero .v3h-btn {
    padding: 11px 18px;
    font-size: 11.5px;
}

/* --- V5 istatistik şeridi --- */
.v5-stats .v3-stat svg {
    width: 30px;
    height: 30px;
}

.v5-stats .v3-stat-num {
    font-size: 20px;
}

.v5-stats .v3-stat-label {
    font-size: 10.5px;
}

/* --- V5 kategori kartları --- */
.v5-cats .v3-cat-card,
.v5-cats .v3-cat-text {
    min-height: 175px;
}

.v5-cats .v3-cat-text {
    padding: 17px 8px 16px 18px;
}

.v5-cats .v3-cat-title {
    font-size: 16px !important;
    margin-bottom: 8px !important;
}

.v5-cats .v3-cat-list {
    font-size: 11px !important;
    line-height: 1.6 !important;
}

.v5-cats .v3-cat-btn {
    padding: 7px 11px;
    font-size: 9.5px;
    gap: 6px;
}

/* --- V5 alt koyu şerit --- */
.v5-caps .v3-cap svg {
    width: 26px;
    height: 26px;
    margin-bottom: 8px;
}

.v5-caps .v3-cap-line1 {
    font-size: 11.5px;
}

.v5-caps .v3-cap-line2 {
    font-size: 10.5px;
}

@media (max-width: 991px) {
    .mikla-v5-hero {
        background-position: 78% center !important;
    }
}

@media (max-width: 767px) {
    .mikla-v5-hero .v3h-title {
        font-size: 27px !important;
    }
}

/* --- V3 hero, telefon ---------------------------------------------------
   Telefonda metin bloğu ~395px yer kaplıyor; geniş masaüstü görseli dar-uzun
   kutuya "cover" ile oturunca ürünler büyüyüp yazının altına giriyordu.
   Çözüm: aynı sahneden türetilmiş dikey bir görsel (ürünler alt banda toplanmış,
   üst %64 boş) + oranın görselle birebir eşleşmesi, böylece kırpma olmuyor ve
   metnin arkasına overlay koymaya gerek kalmıyor.
   Rozet burada gizleniyor — "Since 1999" zaten üst barda yazıyor. */
@media (max-width: 767px) {
    /* Three-class selectors throughout. Two rules have to be outranked here and
       both carry !important, so order alone would not settle it:
         - the theme's combined CSS forces `padding: 40px 20px !important` on
           every mobile row via `.kb-row-layout-wrap .kt-row-column-wrap`
         - the block's own Custom CSS sets `background-position: 78% center
           !important` for max-width 991px, and inline block CSS loads last
       `.mikla-v3-hero` and `.kb-row-layout-wrap` sit on the same element, so
       chaining them wins on specificity rather than on source order. */

    /* The header is transparent and absolutely positioned across 0-70px. The
       theme's 40px padding left the first line of hero text inside that band:
       measured 15.5px of overlap between the logo and .v3h-eyebrow. */
    .mikla-v3-hero.kb-row-layout-wrap > .kt-row-column-wrap {
        min-height: 0 !important;
        padding-top: 88px !important;
    }

    /* min-height, not a hard aspect-ratio. The ratio matches the image exactly
       so the art is never cropped where it fits — but a hard ratio gives the
       box a definite height that the content simply overflows once the heading
       wraps to four lines (measured 102px of overflow at 320px, with the
       checklist and button sitting on top of the product band). min-height
       keeps the designed framing wherever the content fits and lets the box
       grow where it does not; below ~355px the image then cover-crops slightly
       at the sides, which is the lesser evil. */
    .mikla-v3-hero.kb-row-layout-wrap {
        aspect-ratio: auto;
        min-height: calc(100vw * 1.6528);
        background-image: url('/wp-content/uploads/2026/09/mikla-hero-mobil.webp') !important;
        background-position: center top !important;
        background-size: cover !important;
    }

    .mikla-v3-hero .v4-badge {
        display: none;
    }
}

/* ==========================================================================
   Anasayfadan taşınan bloklar — iki düzeltme
   Bu iki kusur canlı anasayfada (post 46) da var; bloklar oradan birebir
   taşındığı için burada düzeltilmesi ikisini birden onarır.
   ========================================================================== */

/* Kadence'in kendi kuralı `.wp-block-kadence-advancedbtn .kt-btn-align-center`
   — aradaki BOŞLUĞA dikkat: hizalama sınıfını bir alt elemanda
   (`.kb-btns-outer-wrap`) arıyor. Bu markup o sarmalayıcıdan önceki bir Kadence
   sürümüyle üretilmiş: iki sınıf aynı elemanda ve `kb-btns-outer-wrap` hiç yok,
   dolayısıyla kural hiç eşleşmiyor ve butonlar solda kalıyor.
   Zincirli seçici (boşluksuz) bizim markup'a uyuyor. `gap` de butonların
   mobilde birbirine yapışmasını gideriyor. */
.wp-block-kadence-advancedbtn.kt-btn-align-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

@media (max-width: 767px) {
    /* Altı renk adı mobilde tek sütuna inip ~530px'lik boş bir liste
       oluşturuyordu. İki sütunda üç satıra iniyor. */
    .kb-row-layout-idclr_names_v3 > .kt-row-column-wrap {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 4px 10px;
    }
}

/* =============================================
   HAND-WRITTEN COLUMN BLOCKS — card surface
   ============================================= */

/* Columns written by hand (prd_c*, wg3_c*, cn_c*, exp_*, pack_*) carry the
   class `kadence-column-prd_c1`, but Kadence emits its own column CSS as
   `.kadence-columnprd_c1` — no hyphen — so none of the block's visual
   settings reach the page. On top of that, `bgColor` is not a column
   attribute at all (columns use `background`), so Kadence emits no rule for
   it even where the selector does match. Columns created in the editor are
   unaffected: their class is `kadence-column461_010e26-30`, which Kadence
   generates on both sides.

   Declared here rather than rewriting the markup: the block JSON keeps its
   stated intent and the page is not rewritten for a styling fix. */

.kadence-column-prd_c1,
.kadence-column-prd_c2,
.kadence-column-prd_c3,
.kadence-column-prd_c4,
.kadence-column-prd_c5,
.kadence-column-prd_c6 {
    background-color: #ffffff;
    border-radius: 4px;
    padding-bottom: 24px;
}

/* Same fix for the "Neden Mikla" cards. These lose their padding too, so the
   text sits flush against the card edge; the block asks for 32px/24px. */

.kadence-column-wg3_c1,
.kadence-column-wg3_c2,
.kadence-column-wg3_c3,
.kadence-column-wg3_c4,
.kadence-column-wg3_c5,
.kadence-column-wg3_c6 {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 32px 24px;
}

@media (max-width: 767px) {
    .kadence-column-wg3_c1,
    .kadence-column-wg3_c2,
    .kadence-column-wg3_c3,
    .kadence-column-wg3_c4,
    .kadence-column-wg3_c5,
    .kadence-column-wg3_c6 {
        padding: 20px 14px;
    }
}

/* =============================================
   V3 HERO — desktop clearance under the header
   ============================================= */

/* The transparent header sits over the hero. At 1100px and up the logo's
   lower edge measured 3.3px into the first hero text line (logo bottom 103,
   eyebrow top 100). Tablet and phone already clear it — 60px at 900px, 32px
   at 375px — so this is scoped to desktop only.

   100px -> 120px moves the text down ~20px, leaving ~17px under the logo.
   The hero has 100px of slack at the bottom, so nothing is pushed out. */

@media (min-width: 1025px) {
    .mikla-v3-hero.kb-row-layout-wrap > .kt-row-column-wrap {
        padding-top: 120px !important;
    }
}