/* ============================================================
   esular B2C Design System
   Production-ready, mobile-first, agro/green theme
   Loads after site.css to override legacy styles
   ============================================================ */

:root {
    /* Brand & Palette — Esular birincil: turuncu (esular.com landing.css ile uyumlu). Yeşil success/accent rolünde. */
    --es-primary: #f24726;
    --es-primary-600: #d93d1f;
    --es-primary-700: #b8331a;
    --es-primary-50: #fff1ec;
    --es-primary-100: #ffd9cc;
    --es-accent: #16a34a;
    --es-accent-600: #d97706;
    --es-danger: #dc2626;
    --es-danger-50: #fef2f2;
    --es-warning: #f59e0b;
    --es-info: #0284c7;
    --es-success: #16a34a;

    --es-text: #0f172a;
    --es-text-muted: #64748b;
    --es-text-soft: #94a3b8;
    --es-surface: #f8fafc;
    --es-surface-2: #f1f5f9;
    --es-border: #e2e8f0;
    --es-border-soft: #f1f5f9;
    --es-white: #ffffff;

    /* Spacing scale */
    --es-sp-1: 4px;
    --es-sp-2: 8px;
    --es-sp-3: 12px;
    --es-sp-4: 16px;
    --es-sp-6: 24px;
    --es-sp-8: 32px;
    --es-sp-12: 48px;

    /* Radius */
    --es-radius-sm: 8px;
    --es-radius-btn: 10px;
    --es-radius-card: 14px;
    --es-radius-pill: 999px;

    /* Shadows */
    --es-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --es-shadow-md: 0 4px 12px rgba(15, 23, 42, .08);
    --es-shadow-lg: 0 8px 24px rgba(15, 23, 42, .12);
    --es-shadow-xl: 0 16px 40px rgba(15, 23, 42, .16);

    /* Typography */
    --es-font: 'Inter', 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

    /* Bootstrap overrides */
    --bs-primary: #16a34a;
    --bs-primary-rgb: 22, 163, 74;
    --bs-link-color: #15803d;
    --bs-link-hover-color: #166534;
}

/* ============================ Base ============================ */
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--es-font);
    color: var(--es-text);
    background: var(--es-white);
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--es-text);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
a { color: var(--es-primary-600); text-decoration: none; }
a:hover { color: var(--es-primary-700); }

::selection { background: var(--es-primary-100); color: var(--es-primary-700); }

/* ============================ Bootstrap accent overrides ============================ */
.btn-primary {
    --bs-btn-bg: var(--es-primary);
    --bs-btn-border-color: var(--es-primary);
    --bs-btn-hover-bg: var(--es-primary-600);
    --bs-btn-hover-border-color: var(--es-primary-600);
    --bs-btn-active-bg: var(--es-primary-700);
    --bs-btn-active-border-color: var(--es-primary-700);
}
.btn-outline-primary {
    --bs-btn-color: var(--es-primary-600);
    --bs-btn-border-color: var(--es-primary);
    --bs-btn-hover-bg: var(--es-primary);
    --bs-btn-hover-border-color: var(--es-primary);
}
.text-primary { color: var(--es-primary-600) !important; }
.bg-primary { background-color: var(--es-primary) !important; }
.border-primary { border-color: var(--es-primary) !important; }
.btn-success { --bs-btn-bg: var(--es-primary); --bs-btn-border-color: var(--es-primary); }

/* ============================ Buttons ============================ */
.es-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px; border-radius: var(--es-radius-btn);
    font-weight: 600; font-size: 15px; line-height: 1; min-height: 44px;
    border: 1px solid transparent; cursor: pointer; text-decoration: none;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.es-btn:active { transform: translateY(1px); }
