/* === AX MEDYA TEMA - FULL STYLES === */
/* All styles load here FIRST to prevent FOUC */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* Global Font */
body, html, * {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
/* Exclude icons from font override */
i, .fa, .fas, .far, .fab, .ri, [class^="ri-"], [class*=" ri-"] {
    font-family: inherit !important;
}

:root {
    --site_bg: #f2f2f2;
    --bolum_bg: ;
    --header_top: #ffffff;
    --header_bg: #ffffff;
    --main_text: #1b3c74;
    --subtext: #0f0f0f;
    --textwhite: #FFFFFF;
    --mainbg: #fe500b;
    --whitebg: #ffffff;
    --line: #00000014;
    --footerbg: #f2f7fb;
    --breadcrumb: #f2f7fb;
    --custom1: ;
    --custom2: ;
    --custom3: ;
    --custom4: ;
    --custom5: ;
    --custom6: #f2f7fb;
    --sectionbg: #f2f7fb !important;
    --herobg: #000000cc;
    --gradientbg: #ffffff1c;
    
    /* AX Custom Variables */
    --ax-primary: #e14d82;
    --ax-primary-rgb: 225, 77, 130;
    --ax-gradient: linear-gradient(135deg, #e1306c 0%, #c13584 100%);
    --ax-gradient-soft: linear-gradient(135deg, rgba(225,48,108,0.1) 0%, rgba(193,53,132,0.05) 100%);
    --ax-card: #fff;
    --ax-text: #333;
    --ax-text-light: #777;
    --ax-border: #e8e8e8;
    --ax-radius: 16px;
    --ax-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* ============ CATEGORY PAGE STYLES ============ */
.leftFixed, [class*="kupon"], [class*="coupon"],
.footer-top, section.newsletter, .promo-banner, .announcement,
footer + div, .sticky-promo { display: none !important; }

/* Hide section--2 on product pages (old product grid) */
body:has(.ax-product-page) .section--2,
body:has(.ax-product-content) .section--2 { display: none !important; }

/* Fix body background on product pages */
body:has(.ax-product-page) { background: #f7f8fa !important; }

.section--5.ax-hidden, .section--6.ax-hidden, .section--7.ax-hidden, .section--8.ax-hidden, .section--9.ax-hidden, .section--10.ax-hidden { display: none !important; }
/* Hide empty sections on category pages */
body:has(.ax-sidebar-rebuilt) .section--5,
body:has(.ax-sidebar-rebuilt) .section--6,
body:has(.ax-sidebar-rebuilt) .section--7,
body:has(.ax-sidebar-rebuilt) .section--8,
body:has(.ax-sidebar-rebuilt) .section--9,
body:has(.ax-sidebar-rebuilt) .section--10 { display: none !important; }

/* Product area hide for product pages */
.section--area--product.ax-hidden { display: none !important; }

/* Category Page Layout - CLEAN */
.section--4:not(.ax-product-page) { background: #f7f8fa !important; padding: 30px 30px 30px 30px !important; margin-bottom: 0 !important; overflow: visible !important; }
.section--4:not(.ax-product-page) .container { overflow: visible !important; }
body:has(.ax-master-flex) { background: #f7f8fa !important; }
.section--4:not(.ax-product-page) .container { display: block !important; max-width: 1400px !important; margin: 0 auto !important; padding: 0 !important; }
.section--4:not(.ax-product-page) .section--wrapper { display: none !important; }
.section--4:not(.ax-product-page) .section--row { display: none !important; }
/* Hide empty sections completely */
body:has(.ax-master-flex) .section--5,
body:has(.ax-master-flex) .section--6,
body:has(.ax-master-flex) .section--7,
body:has(.ax-master-flex) .section--8,
body:has(.ax-master-flex) .section--9,
body:has(.ax-master-flex) .section--10,
body:has(.ax-master-flex) .section--11,
body:has(.ax-master-flex) .section--12 { display: none !important; height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; }

/* Rebuilt Sidebar */
.ax-sidebar-rebuilt { display: flex !important; flex-direction: column !important; background: #fff !important; border-radius: 20px !important; overflow: visible !important; box-shadow: 0 4px 24px rgba(0,0,0,0.06) !important; height: fit-content !important; transition: transform 0.1s ease-out !important; margin: 0 !important; }
.ax-sidebar-header { display: flex !important; align-items: center !important; gap: 14px !important; padding: 16px 20px !important; border-bottom: 1px solid #f0f0f0 !important; }
.ax-sidebar-icon { width: 52px !important; height: 52px !important; background: var(--ax-primary) !important; border-radius: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; box-shadow: 0 4px 15px rgba(var(--ax-primary-rgb),0.25) !important; }
.ax-sidebar-icon i { font-size: 24px !important; color: #fff !important; }
.ax-sidebar-platform { font-size: 18px !important; font-weight: 700 !important; color: #333 !important; text-transform: uppercase !important; letter-spacing: 1px !important; }
.ax-sidebar-text { padding: 16px 20px !important; border-bottom: 1px solid #f0f0f0 !important; }
.ax-sidebar-text h1 { font-size: 16px !important; font-weight: 700 !important; color: var(--ax-primary) !important; margin: 0 0 8px 0 !important; }
.ax-sidebar-text p { font-size: 12px !important; color: #777 !important; line-height: 1.6 !important; margin: 0 !important; }

/* Trust Badges */
.ax-trust-badges { padding: 20px !important; }
.ax-trust-badges .trust-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
.ax-trust-badges .trust-item { display: flex !important; align-items: center !important; gap: 10px !important; padding: 12px 14px !important; background: #f8f9fa !important; border-radius: 10px !important; }
.ax-trust-badges .trust-item i { font-size: 18px !important; color: #22c55e !important; }
.ax-trust-badges .trust-item span { font-size: 12px !important; color: #444 !important; font-weight: 500 !important; }

/* Sidebar AX Card */
.ax-sidebar-card { margin: 16px !important; padding: 20px !important; background: linear-gradient(145deg, #0f0f23 0%, #1a1a3e 50%, #0d1f3c 100%) !important; border-radius: 16px !important; position: relative !important; overflow: hidden !important; }
.ax-sidebar-card::before { content: "" !important; position: absolute !important; top: -30% !important; right: -30% !important; width: 80% !important; height: 80% !important; background: radial-gradient(circle, rgba(225,77,130,0.2) 0%, transparent 60%) !important; pointer-events: none !important; }
.ax-sidebar-card::after { content: "" !important; position: absolute !important; bottom: -20% !important; left: -20% !important; width: 60% !important; height: 60% !important; background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 60%) !important; pointer-events: none !important; }
.ax-sidebar-card .card-badge { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: var(--ax-gradient) !important; color: #fff !important; font-size: 9px !important; font-weight: 700 !important; padding: 5px 12px !important; border-radius: 20px !important; margin-bottom: 14px !important; text-transform: uppercase !important; letter-spacing: 1px !important; box-shadow: 0 4px 15px rgba(225,48,108,0.4) !important; }
.ax-sidebar-card .card-badge i { font-size: 12px !important; }
.ax-sidebar-card .card-logo { font-size: 26px !important; font-weight: 800 !important; color: #fff !important; margin: 0 0 4px 0 !important; position: relative !important; z-index: 1 !important; text-shadow: 0 2px 20px rgba(255,255,255,0.1) !important; }
.ax-sidebar-card .card-logo span { background: var(--ax-gradient) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
.ax-sidebar-card .card-tagline { font-size: 12px !important; color: rgba(255,255,255,0.6) !important; margin: 0 0 16px 0 !important; position: relative !important; z-index: 1 !important; }
.ax-sidebar-card .card-stats { display: flex !important; gap: 8px !important; margin-bottom: 16px !important; position: relative !important; z-index: 1 !important; }
.ax-sidebar-card .card-stat { flex: 1 !important; background: rgba(255,255,255,0.08) !important; backdrop-filter: blur(10px) !important; border-radius: 10px !important; padding: 12px 6px !important; text-align: center !important; border: 1px solid rgba(255,255,255,0.1) !important; }
.ax-sidebar-card .card-stat .num { font-size: 18px !important; font-weight: 800 !important; color: #fff !important; display: block !important; }
.ax-sidebar-card .card-stat .label { font-size: 9px !important; color: rgba(255,255,255,0.5) !important; text-transform: uppercase !important; }
.ax-sidebar-card .card-features { display: flex !important; flex-direction: column !important; gap: 8px !important; position: relative !important; z-index: 1 !important; }
.ax-sidebar-card .card-feat { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 12px !important; color: rgba(255,255,255,0.85) !important; }
.ax-sidebar-card .card-feat i { width: 26px !important; height: 26px !important; background: rgba(225,77,130,0.2) !important; border-radius: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--ax-primary) !important; font-size: 13px !important; }

/* Quick Contact Buttons */
.ax-quick-contact { padding: 16px !important; display: flex !important; gap: 10px !important; }
.ax-quick-contact a { flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 12px !important; border-radius: 10px !important; text-decoration: none !important; font-size: 12px !important; font-weight: 600 !important; transition: all 0.2s ease !important; }
.ax-quick-contact .btn-whatsapp { background: #25d366 !important; color: #fff !important; }
.ax-quick-contact .btn-whatsapp:hover { background: #1da851 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 15px rgba(37,211,102,0.4) !important; }
.ax-quick-contact .btn-telegram { background: #0088cc !important; color: #fff !important; }
.ax-quick-contact .btn-telegram:hover { background: #0077b5 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 15px rgba(0,136,204,0.4) !important; }

/* Rating Section */
.ax-rating-section { padding: 16px 20px !important; border-top: 1px solid #f0f0f0 !important; background: linear-gradient(135deg, #fef9f3 0%, #fff5f8 100%) !important; border-radius: 0 0 20px 20px !important; text-align: center !important; }
.ax-rating-header { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; margin-bottom: 8px !important; }
.ax-rating-stars { display: flex !important; gap: 2px !important; }
.ax-rating-stars i { color: #fbbf24 !important; font-size: 16px !important; }
.ax-rating-score { font-size: 18px !important; font-weight: 700 !important; color: #333 !important; }
.ax-rating-text { font-size: 12px !important; color: #666 !important; line-height: 1.4 !important; margin: 0 !important; }
.ax-rating-text strong { color: var(--ax-primary) !important; }

/* MASTER LAYOUT - DESKTOP - Absolute positioning for perfect alignment */
@media (min-width: 1200px) {
.ax-master-flex {
position: relative !important;
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.ax-master-flex > .ax-sidebar-rebuilt {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 320px !important;
margin: 0 !important;
padding: 0 !important;
}
.ax-master-flex > .category-cards-wrapper {
margin: 0 0 0 350px !important;
padding: 0 !important;
}
}
/* MASTER FLEX - MOBILE */
@media (max-width: 1199px) {
.ax-master-flex {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.ax-master-flex > .ax-sidebar-rebuilt {
width: 100% !important;
min-width: auto !important;
margin: 0 !important;
order: 1 !important;
}
.ax-master-flex > .category-cards-wrapper {
width: 100% !important;
margin: 0 !important;
order: 2 !important;
}
}
/* duplicate rules removed - defined above */
.category-cards-wrapper { display: flex !important; flex-direction: column !important; gap: 16px !important; }
.filter-tabs { display: flex !important; gap: 8px !important; background: #fff !important; padding: 10px 14px !important; border-radius: 40px !important; box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important; flex-wrap: wrap !important; margin: 0 !important; }
.filter-tabs .filter-tab { padding: 11px 22px !important; border-radius: 20px !important; font-size: 13px !important; font-weight: 500 !important; color: #666 !important; cursor: pointer !important; border: none !important; background: transparent !important; }
.filter-tabs .filter-tab:hover { background: #f5f5f5 !important; }
.filter-tabs .filter-tab.active { background: var(--ax-primary) !important; color: #fff !important; }
.category-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
.cat-card { display: flex !important; flex-direction: column !important; background: #fff !important; border-radius: 14px !important; padding: 18px !important; text-decoration: none !important; border: 1px solid #f0f0f0 !important; transition: all 0.25s ease !important; }
.cat-card.hidden { display: none !important; }
.cat-card:hover { border-color: var(--ax-primary) !important; box-shadow: 0 8px 30px rgba(225,77,130,0.1) !important; transform: translateY(-2px) !important; }
.cat-card .card-top { display: flex !important; align-items: center !important; gap: 14px !important; margin-bottom: 10px !important; }
.cat-card .card-icon { width: 52px !important; height: 52px !important; border-radius: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: var(--ax-gradient) !important; }
.cat-card .card-icon i { font-size: 22px !important; color: #fff !important; }
.cat-card .card-info { flex: 1 !important; }
.cat-card .card-title { font-size: 14px !important; font-weight: 600 !important; color: #222 !important; margin: 0 0 3px 0 !important; }
.cat-card .card-subtitle { font-size: 12px !important; color: #aaa !important; margin: 0 !important; }
.cat-card .card-arrow { width: 38px !important; height: 38px !important; background: #f7f7f7 !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.cat-card .card-arrow i { font-size: 18px !important; color: #ccc !important; }
.cat-card:hover .card-arrow { background: var(--ax-primary) !important; }
.cat-card:hover .card-arrow i { color: #fff !important; }
.cat-card .card-bottom { font-size: 12px !important; color: #bbb !important; padding-left: 66px !important; }

/* ============ PRODUCT PAGE STYLES ============ */
.section--4.ax-product-page { background: #f7f8fa !important; padding: 30px 30px 0 30px !important; margin-bottom: 0 !important; overflow: visible !important; }
.section--4.ax-product-page .container { max-width: 1400px !important; margin: 0 auto !important; padding: 0 !important; overflow: visible !important; }
.section--4.ax-product-page .section--wrapper { display: none !important; }
/* Product page flex layout */
.ax-product-flex { position: relative !important; display: block !important; width: 100% !important; }
@media (min-width: 1200px) {
.ax-product-flex > .ax-sidebar-rebuilt { position: absolute !important; top: 0 !important; left: 0 !important; width: 320px !important; }
.ax-product-flex > .ax-product-content { margin: 0 0 0 350px !important; }
}
@media (max-width: 1199px) {
.ax-product-flex { display: flex !important; flex-direction: column !important; gap: 16px !important; }
.ax-product-flex > .ax-sidebar-rebuilt { width: 100% !important; order: 1 !important; }
.ax-product-flex > .ax-product-content { width: 100% !important; order: 2 !important; padding: 16px !important; border-radius: 14px !important; }
}
.ax-product-content { background: #fff !important; border-radius: 20px !important; padding: 24px !important; box-shadow: 0 4px 24px rgba(0,0,0,0.06) !important; }

.ax-header-card { display: flex !important; align-items: center !important; gap: 20px !important; background: var(--ax-card) !important; padding: 20px 28px !important; border-radius: var(--ax-radius) !important; box-shadow: var(--ax-shadow) !important; margin-bottom: 20px !important; }
.ax-header-card .h-icon { width: 60px !important; height: 60px !important; background: var(--ax-gradient) !important; border-radius: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
.ax-header-card .h-icon i { font-size: 26px !important; color: #fff !important; }
.ax-header-card .h-info { flex: 1 !important; }
.ax-header-card .h-info h1 { font-size: 20px !important; font-weight: 700 !important; color: var(--ax-text) !important; margin: 0 0 6px 0 !important; }
.ax-header-card .h-info p { font-size: 13px !important; color: var(--ax-text-light) !important; margin: 0 !important; }
.ax-header-card .h-rating { text-align: right !important; }
.ax-header-card .h-rating .stars { color: #ffc107 !important; font-size: 16px !important; }
.ax-header-card .h-rating .r-text { font-size: 11px !important; color: var(--ax-text-light) !important; margin-top: 4px !important; }

.ax-main-grid { display: grid !important; grid-template-columns: 1fr 340px !important; gap: 20px !important; align-items: start !important; }
.ax-left-col { display: flex !important; flex-direction: column !important; gap: 16px !important; }

.ax-form-card { background: var(--ax-card) !important; border-radius: var(--ax-radius) !important; padding: 24px !important; box-shadow: var(--ax-shadow) !important; }
.ax-promo { background: var(--ax-gradient) !important; color: #fff !important; padding: 12px 20px !important; border-radius: 12px !important; text-align: center !important; margin-bottom: 20px !important; }
.ax-promo strong { font-size: 14px !important; }
.ax-promo span { font-size: 12px !important; opacity: 0.9 !important; display: block !important; margin-top: 2px !important; }

.ax-label { font-size: 14px !important; font-weight: 600 !important; color: var(--ax-text) !important; margin: 0 0 12px 0 !important; }

.ax-pkg-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; margin-bottom: 20px !important; }
@media (max-width: 1199px) { .ax-pkg-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 767px) {
.ax-pkg-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
.ax-product-content { padding: 16px !important; background: #fff !important; box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important; border-radius: 16px !important; }
.ax-sidebar-rebuilt { padding: 16px !important; background: #fff !important; box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important; border-radius: 16px !important; }
}
.ax-pkg-item { border: 2px solid var(--ax-border) !important; border-radius: 14px !important; transition: all 0.3s ease !important; background: var(--ax-card) !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; }
.ax-pkg-item:hover { border-color: var(--ax-primary) !important; }
.ax-pkg-item .pkg-main { display: flex !important; flex-direction: column !important; padding: 14px !important; gap: 10px !important; }
.ax-pkg-item .pkg-title { font-size: 13px !important; font-weight: 700 !important; color: var(--ax-text) !important; margin: 0 !important; line-height: 1.3 !important; }
.ax-pkg-item .pkg-price-row { display: inline-flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; background: linear-gradient(135deg, #fef3f2 0%, #fff5f3 100%) !important; padding: 8px 14px !important; border-radius: 10px !important; border: 1px solid rgba(254,80,11,0.1) !important; }
.ax-pkg-item .pkg-price-row .old-price { font-size: 12px !important; color: #9ca3af !important; text-decoration: line-through !important; font-weight: 500 !important; }
.ax-pkg-item .pkg-price-row .current-price { font-size: 15px !important; font-weight: 700 !important; color: #fe500b !important; background: none !important; padding: 0 !important; display: inline !important; }
.ax-pkg-item .pkg-price-row .price-badge { font-size: 9px !important; font-weight: 700 !important; color: #fff !important; background: linear-gradient(135deg, #10b981 0%, #34d399 100%) !important; padding: 4px 8px !important; border-radius: 12px !important; text-transform: uppercase !important; letter-spacing: 0.3px !important; box-shadow: 0 2px 6px rgba(16,185,129,0.25) !important; }
.ax-pkg-item .pkg-actions { display: flex !important; gap: 8px !important; margin-top: auto !important; }
.ax-pkg-item .pkg-buy-btn { flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 10px 12px !important; background: var(--ax-gradient) !important; color: #fff !important; border: none !important; border-radius: 8px !important; font-size: 12px !important; font-weight: 600 !important; text-decoration: none !important; cursor: pointer !important; transition: all 0.2s ease !important; }
.ax-pkg-item .pkg-buy-btn:hover { transform: scale(1.02) !important; box-shadow: 0 4px 15px rgba(225,77,130,0.4) !important; color: #fff !important; }
.ax-pkg-item .pkg-toggle { padding: 8px 12px !important; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important; border: 1px solid #dee2e6 !important; border-radius: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; cursor: pointer !important; transition: all 0.3s ease !important; flex-shrink: 0 !important; }
.ax-pkg-item .pkg-toggle span { font-size: 11px !important; font-weight: 600 !important; color: #495057 !important; }
.ax-pkg-item .pkg-toggle i { font-size: 14px !important; color: #495057 !important; transition: transform 0.3s ease !important; }
.ax-pkg-item .pkg-toggle:hover { background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important; border-color: #adb5bd !important; }
.ax-pkg-item.show-details .pkg-toggle { background: var(--ax-gradient) !important; border-color: var(--ax-primary) !important; }
.ax-pkg-item.show-details .pkg-toggle span, .ax-pkg-item.show-details .pkg-toggle i { color: #fff !important; }
.ax-pkg-item.show-details .pkg-toggle i { transform: rotate(180deg) !important; }
.ax-pkg-item .pkg-details { max-height: 0 !important; overflow: hidden !important; transition: max-height 0.4s ease !important; background: #f9f9f9 !important; }
.ax-pkg-item.show-details .pkg-details { max-height: 300px !important; padding: 12px !important; border-top: 1px solid var(--ax-border) !important; }
.ax-pkg-item .pkg-features { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.ax-pkg-item .pkg-feat { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 11px !important; color: var(--ax-text) !important; }
.ax-pkg-item .pkg-feat i { color: #22c55e !important; font-size: 14px !important; flex-shrink: 0 !important; }


.ax-bottom-features { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-top: 20px !important; padding-top: 20px !important; border-top: 1px solid var(--ax-border) !important; }
.ax-feat { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 12px !important; color: var(--ax-text-light) !important; }
.ax-feat i { color: var(--ax-primary) !important; }

.ax-right-col { display: flex !important; flex-direction: column !important; gap: 16px !important; }
.ax-cats-card, .ax-info-card { background: var(--ax-card) !important; border-radius: var(--ax-radius) !important; padding: 20px !important; box-shadow: var(--ax-shadow) !important; }
.ax-cats-card .title { font-size: 14px !important; font-weight: 600 !important; margin: 0 0 14px 0 !important; }
.ax-cats-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
.ax-cat-link { display: flex !important; align-items: center !important; gap: 10px !important; padding: 12px !important; background: #f8f8f8 !important; border-radius: 10px !important; text-decoration: none !important; }
.ax-cat-link:hover { background: rgba(225,77,130,0.08) !important; }
.ax-cat-link i { color: var(--ax-primary) !important; }
.ax-cat-link span { font-size: 12px !important; color: var(--ax-primary) !important; }

/* AX Info Card - Premium Design */
.ax-info-card { background: linear-gradient(145deg, #0f0f23 0%, #1a1a3e 40%, #0d1f3c 100%) !important; color: #fff !important; overflow: hidden !important; position: relative !important; padding: 24px !important; }
.ax-info-card::before { content: "" !important; position: absolute !important; top: -40% !important; right: -40% !important; width: 100% !important; height: 100% !important; background: radial-gradient(circle, rgba(225,77,130,0.25) 0%, transparent 60%) !important; pointer-events: none !important; }
.ax-info-card::after { content: "" !important; position: absolute !important; bottom: -30% !important; left: -30% !important; width: 80% !important; height: 80% !important; background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 60%) !important; pointer-events: none !important; }
.ax-info-card .info-badge { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: var(--ax-gradient) !important; color: #fff !important; font-size: 10px !important; font-weight: 700 !important; padding: 6px 14px !important; border-radius: 20px !important; margin-bottom: 14px !important; text-transform: uppercase !important; letter-spacing: 1px !important; box-shadow: 0 4px 15px rgba(225,48,108,0.4) !important; position: relative !important; z-index: 1 !important; }
.ax-info-card .info-logo { font-size: 32px !important; font-weight: 800 !important; margin: 0 0 6px 0 !important; color: #fff !important; position: relative !important; z-index: 1 !important; text-shadow: 0 2px 30px rgba(255,255,255,0.15) !important; }
.ax-info-card .info-logo span { background: var(--ax-gradient) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
.ax-info-card .info-tagline { font-size: 13px !important; color: rgba(255,255,255,0.6) !important; margin: 0 0 20px 0 !important; position: relative !important; z-index: 1 !important; }
.ax-info-card .info-stats { display: flex !important; gap: 10px !important; margin-bottom: 20px !important; position: relative !important; z-index: 1 !important; }
.ax-info-card .stat-box { flex: 1 !important; background: rgba(255,255,255,0.08) !important; backdrop-filter: blur(10px) !important; border-radius: 12px !important; padding: 14px 8px !important; text-align: center !important; border: 1px solid rgba(255,255,255,0.1) !important; transition: all 0.3s ease !important; }
.ax-info-card .stat-box:hover { background: rgba(255,255,255,0.12) !important; transform: translateY(-2px) !important; }
.ax-info-card .stat-box .stat-num { font-size: 24px !important; font-weight: 800 !important; color: #fff !important; display: block !important; text-shadow: 0 2px 10px rgba(255,255,255,0.2) !important; }
.ax-info-card .stat-box .stat-label { font-size: 9px !important; color: rgba(255,255,255,0.5) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; }
.ax-info-card .info-features { display: flex !important; flex-direction: column !important; gap: 10px !important; position: relative !important; z-index: 1 !important; }
.ax-info-card .info-feat { display: flex !important; align-items: center !important; gap: 12px !important; font-size: 13px !important; color: rgba(255,255,255,0.9) !important; padding: 4px 0 !important; }
.ax-info-card .info-feat i { width: 32px !important; height: 32px !important; background: linear-gradient(135deg, rgba(225,77,130,0.3) 0%, rgba(225,77,130,0.1) 100%) !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--ax-primary) !important; font-size: 15px !important; border: 1px solid rgba(225,77,130,0.2) !important; }

/* ============ MODERN FAQ/SSS STYLES ============ */
.section--3 { background: #f7f8fa !important; padding: 30px 30px 16px 30px !important; margin: 0 !important; margin-top: -1px !important; }
.section--3::before, .section--3::after { display: none !important; content: none !important; }
.section--3 .container::before, .section--3 .container::after { display: none !important; content: none !important; }
.section--3 .container { max-width: 1400px !important; margin: 0 auto !important; padding: 0 !important; }
.section--3 .section--wrapper { background: #fff !important; border-radius: 20px !important; padding: 28px !important; box-shadow: 0 4px 24px rgba(0,0,0,0.06) !important; }
.section--3 .section--wrapper .title { margin-bottom: 24px !important; padding-bottom: 16px !important; border-bottom: 1px solid #f0f0f0 !important; }
.section--3 .section--wrapper .title .left { font-size: 20px !important; font-weight: 700 !important; color: #1a1a2e !important; display: flex !important; align-items: center !important; gap: 12px !important; }
.section--3 .section--wrapper .title .left::before { content: "\f059" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; width: 40px !important; height: 40px !important; background: var(--ax-gradient) !important; color: #fff !important; border-radius: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 18px !important; }
/* 2-column grid layout */
.section--3 .accordion-wrapper { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
.section--3 .accordion-wrapper .accordion { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 !important; margin: 0 !important; background: #f8f9fb !important; border: 1px solid #eef0f3 !important; border-radius: 14px !important; overflow: hidden !important; transition: all 0.3s ease !important; }
.section--3 .accordion-wrapper .accordion:hover { border-color: rgba(225,77,130,0.3) !important; background: #fff !important; box-shadow: 0 4px 16px rgba(225,77,130,0.08) !important; }
.section--3 .accordion-wrapper .accordion.active { border-color: var(--ax-primary) !important; background: #fff !important; box-shadow: 0 6px 24px rgba(225,77,130,0.12) !important; }
.section--3 .accordion-wrapper .accordion .accordion-title { padding: 16px 20px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; }
.section--3 .accordion-wrapper .accordion .accordion-title .d-flex { flex: 1 !important; }
.section--3 .accordion-wrapper .accordion .accordion-title p { font-size: 14px !important; font-weight: 600 !important; color: #333 !important; margin: 0 !important; line-height: 1.5 !important; }
.section--3 .accordion-wrapper .accordion .accordion-title span { width: 32px !important; height: 32px !important; background: #eef0f3 !important; border-radius: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; transition: all 0.3s ease !important; }
.section--3 .accordion-wrapper .accordion .accordion-title span i { font-size: 16px !important; color: #666 !important; transition: all 0.3s ease !important; }
.section--3 .accordion-wrapper .accordion.active .accordion-title span { background: var(--ax-gradient) !important; }
.section--3 .accordion-wrapper .accordion.active .accordion-title span i { color: #fff !important; }
/* Panel - don't override display, just style it */
.section--3 .accordion-wrapper .accordion .panel { padding: 0 20px !important; background: linear-gradient(135deg, rgba(225,77,130,0.03) 0%, rgba(225,77,130,0.01) 100%) !important; }
.section--3 .accordion-wrapper .accordion .panel .panelParag { font-size: 13px !important; line-height: 1.7 !important; color: #555 !important; margin: 0 !important; padding: 16px 0 !important; }

/* FAQ Mobile - 1 column */
@media (max-width: 767px) {
/* ================================================================ */
/* === TÜM ALANLAR BİREBİR AYNI - "Bu Hizmet Hakkında" REFERANS === */
/* ================================================================ */
/* ORTAK: dış padding:16px, iç padding:14px, radius:16px, shadow:0 2px 12px rgba(0,0,0,0.08) */
/* ORTAK: başlık 15px/700, ikon 30x30/8px radius, içerik 12px */

/* ===== SECTION-3 (SSS) ===== */
.section--3 { padding: 20px 16px 12px 16px !important; background: #f7f8fa !important; margin-top: 0 !important; }
.section--3 .section--wrapper {
    padding: 16px !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
    background: #fff !important;
    margin: 0 !important;
}
.section--3 .section--wrapper .title { padding: 0 0 12px 0 !important; margin-bottom: 12px !important; border-bottom: 1px solid #f0f0f0 !important; }
.section--3 .section--wrapper .title .left { font-size: 15px !important; font-weight: 700 !important; gap: 10px !important; }
.section--3 .section--wrapper .title .left::before { width: 30px !important; height: 30px !important; font-size: 13px !important; border-radius: 8px !important; }
.section--3 .accordion-wrapper { grid-template-columns: 1fr !important; gap: 8px !important; }
.section--3 .accordion-wrapper .accordion { border-radius: 10px !important; }
.section--3 .accordion-wrapper .accordion .accordion-title { padding: 12px 14px !important; }
.section--3 .accordion-wrapper .accordion .accordion-title p { font-size: 12px !important; }
.section--3 .accordion-wrapper .accordion .accordion-title span { width: 24px !important; height: 24px !important; }
.section--3 .accordion-wrapper .accordion .panel .panelParag { font-size: 12px !important; padding: 12px 0 !important; }

/* ===== SECTION-4 (ÜRÜN ALANI) ===== */
.section--4 { padding: 16px !important; background: #f7f8fa !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; }
.section--4.ax-product-page { padding: 16px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; }
.section--4 .container { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
.ax-product-flex { width: 100% !important; box-sizing: border-box !important; }

/* Sidebar - SEO ile birebir aynı */
.ax-sidebar-rebuilt {
    padding: 16px !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
    background: #fff !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.ax-sidebar-header { padding: 0 0 12px 0 !important; gap: 10px !important; border-bottom: 1px solid #f0f0f0 !important; margin-bottom: 12px !important; }
.ax-sidebar-icon { width: 30px !important; height: 30px !important; border-radius: 8px !important; flex-shrink: 0 !important; }
.ax-sidebar-icon i { font-size: 13px !important; }
.ax-sidebar-platform { font-size: 15px !important; font-weight: 700 !important; }
.ax-sidebar-text { padding: 0 !important; border: none !important; }
.ax-sidebar-text h1 { font-size: 12px !important; margin-bottom: 4px !important; word-break: break-word !important; }
.ax-sidebar-text p { font-size: 11px !important; word-break: break-word !important; }
/* Trust Badges - overflow fix */
.ax-trust-badges { padding: 12px 0 0 0 !important; margin-top: 12px !important; border-top: 1px solid #f0f0f0 !important; overflow: hidden !important; }
.ax-trust-badges .trust-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
.ax-trust-badges .trust-item {
    padding: 6px 4px !important;
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
.ax-trust-badges .trust-item i { font-size: 12px !important; margin-bottom: 2px !important; }
.ax-trust-badges .trust-item span {
    font-size: 9px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    word-break: break-word !important;
    hyphens: auto !important;
    max-width: 100% !important;
}

/* ===== PRODUCT CONTENT - PREMIUM TASARIM ===== */
.ax-product-content {
    padding: 16px !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
    background: #fff !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.ax-header-card {
    padding: 14px !important;
    margin-bottom: 14px !important;
    border-bottom: none !important;
    box-shadow: none !important;
    gap: 12px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%) !important;
    border-radius: 12px !important;
}
.ax-header-card .h-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 8px rgba(225,77,130,0.25) !important;
}
.ax-header-card .h-icon i { font-size: 15px !important; }
.ax-header-card .h-info { min-width: 0 !important; flex: 1 !important; overflow: hidden !important; }
.ax-header-card .h-info h1 {
    font-size: 13px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    word-break: break-word !important;
    line-height: 1.4 !important;
    color: #1a1a2e !important;
}
.ax-header-card .h-info p {
    font-size: 10px !important;
    margin: 4px 0 0 0 !important;
    word-break: break-word !important;
    color: #64748b !important;
    line-height: 1.4 !important;
}
.ax-promo {
    padding: 10px 14px !important;
    border-radius: 10px !important;
    margin-bottom: 14px !important;
    background: linear-gradient(135deg, #e1306c 0%, #c13584 50%, #833ab4 100%) !important;
}
.ax-promo strong { font-size: 12px !important; font-weight: 600 !important; }
.ax-promo span { font-size: 10px !important; opacity: 0.9 !important; }
.ax-label {
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 0 14px 0 !important;
    padding: 0 0 12px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    color: #1a1a2e !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
/* HTML'de zaten ikon var */
.ax-label i {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    background: var(--ax-gradient) !important;
    color: #fff !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
}

/* ===== PAKET KARTLARI - PREMIUM MOBİL TASARIM ===== */
/* 2'li grid, kurumsal görünüm */
.ax-pkg-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
}
.ax-pkg-item {
    padding: 0 !important;
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    transition: all 0.2s ease !important;
}
.ax-pkg-item:hover {
    border-color: var(--ax-primary) !important;
    box-shadow: 0 4px 12px rgba(225,77,130,0.15) !important;
}
.ax-pkg-item .pkg-main {
    padding: 12px 10px !important;
    gap: 8px !important;
    display: flex !important;
    flex-direction: column !important;
}
.ax-pkg-item .pkg-title {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
    min-height: 28px !important;
}
.ax-pkg-item .pkg-price-row {
    padding: 8px !important;
    border-radius: 8px !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    background: linear-gradient(135deg, #fef7f0 0%, #fff5f5 100%) !important;
    border: none !important;
    justify-content: center !important;
}
.ax-pkg-item .pkg-price-row .old-price {
    font-size: 9px !important;
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 2px !important;
}
.ax-pkg-item .pkg-price-row .current-price {
    font-size: 14px !important;
    font-weight: 700 !important;
    width: 100% !important;
    text-align: center !important;
}
.ax-pkg-item .pkg-price-row .price-badge {
    font-size: 7px !important;
    padding: 2px 6px !important;
    margin-top: 4px !important;
}
.ax-pkg-item .pkg-actions {
    gap: 6px !important;
    flex-direction: column !important;
    padding: 0 !important;
}
.ax-pkg-item .pkg-buy-btn {
    padding: 10px 8px !important;
    font-size: 10px !important;
    border-radius: 8px !important;
    width: 100% !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
}
.ax-pkg-item .pkg-toggle {
    padding: 6px !important;
    border-radius: 6px !important;
    width: 100% !important;
    justify-content: center !important;
}
.ax-pkg-item .pkg-toggle span { display: none !important; }
.ax-pkg-item .pkg-toggle i { font-size: 12px !important; }
.ax-pkg-item.show-details .pkg-details {
    padding: 10px !important;
    background: #f9fafb !important;
}
.ax-pkg-item .pkg-feat {
    font-size: 9px !important;
    padding: 4px 0 !important;
}
.ax-pkg-item .pkg-feat i { font-size: 10px !important; }

/* Bottom features - Premium tasarım */
.ax-bottom-features {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid #f0f0f0 !important;
}
.ax-feat {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
}
.ax-feat i {
    width: 24px !important;
    height: 24px !important;
    background: var(--ax-gradient) !important;
    color: #fff !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    flex-shrink: 0 !important;
}

/* ===== SEO CARD (Bu Hizmet Hakkında) - REFERANS ===== */
.ax-seo-card { border-radius: 16px !important; box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important; background: #fff !important; }
.ax-seo-wrapper { padding: 0 16px 16px 16px !important; margin-top: 12px !important; background: #f7f8fa !important; }
.ax-seo-header { padding: 14px 14px 12px 14px !important; border-bottom: 1px solid #f0f0f0 !important; }
.ax-seo-header h2 { font-size: 15px !important; font-weight: 700 !important; }
.ax-seo-header > div:first-child { width: 30px !important; height: 30px !important; border-radius: 8px !important; }
.ax-seo-header i { font-size: 13px !important; }
.ax-seo-content { max-height: 350px !important; padding: 14px !important; font-size: 12px !important; line-height: 1.6 !important; }
}

/* Mobile & Tablet - Tutarlı geçiş */
@media (max-width: 1199px) {
.section--4 { padding: 16px !important; background: #f7f8fa !important; box-sizing: border-box !important; }
.section--4.ax-product-page { padding: 16px 16px 16px 16px !important; box-sizing: border-box !important; }
.section--4 .container { flex-direction: column !important; gap: 12px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 0 !important; }
/* Sidebar - tablet */
.ax-sidebar-rebuilt { width: 100% !important; min-width: auto !important; border-radius: 16px !important; padding: 16px !important; }
.ax-sidebar-header { padding: 0 0 12px 0 !important; gap: 10px !important; border-bottom: 1px solid #f0f0f0 !important; margin-bottom: 12px !important; }
.ax-sidebar-icon { width: 34px !important; height: 34px !important; border-radius: 8px !important; }
.ax-sidebar-icon i { font-size: 15px !important; }
.ax-sidebar-platform { font-size: 15px !important; font-weight: 700 !important; }
.ax-sidebar-text { padding: 0 !important; border: none !important; }
.ax-sidebar-text h1 { font-size: 13px !important; }
.ax-sidebar-text p { font-size: 11px !important; }
/* Trust badges */
.ax-trust-badges { padding: 12px 0 0 0 !important; margin-top: 12px !important; border-top: 1px solid #f0f0f0 !important; }
.ax-trust-badges .trust-grid { gap: 6px !important; }
.ax-trust-badges .trust-item { padding: 8px !important; border-radius: 8px !important; }
.ax-trust-badges .trust-item i { font-size: 12px !important; }
.ax-trust-badges .trust-item span { font-size: 9px !important; }
/* Product content - beyaz kart */
.ax-product-content {
    padding: 16px !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.ax-product-flex {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.ax-header-card { padding: 0 0 12px 0 !important; margin-bottom: 12px !important; border-bottom: 1px solid #f0f0f0 !important; box-shadow: none !important; gap: 10px !important; background: transparent !important; }
.ax-header-card .h-icon { width: 34px !important; height: 34px !important; border-radius: 8px !important; }
.ax-header-card .h-icon i { font-size: 15px !important; }
.ax-header-card .h-info h1 { font-size: 15px !important; }
/* Category cards */
.category-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
.cat-card { padding: 14px !important; border-radius: 12px !important; }
.cat-card .card-icon { width: 34px !important; height: 34px !important; border-radius: 8px !important; }
.cat-card .card-icon i { font-size: 15px !important; }
.cat-card .card-title { font-size: 13px !important; }
.cat-card .card-bottom { padding-left: 48px !important; font-size: 11px !important; }
.filter-tabs { overflow-x: auto !important; flex-wrap: nowrap !important; padding: 8px 10px !important; gap: 6px !important; }
.filter-tabs .filter-tab { padding: 9px 16px !important; font-size: 12px !important; white-space: nowrap !important; }
.ax-main-grid { grid-template-columns: 1fr !important; }
.ax-pkg-item .pkg-features { grid-template-columns: 1fr !important; }
.ax-bottom-features, .ax-cats-grid { grid-template-columns: 1fr !important; }
}

/* ============ SEO TEXT SECTION (section--5) ============ */
/* CSS-only solution - show section--5 on product pages even without JS class */
/* Override ax-hidden class with higher specificity */
body:has(.ax-product-page) .section--5,
body:has(.ax-product-page) .section--5.ax-hidden,
body:has(.ax-product-content) .section--5,
body:has(.ax-product-content) .section--5.ax-hidden,
body:has(.ax-product-flex) .section--5,
body:has(.ax-product-flex) .section--5.ax-hidden,
.section--5.ax-seo-section {
    display: block !important;
    visibility: visible !important;
    background: #f7f8fa !important;
    padding: 0 30px 40px 30px !important;
    margin: 0 !important;
}

body:has(.ax-product-page) .section--5 .container,
body:has(.ax-product-content) .section--5 .container,
body:has(.ax-product-flex) .section--5 .container,
.section--5.ax-seo-section .container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

body:has(.ax-product-page) .section--5 #articleControl,
body:has(.ax-product-content) .section--5 #articleControl,
body:has(.ax-product-flex) .section--5 #articleControl,
.section--5.ax-seo-section #articleControl {
    background: #fff !important;
    border-radius: 20px !important;
    padding: 32px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06) !important;
    position: relative !important;
    overflow: hidden !important;
    max-height: 480px !important;
}
body:has(.ax-product-page) .section--5 #articleControl.expanded,
body:has(.ax-product-content) .section--5 #articleControl.expanded,
body:has(.ax-product-flex) .section--5 #articleControl.expanded,
.section--5.ax-seo-section #articleControl.expanded {
    max-height: none !important;
}

/* Article Title Styles - Works with both JS class and CSS-only fallback */
body:has(.ax-product-page) .section--5 #articleControl h1,
body:has(.ax-product-content) .section--5 #articleControl h1,
body:has(.ax-product-flex) .section--5 #articleControl h1,
.section--5.ax-seo-section #articleControl h1 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    margin: 0 0 20px 0 !important;
    padding-bottom: 16px !important;
    border-bottom: 2px solid var(--ax-primary) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

body:has(.ax-product-page) .section--5 #articleControl h1::before,
body:has(.ax-product-content) .section--5 #articleControl h1::before,
body:has(.ax-product-flex) .section--5 #articleControl h1::before,
.section--5.ax-seo-section #articleControl h1::before {
    content: "\f15c" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    width: 44px !important;
    height: 44px !important;
    background: var(--ax-gradient) !important;
    color: #fff !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

body:has(.ax-product-page) .section--5 #articleControl h2,
body:has(.ax-product-content) .section--5 #articleControl h2,
body:has(.ax-product-flex) .section--5 #articleControl h2,
.section--5.ax-seo-section #articleControl h2 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--ax-primary) !important;
    margin: 28px 0 14px 0 !important;
    padding-left: 16px !important;
    border-left: 4px solid var(--ax-primary) !important;
    line-height: 1.4 !important;
}

body:has(.ax-product-page) .section--5 #articleControl h3,
body:has(.ax-product-content) .section--5 #articleControl h3,
body:has(.ax-product-flex) .section--5 #articleControl h3,
.section--5.ax-seo-section #articleControl h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin: 20px 0 10px 0 !important;
}

/* Define shorthand for product page context */
body:has(.ax-product-page) .section--5 #articleControl p,
body:has(.ax-product-content) .section--5 #articleControl p,
body:has(.ax-product-flex) .section--5 #articleControl p,
.section--5.ax-seo-section #articleControl p {
    font-size: 14px !important;
    line-height: 1.8 !important;
    color: #555 !important;
    margin: 0 0 16px 0 !important;
}

body:has(.ax-product-page) .section--5 #articleControl ul,
body:has(.ax-product-page) .section--5 #articleControl ol,
body:has(.ax-product-content) .section--5 #articleControl ul,
body:has(.ax-product-content) .section--5 #articleControl ol,
body:has(.ax-product-flex) .section--5 #articleControl ul,
body:has(.ax-product-flex) .section--5 #articleControl ol,
.section--5.ax-seo-section #articleControl ul,
.section--5.ax-seo-section #articleControl ol {
    margin: 16px 0 !important;
    padding-left: 24px !important;
}

body:has(.ax-product-page) .section--5 #articleControl li,
body:has(.ax-product-content) .section--5 #articleControl li,
body:has(.ax-product-flex) .section--5 #articleControl li,
.section--5.ax-seo-section #articleControl li {
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: #555 !important;
    margin-bottom: 8px !important;
    position: relative !important;
}

body:has(.ax-product-page) .section--5 #articleControl ul li::marker,
body:has(.ax-product-content) .section--5 #articleControl ul li::marker,
body:has(.ax-product-flex) .section--5 #articleControl ul li::marker,
.section--5.ax-seo-section #articleControl ul li::marker {
    color: var(--ax-primary) !important;
}

body:has(.ax-product-page) .section--5 #articleControl strong,
body:has(.ax-product-page) .section--5 #articleControl b,
body:has(.ax-product-content) .section--5 #articleControl strong,
body:has(.ax-product-content) .section--5 #articleControl b,
body:has(.ax-product-flex) .section--5 #articleControl strong,
body:has(.ax-product-flex) .section--5 #articleControl b,
.section--5.ax-seo-section #articleControl strong,
.section--5.ax-seo-section #articleControl b {
    color: #333 !important;
    font-weight: 600 !important;
}

body:has(.ax-product-page) .section--5 #articleControl a,
body:has(.ax-product-content) .section--5 #articleControl a,
body:has(.ax-product-flex) .section--5 #articleControl a,
.section--5.ax-seo-section #articleControl a {
    color: var(--ax-primary) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

body:has(.ax-product-page) .section--5 #articleControl a:hover,
body:has(.ax-product-content) .section--5 #articleControl a:hover,
body:has(.ax-product-flex) .section--5 #articleControl a:hover,
.section--5.ax-seo-section #articleControl a:hover {
    text-decoration: underline !important;
}

/* Show more/less toggle styling - gradient fade at bottom */
body:has(.ax-product-page) .section--5 #articleControl:not(.expanded)::after,
body:has(.ax-product-content) .section--5 #articleControl:not(.expanded)::after,
body:has(.ax-product-flex) .section--5 #articleControl:not(.expanded)::after,
.section--5.ax-seo-section #articleControl:not(.expanded)::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 120px !important;
    background: linear-gradient(transparent, #fff 70%) !important;
    pointer-events: none !important;
}

body:has(.ax-product-page) .section--5 #articleControl .readMore,
body:has(.ax-product-page) .section--5 #articleControl .show-more-btn,
body:has(.ax-product-page) .section--5 #articleControl [onclick*="toggle"],
body:has(.ax-product-content) .section--5 #articleControl .readMore,
body:has(.ax-product-content) .section--5 #articleControl .show-more-btn,
body:has(.ax-product-content) .section--5 #articleControl [onclick*="toggle"],
body:has(.ax-product-flex) .section--5 #articleControl .readMore,
body:has(.ax-product-flex) .section--5 #articleControl .show-more-btn,
body:has(.ax-product-flex) .section--5 #articleControl [onclick*="toggle"],
.section--5.ax-seo-section #articleControl .readMore,
.section--5.ax-seo-section #articleControl .show-more-btn,
.section--5.ax-seo-section #articleControl [onclick*="toggle"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--ax-gradient) !important;
    color: #fff !important;
    padding: 12px 24px !important;
    border-radius: 25px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border: none !important;
    margin-top: 20px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 10 !important;
}

body:has(.ax-product-page) .section--5 #articleControl .readMore:hover,
body:has(.ax-product-page) .section--5 #articleControl .show-more-btn:hover,
body:has(.ax-product-content) .section--5 #articleControl .readMore:hover,
body:has(.ax-product-content) .section--5 #articleControl .show-more-btn:hover,
body:has(.ax-product-flex) .section--5 #articleControl .readMore:hover,
body:has(.ax-product-flex) .section--5 #articleControl .show-more-btn:hover,
.section--5.ax-seo-section #articleControl .readMore:hover,
.section--5.ax-seo-section #articleControl .show-more-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(225,77,130,0.3) !important;
}

/* SEO Section Mobile Responsive - APP TARZI */
@media (max-width: 767px) {
    body:has(.ax-product-page) .section--5,
    body:has(.ax-product-content) .section--5,
    body:has(.ax-product-flex) .section--5,
    .section--5.ax-seo-section {
        padding: 0 16px 16px 16px !important;
    }

    body:has(.ax-product-page) .section--5 #articleControl,
    body:has(.ax-product-content) .section--5 #articleControl,
    body:has(.ax-product-flex) .section--5 #articleControl,
    .section--5.ax-seo-section #articleControl {
        padding: 14px !important;
        border-radius: 16px !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
    }

    body:has(.ax-product-page) .section--5 #articleControl h1,
    body:has(.ax-product-content) .section--5 #articleControl h1,
    body:has(.ax-product-flex) .section--5 #articleControl h1,
    .section--5.ax-seo-section #articleControl h1 {
        font-size: 15px !important;
    }

    body:has(.ax-product-page) .section--5 #articleControl h1::before,
    body:has(.ax-product-content) .section--5 #articleControl h1::before,
    body:has(.ax-product-flex) .section--5 #articleControl h1::before,
    .section--5.ax-seo-section #articleControl h1::before {
        width: 30px !important;
        height: 30px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }

    body:has(.ax-product-page) .section--5 #articleControl h2,
    body:has(.ax-product-content) .section--5 #articleControl h2,
    body:has(.ax-product-flex) .section--5 #articleControl h2,
    .section--5.ax-seo-section #articleControl h2 {
        font-size: 14px !important;
        padding-left: 10px !important;
        margin: 20px 0 10px 0 !important;
    }

    body:has(.ax-product-page) .section--5 #articleControl p,
    body:has(.ax-product-content) .section--5 #articleControl p,
    body:has(.ax-product-flex) .section--5 #articleControl p,
    .section--5.ax-seo-section #articleControl p {
        font-size: 12px !important;
        line-height: 1.6 !important;
        margin-bottom: 12px !important;
    }
}

/* === END AX STYLES === */