.es-btn-primary { background: var(--es-primary); color: #fff; box-shadow: var(--es-shadow-sm); }
.es-btn-primary:hover { background: var(--es-primary-600); color: #fff; box-shadow: var(--es-shadow-md); }
.es-btn-outline { background: #fff; color: var(--es-primary-700); border-color: var(--es-primary); }
.es-btn-outline:hover { background: var(--es-primary-50); color: var(--es-primary-700); }
.es-btn-accent { background: var(--es-accent); color: #fff; }
.es-btn-accent:hover { background: var(--es-accent-600); color: #fff; }
.es-btn-ghost { background: transparent; color: var(--es-text); }
.es-btn-ghost:hover { background: var(--es-surface-2); color: var(--es-text); }
.es-btn-wa { background: #25d366; color: #fff; }
.es-btn-wa:hover { background: #1ebe5b; color: #fff; }
.es-btn-block { width: 100%; }
.es-btn-lg { padding: 14px 28px; font-size: 16px; min-height: 52px; }
.es-btn-sm { padding: 8px 14px; font-size: 13px; min-height: 36px; }

/* ============================ Pills / Badges ============================ */
.es-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: var(--es-radius-pill);
    font-size: 12px; font-weight: 600; line-height: 1.4;
    background: var(--es-surface-2); color: var(--es-text);
}
.es-pill-primary { background: var(--es-primary-100); color: var(--es-primary-700); }
.es-pill-danger { background: #fee2e2; color: #b91c1c; }
.es-pill-warning { background: #fef3c7; color: #92400e; }
.es-pill-info { background: #dbeafe; color: #1d4ed8; }
.es-pill-new { background: var(--es-primary); color: #fff; }

/* ============================ Cards ============================ */
.es-card {
    background: #fff; border: 1px solid var(--es-border);
    border-radius: var(--es-radius-card); padding: 20px;
    transition: box-shadow .2s ease, transform .2s ease;
}
.es-card:hover { box-shadow: var(--es-shadow-md); }
.es-card-elevated { box-shadow: var(--es-shadow-sm); border-color: transparent; }
.es-card-flush { padding: 0; overflow: hidden; }

/* ============================ Hero (Home) ============================ */
.es-hero {
    position: relative; padding: 64px 0 56px;
    background:
        radial-gradient(1200px 600px at -10% -10%, rgba(22,163,74,.10), transparent 60%),
        radial-gradient(900px 500px at 110% 10%, rgba(245,158,11,.10), transparent 60%),
        linear-gradient(180deg, #fff 0%, var(--es-primary-50) 100%);
    overflow: hidden;
}
.es-hero .eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border: 1px solid var(--es-border);
    color: var(--es-primary-700); padding: 6px 12px;
    border-radius: var(--es-radius-pill);
    font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    box-shadow: var(--es-shadow-sm);
}
.es-hero h1 {
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 800; line-height: 1.1; margin: 18px 0 14px;
    letter-spacing: -0.02em;
}
.es-hero .lead {
    font-size: clamp(15px, 1.6vw, 18px); color: var(--es-text-muted);
    max-width: 560px; margin-bottom: 24px;
}
.es-hero-metric {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: var(--es-radius-pill);
    background: #fff; border: 1px solid var(--es-border);
    color: var(--es-text); font-size: 13px; font-weight: 600;
    box-shadow: var(--es-shadow-sm);
}
.es-hero-metric .num { color: var(--es-primary-700); font-weight: 800; }
.es-hero-visual {
    position: relative; min-height: 320px;
    display: flex; align-items: center; justify-content: center;
}
.es-hero-visual img {
    max-width: 100%; max-height: 420px; object-fit: contain;
    filter: drop-shadow(0 24px 36px rgba(15, 23, 42, .14));
    animation: esFloat 5s ease-in-out infinite;
}
@keyframes esFloat {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}
.es-hero-blob {
    position: absolute; inset: auto -10% 10% auto; width: 60%; height: 60%;
    background: radial-gradient(circle at 50% 50%, rgba(22,163,74,.15), transparent 70%);
    z-index: 0; pointer-events: none;
}

/* ============================ Trust Strip ============================ */
.es-trust-strip {
    background: #fff; border-top: 1px solid var(--es-border);
    border-bottom: 1px solid var(--es-border);
    padding: 14px 0;
}
.es-trust-strip .row > div {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    color: var(--es-text); font-size: 14px; font-weight: 600;
}
.es-trust-strip i {
    font-size: 22px; color: var(--es-primary-600);
    background: var(--es-primary-50);
    width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}

/* ============================ Section heading ============================ */
.es-section {
    padding: 56px 0;
}
.es-section--tight { padding: 32px 0; }
.es-section-head {
    display: flex; align-items: end; justify-content: space-between;
    margin-bottom: 28px; gap: 16px; flex-wrap: wrap;
}
.es-section-head h2 {
    font-size: clamp(22px, 2.4vw, 30px); margin: 0; font-weight: 800;
}
.es-section-head .lead {
    color: var(--es-text-muted); margin: 4px 0 0; font-size: 14px;
}
.es-section-head .view-all {
    color: var(--es-primary-700); font-weight: 600; font-size: 14px;
}
.es-section-head .view-all i { margin-left: 4px; transition: transform .2s; }
.es-section-head .view-all:hover i { transform: translateX(3px); }

/* ============================ Category Grid ============================ */
.es-cat-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--es-border);
    border-radius: var(--es-radius-card); padding: 22px 14px;
    text-decoration: none; color: var(--es-text);
    text-align: center; min-height: 150px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.es-cat-card:hover {
    transform: translateY(-4px); color: var(--es-primary-700);
    border-color: var(--es-primary); box-shadow: var(--es-shadow-md);
}
.es-cat-card .cat-icon {
    width: 56px; height: 56px; border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--es-primary-50); color: var(--es-primary-700);
    font-size: 26px; margin-bottom: 12px;
}
.es-cat-card .cat-name { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.es-cat-card .cat-count { font-size: 12px; color: var(--es-text-muted); }

/* ============================ Product Card (new) ============================ */
.es-product-card {
    position: relative;
    background: #fff; border: 1px solid var(--es-border);
    border-radius: var(--es-radius-card); overflow: hidden;
    display: flex; flex-direction: column; height: 100%;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.es-product-card:hover {
    transform: translateY(-3px); box-shadow: var(--es-shadow-lg);
    border-color: var(--es-primary-100);
}
.es-product-media {
    position: relative; aspect-ratio: 1/1; background: var(--es-surface);
    overflow: hidden;
}
.es-product-media img {
    width: 100%; height: 100%; object-fit: contain;
    padding: 12px; transition: transform .4s ease;
}
.es-product-card:hover .es-product-media img { transform: scale(1.04); }
.es-product-badges {
    position: absolute; top: 10px; left: 10px;
    display: flex; flex-direction: column; gap: 6px; z-index: 2;
}
.es-product-actions {
    position: absolute; top: 10px; right: 10px;
    display: flex; flex-direction: column; gap: 6px; z-index: 2;
    opacity: 0; transform: translateX(8px); transition: all .2s ease;
}
.es-product-card:hover .es-product-actions { opacity: 1; transform: translateX(0); }
.es-icon-btn {
    width: 38px; height: 38px; border-radius: 50%;
    background: #fff; border: 1px solid var(--es-border);
    color: var(--es-text); display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: var(--es-shadow-sm); transition: all .2s ease;
    font-size: 16px;
}
.es-icon-btn:hover { background: var(--es-primary); color: #fff; border-color: var(--es-primary); }
.es-product-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.es-product-category { font-size: 11px; color: var(--es-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.es-product-title {
    margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4;
    color: var(--es-text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 40px;
}
.es-product-title a { color: inherit; }
.es-product-title a:hover { color: var(--es-primary-700); }
.es-product-rating { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--es-text-muted); }
.es-product-rating i { color: var(--es-accent); font-size: 12px; }
.es-product-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.es-product-price { font-size: 18px; font-weight: 800; color: var(--es-text); font-variant-numeric: tabular-nums; }
.es-product-price-old { font-size: 13px; color: var(--es-text-soft); text-decoration: line-through; }
.es-product-cta { margin-top: 10px; }

/* ============================ Why us blocks ============================ */
.es-feature {
    text-align: left; padding: 24px; background: #fff;
    border: 1px solid var(--es-border); border-radius: var(--es-radius-card);
    height: 100%;
}
.es-feature i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 16px;
    background: var(--es-primary-50); color: var(--es-primary-700);
    font-size: 26px; margin-bottom: 16px;
}
.es-feature h3 { font-size: 18px; margin: 0 0 8px; font-weight: 700; }
.es-feature p { color: var(--es-text-muted); margin: 0; font-size: 14px; line-height: 1.6; }

/* ============================ Testimonial cards ============================ */
.es-testimonial {
    background: #fff; border: 1px solid var(--es-border);
    border-radius: var(--es-radius-card); padding: 24px;
    height: 100%; display: flex; flex-direction: column; gap: 12px;
    position: relative;
}
.es-testimonial::before {
    content: "\201C"; position: absolute; top: 8px; right: 16px;
    font-size: 64px; line-height: 1; color: var(--es-primary-100); font-family: Georgia, serif;
}
.es-testimonial .metric {
    align-self: flex-start; background: var(--es-primary-50); color: var(--es-primary-700);
    border-radius: var(--es-radius-pill); padding: 6px 14px; font-weight: 700; font-size: 13px;
}
.es-testimonial blockquote {
    margin: 0; font-size: 15px; line-height: 1.6; color: var(--es-text);
}
.es-testimonial .author {
    margin-top: auto; display: flex; align-items: center; gap: 10px;
    color: var(--es-text-muted); font-size: 13px;
}
.es-testimonial .author .avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--es-primary-100); color: var(--es-primary-700);
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}

/* ============================ Newsletter strip ============================ */
.es-newsletter {
    background: linear-gradient(135deg, var(--es-primary-700) 0%, var(--es-primary) 100%);
    color: #fff; border-radius: var(--es-radius-card);
    padding: 40px clamp(20px, 4vw, 56px); position: relative; overflow: hidden;
}
.es-newsletter::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at 90% 10%, rgba(255,255,255,.18), transparent 50%);
    pointer-events: none;
}
.es-newsletter h2 { color: #fff; font-size: clamp(22px, 2.6vw, 32px); margin: 0 0 8px; }
.es-newsletter p { color: rgba(255,255,255,.85); margin: 0 0 18px; }
.es-newsletter-form {
    display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1;
}
.es-newsletter-form input[type="email"] {
    flex: 1; min-width: 200px; padding: 14px 18px;
    border-radius: var(--es-radius-btn); border: 0; font-size: 15px;
    background: #fff; color: var(--es-text);
}
.es-newsletter-form input[type="email"]:focus {
    outline: 3px solid rgba(255,255,255,.4);
}
.es-newsletter-form button {
    padding: 14px 24px; border-radius: var(--es-radius-btn); border: 0;
    background: var(--es-accent); color: #fff; font-weight: 700;
    cursor: pointer; min-height: 44px;
}
.es-newsletter-form button:hover { background: var(--es-accent-600); }

/* ============================ Empty state ============================ */
.es-empty-state {
    text-align: center; padding: 56px 24px; max-width: 480px; margin: 0 auto;
}
.es-empty-state .illu {
    width: 140px; height: 140px; margin: 0 auto 20px;
    background: var(--es-primary-50); color: var(--es-primary-700);
    border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: 56px;
}
.es-empty-state h3 { font-size: 22px; margin: 0 0 8px; font-weight: 700; }
.es-empty-state p { color: var(--es-text-muted); margin: 0 0 20px; }

/* ============================ Stepper (Checkout) ============================ */
.es-stepper {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 28px; background: #fff;
    padding: 16px; border-radius: var(--es-radius-card); border: 1px solid var(--es-border);
}
.es-step { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.es-step-num {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--es-surface-2); color: var(--es-text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; flex-shrink: 0;
    border: 2px solid var(--es-border);
}
.es-step-label { font-weight: 600; color: var(--es-text-muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-step-sep { flex: 1; height: 2px; background: var(--es-border); border-radius: 2px; min-width: 16px; }
.es-step.is-active .es-step-num { background: var(--es-primary); color: #fff; border-color: var(--es-primary); }
.es-step.is-active .es-step-label { color: var(--es-text); }
.es-step.is-done .es-step-num { background: var(--es-primary-100); color: var(--es-primary-700); border-color: var(--es-primary); }
.es-step.is-done .es-step-label { color: var(--es-primary-700); }
.es-step.is-done .es-step-num::before {
    content: "\F26B"; font-family: "bootstrap-icons";
}
.es-step.is-done .es-step-num > span { display: none; }
@media (max-width: 575.98px) {
    .es-stepper { padding: 10px 8px; }
    .es-step-label { font-size: 12px; }
    .es-step-num { width: 28px; height: 28px; font-size: 12px; }
}

/* ============================ Sticky mobile bottom CTA ============================ */
.es-sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: #fff; border-top: 1px solid var(--es-border);
    padding: 10px 14px env(safe-area-inset-bottom, 10px);
    z-index: 1030; box-shadow: 0 -6px 18px rgba(15, 23, 42, .08);
    display: none;
}
.es-sticky-cta .row-actions {
    display: flex; gap: 10px; align-items: center;
}
.es-sticky-cta .es-btn { flex: 1; }
@media (max-width: 991.98px) {
    .es-sticky-cta { display: block; }
    main { padding-bottom: 72px; }
}

/* ============================ Mobile bottom nav ============================ */
.es-mobile-nav {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: #fff; border-top: 1px solid var(--es-border);
    padding: 6px 0 env(safe-area-inset-bottom, 6px);
    z-index: 1029; display: none;
    box-shadow: 0 -4px 12px rgba(15, 23, 42, .06);
}
.es-mobile-nav .row { margin: 0; }
.es-mobile-nav a {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 4px; color: var(--es-text-muted); font-size: 11px; font-weight: 600;
    text-decoration: none; position: relative;
}
.es-mobile-nav a i { font-size: 20px; }
.es-mobile-nav a.active { color: var(--es-primary-700); }
.es-mobile-nav .badge {
    position: absolute; top: 4px; right: calc(50% - 16px);
    background: var(--es-danger); color: #fff;
    border-radius: var(--es-radius-pill); font-size: 10px;
    padding: 1px 5px; min-width: 16px; text-align: center; line-height: 1.3;
}
@media (max-width: 575.98px) {
    .es-mobile-nav { display: block; }
    main { padding-bottom: 72px; }
}

/* ============================ WhatsApp Float ============================ */
.es-wa-float {
    position: fixed; right: 16px; bottom: 80px; z-index: 1031;
    display: inline-flex; align-items: center; gap: 8px;
    background: #25d366; color: #fff;
    padding: 12px 18px; border-radius: var(--es-radius-pill);
    text-decoration: none; font-weight: 700; font-size: 14px;
    box-shadow: 0 8px 24px rgba(37, 211, 102, .4);
    transition: transform .2s ease, box-shadow .2s ease;
}
.es-wa-float:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 12px 28px rgba(37, 211, 102, .5); }
.es-wa-float i { font-size: 22px; }
.es-wa-float .label { display: inline; }
.es-wa-float::after {
    content: ""; position: absolute; inset: -6px; border-radius: var(--es-radius-pill);
    border: 3px solid rgba(37, 211, 102, .35);
    animation: esPulse 2s ease-out infinite; pointer-events: none;
}
@keyframes esPulse {
    0% { transform: scale(.92); opacity: .9; }
    80% { transform: scale(1.18); opacity: 0; }
    100% { transform: scale(1.18); opacity: 0; }
}
@media (max-width: 575.98px) {
    .es-wa-float { padding: 12px; border-radius: 50%; bottom: 78px; right: 14px; }
    .es-wa-float .label { display: none; }
}

/* ============================ Sticky product bottom bar (mobile) ============================ */
.es-product-sticky-bar {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: #fff; border-top: 1px solid var(--es-border);
    padding: 10px 12px env(safe-area-inset-bottom, 10px);
    box-shadow: 0 -6px 18px rgba(15, 23, 42, .1); z-index: 1030;
    display: none;
}
.es-product-sticky-bar .inner {
    display: flex; align-items: center; gap: 10px;
}
.es-product-sticky-bar .price-col { flex-shrink: 0; }
.es-product-sticky-bar .price { font-weight: 800; font-size: 16px; color: var(--es-text); }
.es-product-sticky-bar .price-old { font-size: 12px; color: var(--es-text-soft); text-decoration: line-through; }
@media (max-width: 991.98px) {
    .es-product-sticky-bar { display: block; }
    body.has-product-bar main { padding-bottom: 96px; }
}

/* ============================ Quantity selector ============================ */
.es-qty {
    display: inline-flex; align-items: stretch;
    border: 1px solid var(--es-border); border-radius: var(--es-radius-btn);
    overflow: hidden; background: #fff;
}
.es-qty button {
    width: 44px; height: 44px; background: #fff; border: 0; color: var(--es-text);
    font-size: 16px; cursor: pointer;
}
.es-qty button:hover { background: var(--es-surface-2); }
.es-qty input {
    width: 56px; border: 0; text-align: center; font-weight: 700;
    font-variant-numeric: tabular-nums; background: #fff;
}
.es-qty input:focus { outline: none; }

/* ============================ Sticky summary ============================ */
.es-sticky-summary { position: sticky; top: 88px; }
@media (max-width: 991.98px) {
    .es-sticky-summary { position: static; top: auto; }
}

/* ============================ Form helpers ============================ */
.es-form-label { font-weight: 600; font-size: 14px; color: var(--es-text); margin-bottom: 6px; }
.es-form-help { font-size: 12px; color: var(--es-text-muted); margin-top: 4px; }
.es-form-control {
    width: 100%; padding: 12px 14px; min-height: 44px;
    border: 1px solid var(--es-border); border-radius: var(--es-radius-btn);
    background: #fff; color: var(--es-text); font-size: 15px;
    transition: border-color .15s, box-shadow .15s;
}
.es-form-control:focus {
    outline: none; border-color: var(--es-primary);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .15);
}

/* ============================ Variant pills ============================ */
.es-variant {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: var(--es-radius-pill);
    background: #fff; border: 1px solid var(--es-border); color: var(--es-text);
    cursor: pointer; font-size: 13px; font-weight: 600; min-height: 36px;
}
.es-variant:hover { border-color: var(--es-primary); }
.es-variant.is-active {
    background: var(--es-primary-50); border-color: var(--es-primary); color: var(--es-primary-700);
}

/* ============================ Top bar overrides ============================ */
.top-bar { background: var(--es-text); }
.top-bar a, .top-bar a:hover { color: #cbd5e1; }
.main-header { box-shadow: var(--es-shadow-sm); }

/* Mobile a11y: 44px+ tap targets */
@media (max-width: 575.98px) {
    .btn, .es-btn { min-height: 44px; }
}

/* Print resilience */
@media print {
    .es-wa-float, .es-mobile-nav, .es-sticky-cta, .es-product-sticky-bar,
    .top-bar, .es-newsletter, footer { display: none !important; }
}

/* ============================ Utility ============================ */
.es-text-muted { color: var(--es-text-muted) !important; }
.es-divider { height: 1px; background: var(--es-border); margin: 24px 0; border: 0; }
.es-tnum { font-variant-numeric: tabular-nums; }

/* Hide legacy floating WhatsApp from site.css (we use es-wa-float) */
.whatsapp-float { display: none !important; }

/* ============================ Cart Offcanvas ============================ */
.es-cart-offcanvas { width: 380px; max-width: 100%; }
.es-cart-offcanvas .offcanvas-header { border-bottom: 1px solid var(--es-border); padding: 18px 20px; }
.es-cart-offcanvas .offcanvas-title { font-size: 16px; font-weight: 700; }
.es-cart-offcanvas .offcanvas-body { padding: 20px; }
.es-cart-thumb {
    width: 72px; height: 72px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--es-border);
    background: #f8fafc;
    flex-shrink: 0;
}
.es-cart-added-item {
    padding: 14px;
    border: 1px solid var(--es-border);
    border-radius: 10px;
    background: #fff;
}
.es-cart-summary {
    background: #f1f5f9;
    border-radius: 10px;
}
@media (max-width: 575.98px) {
    .es-cart-offcanvas {
        width: 100% !important;
        max-height: 90vh;
        height: auto;
        bottom: 0; top: auto;
        right: 0; left: 0;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }
    .es-cart-offcanvas.showing,
    .es-cart-offcanvas.show { transform: translateY(0); }
}

/* ============================ Quick View Modal ============================ */
.es-quickview-btn {
    position: absolute;
    top: 12px; right: 12px;
    width: 38px; height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    color: var(--es-primary, #16a34a);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 200ms ease, transform 200ms ease, background 200ms ease;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    z-index: 4;
}
.es-product-card:hover .es-quickview-btn,
.es-product-card:focus-within .es-quickview-btn { opacity: 1; transform: translateY(0); }
.es-quickview-btn:hover { background: var(--es-primary, #16a34a); color: #fff; }
@media (hover: none) { .es-quickview-btn { opacity: 1; transform: none; } }

.es-quickview-thumbs { display:flex; gap:8px; flex-wrap:wrap; }
.es-quickview-thumb {
    width: 56px; height: 56px;
    object-fit: cover;
    border: 2px solid var(--es-border);
    border-radius: 6px; cursor: pointer;
    transition: border-color 150ms ease;
}
.es-quickview-thumb.active,
.es-quickview-thumb:hover { border-color: var(--es-primary, #16a34a); }

/* ============================ Stock Notify Form ============================ */
.es-stock-notify {
    border: 1px dashed var(--es-border);
    border-radius: 10px;
    padding: 16px;
    background: #fffaf0;
}
.es-stock-notify h6 { font-weight: 700; margin-bottom: 6px; }
.es-stock-notify .form-control { margin-bottom: 8px; }

/* ============================ Dealer Visibility Toggle ============================ */
.es-vis-toggle {
    display: inline-flex;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
}
.es-vis-toggle input { display: none; }
.es-vis-toggle label {
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    color: #64748b;
    transition: all 150ms ease;
    margin: 0;
}
.es-vis-toggle input:checked + label { background: #fff; color: var(--es-primary, #16a34a); box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.es-vis-toggle input[value="Public"]:checked + label { color: #16a34a; }
.es-vis-toggle input[value="AdminOnly"]:checked + label { color: #ca8a04; }
.es-vis-toggle input[value="Private"]:checked + label { color: #64748b; }


/* ===== Search Autocomplete Dropdown ===== */
.es-search-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1080;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.12);
    max-height: 480px;
    overflow-y: auto;
    padding: 8px 0;
}
.es-ss-group {
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: 6px;
    margin-bottom: 6px;
}
.es-ss-group:last-child { border-bottom: 0; margin-bottom: 0; }
.es-ss-group-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #6b7280;
    padding: 6px 14px;
    letter-spacing: 0.04em;
}
.es-ss-group-label i { margin-right: 6px; opacity: 0.7; }
.es-ss-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    color: #111827;
    text-decoration: none;
    transition: background-color 0.12s;
    font-size: 14px;
}
.es-ss-item img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 6px;
    background: #f3f4f6;
    flex-shrink: 0;
}
.es-ss-icon {
    width: 36px;
    height: 36px;
    background: #f3f4f6;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    flex-shrink: 0;
}
.es-ss-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-ss-meta { color: #16a34a; font-weight: 600; font-size: 13px; }
.es-ss-item:hover, .es-ss-item.active {
    background-color: #f0fdf4;
    color: #15803d;
}
.es-ss-empty {
    padding: 24px 14px;
    text-align: center;
    color: #9ca3af;
    font-size: 14px;
}
.es-ss-all {
    display: block;
    text-align: center;
    padding: 10px 14px;
    color: #16a34a;
    font-weight: 600;
    text-decoration: none;
    border-top: 1px solid #f3f4f6;
    margin-top: 4px;
    background: #f9fafb;
}
.es-ss-all:hover { background: #f0fdf4; }

/* ============================================================
   B2C NOTIFICATION CENTER (Header Bell)
   ============================================================ */
.es-notif-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    background: #dc2626;
    color: #fff;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    padding: 0 5px;
    text-align: center;
    border: 2px solid #fff;
}
.es-notif-dropdown {
    width: 380px;
    max-width: 95vw;
    padding: 0;
    border: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    overflow: hidden;
}
.es-notif-header {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    background: linear-gradient(135deg, #f0fdf4, #fff);
}
.es-notif-list {
    max-height: 440px;
    overflow-y: auto;
}
.es-notif-empty {
    padding: 24px 16px;
    font-size: 14px;
}
.es-notif-item {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: #0f172a;
    border-bottom: 1px solid #f1f5f9;
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease;
}
.es-notif-item:last-child { border-bottom: none; }
.es-notif-item:hover { background-color: #f8fafc; color: #0f172a; text-decoration: none; }
.es-notif-item--unread { background-color: #fefce8; border-left-color: #eab308; }
.es-notif-item--unread:hover { background-color: #fef9c3; }

.es-notif-info { border-left-color: #0ea5e9; }
.es-notif-success { border-left-color: #16a34a; }
.es-notif-warning { border-left-color: #f59e0b; }
.es-notif-danger { border-left-color: #dc2626; }

.es-notif-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: #f1f5f9;
    color: #64748b;
}
.es-notif-info .es-notif-icon { background: rgba(14, 165, 233, 0.15); color: #0284c7; }
.es-notif-success .es-notif-icon { background: rgba(22, 163, 74, 0.15); color: #16a34a; }
.es-notif-warning .es-notif-icon { background: rgba(245, 158, 11, 0.18); color: #b45309; }
.es-notif-danger .es-notif-icon { background: rgba(220, 38, 38, 0.15); color: #dc2626; }

.es-notif-body {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.es-notif-title {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.25;
    color: #0f172a;
}
.es-notif-msg {
    font-size: 12.5px;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.es-notif-time {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}
.es-notif-footer {
    padding: 10px 16px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
}

/* ===================== Otomatik Ürün Rozetleri (Module 2) ===================== */
.es-product-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .02em;
    text-transform: uppercase; line-height: 1;
    color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    white-space: nowrap;
}
.es-product-badge i { font-size: 12px; }
.es-product-badge-discount   { background: linear-gradient(135deg,#ef4444,#b91c1c); }
.es-product-badge-bestseller { background: linear-gradient(135deg,#f97316,#c2410c); }
.es-product-badge-trending   { background: linear-gradient(135deg,#facc15,#b45309); color:#1f2937; }
.es-product-badge-new        { background: linear-gradient(135deg,#3b82f6,#1d4ed8); }
.es-product-badge-editor     { background: linear-gradient(135deg,#a855f7,#6b21a8); }
.es-product-badge-featured   { background: linear-gradient(135deg,#16a34a,#15803d); }

/* ===================== Bayi-Aware Fiyat (Module 3) ===================== */
.es-price-dealer .es-product-price { color: #16a34a; }
.es-price-dealer-amount { color: #16a34a !important; }

/* ============================ Mobil Görünüm Düzeltmeleri (2026-07) ============================ */

/* Yatay taşma koruması: hero blob (-%10 inset) ve benzeri dekorlar sayfayı genişletmesin */
html, body { overflow-x: clip; }
.es-hero { overflow: hidden; }

@media (max-width: 991.98px) {
    /* Mobilde TEK WhatsApp erişimi (alt CTA bar) — yüzen düğmeler kapalı */
    .es-wa-float { display: none !important; }
    .es-live-chat-widget { display: none !important; }
}

@media (max-width: 767.98px) {
    /* --- Üst bar: tek satır, yalnız telefon + WhatsApp + dil --- */
    .top-bar { padding: 6px 0; font-size: .8rem; }
    .top-bar a { margin: 0 6px 0 0 !important; white-space: nowrap; }
    .top-bar a[href^="mailto"] { display: none; }                    /* e-posta gizle */
    .top-bar .d-flex.align-items-center > a { display: none; }      /* Fiyatlandırma/Kargo/İletişim gizle */
    .top-bar .d-flex.justify-content-between { flex-wrap: nowrap; }

    /* --- Header: [logo | ikonlar] üstte, arama tam genişlik altta --- */
    .navbar { padding: 8px 0; }
    .navbar .row.align-items-center { display: flex; flex-wrap: wrap; align-items: center; }
    .navbar .row.align-items-center > div:nth-child(1) { width: 40%; order: 1; flex: 0 0 40%; }
    .navbar .row.align-items-center > div:nth-child(3) { width: 60%; order: 2; flex: 0 0 60%; margin: 0; }
    .navbar .row.align-items-center > div:nth-child(2) { width: 100%; order: 3; flex: 0 0 100%; margin: 8px 0 0 !important; }
    .navbar-brand img { height: 36px !important; }
    .header-actions { justify-content: flex-end; gap: 4px; flex-wrap: nowrap; }
    .header-action-btn { padding: 6px; font-size: 1.05rem; }
    .header-action-btn span { display: none; }                       /* ikon yanı yazılar gizli */

    /* Kart/rozet taşmaları */
    .es-hero-metric { font-size: .82rem; }
}

@media (max-width: 575.98px) {
    /* Telefonda TEK alt bar: alt menü. WhatsApp CTA barı yalnız tablette (alt menü yokken) görünür —
       telefonda WhatsApp erişimi üst barda ve hero düğmesinde zaten var; çift bar ekranı yiyordu */
    .es-sticky-cta { display: none !important; }
    main { padding-bottom: 84px !important; }
}

/* ============================ Vitrin (Showcase) Çerçevesi ============================ */
/* Geniş, bölüm-tabanlı tasarım. Her bölüm #sc-N id alır ve bölüme özel CSS ile ezilebilir. */
.sc-page { --sc-accent: #f24726; }
.sc-sec { padding: 56px 0; }
.sc-sec.bg-gray { background: #f7f8fa; }
.sc-sec.bg-dark { background: #16181d; color: #e8e9ec; }
.sc-sec.bg-dark h2, .sc-sec.bg-dark h3, .sc-sec.bg-dark h4 { color: #fff; }
.sc-sec.bg-accent { background: linear-gradient(135deg, var(--sc-accent), color-mix(in srgb, var(--sc-accent) 75%, #000)); color: #fff; }
.sc-head { text-align: center; max-width: 760px; margin: 0 auto 34px; }
.sc-head h2, .sc-head h3 { font-size: 1.7rem; font-weight: 800; }
.sc-sub { color: #6b7280; margin-top: 6px; }
.sc-sec.bg-dark .sc-sub { color: #9aa1ab; }

.sc-skel-bar { height: 14px; border-radius: 7px; background: linear-gradient(90deg, #eee, #f7f7f7, #eee); background-size: 200% 100%; animation: scSkel 1.2s infinite; margin: 12px 0; }
@keyframes scSkel { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.sc-sec-hero { padding: 64px 0; background: linear-gradient(160deg, color-mix(in srgb, var(--sc-accent) 8%, #fff), #fff); }
.sc-hero-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.sc-hero-title { font-size: 2.3rem; font-weight: 800; line-height: 1.2; }
.sc-hero-sub { font-size: 1.12rem; color: #4b5563; margin-top: 12px; }
.sc-hero-img img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 18px 44px rgba(15,23,42,.14); }

.sc-btn { display: inline-block; background: var(--sc-accent); color: #fff; font-weight: 700; padding: 12px 26px; border-radius: 999px; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.sc-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--sc-accent) 40%, transparent); }
.sc-btn.light { background: #fff; color: var(--sc-accent); }
.sc-btn.sm { padding: 8px 18px; font-size: .9rem; }
.sc-btn-row { margin-top: 18px; }

.sc-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.sc-g-item { margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--es-border); background: #fff; cursor: zoom-in; transition: transform .15s, box-shadow .15s; }
.sc-g-item:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15,23,42,.12); }
.sc-g-item img { width: 100%; height: 190px; object-fit: cover; display: block; }
.sc-g-item figcaption { padding: 8px 12px; font-size: .85rem; color: #4b5563; }
.sc-lightbox { position: fixed; inset: 0; background: rgba(10,12,16,.92); z-index: 20000; display: none; align-items: center; justify-content: center; }
.sc-lightbox.open { display: flex; }
.sc-lightbox figure { max-width: 90vw; max-height: 86vh; margin: 0; text-align: center; }
.sc-lightbox img { max-width: 90vw; max-height: 78vh; border-radius: 10px; }
.sc-lightbox figcaption { color: #cbd2da; margin-top: 10px; }
.sc-lb-x { position: absolute; top: 14px; right: 18px; background: none; border: none; color: #fff; font-size: 40px; cursor: pointer; line-height: 1; }
.sc-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.12); border: none; color: #fff; font-size: 34px; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; }
.sc-lb-nav.prev { left: 16px; }
.sc-lb-nav.next { right: 16px; }

/* auto-fit + sabit üst genişlik + ortala: eksik satır boş hücre bırakmaz, ortada toplanır */
.sc-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 330px)); gap: 18px; justify-content: center; }
.sc-feat { background: #fff; border: 1px solid var(--es-border); border-radius: 14px; padding: 22px; }
.sc-sec.bg-dark .sc-feat { background: #1e2128; border-color: #2a2e37; }
.sc-feat-ic { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--sc-accent) 12%, #fff); color: var(--sc-accent); font-size: 22px; margin-bottom: 12px; }
.sc-feat h4 { font-size: 1.02rem; font-weight: 700; }
.sc-feat p { color: #6b7280; font-size: .92rem; margin-top: 4px; }
.sc-sec.bg-dark .sc-feat p { color: #9aa1ab; }

.sc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; text-align: center; }
.sc-stat i { font-size: 24px; color: var(--sc-accent); }
.sc-stat-v { font-size: 1.7rem; font-weight: 800; }
.sc-stat-l { color: #6b7280; font-size: .9rem; }

.sc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.sc-split.rev .sc-split-img { order: 2; }
.sc-split-img img { width: 100%; border-radius: 14px; box-shadow: 0 14px 34px rgba(15,23,42,.12); }
.sc-split-txt h2, .sc-split-txt h3 { font-size: 1.5rem; font-weight: 800; }

.sc-products { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 340px)); gap: 20px; justify-content: center; }
.sc-p-card { background: #fff; border: 1px solid var(--es-border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.sc-p-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(15,23,42,.12); }
.sc-p-imgwrap { display: block; background: #fafafa; }
.sc-p-imgwrap img { width: 100%; height: 200px; object-fit: contain; display: block; }
.sc-p-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.sc-p-body h4 { font-size: 1.02rem; font-weight: 700; }
.sc-p-body h4 a { color: inherit; text-decoration: none; }
.sc-p-desc { color: #6b7280; font-size: .88rem; margin: 6px 0 8px; }
.sc-p-attrs { list-style: none; padding: 0; margin: 0 0 8px; font-size: .82rem; color: #4b5563; }
.sc-p-attrs li span { color: #9ca3af; }
.sc-p-models { width: 100%; font-size: .84rem; border-collapse: collapse; margin-bottom: 10px; }
.sc-p-models td { padding: 5px 8px; border-bottom: 1px dashed var(--es-border); }
.sc-p-models td:last-child { text-align: right; font-weight: 700; white-space: nowrap; }
.sc-p-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sc-p-price { font-size: 1.2rem; font-weight: 800; color: var(--sc-accent); }
.sc-p-pricebox s { color: #9ca3af; font-size: .9rem; margin-right: 6px; }
.sc-p-quote { font-weight: 800; color: var(--sc-accent); }

/* Müşteri görüşleri (testimonials bölüm tipi) */
.sc-testis { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.sc-testi { margin: 0; background: #fff; border: 1px solid var(--es-border); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; box-shadow: 0 6px 18px rgba(15,23,42,.06); }
.sc-sec.bg-gray .sc-testi { background: #fff; }
.sc-testi-stars { color: #f5a623; font-size: .95rem; line-height: 1; margin-bottom: 10px; letter-spacing: 1px; }
/* Yıldızsız kartta rozet/alıntı, yıldızlı kartlarla aynı hizadan başlasın */
.sc-testi > .sc-testi-result:first-child, .sc-testi > blockquote:first-child { margin-top: 25px; }
.sc-testi-result { display: inline-block; align-self: flex-start; font-weight: 800; color: var(--sc-accent, #0d9488); background: color-mix(in srgb, var(--sc-accent, #0d9488) 12%, #fff); border-radius: 8px; padding: 3px 10px; font-size: .9rem; margin-bottom: 10px; }
.sc-testi blockquote { margin: 0 0 12px; color: #374151; line-height: 1.6; font-size: .96rem; flex: 1; }
.sc-testi figcaption { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--es-border); padding-top: 10px; }
.sc-testi figcaption strong { font-weight: 700; color: #111827; }
.sc-testi figcaption span { font-size: .84rem; color: #6b7280; }

.sc-faqs { max-width: 820px; }
.sc-faq { background: #fff; border: 1px solid var(--es-border); border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; }
.sc-faq summary { font-weight: 700; cursor: pointer; }
.sc-faq p { margin: 10px 0 0; color: #4b5563; }

.sc-sec-cta { background: linear-gradient(135deg, var(--sc-accent), color-mix(in srgb, var(--sc-accent) 70%, #000)); color: #fff; }
.sc-cta-in { text-align: center; max-width: 720px; }
.sc-sec-cta h2, .sc-sec-cta h3 { font-size: 1.6rem; font-weight: 800; color: #fff; }
.sc-sec-cta p { opacity: .92; margin-top: 8px; }

/* Ana sayfa Çözüm Vitrini slider'ı (scHomeTeasers) */
.sc-tsl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sc-tsl-head .sc-teaser-h { margin-bottom: 0; }
.sc-tsl-nav { display: flex; gap: 8px; }
.sc-tsl-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--es-border); background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.05rem; transition: background .15s, color .15s, border-color .15s; }
.sc-tsl-btn:hover { background: #f24726; border-color: #f24726; color: #fff; }
.sc-tsl-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding: 4px 4px 8px; margin: -4px; }
.sc-tsl-track::-webkit-scrollbar { display: none; }
.sc-ts-card { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; background: #fff; border: 1px solid var(--es-border); border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.sc-ts-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15,23,42,.12); color: inherit; }
.sc-ts-img { background: #fafafa; }
.sc-ts-img img { width: 100%; height: 170px; object-fit: cover; display: block; }
.sc-ts-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; align-items: flex-start; }
.sc-ts-body h4 { font-size: 1.05rem; font-weight: 700; margin: 8px 0 6px; }
.sc-ts-body p { color: #6b7280; font-size: .88rem; margin: 0 0 10px; }
.sc-ts-body .sc-teaser-cta { margin-top: auto; }
.sc-tsl-dots { display: flex; gap: 7px; justify-content: center; margin-top: 14px; }
.sc-tsl-dots span { width: 8px; height: 8px; border-radius: 6px; background: #e2e5ea; cursor: pointer; transition: background .15s, width .15s; }
.sc-tsl-dots span.on { background: #f24726; width: 22px; }
@media (max-width: 991.98px) { .sc-ts-card { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 575.98px) { .sc-ts-card { flex-basis: 84%; } .sc-tsl-nav { display: none; } .sc-ts-img img { height: 150px; } }

.sc-teaser-h { font-weight: 800; margin-bottom: 14px; }
.sc-teasers { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.sc-teaser { display: flex; background: #fff; border: 1px solid var(--es-border); border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
.sc-teaser:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15,23,42,.12); color: inherit; }
.sc-teaser-img { flex: 0 0 128px; background: #fafafa; }
.sc-teaser-img img { width: 128px; height: 100%; object-fit: cover; display: block; }
.sc-teaser-body { padding: 14px 16px; }
.sc-teaser-badge { display: inline-block; font-size: .72rem; font-weight: 700; color: var(--sc-accent); background: color-mix(in srgb, var(--sc-accent) 10%, #fff); border-radius: 999px; padding: 2px 10px; margin-bottom: 6px; }
.sc-teaser-body h4 { font-size: 1rem; font-weight: 700; margin: 0 0 4px; }
.sc-teaser-body p { font-size: .86rem; color: #6b7280; margin: 0 0 6px; }
.sc-teaser-cta { font-size: .86rem; font-weight: 700; color: var(--sc-accent); }

@media (max-width: 767.98px) {
    .sc-sec { padding: 36px 0; }
    .sc-hero-in, .sc-split { grid-template-columns: 1fr; gap: 22px; }
    .sc-split.rev .sc-split-img { order: 0; }
    .sc-hero-title { font-size: 1.55rem; }
    .sc-g-item img { height: 150px; }
}