/* ==========================================================================
   Premium UI/UX System — Kaynak Malzeme
   Unified design-token architecture · Clean specificity · BEM naming
   ========================================================================== */

/* ==========================================================================
   Accessibility: keyboard focus & skip link
   Several component styles elsewhere strip the default outline (search
   input, selects, buttons, dropdowns) without a replacement, which makes
   keyboard-only navigation effectively invisible. :focus-visible only
   fires for keyboard/programmatic focus, so mouse clicks are unaffected.
   ========================================================================== */
:focus-visible {
    outline: 2px solid var(--tf-primary-color, #d1122a) !important;
    outline-offset: 2px !important;
}

.skip-to-content-link {
    position: absolute;
    top: -100px;
    left: 12px;
    z-index: 10000;
    background: #1a1a1a;
    color: #fff;
    padding: 10px 18px;
    border-radius: 0 0 6px 6px;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.15s ease;
}
.skip-to-content-link:focus {
    top: 0;
    color: #fff;
}

/* .btn-select / .select-item were plain <div>s (not keyboard-focusable or
   activatable via Enter/Space) and are now real <button> elements so the
   sort dropdown works without a mouse. Reset native button chrome so the
   visual design is unchanged. */
.tf-dropdown-sort .btn-select,
.tf-dropdown-sort .select-item {
    background: none;
    border: 0;
    margin: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.tf-dropdown-sort .btn-select {
    width: 100%;
}

/* Quantity stepper +/- were <span>: not focusable, no Enter/Space
   activation. Now real <button>s; reset native chrome so the design is
   unchanged (styles.css sizes/colors them but never expected a button
   background/border to reset). */
.wg-quantity .btn-quantity {
    background: none;
    border: 0;
    margin: 0;
    font: inherit;
}

/* Cart-item delete control was a <div data-cart-id> (icon-only, no
   accessible name, not focusable). Now a real <button>; reset native
   chrome and keep the existing flex layout. */
.tf-mini-cart-remove.cart-product-delete {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

:root {
    /* Typography */
    --font-primary: 'Inter', system-ui, sans-serif;

    /* Semantic Colors */
    --color-surface: #ffffff;
    --color-surface-alt: #f8f9fa;
    --color-surface-dark: #0f172a;
    --color-text-primary: #111827;
    --color-text-secondary: #4b5563;
    --color-text-muted: #6b7280;
    --color-text-subtle: #64748b;
    --color-accent: #2563eb;
    --color-success: #10b981;
    --color-success-bg: #d1fae5;
    --color-danger: #ef4444;
    --color-danger-bg: #fee2e2;
    --color-warning: #f59e0b;
    --color-warning-bg: #fef3c7;
    --color-info: #3b82f6;
    --color-info-bg: #dbeafe;
    --color-border: #e5e7eb;
    --color-border-light: #f3f4f6;
    --color-border-subtle: rgba(15, 23, 42, 0.08);
    --color-border-ui: #eaeaea;

    /* Spacing Scale (4px base) */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 10px 30px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 12px 24px rgba(0, 0, 0, 0.08);
    --shadow-button-hover: 0 8px 20px rgba(0, 0, 0, 0.12);

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: all 0.15s ease;
    --transition-base: all 0.2s ease;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Button System */
    --color-button-primary: #ff6b00;
    --color-button-primary-hover: #e55a00;
    --color-button-secondary: #f0f0f0;
    --color-button-secondary-text: #1a1a1a;
    --color-button-secondary-border: #cccccc;

    /* Accessibility-improved muted text — WCAG AA compliant */
    --color-text-muted-improved: #555555;  /* 7.0:1 on white (was #666 = 5.7:1) */
    --color-text-price-muted: #666666;     /* 5.7:1 on white (was #999 = 3.5:1) */
    --color-badge-bg: #f5f5f5;            /* slightly darker than #f8f9fa */

    /* Legacy aliases (backwards compat with existing markup) */
    --premium-font: var(--font-primary);
    --premium-shadow: var(--shadow-xl);
    --premium-gradient: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

/* ==========================================================================
   Typography Base
   Uses html selector for specificity over vendor body{} rule.
   Inter is preloaded in header.blade.php — no duplicate @import needed.
   ========================================================================== */
html body,
html h1, html h2, html h3, html h4, html h5, html h6,
html .heading, html .subheading,
html p, html a, html button,
html input, html select, html textarea {
    font-family: var(--font-primary);
}

/* Premium Typography Utility Classes */
.premium-hero-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-6);
}

.premium-hero-desc {
    font-size: 1.15rem;
    line-height: 1.6;
    font-weight: 300;
    opacity: 0.9;
}

/* ==========================================================================
   Homepage Hero Section
   Replaces inline styles from home.blade.php with BEM component classes.
   ========================================================================== */
/* Dark, high-contrast hero: the previous pastel-on-white gradient (#f8f9fa →
   #e0e7ff) sat too close in value to the white cards floating on top of it
   (search bar, deal card), so the whole section read as flat and low-contrast.
   Swapping to the site's existing dark surface token makes those white
   elements pop, and gives room for an optional video background underneath —
   see .homepage-hero__video below. */
.homepage-hero {
    position: relative;
    background: linear-gradient(135deg, var(--color-surface-dark) 0%, #1e293b 55%, #0f172a 100%);
    overflow: hidden;
    padding: var(--space-8) 0;
    isolation: isolate;
}

.homepage-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(209, 18, 42, 0.22) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.homepage-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.12;
    background-image: url('../images/b2b-depo-magaza.svg');
    background-position: right center;
    background-repeat: no-repeat;
    background-size: min(760px, 62vw) auto;
    mix-blend-mode: screen;
}

.homepage-hero .container {
    position: relative;
    z-index: 1;
}

/* Presentation tenant: the hero is a real, local visual asset, not a fragile
   remote banner. A deliberately dark left-side gradient keeps copy readable. */
.homepage-hero--demo {
    min-height: 390px;
    background-image: linear-gradient(90deg, rgba(9, 20, 39, 0.98) 0%, rgba(12, 29, 53, 0.93) 42%, rgba(12, 29, 53, 0.42) 100%), url('/uploads/demo/banners/ustadepo-hero-v2.png');
    background-size: cover;
    background-position: center;
}
.homepage-hero--demo::before { background: radial-gradient(circle, rgba(255, 112, 32, 0.25) 0%, transparent 70%); }
.homepage-hero--demo::after { opacity: 0.07; }

/* Optional slow video background — only rendered when a video file exists
   at the path checked in home.blade.php. Sits behind the dark gradient's
   content layer but above the base background, dimmed by the overlay so
   text and the floating white cards stay readable regardless of footage. */
.homepage-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.5;
    /* Actual slow-motion playback (playbackRate) is set in JS below — CSS
       can't change a <video>'s playback speed, only its visual presentation. */
}
.homepage-hero__video-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.86) 0%, rgba(15, 23, 42, 0.68) 55%, rgba(15, 23, 42, 0.82) 100%);
}
@media (max-width: 767px) {
    /* Skip decorative video on small/likely-metered connections; the dark
       gradient alone already delivers the contrast fix. */
    .homepage-hero__video {
        display: none;
    }
}

/* Demo category guide: a practical trade-selection module, visually aligned
   to the UstaDepo navy/orange system instead of an editorial text section. */
.category-seo-guide--demo {
    padding: 0;
    border: 0;
    background: transparent;
}
.category-seo-guide--demo .container {
    padding-top: 0;
    padding-bottom: 0;
}
.category-seo-guide--demo .category-seo-guide__header {
    position: relative;
    align-items: center;
    min-height: 180px;
    margin: 0;
    padding: 30px 34px;
    overflow: hidden;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(120deg, #0c1d36 0%, #12345c 64%, #1b4c77 100%);
}
.category-seo-guide--demo .category-seo-guide__header::after {
    content: '';
    position: absolute;
    right: -65px;
    bottom: -110px;
    width: 280px;
    height: 280px;
    border: 36px solid rgba(251, 146, 60, .15);
    border-radius: 50%;
}
.category-seo-guide--demo .category-seo-guide__header > div,
.category-seo-guide--demo .category-seo-guide__offer { position: relative; z-index: 1; }
.category-seo-guide--demo .category-seo-guide__eyebrow { color: #fb923c; }
.category-seo-guide--demo.category-seo-guide h2 { max-width: 760px; color: #fff; font-size: clamp(25px, 3vw, 36px); }
.category-seo-guide--demo .category-seo-guide__header > div > p:last-child { max-width: 720px; color: #c8d6e6; }
.category-seo-guide--demo .category-seo-guide__offer {
    flex: 0 0 auto;
    border: 0;
    border-radius: 9px;
    background: #fb923c;
    color: #111f33;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}
.category-seo-guide--demo .category-seo-guide__offer:hover,
.category-seo-guide--demo .category-seo-guide__offer:focus-visible { background: #fff; color: #102b4e; }
.category-seo-guide--demo .category-seo-guide__grid {
    gap: 1px;
    padding: 1px;
    background: #d9e2ed;
}
.category-seo-guide--demo .category-seo-guide__grid article {
    min-height: 156px;
    padding: 22px 24px;
    border: 0;
    border-radius: 0;
    background: #fff;
}
.category-seo-guide--demo .category-seo-guide__number {
    width: 30px;
    height: 30px;
    margin: 0 0 14px;
    border-radius: 8px;
    background: #edf4fb;
    color: #155b92;
}
.category-seo-guide--demo h3 { font-size: 16px; }
.category-seo-guide--demo article p { font-size: 13px; line-height: 1.55; }
.category-seo-guide--demo .category-seo-guide__faq {
    grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr);
    gap: 28px;
    margin: 0;
    padding: 28px 30px 30px;
    border: 0;
    border-radius: 0 0 18px 18px;
    background: #f1f5f9;
}
.category-seo-guide--demo .category-seo-guide__faq > div:first-child { padding: 12px 6px; }
.category-seo-guide--demo .category-seo-guide__faq h3 { color: #11223b; font-size: 22px; }
.category-seo-guide--demo .category-seo-guide__faq > div:last-child {
    overflow: hidden;
    border: 1px solid #dce5ee;
    border-radius: 12px;
    background: #fff;
}
.category-seo-guide--demo .category-seo-guide__faq details,
.category-seo-guide--demo .category-seo-guide__faq details:first-child { border: 0; border-bottom: 1px solid #e5ebf1; }
.category-seo-guide--demo .category-seo-guide__faq details:last-child { border-bottom: 0; }
.category-seo-guide--demo .category-seo-guide__faq summary { min-height: 54px; padding: 0 18px; font-size: 13px; }
.category-seo-guide--demo .category-seo-guide__faq summary::after { color: #f05b38; font-size: 18px; }
.category-seo-guide--demo .category-seo-guide__faq details p { padding: 0 50px 16px 18px; font-size: 13px; }
@media (max-width: 767px) {
    .category-seo-guide--demo .category-seo-guide__header { min-height: 0; padding: 26px 20px; border-radius: 14px 14px 0 0; }
    .category-seo-guide--demo .category-seo-guide__header::after { display: none; }
    .category-seo-guide--demo .category-seo-guide__offer { width: 100%; justify-content: center; }
    .category-seo-guide--demo .category-seo-guide__grid { padding: 1px; }
    .category-seo-guide--demo .category-seo-guide__grid article { padding: 18px 20px; }
    .category-seo-guide--demo .category-seo-guide__faq { padding: 18px; border-radius: 0 0 14px 14px; }
}

/* Category SEO guide: useful decision support instead of a repeated product
   grid below the primary catalogue. */
.category-seo-guide {
    padding: 30px 0 40px;
    border-top: 1px solid var(--color-border-ui);
    border-bottom: 1px solid var(--color-border-ui);
    background: var(--color-surface-alt);
}
.category-seo-guide__header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}
.category-seo-guide__eyebrow {
    margin: 0 0 7px;
    color: var(--tf-primary-color);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}
.category-seo-guide h2 {
    margin: 0;
    color: var(--color-text-primary);
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.15;
}
.category-seo-guide__header > div > p:last-child {
    max-width: 680px;
    margin: 9px 0 0;
    color: var(--color-text-secondary);
    font-size: 15px;
    line-height: 1.6;
}
.category-seo-guide__offer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--color-border-ui);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.category-seo-guide__offer:hover,
.category-seo-guide__offer:focus-visible {
    border-color: var(--tf-primary-color);
    color: var(--tf-primary-color);
}
.category-seo-guide__offer .icon { font-size: 10px; }
.category-seo-guide__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.category-seo-guide__grid article {
    min-height: 170px;
    padding: 20px;
    border: 1px solid var(--color-border-ui);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}
.category-seo-guide__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 24px;
    margin-bottom: 16px;
    border-radius: var(--radius-full);
    background: rgba(209, 18, 42, .08);
    color: var(--tf-primary-color);
    font-size: 11px;
    font-weight: 800;
}
.category-seo-guide h3 {
    margin: 0 0 8px;
    color: var(--color-text-primary);
    font-size: 17px;
    line-height: 1.3;
}
.category-seo-guide article p,
.category-seo-guide__faq details p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.65;
}
.category-seo-guide__faq {
    display: grid;
    grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
    gap: 32px;
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid var(--color-border-ui);
}
.category-seo-guide__faq h3 { font-size: 21px; }
.category-seo-guide__faq details {
    border-bottom: 1px solid var(--color-border-ui);
}
.category-seo-guide__faq details:first-child { border-top: 1px solid var(--color-border-ui); }
.category-seo-guide__faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 52px;
    cursor: pointer;
    list-style: none;
    color: var(--color-text-primary);
    font-size: 14px;
    font-weight: 700;
}
.category-seo-guide__faq summary::-webkit-details-marker { display: none; }
.category-seo-guide__faq summary::after {
    content: '+';
    flex: 0 0 auto;
    color: var(--tf-primary-color);
    font-size: 20px;
    font-weight: 400;
}
.category-seo-guide__faq details[open] summary::after { content: '−'; }
.category-seo-guide__faq details p { padding: 0 32px 16px 0; }
@media (max-width: 767px) {
    .category-seo-guide { padding: 24px 0 30px; }
    .category-seo-guide__header { align-items: flex-start; flex-direction: column; gap: 16px; }
    .category-seo-guide__header > div > p:last-child { font-size: 14px; }
    .category-seo-guide__grid { grid-template-columns: 1fr; gap: 10px; }
    .category-seo-guide__grid article { min-height: 0; padding: 16px; }
    .category-seo-guide__number { margin-bottom: 10px; }
    .category-seo-guide__faq { grid-template-columns: 1fr; gap: 16px; margin-top: 22px; padding-top: 22px; }
    .category-seo-guide__faq summary { min-height: 48px; font-size: 13px; }
}

/* Curated listing pages: a focused, full-width discovery layout. */
.vitrin-listing-intro {
    padding: 18px 0 22px;
    border-bottom: 1px solid var(--color-border-ui);
    background: var(--color-surface);
}
.vitrin-listing-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    margin-bottom: 16px;
    color: var(--color-text-secondary);
    font-size: 13px;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.vitrin-listing-breadcrumb::-webkit-scrollbar { display: none; }
.vitrin-listing-breadcrumb .text {
    flex: 0 0 auto;
    color: inherit;
}
.vitrin-listing-breadcrumb a:hover,
.vitrin-listing-breadcrumb a:focus-visible { color: var(--tf-primary-color); }
.vitrin-listing-breadcrumb [aria-current="page"] {
    color: var(--color-text-primary);
    font-weight: 600;
}
.vitrin-listing-breadcrumb .icon {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: 9px;
}
.vitrin-listing-intro__content {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
}
.vitrin-listing-eyebrow {
    margin: 0 0 6px;
    color: var(--tf-primary-color);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
}
.vitrin-listing-intro h1 {
    margin: 0;
    color: var(--color-text-primary);
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.08;
}
.vitrin-listing-intro__description {
    margin: 8px 0 0;
    color: var(--color-text-secondary);
    font-size: 15px;
}
.vitrin-listing-intro__count {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex: 0 0 auto;
    color: var(--color-text-secondary);
    font-size: 14px;
}
.vitrin-listing-intro__count strong {
    color: var(--color-text-primary);
    font-size: 24px;
    line-height: 1;
}
.vitrin-listing-page {
    margin-top: 24px !important;
}
.vitrin-listing-page .tf-shop-control {
    min-height: 52px;
    margin-bottom: 16px;
    padding: 0;
}
.vitrin-listing-page .tf-row-flex {
    display: block;
}
.vitrin-listing-page .vitrin-listing-content {
    width: 100%;
    max-width: none;
}
.vitrin-listing-page .vitrin-listing-content > .meta-filter-shop {
    display: none !important;
}
.vitrin-listing-page #gridLayout {
    gap: 16px;
}
.vitrin-listing-page .tf-dropdown-sort {
    min-width: 190px;
}
.vitrin-listing-page .tf-dropdown-sort .btn-select {
    min-height: 44px;
    border: 1px solid var(--color-border-ui);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.vitrin-listing-page .tf-dropdown-sort .btn-select:hover,
.vitrin-listing-page .tf-dropdown-sort:focus-within .btn-select {
    border-color: var(--tf-primary-color);
}
.vitrin-listing-page .tf-dropdown-sort .dropdown-menu {
    top: calc(100% + 6px) !important;
    right: 0 !important;
    left: auto !important;
    width: 210px;
    min-width: 210px;
    max-width: 210px;
    margin: 0 !important;
    padding: 6px 0;
    border: 1px solid var(--color-border-ui);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
}
.vitrin-listing-page .tf-dropdown-sort .select-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 7px 12px;
    text-align: center;
}
.vitrin-listing-page .tf-dropdown-sort .select-item::before,
.vitrin-listing-page .tf-dropdown-sort .select-item::after { display: none; }
.vitrin-listing-page .tf-dropdown-sort .text-value-item {
    width: 100%;
    text-align: center;
}

/* Industrial catalogue density: product specs and price take priority over
   oversized lifestyle imagery in listing and recommendation cards. */
.category-listing-page .card-product.grid:not(.list-layout) .card-product-wrapper,
.vitrin-listing-page .card-product.grid:not(.list-layout) .card-product-wrapper,
.product-detail-recommendations .card-product .card-product-wrapper,
.product-detail-bestsellers .card-product .card-product-wrapper {
    aspect-ratio: 1 / .86;
}
.category-listing-page .card-product.grid:not(.list-layout) .card-product-info,
.vitrin-listing-page .card-product.grid:not(.list-layout) .card-product-info,
.product-detail-recommendations .card-product .card-product-info,
.product-detail-bestsellers .card-product .card-product-info {
    padding: 14px 14px 16px;
}
.category-listing-page .card-product .title,
.vitrin-listing-page .card-product .title,
.product-detail-recommendations .card-product .title,
.product-detail-bestsellers .card-product .title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.35;
}
.category-listing-page .card-product .price,
.vitrin-listing-page .card-product .price,
.product-detail-recommendations .card-product .price,
.product-detail-bestsellers .card-product .price {
    font-size: 15px;
}

/* Product detail information: give technical content a clear reading surface. */
.product-detail-info-panel {
    overflow: hidden;
    border: 1px solid var(--color-border-ui) !important;
    border-radius: var(--radius-lg);
    background: var(--color-surface) !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .07);
}
.product-detail-info-panel .widget-menu-tab {
    gap: 4px;
    padding: 0 20px;
    border-bottom: 1px solid var(--color-border-ui);
    background: var(--color-surface-alt);
}
.product-detail-info-panel .widget-menu-tab .item-title {
    min-height: 56px;
    padding: 17px 16px 14px;
    color: var(--color-text-secondary);
    font-size: 15px;
    font-weight: 700;
}
.product-detail-info-panel .widget-menu-tab .item-title.active {
    color: var(--color-text-primary);
}
.product-detail-info-panel .widget-content-tab {
    background: var(--color-surface);
}
.product-detail-info-panel .widget-content-inner {
    padding: 28px 34px 32px;
}
.product-detail-info-panel .site-text > h2 {
    margin-bottom: 10px !important;
    color: var(--color-text-primary);
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.15;
}
.product-detail-info-panel .site-text > p {
    max-width: 820px;
    color: var(--color-text-secondary);
    font-size: 15px;
    line-height: 1.7;
}
.product-detail-info-panel .tf-product-des-demo {
    display: grid;
    /* Sabit 4 sütundu; künye alanı çoğu üründe üç kutu (barkod, kategori,
       marka) olduğu için panelin sağ dörtte biri boş kalıyordu. */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 24px !important;
    padding-top: 20px;
    border-top: 1px solid var(--color-border-ui);
}
.product-detail-info-panel .tf-product-des-demo > div {
    min-height: 78px;
    padding: 14px 16px;
    border: 1px solid var(--color-border-ui);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
}
.product-detail-info-panel .tf-product-des-demo h3 {
    margin-bottom: 8px;
    color: var(--color-text-secondary);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.product-detail-info-panel .tf-product-des-demo p {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}

/* Reviews tab: rating summary + comment list (only used on the product
   detail page, so no extra scoping needed). */
.tab-reviews-heading {
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border-ui);
}
.tab-reviews-heading .number {
    color: var(--color-text-primary);
    font-size: 40px;
    /* `line-height` YAZILI OLMALI: bu kutu iki farklı etikette kullanılıyor —
       puan varken `div`, yokken `h6` — ve ölçüsünü uzaktaki etiket
       kurallarından devralıyordu. `h6` dalında devraldığı değer sabit 30
       pikseldi, yani 40 piksellik yazı kendi satır kutusundan TAŞIYOR ve
       altındaki yıldızlara doğru sarkıyordu; oran kullanmaya geçince aynı
       kutu 60 piksele çıkacaktı. İkisi de kaza. 1.15, gösterim amaçlı bir
       sayı için doğru sıkılık ve artık etiketten bağımsız. */
    line-height: 1.15;
}
.rating-score .line-bg {
    border-radius: var(--radius-full);
    overflow: hidden;
}
.rating-score .line-bg div {
    border-radius: var(--radius-full);
}
.btn-comment-review {
    border-radius: var(--radius-full) !important;
}
.reply-comment-item {
    padding: var(--space-4);
    margin-bottom: var(--space-3) !important;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-ui);
    border-radius: var(--radius-md);
}
.reply-comment-item:not(:last-child) .content {
    border-bottom: 0 !important;
}
.reply-comment-item .user .day {
    font-size: 13px;
}
.reply-comment-item .list-star {
    margin: 6px 0;
}
.reply-comment-item p {
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.product-detail-bestsellers {
    margin-top: 12px;
    padding: 30px 0 36px;
    border-top: 1px solid var(--color-border-ui);
    border-bottom: 1px solid var(--color-border-ui);
    background: linear-gradient(180deg, var(--color-surface-alt) 0%, var(--color-surface) 100%);
}
.product-detail-bestsellers__header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}
.product-detail-bestsellers__eyebrow {
    margin: 0 0 7px;
    color: var(--tf-primary-color);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}
.product-detail-bestsellers__title {
    margin: 0;
    color: var(--color-text-primary);
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.1;
}
.product-detail-bestsellers__description {
    margin: 8px 0 0;
    color: var(--color-text-secondary);
    font-size: 14px;
}
.product-detail-bestsellers__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--color-border-ui);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.product-detail-bestsellers__link:hover,
.product-detail-bestsellers__link:focus-visible {
    border-color: var(--tf-primary-color);
    color: var(--tf-primary-color);
}
.product-detail-bestsellers__link .icon { font-size: 10px; }
.product-detail-bestsellers__slide {
    position: relative;
    height: auto;
    padding-top: 5px;
}
.product-detail-bestsellers__slide .card-product {
    height: 100%;
    border: 1px solid var(--color-border-ui);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
    transition: box-shadow .2s ease, transform .2s ease;
}
.product-detail-bestsellers__slide .card-product:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, .11);
}
.product-detail-bestsellers__rank {
    position: absolute;
    top: 14px;
    left: 12px;
    z-index: 25;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 24px;
    padding: 0 7px;
    border: 1px solid rgba(209, 18, 42, .18);
    border-radius: var(--radius-full);
    background: rgba(255, 247, 248, .96);
    color: var(--tf-primary-color);
    font-size: 11px;
    font-weight: 800;
}
.product-detail-bestsellers .nav-sw {
    border: 1px solid var(--color-border-ui);
    background: var(--color-surface);
    box-shadow: 0 5px 12px rgba(15, 23, 42, .08);
}
.product-detail-bestsellers .nav-sw:hover,
.product-detail-bestsellers .nav-sw:focus-visible {
    border-color: var(--tf-primary-color);
    color: var(--tf-primary-color);
}
.product-detail-bestsellers .swiper-slide,
.product-detail-recommendations .swiper-slide {
    height: auto;
}
@media (max-width: 767px) {
    .product-detail-bestsellers { padding: 24px 0 28px; }
    .product-detail-bestsellers__header { align-items: flex-start; margin-bottom: 16px; }
    .product-detail-bestsellers__description { max-width: 240px; font-size: 13px; }
    .product-detail-bestsellers__link { padding: 9px 10px; font-size: 12px; }
    .product-detail-bestsellers__rank { top: 11px; left: 9px; }
    .product-detail-info-panel .widget-menu-tab { padding: 0 8px; }
    .product-detail-info-panel .widget-menu-tab .item-title {
        min-height: 48px;
        padding: 14px 10px 12px;
        font-size: 14px;
    }
    .product-detail-info-panel .widget-content-inner { padding: 22px 18px 24px; }
    .product-detail-info-panel .tf-product-des-demo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .product-detail-info-panel .tf-product-des-demo > div { padding: 12px; }
    .category-listing-page .card-product.grid:not(.list-layout) .card-product-wrapper,
    .vitrin-listing-page .card-product.grid:not(.list-layout) .card-product-wrapper,
    .product-detail-recommendations .card-product .card-product-wrapper,
    .product-detail-bestsellers .card-product .card-product-wrapper { aspect-ratio: 1 / .9; }
}
@media (max-width: 767px) {
    .vitrin-listing-intro { padding: 14px 0 18px; }
    .vitrin-listing-breadcrumb { margin-bottom: 12px; font-size: 12px; }
    .vitrin-listing-intro__content { align-items: start; }
    .vitrin-listing-intro__description { max-width: 260px; font-size: 13px; }
    .vitrin-listing-intro__count { display: none; }
    .vitrin-listing-page { margin-top: 16px !important; }
    .vitrin-listing-page .tf-shop-control { align-items: stretch !important; }
    .vitrin-listing-page .tf-control-filter,
    .vitrin-listing-page .tf-control-sorting { flex: 1 1 0; }
    .vitrin-listing-page .tf-control-sorting { justify-content: flex-end; }
    .vitrin-listing-page .tf-dropdown-sort { min-width: 0; width: 100%; }
    .vitrin-listing-page .tf-dropdown-sort .dropdown-menu { min-width: 180px; }
    .vitrin-listing-page #gridLayout { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .homepage-hero__video {
        display: none;
    }
}

.homepage-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: var(--space-3);
    padding: 4px var(--space-3);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-full);
    color: #6ee7b7;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.875rem;
}

.homepage-hero__title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
}

.homepage-hero__title-accent {
    color: #ff6b7a;
}

.homepage-hero__desc {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.82);
    max-width: 500px;
}

.homepage-hero__search-form {
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-1);
    box-shadow: var(--shadow-md);
    max-width: 480px;
}

.homepage-hero__search-input {
    flex: 1;
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    font-size: 1rem;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.homepage-hero__search-input:focus {
    outline: none;
    box-shadow: none;
}

.homepage-hero__search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-weight: 600;
    flex-shrink: 0;
}

.homepage-hero__deal-icon {
    color: var(--tf-primary-color, #d1122a);
    font-size: 0.9em;
    margin-right: var(--space-2);
}

.homepage-hero__pills-label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    align-self: center;
    margin-right: var(--space-2);
}

.homepage-hero__pill {
    display: inline-flex;
    align-items: center;
    padding: 6px var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    transition: var(--transition-base);
    text-decoration: none;
}
.homepage-hero__pill:hover {
    background: var(--tf-primary-color, #d1122a);
    color: var(--color-surface);
    border-color: var(--tf-primary-color, #d1122a);
}

.homepage-hero__deal-card {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border-light);
}

.homepage-hero__deal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.homepage-hero__deal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}

.homepage-hero__deal-link {
    font-size: 0.875rem;
    color: var(--color-accent);
    font-weight: 600;
}

@media (max-width: 991px) {
    .homepage-hero .col-lg-7 {
        padding-right: 15px;
    }
}
@media (max-width: 767px) {
    .homepage-hero__desc {
        font-size: 1rem;
        max-width: 100%;
    }
    .homepage-hero__search-form {
        border-width: 1px;
    }
    .homepage-hero__search-input {
        padding: var(--space-2) var(--space-3);
        font-size: 1rem;
    }
    .homepage-hero__search-btn {
        padding: var(--space-2) var(--space-4);
        font-size: 0.875rem;
    }
    .homepage-hero__pill {
        font-size: 0.8125rem;
        padding: 5px 10px;
    }
    .homepage-hero__deal-card {
        padding: var(--space-4);
        border-radius: var(--radius-lg);
    }
}

/* ==========================================================================
   Product Card — Even Bottom Alignment
   CSS Grid stretches every .card-product in a row to match the tallest
   card's natural height (default align-items: stretch on .grid-layout).
   Titles that wrap to 1 line vs 2 lines meant shorter cards ended up with a
   large dead gap below the stock/shipping text instead of matching content
   height. Converting the card + info block to a flex column and pinning the
   trust-signals block to the bottom turns that stretched leftover space into
   a consistent gap above the stock line — still uneven card-to-card, but
   reads as intentional bottom alignment instead of a blank hole. Global (not
   homepage-scoped) since this is a bug in the shared card component itself,
   used identically on category/search pages.
   ========================================================================== */
.card-product.grid:not(.list-layout) {
    display: flex;
    flex-direction: column;
}
.card-product.grid:not(.list-layout) .card-product-wrapper {
    flex-shrink: 0;
}
.card-product.grid:not(.list-layout) .card-product-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* Başlık → fiyat → durum arasındaki ritim tek yerden verilir; öncesinde
       öğeler kendi payları olmadığı için birbirine yapışıyordu. */
    gap: 6px;
}
.card-product.grid:not(.list-layout) .card-product-info .title {
    /* Uzun adlar kart yüksekliğini şişirmesin; iki satırda kesilir. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    margin-bottom: 0;
}
.card-product.grid:not(.list-layout) .card-product-info .product-listing-trust {
    /* Durum satırı her kartta AYNI hizada, en altta: ızgarada göz kayması
       olmasın diye başlık/fiyat uzunluğundan bağımsız. */
    margin-top: auto;
    padding-top: 8px;
}

.product-listing-trust--compact {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 22px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--color-border-light);
}
.product-listing-signal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    border: 1px solid currentColor;
}
.product-listing-signal--stock { color: #16834b; background: #eefaf3; }
.product-listing-signal--shipping { color: #2563eb; background: #eff6ff; }
.product-listing-signal--notice { color: #9a6700; background: #fff8e1; }
.product-listing-signal--shipping svg { width: 14px; height: 14px; fill: currentColor; }

/* Durum metni ikonun yanında. Eskiden metin yalnızca `title` içindeydi:
   masaüstünde imleç bekletmek gerekiyordu, dokunmatikte hiç görünmüyordu. */
.product-listing-trust__label {
    font-size: 11.5px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--color-text-muted, #6b7280);
    white-space: nowrap;
    /* Dar kartta uzun sevk metni satırı taşırmasın. */
    overflow: hidden;
    text-overflow: ellipsis;
}
.product-listing-signal--stock + .product-listing-trust__label { color: #16834b; }
.product-listing-signal--shipping + .product-listing-trust__label { color: #2563eb; }

.product-listing-trust__sep {
    width: 1px;
    height: 12px;
    background: var(--color-border-light, rgba(17, 24, 39, .12));
    flex: 0 0 auto;
    margin: 0 1px;
}

/* İkonlar küçülür: artık tek başlarına anlam taşımıyorlar, metne eşlik
   ediyorlar. Böylece iki etiket dar kartta da yan yana sığıyor. */
.product-listing-trust--compact .product-listing-signal {
    width: 18px;
    height: 18px;
    font-size: 11px;
    flex: 0 0 auto;
}
.product-listing-trust--compact .product-listing-signal--shipping svg { width: 11px; height: 11px; }
.product-listing-trust--compact { gap: 4px; flex-wrap: nowrap; min-width: 0; }

/* Hardware catalogue imagery should stay legible and compact on every card. */
.card-product .card-product-wrapper .product-img {
    aspect-ratio: 1 / 1;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface);
}
.card-product .card-product-wrapper .product-img img {
    width: 100%;
    height: 100%;
    padding: 8px;
    object-fit: contain;
}

/* Demo catalogue cards: generated product shots have generous studio
   margins, so a small non-destructive zoom gives the item proper visual
   weight. Badges share a single anchored row instead of floating apart. */
.product-card--demo .card-product-wrapper .product-img {
    background: #f4f1ee;
}
.product-card--demo .card-product-wrapper .product-img img {
    padding: 0;
    object-fit: cover;
    transform: scale(1.09);
    transition: transform .24s ease;
}
.product-card--demo:hover .card-product-wrapper .product-img img {
    transform: scale(1.13);
}
/* --------------------------------------------------------------------------
   Ürün kartı promosyon rozetleri

   ÖNCEKİ TASARIM: üç rozet tek bir koyu şeridin içine toplanıyor, aralarına
   dikey çizgi ve her birinin soluna renkli nokta konuyordu. İki sorunu vardı:

     1. Üç rozet olunca şerit İKİ SATIRA taşıyor, kutu büyüyüp ürün görselinin
        üçte birini kapatıyordu.
     2. Nokta + ayraç + koyu kutu birlikte görsel gürültü üretiyor, hiçbir
        rozet öne çıkmıyordu.

   YENİ TASARIM: her rozet bağımsız bir hap. Hiyerarşi renkle kuruluyor —
   indirim DOLU kırmızı (en güçlü satın alma nedeni), "yeni" ve "kargo" ise
   beyaz zemin üzerinde kendi renginde ince çerçeveli, sakin. Böylece iki
   satıra taşsa bile dağılmıyor; haplar kendi başlarına okunuyor.
   -------------------------------------------------------------------------- */
.product-card--demo .product-promo-badges--card {
    top: 10px !important;
    left: 10px !important;
    right: auto;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 4px !important;
    max-width: calc(100% - 20px) !important;
    /* Kutu yok: haplar kendi zeminlerini taşıyor. */
    padding: 0 !important;
    border: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
}

.product-card--demo .product-promo-badges--card .badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    border-radius: 999px !important;
    font-size: 10.5px !important;
    font-weight: 650 !important;
    line-height: 1;
    padding: 4px 8px !important;
    letter-spacing: .01em;
    text-transform: none;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .16) !important;
    /* Fotoğrafın üstünde okunur kalsın. */
    -webkit-backdrop-filter: saturate(180%) blur(6px);
    backdrop-filter: saturate(180%) blur(6px);
}

/* Nokta ve ayraç kaldırıldı: rozetin rengi zaten anlamı taşıyor. */
.product-card--demo .product-promo-badges--card .badge::before { content: none; }
.product-card--demo .product-promo-badges--card .badge + .badge { border-left: 0; }

/* İndirim: tek DOLU rozet — kartta gözün ilk gittiği yer burası olsun. */
.product-card--demo .product-promo-badges--card .product-promo-badge--discount {
    background: #d1122a !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(209, 18, 42, .32) !important;
}

/* Destekleyici rozetler: beyaz zemin, kendi renginde metin ve ince çerçeve. */
.product-card--demo .product-promo-badges--card .product-promo-badge--new {
    background: rgba(255, 255, 255, .94) !important;
    color: #12704a !important;
    border: 1px solid rgba(18, 112, 74, .22);
}
.product-card--demo .product-promo-badges--card .product-promo-badge--cargo {
    background: rgba(255, 255, 255, .94) !important;
    color: #1d4ed8 !important;
    border: 1px solid rgba(29, 78, 216, .22);
}

/* Dar kartlarda (5'li ızgara, mobil) üç rozet yan yana sığmaz; metin
   kısalmasın diye ölçü bir tık düşürülür. */
@media (max-width: 1199.98px) {
    .product-card--demo .product-promo-badges--card .badge {
        font-size: 10px !important;
        padding: 3px 7px !important;
    }
}

/* ==========================================================================
   Homepage Product Grid Spacing
   The sitewide [data-grid] rule in styles.css uses arbitrary 30px/15px gaps
   that don't align to the --space-* scale used everywhere else. Scoped to
   .homepage-product-grid (only used by product-grid-section.blade.php, which
   is homepage-only) so category/listing pages keep their existing spacing.
   ========================================================================== */
.homepage-product-grid {
    gap: var(--space-8);
}
@media (max-width: 1149px) {
    .homepage-product-grid {
        gap: var(--space-6);
    }
}
@media (max-width: 767px) {
    .homepage-product-grid {
        gap: var(--space-4);
    }
}
@media (max-width: 480px) {
    .homepage-product-grid {
        gap: var(--space-3);
    }
}

/* ==========================================================================
   Homepage Trust Bar
   ========================================================================== */
.homepage-trust-bar {
    background-color: var(--color-surface-alt);
    padding: var(--space-5) 0;
    border-top: 1px solid var(--color-border-ui);
    border-bottom: 1px solid var(--color-border-ui);
}

/* Liste artık gerçek bir liste (`<ul>`): maddeler anlamsal olarak eşit ve
   ekran okuyucu kaç madde olduğunu söyleyebiliyor. Öncesinde iç içe
   `d-flex` sarmalayıcılardı. */
.homepage-trust-bar__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.homepage-trust-bar__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* İKON YAZIDAN BÜYÜK OLMAMALI.
   20 piksel sabitti; yazı ise temanın varsayılanını miras alıyordu — `body`
   kuralındaki `font-size: 14px` yoruma alınmış olduğu için tarayıcı
   varsayılanı 16px. Yeşil ve kalın bir ikon fontu glifi, 16px yazının yanında
   20px'te öne çıkıyor ve şeridin ağırlık merkezi metinden ikona kayıyordu.
   Ölçü artık metne göre (`em`) ve bir tık küçük. */
.homepage-trust-bar__icon {
    flex: 0 0 auto;
    color: var(--color-success);
    font-size: .95em;
    line-height: 1;
}

.homepage-trust-bar__text {
    color: #333;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

@media (max-width: 575px) {
    /* Telefonda üç madde alt alta; yatayda sıkışıp kırpılmasın. */
    .homepage-trust-bar__list {
        flex-direction: column;
        gap: 8px;
    }
}

/* ==========================================================================
   Header & Hero Conversion Refresh
   ========================================================================== */
.site-utility-bar { min-height: 38px; }
.site-utility-bar__inner { padding: 10px 0; }
.site-entity-note {
    width: 100%;
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-ui);
    color: var(--color-text-secondary);
    font-size: 12px;
}
.site-header {
    border-bottom: 1px solid var(--color-border-ui);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}
.site-header__row { min-height: 82px; gap: 0; }
.site-header__brand-col,
.site-header__search-col,
.site-header__actions-col { min-width: 0; }
.site-header__search { width: 100%; }
.site-header__search .search-box {
    min-height: 48px;
    background: var(--color-surface);
    border-color: var(--color-border-ui);
}
.site-header__search input { min-height: 42px; font-size: 15px; }
.site-header__search .tf-btn { width: 42px !important; height: 42px !important; }
.site-header__actions { gap: var(--space-3) !important; }
.site-header__actions-col { flex-shrink: 0; }
.site-header__actions { flex-wrap: nowrap !important; white-space: nowrap; }
.site-header__actions .nav-icon-item {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: var(--radius-md);
}
.site-header__action-label { display: none; font-size: 12px; font-weight: 600; }
.site-header__actions .nav-icon-item:focus-visible,
.site-header__actions .nav-icon-item:hover { background: var(--color-surface-alt); }
.site-category-menu-item .category-menu-toggle {
    border: 0;
    cursor: pointer;
    font: inherit;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--tf-primary-color);
    border-radius: 6px;
    color: #fff !important;
    font-weight: 600;
}
.site-category-menu-item .category-menu-toggle .icon-arrow-down { transition: transform 180ms ease; }
.site-category-menu-item.is-open .category-menu-toggle .icon-arrow-down,
.site-category-menu-item:hover .category-menu-toggle .icon-arrow-down { transform: rotate(180deg); }
.site-category-menu-item.is-open > .nsmp { display: block; }
.site-category-menu-item .category-menu-toggle:focus-visible,
.tenant-category-nav-strip .item-link:focus-visible,
.homepage-hero a:focus-visible,
.homepage-hero button:focus-visible,
.homepage-hero input:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.95);
    outline-offset: 3px;
}

.homepage-hero { padding: clamp(48px, 7vw, 88px) 0; }
.homepage-hero__content { max-width: 720px; }
.homepage-hero__title { max-width: 680px; letter-spacing: -0.03em; text-wrap: balance; }
.homepage-hero__desc { max-width: 560px; }
.homepage-hero__deal-card { max-width: 480px; margin-left: auto; }

/* Gösterilecek fırsat yoksa sütun hiç basılmıyor (bkz. home.blade.php); geriye
   kalan başlık sütunu 12'de 7'lik genişliğinde kalırsa kahramanın sağ yarısı
   sebepsiz boş durur. Metin bu durumda tüm genişliği alır — ama okunabilirlik
   için satır uzunluğu sınırlanır.

   `.homepage-hero__deal-empty` kuralları BURADAN KALDIRILDI: boş kart artık
   hiçbir koşulda basılmıyor, sınıf ölü işaretlemeydi. */
.homepage-hero--no-deal .homepage-hero__content {
    flex: 0 0 100%;
    max-width: 900px;
}

/* The demo deal is a compact procurement summary, not a second full-height
   product card. Keeping the image and commercial facts side by side reduces
   hero height while retaining price and stock context. */
.homepage-hero--demo { padding: clamp(38px, 4.5vw, 58px) 0; }
.homepage-hero--demo .homepage-hero__deal-card {
    max-width: 390px;
    padding: 16px;
    border-radius: 14px;
}
.homepage-hero--demo .homepage-hero__deal-header { margin-bottom: 12px; }
.homepage-hero--demo .homepage-hero__deal-title { font-size: 16px; }
.homepage-hero--demo .homepage-hero__deal-link { font-size: 12px; }
.homepage-hero--demo .homepage-hero__deal-card .card-product {
    display: grid;
    grid-template-columns: 146px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}
.homepage-hero--demo .homepage-hero__deal-card .card-product-wrapper { min-width: 0; height: 146px; }
.homepage-hero--demo .homepage-hero__deal-card .product-img { height: 146px; aspect-ratio: 1 / 1; border: 0; background: #f5f3f0; }
.homepage-hero--demo .homepage-hero__deal-card .product-img img { padding: 0 !important; object-fit: cover !important; }
.homepage-hero--demo .homepage-hero__deal-card .product-promo-badges { display: none !important; }
.homepage-hero--demo .homepage-hero__deal-card .card-product-info {
    min-width: 0;
    padding: 0;
}
.homepage-hero--demo .homepage-hero__deal-card .card-product-info .title {
    display: -webkit-box;
    margin-bottom: 7px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 13px;
    line-height: 1.35;
}
.homepage-hero--demo .homepage-hero__deal-card .tf-product-info-price-detail,
.homepage-hero--demo .homepage-hero__deal-card .price { color: #0b1f38; font-size: 19px; font-weight: 800; }
.homepage-hero--demo .homepage-hero__deal-card .product-listing-trust { display: none; }
.homepage-hero--demo .homepage-hero__deal-card .list-product-btn { display: none; }
@media (max-width: 767px) {
    .homepage-hero--demo { padding: 36px 0 42px; }
    .homepage-hero--demo .homepage-hero__deal-card { max-width: none; padding: 14px; }
    .homepage-hero--demo .homepage-hero__deal-card .card-product { grid-template-columns: 110px minmax(0, 1fr); gap: 11px; }
    .homepage-hero--demo .homepage-hero__deal-card .card-product-wrapper,
    .homepage-hero--demo .homepage-hero__deal-card .product-img { height: 110px; }
}

@media (min-width: 1200px) { .site-header__action-label { display: inline; } }
@media (max-width: 991px) {
    .site-header__row { gap: 0; }
    .site-header__actions { gap: 4px !important; }
}
@media (max-width: 767px) {
    .site-header__row { min-height: 68px; }
    .site-header__actions .nav-icon-item { min-width: 40px; }
    .site-header__actions .count-box { top: 0; right: -2px; }
    .tenant-category-nav-strip .header-categories {
        justify-content: flex-start;
        overflow-x: auto;
        padding: 4px 0;
        scrollbar-width: none;
    }
    .tenant-category-nav-strip .header-categories::-webkit-scrollbar { display: none; }
    .tenant-category-nav-strip .header-categories .item-link { min-height: 44px; }
    .homepage-hero { padding: 44px 0 52px; }
    .homepage-hero__title { font-size: clamp(2rem, 10vw, 2.75rem); }
    .homepage-hero__deal-card { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .site-category-menu-item .category-menu-toggle .icon-arrow-down { transition: none; }
}

/* Fast, layered category navigation. The vendor rule intentionally waits 400ms
   and animates height, which makes the nested panels feel like they cascade into
   each other. Keep the panel in a stable layer and animate only opacity/position. */
.tenant-category-nav-strip .menu-item:focus-within > .nsmp,
.tenant-category-nav-strip .menu-item:hover > .nsmp,
.tenant-category-nav-strip .site-category-menu-item.is-open > .nsmp {
    height: auto !important;
    max-height: min(620px, calc(100vh - 140px));
    visibility: visible;
    opacity: 1;
    overflow: visible;
    animation: none !important;
    transition: opacity 160ms ease, transform 160ms ease !important;
    transform: translateY(0);
    transition-delay: 0s !important;
}
.tenant-category-nav-strip .menu-item > .nsmp {
    height: 0 !important;
    visibility: hidden;
    opacity: 0;
    overflow: hidden;
    transform: translateY(6px);
    pointer-events: none;
}
.tenant-category-nav-strip .menu-item:hover > .nsmp,
.tenant-category-nav-strip .menu-item:focus-within > .nsmp,
.tenant-category-nav-strip .site-category-menu-item.is-open > .nsmp {
    pointer-events: auto;
}
.tenant-category-nav-strip .nsmp-content {
    position: relative;
    z-index: 1002;
    max-height: min(620px, calc(100vh - 140px));
    overflow-y: auto;
    overflow-x: visible;
}
.tenant-category-nav-strip .nsmp-item:hover,
.tenant-category-nav-strip .nsmp-item:focus-within {
    background: var(--color-surface-alt);
}
.tenant-category-nav-strip .nsm {
    top: -8px;
    left: calc(100% + 8px);
    z-index: 1004;
    border: 1px solid var(--color-border-ui);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
    transition: opacity 160ms ease, transform 160ms ease;
    transform: translateX(-4px);
}
.tenant-category-nav-strip .nsmp-item:hover > .nsm,
.tenant-category-nav-strip .nsmp-item:focus-within > .nsm {
    left: calc(100% + 8px);
    opacity: 1;
    visibility: visible;
    z-index: 1004;
    transform: translateX(0);
}
.tenant-category-nav-strip .nsmp-title {
    min-height: 40px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    text-transform: none;
    line-height: 1.35;
}
.tenant-category-nav-strip .nsmp-title:hover,
.tenant-category-nav-strip .nsmp-title:focus-visible {
    color: var(--tf-primary-color);
    background: rgba(209, 18, 42, 0.06);
}

/* The previous homepage override used 32–64px gaps, leaving the five-column
   product row visually disconnected. Keep cards readable while making the
   collection scan as one compact catalogue. */
.homepage-product-grid { gap: 16px; }

/* Sütun sayısından AZ kart olan satır ortalanır.

   Izgara sabit beş sütun; "Sizin İçin Seçtiklerimiz" bölümünde yalnızca üç
   ürün olduğu için kartlar sola yığılıyor ve satırın sağında iki sütunluk
   (yaklaşık 540 piksel) boşluk kalıyordu — bölüm yarım kalmış gibi
   görünüyordu.

   `auto-fit` boş sütunları toplar, `minmax(0, 255px)` kartların doğal
   genişliğini korur (az ürün var diye kartlar şişmez) ve `justify-content`
   kalanı iki yana eşit dağıtır.

   Kural YALNIZCA beşten az kart olduğunda ve YALNIZCA beş sütunlu masaüstü
   düzeninde geçerli. Dar ekranda ızgarayı JS `data-grid` değerinden kuruyor ve
   tek sütuna düşüyor; oradaki sütun genişliği 345 piksel, yani buradaki 255
   piksellik tavan kartı gereksiz yere daraltırdı (ölçüldü). Dolu satırların ve
   dar ekranların düzeni olduğu gibi kalır. */
@media (min-width: 1150px) {
    .homepage-product-grid:not(:has(> *:nth-child(5))) {
        grid-template-columns: repeat(auto-fit, minmax(0, 255px));
        justify-content: center;
    }
}
@media (max-width: 1149px) { .homepage-product-grid { gap: 14px; } }
@media (max-width: 767px) { .homepage-product-grid { gap: 12px; } }
@media (max-width: 480px) { .homepage-product-grid { gap: 10px; } }

/* ==========================================================================
   Homepage Announcement Banner
   ========================================================================== */
.homepage-announcement {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    transition: var(--transition-smooth);
    position: relative;
}

.homepage-announcement__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.8);
    aspect-ratio: 3 / 1;
}

.homepage-announcement__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.88) 0%, rgba(15, 23, 42, 0.4) 100%);
}

.homepage-announcement__content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 5%;
    width: 90%;
    max-width: 600px;
    z-index: 2;
}

.homepage-announcement__kicker {
    color: #38bdf8;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: 700;
}

.homepage-announcement__title {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
    font-weight: 800;
    color: var(--color-surface);
}

.homepage-announcement__desc {
    font-size: 1.1rem;
    color: var(--color-surface);
    opacity: 0.92;
    line-height: 1.6;
}

.homepage-announcement__cta {
    display: inline-block;
    background: var(--color-surface);
    color: var(--color-surface-dark);
    padding: var(--space-3) var(--space-8);
    border-radius: var(--radius-md);
    font-weight: 600;
    border: none;
    transition: var(--transition-base);
}
.homepage-announcement__cta:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-button-hover);
}

@media (max-width: 767px) {
    .homepage-announcement__img {
        aspect-ratio: 2 / 1;
    }
    .homepage-announcement__title {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
        margin-bottom: var(--space-2);
    }
    .homepage-announcement__desc {
        font-size: 0.9rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .homepage-announcement__cta {
        padding: var(--space-2) var(--space-5);
        font-size: 0.875rem;
    }
}

/* ==========================================================================
   Homepage Brand Marquee
   Replaces static grid with pure CSS infinite auto-scroll marquee.
   ========================================================================== */
.homepage-brands-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: var(--space-4) 0;
}

.homepage-brands-marquee::before,
.homepage-brands-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: min(15vw, 150px);
    pointer-events: none;
}
.homepage-brands-marquee::before {
    left: 0;
    background: linear-gradient(90deg, var(--color-surface) 0%, rgba(255, 255, 255, 0) 100%);
}
.homepage-brands-marquee::after {
    right: 0;
    background: linear-gradient(270deg, var(--color-surface) 0%, rgba(255, 255, 255, 0) 100%);
}

.homepage-brands-marquee-track {
    display: flex;
    width: max-content;
    align-items: center;
    animation: homepage-brands-scroll 40s linear infinite;
}

.homepage-brands-marquee:hover .homepage-brands-marquee-track {
    animation-play-state: paused;
}

.homepage-brands-marquee-group {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    padding-right: var(--space-10);
}

.brand-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Şeritteki marka kutusu KENDİ logosu kadar geniş olmalı.

   Temanın `.brand-item` kuralı `width: 100%; height: 100%` diyor; swiper
   slaytı için yazılmış, orada slayt ölçüyü verir. Bu şerit ise
   `width: max-content` bir esnek satır: yüzde genişlik içeriğe göre boyutlanan
   bir kaba dayanınca tarayıcı her kutuyu 6044 piksele kadar şişiriyordu.

   Sonuç ölçüldü: ardışık iki logonun arası 12168 piksel, görünür pencere ise
   1340 piksel. Yani şeritte aynı anda tek bir logo bulunabiliyor, o da kendi
   dev kutusunun ortasında kaldığı için pencere çoğu zaman BOŞ bir alana denk
   geliyordu — bölüm boş beyaz bir bant olarak görünüyordu.

   İç dolgu da sıfırlanır: aralığı zaten grubun `gap` değeri veriyor. */
.homepage-brands-marquee .brand-item {
    width: auto;
    height: auto;
    padding: 0;
}

/* Logolar ORTAK bir kutuya oturur.

   İşaretlemede `width="120" height="48"` yazıyor ama temanın genel
   `img { height: auto }` sıfırlaması yükseklik niteliğini geçersiz kılıyor:
   her logo 120 piksel genişlikte, KENDİ doğal oranında yükseliyordu. Diskteki
   dosyalar ölçüldü — eski logoların tamamı 200x106 (120 piksel genişlikte 63
   piksel), panelden yüklenenler ise 768x450 (70 piksel) ve 1200x1200 (120
   piksel). Yani satırdaki logolar 63 ile 120 piksel arasında değişiyordu; en
   uzun olan şeridin yüksekliğini tek başına belirliyor, sıra tırtıklı
   görünüyordu.

   Sabit kutu + `contain`: her logo aynı alanı kaplar, oranı korunur, hiçbiri
   kırpılmaz. Ölçü metin yedeğiyle (`--logo-placeholder`) aynı tutulur ki
   logosu olan ve olmayan markalar tek bir sıra gibi okunsun.

   Saydamlık 0.7'den 0.85'e çıkarıldı: gri tonlamayla birlikte açık renkli
   logolar beyaz zeminde neredeyse kayboluyordu; şeridin iki ucundaki solma
   maskesi de üstüne biniyor. */
.homepage-brands__logo {
    flex: 0 0 auto;
    width: 148px;
    height: 56px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.85;
    transition: var(--transition-smooth);
}
.homepage-brands__logo:hover,
.homepage-brands__logo:focus-visible {
    filter: grayscale(0%);
    opacity: 1;
}

/* Fallback shown when a brand has no logo uploaded yet — matches the real
   logos in size/opacity so the strip reads as one consistent row instead of
   mixing photographed logos with auto-generated avatar images. */
.homepage-brands__logo-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 148px;
    height: 56px;
    padding: 0 var(--space-3);
    border: 1px solid #dce3ec;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #172b4d;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: linear-gradient(145deg, #fff, #f3f6fa);
    box-shadow: 0 8px 18px rgba(15, 35, 64, 0.08);
}
.homepage-brands__logo-placeholder:hover,
.homepage-brands__logo-placeholder:focus-visible {
    opacity: 1;
    color: var(--tf-primary-color, #333);
    border-color: var(--tf-primary-color, #333);
}

@keyframes homepage-brands-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ==========================================================================
   Ana sayfa kategori afişleri (üç renkli kart)
   --------------------------------------------------------------------------
   Yazı BEYAZ ama zemin fotoğrafları AÇIK: nane yeşili, sarı ve açık mavi
   stüdyo çekimleri. Tek yardım `text-shadow: 1px 1px 5px rgba(0,0,0,.8)`
   idi; açık zeminde bulanık bir gölge okunurluk vermiyor, yalnızca yazının
   kenarını kirletiyor.

   Sayfanın geri kalanı bu sorunu ZATEN perde ile çözüyor — kampanya afişinde
   `homepage-announcement__overlay`, kategori şeridinde
   `homepage-category-block__banner-overlay`. Aynı dil buraya da uygulanır:
   yazının oturduğu alt bölgeye doğru koyulaşan bir geçiş. Görselin üst kısmı
   berrak kalır, ürün görünmeye devam eder.
   ========================================================================== */
.collection-item-v4 .collection-inner {
    overflow: hidden;
    border-radius: 20px;
}
.collection-item-v4 .collection-inner::after {
    content: "";
    position: absolute;
    inset: 40% 0 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(9, 17, 30, 0) 0%, rgba(9, 17, 30, .58) 78%, rgba(9, 17, 30, .72) 100%);
    pointer-events: none;
}
/* Perde geldiği için metin gölgesi yumuşatılır; ikisi üst üste binince yazı
   kalın ve bulanık görünüyordu. */
.collection-item-v4 .collection-content {
    z-index: 1;
}
.collection-item-v4 .shdw-txt-in * {
    text-shadow: 0 1px 2px rgba(9, 17, 30, .45) !important;
}

/* 768–1149 piksel arası ÜÇ sütun bu içerik için fazla dar.

   Temanın `grid-3` kuralı 767 pikselin altında ikiye, 480'in altında bire
   düşüyor; arada kalan bantta üç sütun kalıyor ve her afiş ~222 piksele
   iniyor. Afişin yazı bloğu `bottom/left/right: 7%` ile MUTLAK konumlu:
   "Paslanmaz Kaynak Telleri" gibi bir başlık bu genişlikte üç satıra sarıyor,
   blok yukarı doğru büyüyüp görselin dışına taşıyor ve düğmeyle çakışıyordu.

   İki sütuna düşünce afiş ~340 piksele çıkıyor, başlık tek/iki satıra
   oturuyor. Kural yalnızca bu bölüme bakar — `collection-item-v4` sayfada
   yalnızca burada kullanılıyor. */
@media (max-width: 1149px) {
    .grid-layout[data-grid="grid-3"]:has(.collection-item-v4) {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 575px) {
    .grid-layout[data-grid="grid-3"]:has(.collection-item-v4) {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .homepage-brands-marquee-track {
        animation: none;
        transform: none;
    }
    .homepage-brands-marquee {
        overflow-x: auto;
        scrollbar-width: thin;
    }
}

/* ==========================================================================
   Homepage Section Utilities
   Used by product-grid-section partial — heading hierarchy fix.
   ========================================================================== */
.homepage-section__more {
    padding-top: 30px;
}

/* ==========================================================================
   Micro-animations & Interactive States
   ========================================================================== */

/* Buttons — !important needed to override vendor .tf-btn styles in styles.css */
.tf-btn {
    transition: var(--transition-smooth) !important;
}
.tf-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-button-hover);
}
.tf-btn:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
}

/* Inputs & Form Elements */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], select, textarea {
    transition: var(--transition-smooth);
}
input[type="text"]:focus, input[type="email"]:focus,
input[type="password"]:focus, input[type="search"]:focus,
select:focus, textarea:focus {
    outline: none !important;
    border-color: var(--tf-primary-color, var(--color-danger)) !important;
    box-shadow: 0 0 0 3px rgba(209, 18, 42, 0.15) !important;
}

/* Form Search (Header) */
.tf-form-search .search-box {
    display: flex;
    background: var(--color-surface-alt);
    border-radius: var(--radius-full);
    padding: 4px;
    border: 1px solid var(--color-border-ui);
    transition: var(--transition-smooth);
    align-items: center;
}
.tf-form-search .search-box:focus-within {
    background: var(--color-surface);
    border-color: var(--tf-primary-color);
    box-shadow: 0 0 0 4px rgba(209, 18, 42, 0.1) !important;
}
.tf-form-search input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 16px;
    font-size: 14px;
    color: var(--color-text-primary);
}
.tf-form-search input:focus {
    box-shadow: none !important;
    border-color: transparent !important;
}
.tf-form-search .tf-btn {
    background: var(--tf-primary-color) !important;
    color: white !important;
    border-radius: var(--radius-full) !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    min-width: unset !important;
}
.tf-form-search .tf-btn i {
    font-size: 16px;
}

/* Badges */
.badge-success {
    background-color: var(--color-success) !important;
    color: white !important;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
}
.badge-danger {
    background-color: var(--color-danger) !important;
    color: white !important;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
}
.badge-info {
    background-color: var(--color-info) !important;
    color: white !important;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.2);
}

/* ==========================================================================
   Cards & Products
   ========================================================================== */
.card-product {
    transition: all 0.3s ease-in-out !important;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
}
.card-product:hover {
    box-shadow: var(--shadow-card-hover) !important;
    transform: translateY(-5px) !important;
    border-color: var(--color-border-ui);
    z-index: 2;
}

/* Wishlist/Compare/Quick view: graceful fade-out instead of abrupt
   display:none. Uses opacity + pointer-events so the transition is smooth
   and touch devices don't get a tap-then-disappear surprise. These give way
   on hover to a single, unambiguous "Sepete Ekle" action below. */
.card-product .wishlist,
.card-product .compare,
.card-product .quickview {
    transition: opacity 0.2s ease, flex-basis 0.2s ease, width 0.2s ease, margin 0.2s ease;
}
.card-product:hover .wishlist,
.card-product:hover .compare,
.card-product:hover .quickview {
    opacity: 0 !important;
    pointer-events: none;
    /* Collapse out of the flex row (not just visually fade) so the
       "Sepete Ekle" button below can actually claim the full width
       instead of being squeezed to a sliver next to 3 zero-opacity
       icons that are still taking up layout space. */
    width: 0 !important;
    min-width: 0 !important;
    flex-basis: 0 !important;
    margin: 0 !important;
    overflow: hidden;
}

.card-product .list-product-btn {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    width: auto;
    display: flex;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.card-product:hover .list-product-btn {
    opacity: 1;
}

/* The one action that should stay prominent and unambiguous on hover:
   add the product to the cart directly from the listing card. Previously
   this slot was occupied by the "quick view" button relabelled via CSS to
   say "İncele / Sepete Ekle" even though it only opened a preview modal —
   the label didn't match the action. Quick view now lives with
   wishlist/compare as a small icon; this button actually adds to cart. */
.card-product .btn-quick-add-cart {
    width: 100% !important;
    border-radius: 5px !important;
    background: #1a1a1a !important;
    color: #fff !important;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
}
.card-product .btn-quick-add-cart:hover {
    background: #1a1a1a !important;
    color: #fff !important;
}
.card-product .btn-quick-add-cart .icon {
    display: none !important;
}
.card-product .btn-quick-add-cart::after {
    content: "Sepete Ekle";
}
.card-product .btn-quick-add-cart.is-loading::after {
    content: "Ekleniyor...";
}
.card-product .btn-quick-add-cart .tooltip {
    display: none;
}

/* Product card inline-JS hover replacement —
   premium-hover-card is the class set in product-card.blade.php.
   Its :hover transform/box-shadow/border-color used to collide with
   .card-product:hover above (every card carries both classes) — the
   !important on .card-product:hover always won, so this half was dead
   CSS. Motion now lives solely in .card-product:hover /
   Product Card Modernization below; this class only sets the base
   transition + resting border. */
.premium-hover-card {
    transition: var(--transition-smooth);
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
}

/* ==========================================================================
   Homepage B2B Trust Marquee
   Affects only the tenant homepage trust section (b2b-trust-home.blade.php).
   Moved to sit right before the footer as a compact closing strip (was
   previously a tall section right after the hero) — sizing below is
   deliberately smaller than before: shorter tiles, tighter padding, and a
   reduced section padding so it reads as a supporting reinforcement rather
   than a second hero-weight section.
   ========================================================================== */
.b2b-trust-home {
    overflow: hidden;
    padding: var(--space-8) 0 var(--space-6);
}
.b2b-trust-marquee-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.b2b-trust-marquee-title {
    color: var(--color-surface-dark);
    font-size: clamp(19px, 2.2vw, 24px);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 var(--space-1);
}
.b2b-trust-marquee-copy {
    color: var(--color-text-subtle);
    font-size: 14px;
    line-height: 1.5;
    max-width: 640px;
    margin: 0;
}
.b2b-trust-marquee-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-surface-dark);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
    text-decoration: none;
}
.b2b-trust-marquee-link:hover {
    background: var(--tf-primary-color);
    color: #fff;
    transform: translateY(-1px);
}
.b2b-trust-marquee {
    position: relative;
    width: 100%;
    padding: 2px 0 var(--space-2);
}
.b2b-trust-marquee::before,
.b2b-trust-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: min(10vw, 100px);
    pointer-events: none;
}
.b2b-trust-marquee::before {
    left: 0;
    background: linear-gradient(90deg, var(--color-surface-alt) 0%, rgba(248, 249, 250, 0) 100%);
}
.b2b-trust-marquee::after {
    right: 0;
    background: linear-gradient(270deg, var(--color-surface-alt) 0%, rgba(248, 249, 250, 0) 100%);
}
.b2b-trust-marquee-track {
    display: flex;
    width: max-content;
    animation: b2b-trust-marquee-scroll 42s linear infinite;
}
.b2b-trust-marquee:hover .b2b-trust-marquee-track {
    animation-play-state: paused;
}
.b2b-trust-marquee-group {
    display: flex;
    align-items: stretch;
    gap: var(--space-3);
    padding-right: var(--space-3);
}
.b2b-trust-marquee-tile {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    min-height: 140px;
    padding: var(--space-4);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.9)),
        radial-gradient(circle at top right, rgba(209, 18, 42, 0.08), transparent 34%);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
}
.b2b-trust-marquee-kicker {
    color: var(--tf-primary-color);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: var(--space-2);
}
.b2b-trust-marquee-tile h3 {
    color: var(--color-surface-dark);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 var(--space-2);
}
.b2b-trust-marquee-tile p {
    color: #475569;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.b2b-trust-marquee-meta {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: auto;
    padding-top: var(--space-3);
    color: var(--color-text-subtle);
    font-size: 11px;
    font-weight: 700;
}
.b2b-trust-marquee-meta::before {
    content: "";
    width: 20px;
    height: 1px;
    margin-right: var(--space-2);
    background: rgba(209, 18, 42, 0.5);
}
@keyframes b2b-trust-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .b2b-trust-marquee-track {
        animation: none;
        transform: none;
    }
    .b2b-trust-marquee {
        overflow-x: auto;
        scrollbar-width: thin;
    }
}
@media (max-width: 767px) {
    .b2b-trust-home {
        padding: var(--space-6) 0 var(--space-4);
    }
    .b2b-trust-marquee-header {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-2);
    }
    .b2b-trust-marquee-link {
        width: 100%;
    }
    .b2b-trust-marquee-tile {
        flex-basis: 230px;
        min-height: 150px;
        padding: var(--space-3);
    }
}

/* ==========================================================================
   Category Listing Page
   Replaces the sparse left sidebar with a compact category context rail.
   ========================================================================== */
.category-listing-header {
    margin: 18px 0 var(--space-6);
    padding: var(--space-4);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.94)),
        radial-gradient(circle at top right, rgba(209, 18, 42, 0.07), transparent 34%);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}
.category-listing-header__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}
.category-listing-header__title {
    min-width: 0;
}
.category-listing-header__title h1 {
    color: var(--color-surface-dark);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.15;
    margin: 6px 0 6px;
}
.category-listing-header__title p {
    color: var(--color-text-subtle);
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
}
.category-listing-header__title p span {
    color: var(--color-surface-dark);
    font-weight: 800;
}
.category-listing-header__breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    text-align: left;
}
.category-listing-header__breadcrumb .text,
.category-listing-header__breadcrumb .icon {
    color: var(--color-text-subtle);
    font-size: 12px;
    line-height: 1.3;
}
.category-listing-header__controls {
    flex: 0 0 auto;
    gap: 10px;
    margin: 0;
    padding: 0;
}
.category-listing-header__controls .tf-btn-filter,
.category-listing-header__controls .tf-dropdown-sort .btn-select {
    min-height: 42px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: #fff;
}
.category-context-rail {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-top: 14px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: rgba(248, 250, 252, 0.9);
}
.category-context-rail__links {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
}
.category-context-rail__chip {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex: 0 0 auto;
    max-width: 260px;
    min-height: 42px;
    padding: 9px var(--space-3);
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}
.category-context-rail__chip span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.category-context-rail__chip span:last-child {
    color: var(--color-text-subtle);
    font-size: 12px;
    font-weight: 800;
}
.category-context-rail__chip:hover,
.category-context-rail__chip.is-active {
    border-color: rgba(209, 18, 42, 0.3);
    background: rgba(209, 18, 42, 0.06);
    color: var(--color-surface-dark);
}
.category-listing-shell {
    width: 100%;
}
.category-listing-shell__content {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}
@media (max-width: 767px) {
    .category-listing-header {
        margin: 14px 0 18px;
        padding: var(--space-4);
    }
    .category-listing-header__top {
        flex-direction: column;
        gap: 14px;
    }
    .category-listing-header__controls {
        width: 100%;
        justify-content: space-between;
    }
    .category-listing-header__controls .tf-control-filter,
    .category-listing-header__controls .tf-control-sorting {
        flex: 1 1 0;
    }
    .category-listing-header__controls .tf-btn-filter,
    .category-listing-header__controls .tf-dropdown-sort,
    .category-listing-header__controls .tf-dropdown-sort .btn-select {
        width: 100% !important;
    }
    .category-context-rail {
        margin-top: var(--space-3);
        padding: 10px;
    }
    .category-context-rail__links {
        width: 100%;
        margin-right: -10px;
        padding-right: 10px;
    }
    .category-context-rail__chip {
        max-width: 220px;
    }
}

/* ==========================================================================
   Tenant Category Navigation Strip
   Keeps crowded top-level category menus compact.
   ========================================================================== */
.tenant-category-nav-strip {
    position: relative;
    z-index: 999;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--tenant-menu-bg);
}
.tenant-category-nav-strip .container-full {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}
.tenant-category-nav-strip .header-categories {
    display: flex;
    align-items: center;
    gap: 2px;
    width: 100%;
    max-width: 1420px;
    min-width: 0;
    /* DO NOT set overflow-x: auto/scroll/hidden here.
       Per CSS spec, any non-visible overflow-x forces overflow-y
       to also clip, which hides dropdown submenus (.nsmp). */
    flex-wrap: nowrap;
}
.tenant-category-nav-strip .header-categories > .menu-item {
    flex: 0 0 auto;
}
.tenant-category-nav-strip .header-categories > .menu-item:first-child {
    z-index: 6;
    margin-right: 8px !important;
    background: var(--tenant-menu-bg);
}
.tenant-category-nav-strip .header-categories > .menu-item.indirim-link {
    z-index: 6;
    margin-left: 8px !important;
    background: transparent;
}
.tenant-category-nav-strip .header-categories .item-link {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    max-width: 210px;
    padding: 10px 11px;
    color: #0f172a !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tenant-category-nav-strip .header-categories .item-link:hover {
    color: var(--tf-primary-color) !important;
}
.tenant-category-nav-strip .header-categories > .menu-item:first-child > .item-link {
    max-width: none;
    color: #fff !important;
}
/* "İndirim" bağlantısı `--tf-primary-color` (#e63946) ile yazılıyordu; menü
   şeridinin zemini ise `--tenant-menu-bg` (bu kiracıda #ff0000). Kırmızı
   üstüne kırmızı: kontrast 1.15:1, yani bağlantı görünmüyordu. Komşularıyla
   aynı rengi alır (hepsi menü yazı rengi), promosyon bağlantısı olduğu da
   çerçeveli hapla belli olur. */
.tenant-category-nav-strip .header-categories > .menu-item.indirim-link > .item-link {
    min-height: 30px;
    padding: 5px 14px;
    border: 1px solid;
    border-color: color-mix(in srgb, var(--tenant-menu-text, #fff) 55%, transparent);
    border-radius: 999px;
    color: var(--tenant-menu-text, #fff) !important;
}
.tenant-category-nav-strip .header-categories > .menu-item.indirim-link > .item-link:hover,
.tenant-category-nav-strip .header-categories > .menu-item.indirim-link > .item-link:focus-visible {
    background: var(--tenant-menu-text, #fff);
    border-color: var(--tenant-menu-text, #fff);
    color: var(--tenant-menu-bg, #d1122a) !important;
}
.tenant-category-nav-strip .nsmp {
    z-index: 1000;
}

/* ==========================================================================
   Layout Overrides & Structural Grids
   !important kept ONLY where overriding vendor/framework CSS.
   ========================================================================== */

/* Vendor overrides — specificity can't beat inline/JS-injected vendor styles */
html body { background-color: var(--color-surface-alt) !important; }
html .tf-top-bar { background-color: var(--tf-primary-color) !important; border-bottom: none !important; }
html .tf-top-bar * { color: #ffffff !important; }
html #header { background-color: var(--tenant-menu-bg) !important; border-bottom: 1px solid #e9ecef !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); }
html .footer.background-black { background-color: var(--tenant-footer-bg) !important; }
html #header .main-menu .menu-link { color: #212529 !important; font-weight: 500; }
html #header .main-menu .menu-link:hover { color: var(--tf-primary-color) !important; }
html #header .nav-icon .nav-icon-item { color: #212529 !important; }
html #header .nav-icon .nav-icon-item:hover { color: var(--tf-primary-color) !important; }
/* Demo logo is a full-color toolmark; do not apply the legacy monochrome filter. */
html #header .logo-header img.demo-tenant-logo {
    filter: none !important;
    width: 208px !important;
    height: 54px !important;
    object-fit: contain;
    object-position: center;
}

/* UstaDepo demo footer: an intentional B2B close instead of the inherited
   crowded marketplace footer. */
.demo-footer { background: #0a172b; color: #d8e1ec; margin-top: 72px; }
.demo-footer__top { background: #102845; border-bottom: 1px solid rgba(255,255,255,.1); }
/* Şerit ÜÇ değil DÖRT öğe taşıyor ("Müşteri Memnuniyeti" eklendi), kolon sayısı
   ona göre. 1200 pikselin altında dört kutu yan yana sıkışıyor — bu genişlikte
   alt başlıklar ("Proje ve toplu alım senaryoları") sarmaya başladığı için iki
   kolona düşülür, mobilde tek kolon (aşağıdaki 767px kuralı). */
.demo-footer__promise { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 22px 0; }
@media (max-width: 1199px) { .demo-footer__promise { grid-template-columns: repeat(2, 1fr); } }
.demo-footer__promise > div { display: grid; grid-template-columns: 34px 1fr; column-gap: 11px; align-items: center; }
.demo-footer__promise-icon { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #f97316; color: #fff; font-weight: 900; }
.demo-footer__promise strong { color: #fff; font-size: 14px; }.demo-footer__promise small { color: #a8bbd2; font-size: 12px; }
.demo-footer__main { padding: 56px 0 44px; }.demo-footer__logo { display: inline-block; margin-bottom: 18px; }.demo-footer__logo img { width: 208px; height: auto; }
.demo-footer__intro { max-width: 34ch; margin: 0 0 22px; color: #a8bbd2; line-height: 1.65; }.demo-footer__contact-cta { display: inline-flex; gap: 10px; align-items: center; color: #fff; font-weight: 750; }.demo-footer__contact-cta span { color: #fb923c; font-size: 19px; }
/* `line-height` BURADA DA yazılı: `styles.css` içindeki `h2` kuralı oranlıya
   çevrildi ama başlığın kutusu bu bileşenin ölçüsüne bağlı olmalı, uzaktaki bir
   kuralın mirasına değil. `margin-top: 5px` kaldırıldı — o nudge, başlığın 81,6
   pikselik kutusunda yazının aşağıda kalmasını telafi etmek içindi; kutu
   düzelince başlıklar sol sütundaki logonun üstüyle hizalanıyor. */
.demo-footer__heading { margin: 0 0 14px; color: #fff; font-size: 14px; font-weight: 800; line-height: 1.3; }.demo-footer__links { padding: 0; margin: 0; list-style: none; }.demo-footer__links li { margin-bottom: 10px; }.demo-footer__links a, .demo-footer__address, .demo-footer__address a { color: #b5c5d8; font-size: 13px; line-height: 1.55; }.demo-footer__links a:hover, .demo-footer__links a:focus-visible, .demo-footer__address a:hover { color: #fb923c; }.demo-footer__address { font-style: normal; }
.demo-footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 18px 0; color: #7890aa; font-size: 12px; }.demo-footer__legal { display: flex; flex-wrap: wrap; gap: 18px; }.demo-footer__legal a { color: #a8bbd2; }.demo-footer__legal a:hover { color: #fff; }
@media (max-width: 767px) { .demo-footer { margin-top: 48px; }.demo-footer__promise { grid-template-columns: 1fr; gap: 16px; padding: 20px 0; }.demo-footer__main { padding: 38px 0 26px; }.demo-footer__legal { gap: 12px; } }

/* Footer: dense category navigation with a deliberate trust/compliance rail. */
.footer .footer-body {
    padding: 56px 0 42px;
}
.footer .footer-body > .container > .row {
    align-items: flex-start;
    row-gap: 36px;
}
.footer .footer-contact,
.footer .footer-col-block,
.footer .footer-aside {
    margin-top: 0 !important;
}
.footer .footer-contact .footer-logo {
    margin-bottom: 24px;
}
.footer .footer-contact .footer-logo img {
    max-width: 245px;
    max-height: 54px;
    object-fit: contain;
}
.footer .footer-contact p {
    max-width: 220px;
    color: rgba(255,255,255,.72);
    line-height: 1.4;
}
.footer .footer-contact p strong {
    color: rgba(255,255,255,.92);
}
.footer .footer-contact .tf-btn {
    min-height: 44px;
    margin-top: 8px;
}
.footer .footer-heading h6,
.footer .footer-aside h6 {
    margin-bottom: 18px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}
.footer .footer-menu-list {
    margin: 0;
}
.footer .footer-products .footer-menu-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 18px;
}
.footer .footer-products .footer-menu-list li {
    min-width: 0;
}
.footer .footer-menu_item {
    color: rgba(255,255,255,.76);
}
.footer .footer-menu-list .footer-menu_item {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    line-height: 1.35;
}
.footer .footer-menu-list .footer-menu_item:hover,
.footer .footer-menu-list .footer-menu_item:focus-visible,
.footer .footer-credit:hover,
.footer .footer-credit:focus-visible {
    color: #fff;
}
.footer .footer-aside-card {
    padding: 20px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background: rgba(255,255,255,.045);
}
.footer .footer-aside-card p {
    margin: 0 0 18px;
    color: rgba(255,255,255,.68);
    font-size: 13px;
    line-height: 1.55;
}
.footer .footer-etbis {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.12);
}
.footer .footer-etbis-qr {
    display: grid;
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    place-content: center;
    border: 4px solid #fff;
    border-radius: 4px;
    background: repeating-linear-gradient(45deg, #111 0 3px, #fff 3px 6px);
    color: #111;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.05;
    text-align: center;
}
.footer .footer-etbis-qr span {
    font-size: 15px;
}
.footer .footer-etbis strong,
.footer .footer-etbis span {
    display: block;
}
.footer .footer-etbis strong {
    margin-bottom: 4px;
    color: #fff;
    font-size: 13px;
}
.footer .footer-etbis span {
    color: rgba(255,255,255,.62);
    font-size: 11px;
    line-height: 1.35;
}
.footer .footer-bottom-wrap {
    row-gap: 12px;
}
.footer .footer-copyright {
    max-width: 52ch;
}
.footer .footer-bottom-bar {
    border-top: 1px solid rgba(255,255,255,.1);
    background: rgba(0,0,0,.22);
}
.footer .footer-bottom-bar__inner {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: rgba(255,255,255,.56);
    font-size: 12px;
}
.footer .footer-bottom-bar__inner a {
    color: rgba(255,255,255,.86);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.footer .footer-bottom-bar__inner a:hover,
.footer .footer-bottom-bar__inner a:focus-visible {
    color: #fff;
}
@media (max-width: 991px) {
    .footer .footer-body { padding: 42px 0 30px; }
    .footer .footer-products .footer-menu-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 575px) {
    .footer .footer-body { padding: 36px 0 24px; }
    .footer .footer-products .footer-menu-list { grid-template-columns: 1fr; }
    .footer .footer-menu-list .footer-menu_item { min-height: 40px; }
    .footer .footer-bottom-wrap { align-items: flex-start !important; }
    .footer .footer-bottom-bar__inner {
        min-height: 52px;
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
    }
}

/* Mobile-first navigation: the fixed smart menu owns repeated actions. */
@media (max-width: 1199px) {
    .site-header .site-header__row > .tf-lg-hidden,
    .site-header .nav-cart--basket,
    .site-header .nav-phone,
    .tenant-category-nav-strip {
        display: none !important;
    }
    .site-header .site-header__row > .col-6 {
        flex: 0 0 auto;
        width: auto;
        margin-right: auto;
    }
    .site-header .site-header__actions-col {
        width: auto;
    }
}
.mobile-menu-search {
    position: relative;
    margin: 0 0 20px;
}
.mobile-menu-search input {
    width: 100%;
    min-height: 46px;
    padding: 10px 92px 10px 14px;
    border: 1px solid var(--color-border-ui);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    color: var(--color-text-primary);
}
.mobile-menu-search input:focus {
    border-color: var(--tf-primary-color);
    box-shadow: 0 0 0 3px rgba(209,18,42,.12);
    outline: 0;
}
.mobile-menu-search button {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--tf-primary-color);
    color: #fff;
}
.mobile-menu-search .mobile-menu-speech {
    right: 46px;
    background: var(--color-surface-alt);
    color: var(--color-text-secondary);
}
.mobile-menu-search .mobile-menu-speech.is-listening {
    color: var(--tf-primary-color);
}
.mobile-menu-search .mobile-menu-speech svg {
    width: 20px;
    height: 20px;
}
.mobile-search-overlay {
    display: none;
}
@media (max-width: 1199px) {
    .mobile-search-overlay.is-open {
        position: fixed;
        z-index: 3000;
        inset: 0;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 18vh 16px 24px;
    }
    .mobile-search-overlay__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(15,23,42,.72);
    }
    .mobile-search-dialog {
        position: relative;
        z-index: 1;
        width: min(520px, 100%);
        padding: 22px;
        border: 1px solid rgba(255,255,255,.2);
        border-radius: var(--radius-lg);
        background: var(--color-surface);
        box-shadow: 0 24px 70px rgba(0,0,0,.28);
    }
    .mobile-search-dialog__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 16px;
    }
    .mobile-search-dialog__head h2 {
        margin: 0;
        color: var(--color-text-primary);
        font-size: 20px;
    }
    .mobile-search-dialog__close {
        width: 40px;
        height: 40px;
        border: 1px solid var(--color-border-ui);
        border-radius: 50%;
        background: transparent;
        color: var(--color-text-primary);
        font-size: 25px;
        line-height: 1;
    }
    .mobile-search-form {
        position: relative;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .mobile-search-form input {
        width: 100%;
        min-height: 50px;
        padding: 10px 92px 10px 14px;
        border: 1px solid var(--color-border-ui);
        border-radius: var(--radius-md);
        font-size: 16px;
    }
    .mobile-search-form input:focus {
        border-color: var(--tf-primary-color);
        box-shadow: 0 0 0 3px rgba(209,18,42,.12);
        outline: 0;
    }
    .mobile-search-speech,
    .mobile-search-submit {
        position: absolute;
        top: 5px;
        display: inline-flex;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: var(--radius-sm);
    }
    .mobile-search-speech { right: 48px; background: var(--color-surface-alt); color: var(--color-text-secondary); }
    .mobile-search-speech.is-listening { color: var(--tf-primary-color); background: rgba(209,18,42,.12); }
    .mobile-search-speech svg { width: 21px; height: 21px; }
    .mobile-search-submit { right: 5px; background: var(--tf-primary-color); color: #fff; }
    .mobile-search-hint { margin: 10px 2px 0; color: var(--color-text-muted); font-size: 12px; }
    body.mobile-search-is-open { overflow: hidden; }
}

/* Pandawa Mega Menu Structural Grid */
.nsmp-content {
    padding: var(--space-5);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-lg);
    transition: var(--transition-smooth);
    transform-origin: top;
}
.nsmp-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    min-width: 500px;
}
.nsmp-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    min-width: 750px;
}
.nsmp-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-3);
    min-width: 80vw;
    max-width: 1200px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 15px;
}
.nsmp-compact-item {
    display: block;
    margin-bottom: var(--space-2);
}
.nsmp-compact-title {
    font-size: 13.5px;
    font-weight: 700;
    margin-bottom: var(--space-1);
    display: block;
    color: var(--tf-primary-color);
    border-bottom: 1px solid #eee;
    padding-bottom: 3px;
}
.nsmp-compact-title:hover {
    color: #000;
}
.nsmp-compact-sub {
    font-size: 13px;
    color: #666;
    display: block;
    padding: 2px 0;
    transition: color 0.1s;
}
.nsmp-compact-sub:hover {
    color: var(--tf-primary-color);
    padding-left: 3px;
}
.nsmp-title {
    padding: 6px var(--space-3);
    border-radius: 6px;
    transition: background 0.2s;
}
.nsmp-item:hover > .nsmp-title {
    background-color: var(--color-surface-alt);
    color: var(--tf-primary-color);
}

/* Typography & Spacing */
.tf-page-title {
    padding: 25px 0 !important;
    background-color: #fff !important;
    border-bottom: 1px solid #eee;
    margin-bottom: 30px;
}
.tf-page-title .heading h1 {
    font-size: 26px !important;
    line-height: 1.2 !important;
    margin: 0;
}
.tf-page-title .tf-breadcrumb-list .text {
    font-size: 13px !important;
    color: #6c757d !important;
}
.tf-page-title .tf-breadcrumb-list .icon {
    font-size: 13px !important;
    color: #6c757d !important;
}

/* ==========================================================================
   Tenant Page Chrome & Form Polish
   Only affects Blade pages that opt in with tenant-page-title / tenant-form-* classes.
   ========================================================================== */
.tenant-page-title__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}
.tenant-page-title__heading {
    text-align: left;
    min-width: 0;
}
.tenant-page-title__breadcrumb {
    flex-shrink: 0;
}
.tenant-page-title__breadcrumb .tf-breadcrumb-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    text-align: right;
}
.tenant-page-title {
    margin-bottom: 16px !important;
    padding: 18px 0 !important;
    background: var(--color-surface-alt) !important;
    border-bottom: 1px solid var(--color-border-ui);
}
.tenant-page-title__heading h1 {
    color: var(--color-text-primary);
    font-size: clamp(22px, 2.2vw, 30px) !important;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.tenant-page-title__breadcrumb .tf-breadcrumb-list {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}
.tenant-page-title__breadcrumb .tf-breadcrumb-list::-webkit-scrollbar { display: none; }
.tenant-page-title__breadcrumb .text {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    max-width: 240px;
    padding: 5px 8px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    color: var(--color-text-secondary) !important;
    font-size: 13px !important;
    line-height: 1.25;
    text-overflow: ellipsis;
}
.tenant-page-title__breadcrumb a.text:hover,
.tenant-page-title__breadcrumb a.text:focus-visible {
    color: var(--tf-primary-color) !important;
    background: var(--color-surface);
    border-color: var(--color-border-ui);
}
.tenant-page-title__breadcrumb span.text[aria-current="page"] {
    color: var(--color-text-primary) !important;
    font-weight: 600;
}
.tenant-page-title__breadcrumb .icon {
    flex: 0 0 auto;
    color: var(--color-text-muted) !important;
    font-size: 9px !important;
}
.tenant-form-card {
    background: #fff;
    border: 1px solid var(--color-border-ui);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}
.tenant-form-intro {
    font-size: 14px;
    line-height: 1.55;
}
.tenant-form-link {
    color: #6c757d;
    font-size: 14px;
    font-weight: 500;
    text-decoration: underline;
}
.tenant-form-error,
.tenant-form-card .invalid-feedback {
    color: #d1122a;
    font-size: 13px;
    line-height: 1.4;
    margin-top: 6px;
}
.tenant-form-alert {
    padding: 10px var(--space-3);
    font-size: 13px;
    line-height: 1.45;
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   Product Detail Page Premium Styling
   ========================================================================== */
.tf-main-product {
    padding: var(--space-6) 0;
    background: linear-gradient(180deg, var(--color-surface-alt) 0%, #ffffff 100%);
}

/* Product detail breadcrumb: keep the hierarchy useful without creating a
   second oversized page-title band or a dead gap before the product card. */
.product-detail-breadcrumb {
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-ui);
}
.product-detail-breadcrumb .tf-breadcrumb-wrap {
    min-height: 48px;
    padding: 6px 0;
}
.product-detail-breadcrumb .tf-breadcrumb-list {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}
.product-detail-breadcrumb .tf-breadcrumb-list::-webkit-scrollbar { display: none; }
.product-detail-breadcrumb .tf-breadcrumb-list .text {
    display: inline-flex;
    align-items: center;
    max-width: 260px;
    min-height: 32px;
    padding: 5px 10px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 1.25;
    text-overflow: ellipsis;
}
.product-detail-breadcrumb .tf-breadcrumb-list a.text:hover,
.product-detail-breadcrumb .tf-breadcrumb-list a.text:focus-visible {
    color: var(--tf-primary-color);
    background: var(--color-surface);
    border-color: var(--color-border-ui);
}
.product-detail-breadcrumb .tf-breadcrumb-list span.text[aria-current="page"] {
    max-width: min(520px, 42vw);
    color: var(--color-text-primary);
    background: var(--color-surface);
    border-color: var(--color-border-ui);
    font-weight: 600;
}
.product-detail-breadcrumb .tf-breadcrumb-list .icon {
    flex: 0 0 auto;
    margin: 0 2px;
    color: var(--color-text-muted);
    font-size: 9px;
}
.product-detail-breadcrumb + .site-mv-h {
    margin-top: 0;
}
.product-detail-breadcrumb + .site-mv-h .tf-main-product {
    padding-top: var(--space-5);
}
@media (max-width: 767px) {
    .product-detail-breadcrumb .tf-breadcrumb-wrap { min-height: 44px; }
    .product-detail-breadcrumb .tf-breadcrumb-list .text { max-width: 180px; font-size: 12px; }
    .product-detail-breadcrumb .tf-breadcrumb-list span.text[aria-current="page"] { max-width: 260px; }
    .product-detail-breadcrumb + .site-mv-h .tf-main-product { padding-top: var(--space-4); }
}

.tf-product-info-wrap {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-6) var(--space-8);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--color-border-light);
}

.tf-product-info-title .product-detail-title {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
}

@media (max-width: 767px) {
    .tf-product-info-title .product-detail-title { font-size: 1.625rem; }
}

.tf-product-media-wrap {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border-light);
}

.tf-product-media-thumbs .swiper-slide .item {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid var(--color-border-ui);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}
.tf-product-media-thumbs .swiper-slide .item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.tf-product-info-buy-button {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-ui);
}

/* Product detail price block — replaces the previous inline-styled markup
   (hardcoded hex colors/px sizes scattered across the blade file) with the
   same token set used by product-card pricing, so listing and detail pages
   read as one system.

   İki satırlı kurgu (bkz. components/product-price-block.blade.php):
     satır 1  eski fiyat (üstü çizili) + indirim rozeti
     satır 2  güncel fiyat (büyük) + KDV notu
   Önceden hepsi tek bir `flex-wrap` sırasındaydı; büyük fiyat, üstü çizili
   fiyat ve rozet aynı taban çizgisinde yarışıyor, KDV notu ise
   `flex-basis: 100%` ile üçüncü bir satıra düşüyordu. */
.tf-product-price-block {
    margin: var(--space-4) 0;
}
.tf-product-price-block__was {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}
.tf-product-price-block__now {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}
.tf-product-price-block__current {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--color-text-primary);
}
.tf-product-price-block__current .price-fraction {
    font-size: 0.6em;
}
.tf-product-price-block--discounted .tf-product-price-block__current {
    color: var(--tf-primary-color, #db1215);
}
.tf-product-price-block__old {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: line-through;
}
.tf-product-price-block__currency {
    margin-left: 4px;
    font-size: 18px;
    font-weight: 600;
}
.tf-product-price-block__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--tf-primary-color, #db1215);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2px;
    border-radius: var(--radius-full);
}
.tf-product-price-block__vat {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
}
@media (max-width: 767px) {
    .tf-product-price-block__current { font-size: 24px; }
    .tf-product-price-block__old,
    .tf-product-price-block__currency { font-size: 15px; }
}

/* Etiket satırındaki "Etiketler" başlığı. */
.tf-product-meta-label {
    color: var(--color-text-muted);
}

/* Product badge images (certifications etc.) */
.tf-product-badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.tf-product-badges-row .badge-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-ui);
    border-radius: var(--radius-sm);
}
.tf-product-badges-row .badge-image {
    height: 28px;
    width: auto;
    object-fit: contain;
}

/* Secondary product actions (favorite, compare, custom list…): was a row of
   underlined text links separated by literal "|" characters. Now a wrapping
   row of icon chips, matching the circular icon buttons on product cards. */
.tf-product-action-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-border-ui);
    border-bottom: 1px solid var(--color-border-ui);
}
.tf-product-action-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: var(--color-surface-alt);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.tf-product-action-chip i {
    font-size: 13px;
    color: var(--color-text-muted);
}
.tf-product-action-chip:hover,
.tf-product-action-chip:focus-visible {
    background: var(--color-surface);
    border-color: var(--color-border-ui);
    color: var(--tf-primary-color);
}
.tf-product-action-chip:hover i,
.tf-product-action-chip:focus-visible i {
    color: var(--tf-primary-color);
}
.tf-product-action-chip.remove-from-favorites i.icon-heart {
    color: var(--tf-primary-color);
}
.tf-product-action-chip--whatsapp i {
    color: #128C7E;
}
.tf-product-action-chip--whatsapp:hover {
    background: #e9f8f6;
    border-color: #128C7E;
    color: #128C7E;
}
.tf-product-action-chip--whatsapp:hover i {
    color: #128C7E;
}
@media (max-width: 767px) {
    .tf-product-action-chip { font-size: 12px; padding: 6px 10px; }
}

/* Installment lookup card: was an ad hoc inline-styled box with hardcoded
   #eaeaea/#fafafa. */
.tf-installment-card {
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-ui);
    border-radius: var(--radius-md);
}
.tf-installment-card__title {
    margin-bottom: var(--space-2);
    font-weight: 700;
    color: var(--color-text-primary);
}
.tf-installment-card__desc {
    margin-bottom: var(--space-2);
    font-size: 13px;
    color: var(--color-text-muted);
}
/* Inside the info-panel tab it already sits on a padded card surface — a
   second nested box/border here would read as "card inside a card". */
.tf-installment-card--tab {
    padding: 0;
    background: transparent;
    border: 0;
}
.tf-installment-card--tab .tf-installment-card__title {
    font-size: 18px;
}

/* Variant info table: styles.css tries to fake a rounded outer border via
   `border-radius` + a box-shadow ring on a `border-collapse: collapse`
   table — browsers ignore border-radius on collapsed-border tables, so the
   shadow "frame" was rounded while the actual cell borders inside stayed
   square, i.e. a rounded outline around square-cornered rows. Moving the
   border/radius/clipping onto a wrapper fixes it for real. */
.tf-pr-attrs-wrap {
    overflow: hidden;
    border: 1px solid var(--color-border-ui);
    border-radius: var(--radius-md);
}
.tf-pr-attrs {
    border-radius: 0;
    border-style: hidden;
    box-shadow: none;
    color: var(--color-text-secondary);
}
.tf-pr-attrs tr {
    border: 0;
    border-bottom: 1px solid var(--color-border-ui);
}
.tf-pr-attrs tr:last-child {
    border-bottom: 0;
}
.tf-pr-attrs tr th {
    width: 220px;
    padding: 14px 16px;
    background: var(--color-surface-alt);
    border-right: 1px solid var(--color-border-ui);
    color: var(--color-text-primary);
    font-weight: 700;
}
.tf-pr-attrs tr td {
    padding: 14px 16px;
}
@media (max-width: 767px) {
    .tf-pr-attrs tr th { width: 140px; }
}

@media (max-width: 768px) {
    .tenant-page-title__inner {
        align-items: flex-start;
        flex-direction: column;
    }
    .tenant-page-title__breadcrumb,
    .tenant-page-title__breadcrumb .tf-breadcrumb-list {
        justify-content: flex-start;
        text-align: left;
    }
}

/* ==========================================================================
   Header Account Dropdown
   ========================================================================== */
.dropdown-account { position: relative; }
.site-header {
    position: relative;
    z-index: 1000;
    overflow: visible;
}
.dropdown-account { z-index: 1010; }
.dropdown-account .account-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: -10px;
    width: 240px;
    background: #fff;
    padding: var(--space-5);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--color-border-ui);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-smooth);
    z-index: 1011;
    margin-top: 0;
}
.dropdown-account:hover .account-dropdown,
.dropdown-account:focus-within .account-dropdown {
    opacity: 1;
    visibility: visible;
    top: 100%;
    margin-top: 6px;
}
.dropdown-account .account-dropdown-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
.dropdown-account .account-dropdown-inner > a.tf-btn,
.dropdown-account .account-dropdown-inner > form,
.dropdown-account .account-dropdown-inner > form button {
    display: flex;
    width: 100%;
    max-width: 100%;
}
.dropdown-account .account-dropdown-inner > a.tf-btn.mb-2,
.dropdown-account .account-dropdown-inner > form.mb-2 {
    margin-bottom: 0 !important;
}
.dropdown-account .tf-btn {
    font-size: 14px;
    padding: 10px;
}

/* ==========================================================================
   Search Box Dropdown Fix
   ========================================================================== */
.search-suggests-results:empty,
.search-suggests-results:has(.search-suggests-results-inner:empty) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    border: none !important;
}
.tf-form-search:hover .search-suggests-results:not(:has(.search-result-item)),
.tf-form-search:focus-within .search-suggests-results:not(:has(.search-result-item)) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.site-header .search-suggests-results:not(:has(.search-result-item)) {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
}

/* Fast account entry: keep authentication tasks above the fold. */
.auth-page {
    padding: 32px 0 48px !important;
    background: var(--color-surface-alt);
}
.auth-page .tenant-form-card {
    padding: 28px !important;
    border: 1px solid var(--color-border-ui);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}
.auth-page .flat-title {
    margin-bottom: 20px !important;
}
.auth-page .flat-title h3,
.auth-page .flat-title h4 {
    margin-bottom: 8px !important;
    font-size: 28px;
}
.auth-page .tf-field { margin-bottom: 12px !important; }
.auth-page .tf-btn { min-height: 46px; }
.auth-page--login .row { align-items: flex-start !important; }
.auth-page--login .tenant-form-card { max-width: 520px; margin: 0 auto; }
.auth-page--login .col-lg-1 { display: none !important; }
.auth-page--login .col-lg-5:last-child {
    align-self: stretch;
    display: flex;
    align-items: center;
}
.auth-page--login .col-lg-5:last-child > div {
    width: 100%;
    padding: 24px !important;
    border: 1px solid var(--color-border-ui);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .55);
}
.auth-page--login .col-lg-5:last-child h3 {
    margin-bottom: 10px !important;
    font-size: 24px;
}
.auth-page--login .col-lg-5:last-child .tenant-form-intro { margin-bottom: 18px !important; }
@media (max-width: 991px) {
    .auth-page { padding: 24px 0 36px !important; }
    .auth-page .tenant-form-card { padding: 22px !important; }
    .auth-page--login .col-lg-5:last-child { margin-top: 16px; }
}
@media (max-width: 575px) {
    .auth-page .tenant-form-card { padding: 18px !important; }
    .auth-page .flat-title h3,
    .auth-page .flat-title h4 { font-size: 24px; }
    .auth-page--register .row > [class*="col-"] { width: 100%; }
    .auth-page--login .col-lg-5:last-child > div { padding: 18px !important; }
}

/* ==========================================================================
   Slider LCP / CLS Guard
   ========================================================================== */
.tf-slideshow .wrap-slider img {
    max-height: min(560px, 72vh);
    width: 100%;
    object-fit: cover;
}

/* ==========================================================================
   Mobile Responsiveness & Usability
   ========================================================================== */
@media (max-width: 768px) {
    /* 44px minimum tap targets (WCAG) */
    .mb-menu-link, .sub-nav-link, button, a.tf-btn,
    .nav-icon-item, .menu-link {
        min-height: 44px !important;
        display: flex;
        align-items: center;
    }
    /* Prevent iOS zoom on input focus */
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="password"], input[type="number"],
    select, textarea, .tf-field-input {
        font-size: 16px !important; /* Required: iOS zooms if < 16px */
    }
    .wrap-account-order, .tf-table-res-df,
    .tf-page-cart-wrap, table {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        display: block;
    }
}

/* ==========================================================================
   Product Page — Button System & Accessibility
   ========================================================================== */

/* Primary CTA (Add to Cart) */
.tf-btn.btn-primary-action {
    background-color: var(--color-button-primary);
    border: 1px solid var(--color-button-primary);
    color: #ffffff;
    min-height: 52px;
    padding: 12px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(255, 107, 0, 0.4);
    transition: var(--transition-smooth);
    font-weight: 600;
}

.tf-btn.btn-primary-action:hover,
.tf-btn.btn-primary-action:focus {
    background-color: var(--color-button-primary-hover);
    border-color: var(--color-button-primary-hover);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 0, 0.5);
}

/* Secondary CTA (Bulk Quote) — visually subordinate */
.tf-btn.btn-secondary-action {
    background-color: var(--color-button-secondary);
    border: 2px solid var(--color-button-secondary-border);
    color: var(--color-button-secondary-text);
    min-height: 52px;
    padding: 12px 24px;
    border-radius: 8px;
    transition: var(--transition-smooth);
    font-weight: 500;
}

.tf-btn.btn-secondary-action:hover,
.tf-btn.btn-secondary-action:focus {
    background-color: #e8e8e8;
    border-color: #999999;
    color: #000000;
}

/* Trust Indicators Component */
.product-trust-indicators {
    background-color: var(--color-badge-bg);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px 14px;
    margin-top: 16px;
    width: 100%;
    text-align: center;
}

.product-trust-indicators .trust-shipping-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

.product-trust-indicators .trust-badge-item {
    color: #1e9a4e; /* darkened from #25d366 — improves contrast on #f5f5f5 to 4.8:1 */
    font-size: 13px;
}

.product-trust-indicators .trust-security-row {
    color: var(--color-text-muted-improved); /* #555555 — 7.0:1 on #f5f5f5 */
    font-size: 13px;
    line-height: 1.6;
}

/* Final category-menu typography pass. Keep the hit area generous, but make
   the text the visual anchor instead of a tall stack of padded rows. */
.tenant-category-nav-strip .header-categories > .menu-item:not(:first-child):not(.indirim-link) > .nsmp {
    width: 300px;
}
.tenant-category-nav-strip .nsmp-content {
    gap: 2px;
    padding: 10px;
}
.tenant-category-nav-strip .nsmp-item {
    padding: 3px 6px;
    background: transparent !important;
}
.tenant-category-nav-strip .nsmp-title {
    min-height: 0;
    padding: 8px 10px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    color: var(--color-text-primary);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    text-transform: none;
}
.tenant-category-nav-strip .nsmp-title .icon {
    flex: 0 0 auto;
    margin-top: 3px;
    font-size: 11px;
}
.tenant-category-nav-strip .nsmp-item:hover > .nsmp-title,
.tenant-category-nav-strip .nsmp-item:focus-within > .nsmp-title {
    background: rgba(209, 18, 42, 0.08);
    color: var(--tf-primary-color);
}
.tenant-category-nav-strip .nsmp-compact-item {
    margin-bottom: 4px;
    padding: 6px;
    border-radius: var(--radius-sm);
}
.tenant-category-nav-strip .nsmp-compact-title {
    margin-bottom: 5px;
    padding: 0 0 6px;
    font-size: 14px;
    line-height: 1.35;
}
.tenant-category-nav-strip .nsmp-compact-sub {
    padding: 3px 0;
    font-size: 13px;
    line-height: 1.35;
}
@media (max-width: 767px) {
    .tenant-category-nav-strip .header-categories > .menu-item:not(:first-child):not(.indirim-link) > .nsmp {
        width: min(300px, calc(100vw - 32px));
    }
    .tenant-category-nav-strip .nsmp-title { font-size: 13px; }
}

/* Adaptive mega menu: the same shell works for flat catalogues and deep trees. */
.tenant-category-nav-strip .menu-item > .nsmp {
    width: min(1120px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
}
.tenant-category-nav-strip .nsmp-content,
.tenant-category-nav-strip .nsmp-grid-2,
.tenant-category-nav-strip .nsmp-grid-3 {
    width: 100%;
    min-width: 0;
    max-width: none;
}
.tenant-category-nav-strip .nsmp-grid-2,
.tenant-category-nav-strip .nsmp-grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.tenant-category-nav-strip .nsmp-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    min-width: 0;
    width: 100%;
    max-width: none;
}
.tenant-category-nav-strip .nsm {
    width: min(280px, calc(100vw - 48px));
    max-height: min(360px, calc(100vh - 180px));
    overflow-y: auto;
}
.tenant-category-nav-strip .nsm-content {
    display: grid;
    gap: 2px;
    padding: 8px;
}
@media (max-width: 767px) {
    .tenant-category-nav-strip .menu-item > .nsmp {
        width: min(720px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
    }
    .tenant-category-nav-strip .nsmp-grid-2,
    .tenant-category-nav-strip .nsmp-grid-3,
    .tenant-category-nav-strip .nsmp-grid-compact {
        grid-template-columns: 1fr;
    }
    .tenant-category-nav-strip .nsm {
        left: 8px;
        width: calc(100% - 16px);
        max-width: none;
    }
}

/* Category listing chrome: use the same compact breadcrumb rhythm as product
   detail pages and keep controls visually quiet above the product grid. */
.category-listing-page {
    margin-top: 16px !important;
}
.category-listing-breadcrumb {
    min-height: 40px;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}
.category-listing-breadcrumb .tf-breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}
.category-listing-breadcrumb .tf-breadcrumb-list::-webkit-scrollbar { display: none; }
.category-listing-breadcrumb .text {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    max-width: 260px;
    padding: 5px 8px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 1.25;
    text-overflow: ellipsis;
}
.category-listing-breadcrumb a.text:hover,
.category-listing-breadcrumb a.text:focus-visible {
    color: var(--tf-primary-color);
    background: var(--color-surface);
    border-color: var(--color-border-ui);
}
.category-listing-breadcrumb span.text[aria-current="page"] {
    color: var(--color-text-primary);
    font-weight: 600;
}
.category-listing-breadcrumb .icon {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: 9px;
}
.category-listing-page .category-listing-header {
    margin: 0 0 8px;
    padding: var(--space-4);
}
.category-listing-page .category-listing-header__title h1 {
    margin-top: 0;
}
.category-listing-page .category-listing-header__controls .tf-dropdown-sort {
    min-width: 190px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
}
.category-listing-page .category-listing-header__controls .tf-dropdown-sort .btn-select {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid var(--color-border-ui);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.category-listing-page .category-listing-header__controls .tf-dropdown-sort:hover .btn-select,
.category-listing-page .category-listing-header__controls .tf-dropdown-sort:focus-within .btn-select {
    border-color: var(--tf-primary-color);
}
.category-listing-page .category-listing-header__controls .tf-dropdown-sort .dropdown-menu {
    top: calc(100% + 6px) !important;
    right: 0 !important;
    left: auto !important;
    width: 210px;
    min-width: 210px;
    max-width: 210px;
    margin: 0 !important;
    padding: 6px 0;
    border: 1px solid var(--color-border-ui);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}
.category-listing-page .category-listing-header__controls .tf-dropdown-sort .select-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 7px 12px;
    color: var(--color-text-primary);
    font-size: 14px;
    line-height: 1.3;
    text-align: center;
}
.category-listing-page .category-listing-header__controls .tf-dropdown-sort .select-item::before,
.category-listing-page .category-listing-header__controls .tf-dropdown-sort .select-item::after {
    display: none;
}
.category-listing-page .category-listing-header__controls .tf-dropdown-sort .select-item:hover,
.category-listing-page .category-listing-header__controls .tf-dropdown-sort .select-item:focus-visible {
    background: rgba(209, 18, 42, 0.08);
    color: var(--tf-primary-color);
}
.category-listing-page .category-listing-header__controls .tf-dropdown-sort .text-value-item {
    width: 100%;
    text-align: center;
}
.category-listing-page .category-context-rail {
    margin-top: 10px;
    padding: 8px;
}
.category-listing-page .category-context-rail__chip {
    min-height: 38px;
    padding: 7px 12px;
}
.category-listing-page .category-listing-shell {
    margin-top: 0;
}
.category-listing-page .wrapper-control-shop > .meta-filter-shop {
    display: none !important;
}
@media (max-width: 767px) {
    .category-listing-page { margin-top: 10px !important; }
    .category-listing-breadcrumb { min-height: 36px; margin-bottom: 6px; }
    .category-listing-breadcrumb .text { max-width: 190px; font-size: 12px; }
    .category-listing-page .category-listing-header { margin-bottom: 6px; }
    .category-listing-page .category-listing-header__controls .tf-dropdown-sort { min-width: 0; }
    .category-listing-page .category-listing-header__controls .tf-dropdown-sort .dropdown-menu {
        width: 100%;
        min-width: 180px;
        max-width: 210px;
    }
}

/* ==========================================================================
   Account Pages Modernization (Hesabım / Adresler / Siparişler / Favoriler /
   Kayıtlı ürün listeleri) — shared sidebar, content card, badges, empty state.
   ========================================================================== */
.badge-primary {
    background-color: var(--color-accent) !important;
    color: white !important;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
}
.badge-warning {
    background-color: var(--color-warning) !important;
    color: white !important;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.25);
}
.badge-muted {
    background-color: var(--color-badge-bg, #f5f5f5) !important;
    color: var(--color-text-secondary) !important;
}

/* Sidebar: profile card + icon nav */
.tenant-account-sidebar {
    background: var(--color-surface);
    border: 1px solid var(--color-border-ui);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-4);
    position: sticky;
    top: var(--space-4);
}
.tenant-account-sidebar__profile {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border-ui);
}
.tenant-account-sidebar__avatar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--tf-primary-color, #db1215);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
}
.tenant-account-sidebar__meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tenant-account-sidebar__meta strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tenant-account-sidebar__meta span {
    font-size: 12px;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tenant-account-sidebar .my-account-nav {
    position: static;
    gap: 6px;
}
.tenant-account-sidebar .my-account-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border-color: transparent;
    background: transparent;
    padding: 12px 14px;
    font-size: 14px;
    color: var(--color-text-secondary);
}
.tenant-account-sidebar .my-account-nav-item i {
    flex: 0 0 auto;
    font-size: 16px;
    color: var(--color-text-muted);
    transition: color 0.2s ease;
}
.tenant-account-sidebar .my-account-nav-item:hover,
.tenant-account-sidebar .my-account-nav-item.active {
    background-color: var(--color-surface-alt);
    color: var(--tf-primary-color);
}
.tenant-account-sidebar .my-account-nav-item:hover i,
.tenant-account-sidebar .my-account-nav-item.active i {
    color: var(--tf-primary-color);
}
.tenant-account-sidebar .my-account-nav-item--logout {
    color: var(--color-danger);
}
.tenant-account-sidebar .my-account-nav-item--logout i {
    color: var(--color-danger);
}
.tenant-account-sidebar .my-account-nav-item--logout:hover {
    background-color: var(--color-danger-bg);
    color: var(--color-danger);
}
.tenant-account-sidebar .my-account-nav-item--logout:hover i {
    color: var(--color-danger);
}
.canvas-sidebar-account .tenant-account-sidebar {
    box-shadow: none;
    border: none;
    position: static;
    padding: 0;
}

/* Content card shared by all account pages */
.tenant-account-content {
    background: var(--color-surface);
    border: 1px solid var(--color-border-ui);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-6);
}
@media (max-width: 767px) {
    .tenant-account-content { padding: var(--space-4); }
}
.tenant-account-content__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
}

/* Orders table */
.tenant-account-content .account-order table {
    min-width: 760px;
}
.tenant-account-content .account-order table thead tr {
    background-color: var(--color-surface-alt);
    border-color: var(--color-border-ui);
}
.tenant-account-content .account-order table th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
}
.tenant-account-content .account-order table tbody tr:hover {
    background-color: var(--color-surface-alt);
}
.tenant-account-content .account-order .badge {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-full);
}

/* Address cards */
.tenant-account-content .account-address-item {
    position: relative;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-ui);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-4) var(--space-4) 52px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.tenant-account-content .account-address-item:hover {
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}
.tenant-account-content .account-address-item::before {
    font-family: 'icomoon' !important;
    content: "\e947"; /* icon-place */
    position: absolute;
    left: var(--space-4);
    top: var(--space-4);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tf-primary-color);
    font-size: 15px;
}
.tenant-account-content .account-address-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.tenant-account-content .account-address-title h5 {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}
.tenant-account-content .account-address-title h6 {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-accent);
    background: var(--color-info-bg);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    margin: 0;
}

/* Saved product lists */
.tenant-account-content .table > :not(caption) > * > * {
    padding: 12px 16px;
    vertical-align: middle;
}
.tenant-account-content .table thead tr {
    background-color: var(--color-surface-alt);
}
.tenant-account-content .table thead th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    border-bottom-width: 1px;
}

/* Empty state, reused across orders / addresses / favorites / lists */
.tenant-empty-state {
    text-align: center;
    background: var(--color-surface-alt);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    padding: 60px 20px;
}
.tenant-empty-state__icon {
    margin-bottom: var(--space-4);
    color: var(--color-text-muted);
}
.tenant-empty-state__icon svg {
    width: 56px;
    height: 56px;
}
.tenant-empty-state h3 {
    font-weight: 700;
    margin-bottom: var(--space-2);
    color: var(--color-text-primary);
    font-size: 18px;
}
.tenant-empty-state p {
    color: var(--color-text-muted);
    max-width: 400px;
    margin: 0 auto var(--space-4);
}

@media (max-width: 991px) {
    .tenant-account-sidebar { position: static; margin-bottom: var(--space-4); }
}

/* ==========================================================================
   Homepage Category Blocks — admin-curated banner + product row, alternating
   left/right per block (see Front.components.homepage-category-blocks and
   getHomepageCategoryBlocks() in app/helpers.php).
   ========================================================================== */
.homepage-category-block {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 22px;
    border: 1px solid rgba(17, 24, 39, .08);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(248, 250, 252, .94) 0%, rgba(255, 255, 255, .98) 100%);
    box-shadow: 0 14px 36px rgba(15, 23, 42, .07);
    overflow: hidden;
}
.homepage-category-block--reverse {
    flex-direction: row-reverse;
}
.homepage-category-block__banner {
    position: relative;
    flex: 0 0 clamp(280px, 22vw, 340px);
    display: block;
    overflow: hidden;
    isolation: isolate;
}
.homepage-category-block__banner-img {
    width: 100%;
    height: 100%;
    min-height: 342px;
    object-fit: cover;
    filter: saturate(.94) contrast(1.06);
    transition: transform .45s ease, filter .45s ease;
}
.homepage-category-block__banner:hover .homepage-category-block__banner-img {
    transform: scale(1.04);
    filter: saturate(1.04) contrast(1.08);
}
.homepage-category-block__banner-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, .08) 0%, rgba(15, 23, 42, .22) 42%, rgba(15, 23, 42, .78) 100%),
        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, .20), transparent 32%);
}
.homepage-category-block__banner::after {
    content: "";
    position: absolute;
    inset: 14px;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 8px;
    pointer-events: none;
}
.homepage-category-block__banner-content {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 26px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}
.homepage-category-block__banner-title {
    color: #fff;
    font-size: clamp(24px, 2.2vw, 32px);
    font-weight: 800;
    line-height: 1.05;
    text-shadow: 0 10px 24px rgba(0, 0, 0, .34);
}
.homepage-category-block__banner-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .92);
    color: #111827;
    font-size: 13px;
    font-weight: 800;
    border-radius: 999px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .18);
    backdrop-filter: blur(8px);
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.homepage-category-block__banner:hover .homepage-category-block__banner-cta {
    background: var(--tf-primary-color, #db1215);
    color: #fff;
    transform: translateY(-1px);
}
.homepage-category-block__products {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    padding: 24px 62px;
    background: linear-gradient(90deg, rgba(241, 245, 249, .86) 0%, rgba(255, 255, 255, .98) 18%, rgba(255, 255, 255, .98) 82%, rgba(241, 245, 249, .86) 100%);
}
.homepage-category-block__track {
    position: relative;
    min-width: 0;
    display: flex;
    align-items: stretch;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 0 2px;
}
.homepage-category-block__track::-webkit-scrollbar { display: none; }
.homepage-category-block__track .card-product {
    flex: 0 0 clamp(208px, 18vw, 240px);
    height: auto;
    scroll-snap-align: start;
    border-color: rgba(17, 24, 39, .08) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06) !important;
}
.homepage-category-block__track .card-product:hover {
    box-shadow: 0 18px 36px rgba(15, 23, 42, .12) !important;
}
.homepage-category-block__nav {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(17, 24, 39, .10);
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    color: #334155;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .12);
    transform: translateY(-50%);
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.homepage-category-block__nav--prev {
    left: 16px;
}
.homepage-category-block__nav--next {
    right: 16px;
}
.homepage-category-block__nav:hover {
    background: var(--tf-primary-color, #db1215);
    border-color: var(--tf-primary-color, #db1215);
    color: #fff;
    transform: translateY(-50%) scale(1.04);
}

@media (max-width: 991px) {
    .homepage-category-block,
    .homepage-category-block--reverse {
        flex-direction: column;
    }
    .homepage-category-block__banner {
        flex-basis: auto;
    }
    .homepage-category-block__banner-img {
        min-height: 210px;
    }
    .homepage-category-block__nav {
        display: none;
    }
    .homepage-category-block__products {
        padding: 18px;
        background: #fff;
    }
    .homepage-category-block__track {
        gap: 14px;
    }
}
@media (max-width: 480px) {
    .homepage-category-block {
        border-radius: 8px;
    }
    .homepage-category-block__banner-content {
        left: 20px;
        right: 20px;
        bottom: 20px;
    }
    .homepage-category-block__banner-title {
        font-size: 24px;
    }
    .homepage-category-block__track .card-product {
        flex-basis: 178px;
    }
}

/* ==========================================================================
   Product Card Modernization
   Applies sitewide to every .card-product.grid instance (homepage sections,
   category/vitrin listings, search, related/upsell rails, category blocks).
   Fixes found along the way, kept as comments so they aren't re-introduced:
   1. styles.css has a stray `.card-product { padding: 20px }` rule with no
      grid scoping (~line 23074) that added an unwanted inset on top of
      .card-product-wrapper/.card-product-info's own padding on every grid
      card. Reset to 0 below, spacing now comes only from the inner elements.
   2. The "Sepete Ekle" bar only appears via .card-product:hover, which
      never fires reliably on touch — added an always-visible fallback for
      (hover: none) devices instead of a dead-end tap.
   ========================================================================== */
.card-product.grid:not(.list-layout) {
    padding: 0 !important;
    border-radius: var(--radius-lg) !important;
    border-color: var(--color-border-ui) !important;
    box-shadow: var(--shadow-sm) !important;
}
.card-product.grid:not(.list-layout):hover {
    box-shadow: var(--shadow-card-hover) !important;
}
.card-product .card-product-wrapper .product-img {
    border-radius: 0;
    border-width: 0 0 1px;
    border-color: var(--color-border-light);
}

/* Typography: the inherited 18px / 50px-min-height title and 20px /
   weight-560 price were sized for a wider legacy card; tightened for the
   denser grids used across category, vitrin and homepage listings. */
.card-product .card-product-info .title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    min-height: 0;
    color: var(--color-text-primary);
    transition: color 0.2s ease;
}
.card-product .card-product-info .title:hover {
    color: var(--tf-primary-color);
}
.card-product .card-product-info .price {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-text-primary);
}
.card-product .card-product-info .price .text_primary {
    color: var(--tf-primary-color) !important;
}
.card-product .card-product-info .price .text-sale {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    /* Üstü çizili olduğu görsel olarak da belli olsun; sadece soluk renk
       "eski fiyat" anlamını taşımıyordu. */
    text-decoration: line-through;
    text-decoration-color: rgba(107, 114, 128, .65);
    margin-right: 2px;
}

/* Para birimi FİYATA ait; ayrı bir öğe gibi durmasın.

   `TL` markup'ta `.price` kutusunun DIŞINDA duruyor ve soluk gri
   basılıyordu: indirimli fiyat kırmızı, hemen yanındaki birim gri kalınca
   ikisi bir bütün gibi okunmuyordu. Renk fiyattan devralınır, ağırlık
   düşük tutulur ki rakamlar önde kalsın. */
.card-product .card-product-info .price + .curreny-style,
.card-product .card-product-info .curreny-style {
    font-size: 12.5px;
    font-weight: 600;
    color: inherit;
    opacity: .72;
    margin-left: 1px;
}

/* İndirimli fiyat varsa birim de onun rengini alır. */
.card-product .card-product-info .price:has(.text_primary) + .curreny-style {
    color: var(--tf-primary-color);
    opacity: .8;
}

/* Fiyat satırı tek satırda ve dikey hizalı dursun. */
.card-product .card-product-info .tf-product-info-price-detail,
.card-product .card-product-info .d-flex.align-items-center {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 4px;
}

/* Action icons: circular soft-shadow buttons instead of squared 3px-radius
   chips, matching the rest of the premium chrome (account sidebar, empty
   states, badges). */
.card-product .list-product-btn .box-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: var(--radius-full) !important;
    box-shadow: var(--shadow-md);
    background-color: #fff;
}
.card-product .list-product-btn .box-icon:hover {
    background-color: var(--tf-primary-color) !important;
}

/* "Sepete Ekle": pill shape + a small icon back for visual balance
   (previously hidden entirely, leaving only text). */
.card-product .btn-quick-add-cart {
    border-radius: var(--radius-full) !important;
    gap: 6px;
}
.card-product .btn-quick-add-cart .icon {
    display: inline-flex !important;
    font-size: 14px;
}

@media (hover: none) {
    .card-product .list-product-btn {
        opacity: 1;
    }
    .card-product .wishlist,
    .card-product .compare,
    .card-product .quickview {
        opacity: 1 !important;
        pointer-events: auto;
        width: auto !important;
        min-width: 32px !important;
        flex-basis: auto !important;
        margin: 0 4px !important;
    }
}

@media (max-width: 767px) {
    .card-product .card-product-info .title { font-size: 13px; }
    .card-product .card-product-info .price { font-size: 15px; }
}

/* Product cards: calmer shell, stronger imagery, cleaner buying signals. */
.card-product.grid:not(.list-layout) {
    background: #fff !important;
    border: 1px solid rgba(17, 24, 39, .08) !important;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(17, 24, 39, .06) !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

.card-product.grid:not(.list-layout):hover {
    border-color: rgba(17, 24, 39, .16) !important;
    box-shadow: 0 16px 34px rgba(17, 24, 39, .12) !important;
    transform: translateY(-3px) !important;
}

.card-product.grid:not(.list-layout) .card-product-wrapper {
    aspect-ratio: 1 / .82;
    background: #f6f7f9;
}

.card-product .card-product-wrapper .product-img {
    border: 0;
    border-radius: 0;
    background: #f6f7f9;
}

.card-product .card-product-wrapper .product-img img {
    padding: 0;
    object-fit: cover;
    transform: scale(1.01);
    transition: transform .28s ease, filter .28s ease;
}

.card-product:hover .card-product-wrapper .product-img img {
    transform: scale(1.055);
    filter: saturate(1.04);
}

.card-product.grid:not(.list-layout) .card-product-info {
    gap: 7px;
    padding: 12px 14px 13px !important;
}

/* İki satırlık yükseklik `.grid` sınıfına bağlıydı; ürün detay ve anasayfa
   karuselleri kartı `.grid` OLMADAN kuruyor (bkz. product-card include'ları).
   Orada tek satırlık başlıklar 19px kısa kalıyor, aynı sıradaki kartların
   fiyat ve stok satırları birbirini tutmuyordu. Ölçüt artık düzen değil,
   kartın kendisi. */
.card-product:not(.list-layout) .card-product-info .title {
    min-height: 38px;
}
.card-product.grid:not(.list-layout) .card-product-info .title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    color: #111827;
}

.card-product .card-product-info .tf-product-info-price-detail {
    min-height: 23px;
}

.card-product .card-product-info .price {
    font-size: 18px;
    letter-spacing: 0;
}

.card-product .card-product-info .price .text-sale {
    font-size: 12.5px;
}

.card-product.grid:not(.list-layout) .card-product-info .product-listing-trust {
    margin-top: auto;
    padding: 8px 0 0;
}

.product-listing-trust--compact {
    border-top-color: rgba(17, 24, 39, .08);
    gap: 5px;
}

.product-listing-trust--compact .product-listing-signal {
    width: 17px;
    height: 17px;
}

.product-listing-trust__label {
    font-size: 11px;
    font-weight: 700;
}

/* --- Ürün rozetleri -------------------------------------------------------
   Konumlandırma ve renkler bileşenin `style=""` özniteliğindeydi; satır içi
   bildirimi hiçbir sınıf kuralı yenemediği için aşağıdaki kart kuralları
   `!important` ile çalışmak zorundaydı ve detay sayfasındaki satır içi
   yerleşim hiç biçimlendirilemiyordu. Taban kurallar burada. */
.product-promo-badges {
    display: flex;
    align-items: center;
    gap: 6px;
}
/* Kartta SARMA YOK: rozetler ikinci satıra düşünce görselin üstünü kapatıp
   kartı dengesiz gösteriyordu (tek satıra sığdırma kararı bilinçli). */
.product-promo-badges--card {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    max-width: calc(100% - 16px);
    pointer-events: none;
}
.product-promo-badges--inline {
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.product-promo-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}
.product-promo-badge--discount { background: #d1122a; }
.product-promo-badge--new { background: #198754; }
.product-promo-badge--cargo { background: #0d6efd; }
/* Kampanya motoru rozeti: indirimden ayrışsın diye mor. */
.product-promo-badge--campaign { background: #6f42c1; }
/* Ücretsiz kargodan (--cargo, mavi) ayrışsın diye camgöbeği. */
.product-promo-badge--fastcargo { background: #0891b2; }
/* Yerli üretim: turuncu/amber. */
.product-promo-badge--domestic { background: #b45309; }

/* Detay sayfasında rozetler başlığın altında, beyaz zeminde duruyor: kartla
   aynı dil (indirim dolu kırmızı, diğerleri renkli yazılı açık hap). */
.product-promo-badges--inline .product-promo-badge {
    min-height: 26px;
    padding: 4px 11px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1px;
}
.product-promo-badges--inline .product-promo-badge--discount {
    box-shadow: 0 6px 14px rgba(209, 18, 42, .22);
}
.product-promo-badges--inline .product-promo-badge--new {
    background: #ecfdf3;
    border-color: rgba(18, 112, 74, .22);
    color: #12704a;
}
.product-promo-badges--inline .product-promo-badge--cargo {
    background: #eff6ff;
    border-color: rgba(29, 78, 216, .20);
    color: #1d4ed8;
}
.product-promo-badges--inline .product-promo-badge--fastcargo {
    background: #ecfeff;
    border-color: rgba(8, 145, 178, .22);
    color: #0e7490;
}
.product-promo-badges--inline .product-promo-badge--domestic {
    background: #fffbeb;
    border-color: rgba(180, 83, 9, .24);
    color: #b45309;
}

.product-promo-badges--card {
    top: 9px !important;
    left: 9px !important;
    right: 9px;
    max-width: none !important;
    flex-direction: row !important;
    gap: 5px !important;
    align-items: flex-start !important;
}

.product-promo-badges--card .product-promo-badge {
    border-radius: 999px !important;
    padding: 4px 7px !important;
    font-size: 10.5px !important;
    line-height: 1.1;
    box-shadow: 0 8px 18px rgba(17, 24, 39, .16);
    backdrop-filter: blur(8px);
}

.card-product .card-product-wrapper .list-product-btn,
.card-product .card-product-wrapper .list-product-btn.absolute-2 {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    width: auto !important;
    gap: 0;
    align-items: center;
    justify-content: center;
    transform: none !important;
}

.card-product .card-product-wrapper .list-product-btn:has(.countdown-box) {
    opacity: 1;
    min-height: 38px;
}

.card-product .list-product-btn .box-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    box-shadow: 0 10px 22px rgba(17, 24, 39, .16);
}

@media (hover: hover) {
    .card-product .list-product-btn .wishlist,
    .card-product .list-product-btn .compare,
    .card-product .list-product-btn .quickview {
        display: none !important;
    }
}

.card-product .list-product-btn .countdown-box {
    display: flex !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 0 !important;
    width: auto;
    min-height: 31px;
    max-height: 34px;
    padding: 6px 11px !important;
    align-items: center;
    justify-content: center;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .9) !important;
    border: 1px solid rgba(255, 255, 255, .72);
    box-shadow: 0 12px 26px rgba(17, 24, 39, .16), inset 0 1px 0 rgba(255, 255, 255, .9);
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    backdrop-filter: blur(10px);
    transition: transform .22s ease, opacity .22s ease, box-shadow .22s ease, background-color .22s ease;
}

.card-product .list-product-btn .countdown-box::before {
    content: "Fırsat bitiyor";
    display: inline-flex;
    align-items: center;
    margin-right: 7px;
    padding-right: 7px;
    border-right: 1px solid rgba(209, 18, 42, .16);
    color: #9f1239;
    font-size: 9.5px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: 0;
}

.card-product .list-product-btn .countdown-box .js-countdown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.card-product .list-product-btn .countdown-box .countdown__timer {
    justify-content: center;
    gap: 5px;
}

.card-product .list-product-btn .countdown-box .countdown__item {
    font-size: 10.5px;
    line-height: 1;
    color: #d1122a;
    font-weight: 800;
}

.card-product:hover .list-product-btn .countdown-box {
    transform: translateY(-46px) scale(.97) !important;
    background: rgba(255, 255, 255, .86) !important;
    box-shadow: 0 10px 20px rgba(17, 24, 39, .12), inset 0 1px 0 rgba(255, 255, 255, .78);
}

.card-product .btn-quick-add-cart {
    flex: 1 1 auto;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px;
    padding: 0 14px !important;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, #f43f5e 0%, #d1122a 100%) !important;
    border: 1px solid rgba(255, 255, 255, .24) !important;
    box-shadow: 0 14px 28px rgba(209, 18, 42, .26), 0 8px 18px rgba(17, 24, 39, .12);
    transform: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity .2s ease, visibility .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.card-product:hover .list-product-btn .btn-quick-add-cart {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.card-product:hover .list-product-btn .btn-quick-add-cart:hover {
    background: linear-gradient(135deg, #fb7185 0%, #be123c 100%) !important;
    box-shadow: 0 16px 32px rgba(209, 18, 42, .32), 0 10px 20px rgba(17, 24, 39, .14);
}

@media (hover: none) {
    .card-product .card-product-wrapper .list-product-btn,
    .card-product .card-product-wrapper .list-product-btn.absolute-2 {
        left: 8px;
        right: 8px;
        bottom: 8px;
        gap: 6px;
    }

    .card-product .list-product-btn .btn-quick-add-cart {
        flex: 1 1 auto;
        min-width: 0;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .card-product .list-product-btn .countdown-box {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .card-product.grid:not(.list-layout) .card-product-wrapper {
        aspect-ratio: 1 / .88;
    }

    .card-product.grid:not(.list-layout) .card-product-info {
        padding: 10px 11px 12px !important;
    }

    .card-product.grid:not(.list-layout) .card-product-info .title {
        min-height: 35px;
    }

    .product-promo-badges--card .product-promo-badge {
        font-size: 10px !important;
        padding: 3px 6px !important;
    }
}

/* Product Detail Polish */
section.site-mv-h:has(#product-detail-page) {
    margin-top: 0;
    padding: 18px 0 44px;
    background:
        linear-gradient(180deg, #f7f9fb 0%, #fff 46%),
        radial-gradient(circle at 16% 0%, rgba(209, 18, 42, .08), transparent 30%);
}

#product-detail-page .container > .row {
    row-gap: 22px;
    align-items: flex-start;
}

#product-detail-page .tf-product-media-wrap {
    top: 18px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(17, 24, 39, .08);
    box-shadow: 0 18px 44px rgba(15, 23, 42, .10);
    backdrop-filter: blur(10px);
}

#product-detail-page .thumbs-slider {
    gap: 12px;
}

#product-detail-page .tf-product-media-main {
    overflow: hidden;
    border-radius: 8px;
    background: #eef2f6;
    border: 1px solid rgba(17, 24, 39, .08);
}

#product-detail-page .tf-product-media-main .swiper-slide,
#product-detail-page .tf-product-media-main .item {
    min-height: clamp(420px, 52vw, 590px);
}

#product-detail-page .tf-product-media-main .item {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .18)),
        #eef2f6;
}

#product-detail-page .tf-product-media-main .item img {
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: contain;
}

#product-detail-page .tf-product-media-main .item img[src*="picsum.photos"] {
    object-fit: cover;
}

#product-detail-page .tf-product-media-thumbs {
    width: 76px;
    max-height: 590px;
}

#product-detail-page .tf-product-media-thumbs .swiper-slide .item {
    border-radius: 8px;
    background: #fff;
    border: 1px solid rgba(17, 24, 39, .10);
    box-shadow: 0 6px 16px rgba(15, 23, 42, .06);
}

#product-detail-page .tf-product-media-thumbs .swiper-slide .item img {
    padding: 0;
    object-fit: cover;
}

#product-detail-page .tf-product-media-thumbs .swiper-slide.swiper-slide-thumb-active .item {
    border-color: rgba(209, 18, 42, .72);
    box-shadow: 0 0 0 3px rgba(209, 18, 42, .10);
}

#product-detail-page .tf-product-media-thumbs .swiper-slide .item::after {
    display: none;
}

#product-detail-page .tf-product-info-wrap {
    padding: 0;
    border-radius: 8px;
    background: #fff;
    border: 1px solid rgba(17, 24, 39, .08);
    box-shadow: 0 18px 44px rgba(15, 23, 42, .10);
    overflow: hidden;
}

#product-detail-page .tf-product-info-list {
    padding: 24px;
}

#product-detail-page .tf-product-info-list > div:not(:last-child) {
    margin-bottom: 14px;
}

#product-detail-page .tf-product-info-title {
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(17, 24, 39, .08);
}

#product-detail-page .tf-product-info-title .product-detail-title {
    margin: 0 0 12px;
    font-size: clamp(25px, 3vw, 36px);
    line-height: 1.12;
    letter-spacing: 0;
}

#product-detail-page .product-promo-badges--inline {
    margin: 0 !important;
}


#product-detail-page .tf-product-price-block {
    margin: 16px 0 18px;
    padding: 16px 18px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(209, 18, 42, .08), rgba(255, 255, 255, .72));
    border: 1px solid rgba(209, 18, 42, .14);
}

#product-detail-page .tf-product-price-block__current {
    font-size: clamp(32px, 4vw, 42px);
    line-height: 1;
}

#product-detail-page .tf-product-price-block__currency {
    font-size: 17px;
}

#product-detail-page .tf-product-price-block__vat {
    color: #64748b;
}

#product-detail-page .tf-product-info-variant-picker,
#product-detail-page .variant-picker-item {
    padding: 14px 0;
    border-top: 1px solid rgba(17, 24, 39, .08);
}

#product-detail-page .variant-picker-label {
    margin-bottom: 10px;
    color: #475569;
    font-size: 13px;
}

#product-detail-page .variant-picker-values-detail {
    gap: 8px;
}

#product-detail-page .variant-picker-values-detail label.style-text {
    min-height: 40px;
    border-radius: 999px;
    border-color: rgba(17, 24, 39, .12);
    background: #fff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .04);
}

#product-detail-page .variant-picker-values-detail input:checked + label.style-text:not(.color-btn) {
    background: #111827;
    border-color: #111827;
}

#product-detail-page .tf-product-info-quantity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0 4px;
    border-top: 1px solid rgba(17, 24, 39, .08);
}

#product-detail-page .tf-product-info-quantity .quantity-title {
    margin: 0;
    color: #334155;
    font-size: 14px;
}

#product-detail-page .wg-quantity {
    height: 46px;
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid rgba(17, 24, 39, .12);
    background: #f8fafc;
}

#product-detail-page .wg-quantity .btn-quantity {
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: #111827;
    font-size: 18px;
    font-weight: 800;
}

#product-detail-page .wg-quantity input {
    width: 58px;
    height: 44px;
    border: 0;
    background: transparent;
    color: #111827;
    font-size: 15px;
    font-weight: 800;
}

#product-detail-page .tf-product-info-buy-button {
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid rgba(17, 24, 39, .08);
}

#product-detail-page .tf-product-info-buy-button form {
    display: block;
}

#product-detail-page .tf-btn.btn-primary-action,
#product-detail-page .tf-btn.btn-fill {
    width: 100%;
    min-height: 54px;
    margin: 0 !important;
    border-radius: 8px;
    background: linear-gradient(135deg, #f43f5e 0%, #d1122a 100%);
    border-color: transparent;
    box-shadow: 0 16px 32px rgba(209, 18, 42, .24), 0 8px 18px rgba(15, 23, 42, .10);
    color: #fff;
    font-weight: 800;
    letter-spacing: 0;
}

#product-detail-page .tf-btn.btn-primary-action:hover,
#product-detail-page .tf-btn.btn-primary-action:focus,
#product-detail-page .tf-btn.btn-fill:hover,
#product-detail-page .tf-btn.btn-fill:focus {
    background: linear-gradient(135deg, #fb7185 0%, #be123c 100%);
    box-shadow: 0 18px 36px rgba(209, 18, 42, .30), 0 10px 20px rgba(15, 23, 42, .12);
    transform: translateY(-1px);
}

#product-detail-page .product-trust-indicators {
    margin-top: 14px;
    padding: 12px;
    border-radius: 8px;
    background: #f8fafc;
    border-color: rgba(17, 24, 39, .08);
    text-align: left;
}

#product-detail-page .product-trust-indicators .trust-shipping-row {
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

#product-detail-page .product-trust-indicators .trust-badge-item {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ecfdf3;
    color: #16834b;
    font-size: 12px;
}

#product-detail-page .product-trust-indicators .trust-security-row {
    color: #475569;
    font-size: 12.5px;
}

#product-detail-page .tf-product-action-chips {
    gap: 8px;
    padding: 14px 0;
    border-color: rgba(17, 24, 39, .08);
}

#product-detail-page .tf-product-action-chip {
    min-height: 34px;
    padding: 7px 11px;
    border-color: rgba(17, 24, 39, .08);
    background: #fff;
}



.product-detail-info-panel {
    border-radius: 8px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .08);
}

.product-detail-info-panel .widget-menu-tab {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
}

.product-detail-info-panel .widget-menu-tab::-webkit-scrollbar {
    display: none;
}

.product-detail-info-panel .widget-menu-tab .item-title {
    white-space: nowrap;
}

.product-detail-info-panel .widget-content-inner {
    padding: 30px;
}

@media (max-width: 991px) {
    #product-detail-page .tf-product-media-wrap {
        position: relative !important;
        top: 0;
    }

    #product-detail-page .tf-product-media-main .swiper-slide,
    #product-detail-page .tf-product-media-main .item {
        min-height: clamp(320px, 78vw, 520px);
    }

    #product-detail-page .tf-product-info-list {
        padding: 20px;
    }
}

@media (max-width: 767px) {
    section.site-mv-h:has(#product-detail-page) {
        padding: 12px 0 30px;
    }

    #product-detail-page .thumbs-slider {
        flex-direction: column !important;
    }

    #product-detail-page .tf-product-media-main,
    #product-detail-page .tf-product-media-thumbs {
        width: 100%;
    }

    #product-detail-page .tf-product-media-thumbs .swiper-slide {
        width: 72px;
        height: 72px;
    }

    #product-detail-page .tf-product-info-title .product-detail-title {
        font-size: 24px;
    }

    #product-detail-page .tf-product-info-quantity {
        align-items: flex-start;
        flex-direction: column;
    }

    .product-detail-info-panel .widget-content-inner {
        padding: 22px 16px 24px;
    }
}

/* ==========================================================================
   Ürün Detay Sayfası — tasarım turu
   --------------------------------------------------------------------------
   Bu bloktaki kuralların bir kısmı ÖNCEDEN ürün detay blade dosyasının
   içindeki 120 satırlık bir <style> etiketinden geliyordu. Sunumun şablonda
   yaşaması iki soruna yol açıyordu: her istekte HTML ile birlikte yeniden
   indiriliyordu (önbelleğe alınamıyor) ve aynı kurallar sepet şablonunda da
   kopyalanmış durumdaydı. Artık tek yerde.
   ========================================================================== */

/* --- İndirim geri sayımı ------------------------------------------------ */
.discount-countdown {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 18px;
    padding: 10px 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(209, 18, 42, .08), rgba(209, 18, 42, .02));
    border: 1px solid rgba(209, 18, 42, .22);
}
.discount-countdown__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--tf-primary-color, #d1122a);
}
.discount-countdown__icon svg { width: 15px; height: 15px; }
.discount-countdown__text {
    color: var(--tf-primary-color, #d1122a);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    white-space: nowrap;
}
.discount-countdown .countdown__timer { display: flex; gap: 4px; margin-left: 2px; }
.discount-countdown .countdown__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 3px 5px;
    border-radius: 6px;
    background: var(--tf-primary-color, #d1122a);
    color: #fff;
    line-height: 1;
}
.discount-countdown .countdown__value { font-size: 14px; font-weight: 700; }
.discount-countdown .countdown__label {
    margin-top: 2px;
    font-size: 8px;
    letter-spacing: .3px;
    opacity: .85;
    text-transform: uppercase;
}

/* Fiyat kutusunun içindeki hâli: kutunun kendi kenarlığı zaten var, ikinci
   bir çerçeve "kutu içinde kutu" gibi duruyordu. */
.discount-countdown--price {
    display: flex;
    width: 100%;
    margin: 12px 0 0;
    padding: 8px 0 0;
    border: 0;
    border-top: 1px dashed rgba(209, 18, 42, .28);
    border-radius: 0;
    background: transparent;
}
.discount-countdown--price .discount-countdown__icon { width: 24px; height: 24px; }
.discount-countdown--price .discount-countdown__icon svg { width: 12px; height: 12px; }
.discount-countdown--price .discount-countdown__text { font-size: 11px; }
.discount-countdown--price .countdown__item { min-width: 30px; }

/* --- Ürün etiketleri ---------------------------------------------------- */
.tf-product-tags {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 8px 0 14px;
}
.tf-product-tags__list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.tf-product-tags__item {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 3px 10px;
    border: 1px solid var(--color-border-ui, #e5e7eb);
    border-radius: 999px;
    color: var(--color-text-secondary, #4b5563);
    font-size: 12px;
    line-height: 1.2;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.tf-product-tags__item:hover,
.tf-product-tags__item:focus-visible {
    color: var(--tf-primary-color, #d1122a);
    border-color: var(--tf-primary-color, #d1122a);
    background: rgba(209, 18, 42, .06);
}

/* --- Yıldız göstergesi -------------------------------------------------- */
.star-rating {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.star-rating .star-rating__star {
    color: #dfe3e8;
    font-size: 14px;
    line-height: 1;
}
.star-rating .star-rating__star.is-on {
    color: #f5a524;
}
.star-rating--sm .star-rating__star { font-size: 12px; }

/* --- Marka rozeti ------------------------------------------------------- */
.tf-product-brand-chip {
    display: inline-flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 4px 12px;
    border: 1px solid rgba(17, 24, 39, .10);
    border-radius: 999px;
    background: #f6f7f9;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    text-decoration: none !important;
    text-transform: uppercase;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
a.tf-product-brand-chip:hover,
a.tf-product-brand-chip:focus-visible {
    border-color: rgba(209, 18, 42, .35);
    background: rgba(209, 18, 42, .06);
    color: var(--tf-primary-color, #d1122a);
}

/* --- Başlık altı özet şeridi (puan · ürün kodu · stok) ------------------ */
.tf-product-meta-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 12px;
}
.tf-product-meta-bar__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.2;
}
.tf-product-meta-bar__item strong {
    color: #0f172a;
    font-weight: 700;
}
.tf-product-meta-bar__label { color: #94a3b8; }
a.tf-product-meta-bar__rating {
    text-decoration: none !important;
    transition: color .2s ease;
}
a.tf-product-meta-bar__rating:hover,
a.tf-product-meta-bar__rating:focus-visible {
    color: var(--tf-primary-color, #d1122a);
}
.tf-product-meta-bar__stock { font-weight: 700; }
.tf-product-meta-bar__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.tf-product-meta-bar__stock--in { color: #16834b; }
.tf-product-meta-bar__stock--low { color: #b45309; }
.tf-product-meta-bar__stock--preorder { color: #1d4ed8; }
.tf-product-meta-bar__stock--out { color: #9f1239; }

/* --- Toplu alım fiyat kademeleri --------------------------------------- */
.tf-product-batch-prices {
    overflow: hidden;
    margin: 14px 0 4px;
    border: 1px solid rgba(17, 24, 39, .10);
    border-radius: 8px;
    background: #fff;
}
.tf-product-batch-prices__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #f8fafc;
    border-bottom: 1px solid rgba(17, 24, 39, .08);
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
}
.tf-product-batch-prices__head svg {
    width: 15px;
    height: 15px;
    color: var(--tf-primary-color, #d1122a);
}
.tf-product-batch-prices__table {
    width: 100%;
    border-collapse: collapse;
}
.tf-product-batch-prices__table th {
    padding: 8px 14px;
    border-bottom: 1px solid rgba(17, 24, 39, .06);
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.tf-product-batch-prices__table th:first-child,
.tf-product-batch-prices__table td:first-child { text-align: left; }
.tf-product-batch-prices__table th:last-child,
.tf-product-batch-prices__table td:last-child { text-align: right; }
.tf-product-batch-prices__table td {
    padding: 9px 14px;
    color: #334155;
    font-size: 13.5px;
}
.tf-product-batch-prices__table tbody tr + tr td {
    border-top: 1px solid rgba(17, 24, 39, .06);
}
.tf-product-batch-prices__table tbody tr:hover td { background: #fafbfc; }
.tf-product-batch-prices__price {
    color: var(--tf-primary-color, #d1122a);
    font-weight: 700;
}

/* --- Güven şeridi (teslimat + ödeme güvencesi) -------------------------- */
.product-trust-indicators .trust-shipping-row {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}
.trust-badge-item__icon {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    margin-right: 6px;
}
.product-trust-indicators .trust-security-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.trust-security-row__icon {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    color: #1d4ed8;
}
.trust-security-row__sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: .45;
}

/* --- Açıklama sekmesi --------------------------------------------------- */
.tf-product-description {
    color: var(--color-text-secondary, #4b5563);
    font-size: 15px;
    line-height: 1.75;
}
.tf-product-description > *:first-child { margin-top: 0; }
.tf-product-description > *:last-child { margin-bottom: 0; }
.tf-product-description img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}
.tf-product-description ul,
.tf-product-description ol { padding-left: 20px; }
.tf-product-description table {
    width: 100%;
    border-collapse: collapse;
}
.tf-product-description th,
.tf-product-description td {
    padding: 8px 12px;
    border: 1px solid rgba(17, 24, 39, .10);
}

/* --- Video sekmesi ------------------------------------------------------ */
.tf-product-videos {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}
.tf-product-video {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    background: #0f172a;
}
.tf-product-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- Döküman sekmesi ---------------------------------------------------- */
.tf-product-files {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.tf-product-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(17, 24, 39, .10);
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    text-decoration: none !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tf-product-file:hover,
.tf-product-file:focus-visible {
    border-color: rgba(209, 18, 42, .35);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}
.tf-product-file__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(209, 18, 42, .08);
    color: var(--tf-primary-color, #d1122a);
}
.tf-product-file__icon svg { width: 17px; height: 17px; }
.tf-product-file__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tf-product-file__action {
    flex: 0 0 auto;
    color: #94a3b8;
}
.tf-product-file__action svg { width: 16px; height: 16px; display: block; }
.tf-product-file:hover .tf-product-file__action { color: var(--tf-primary-color, #d1122a); }

/* --- Adet + Sepete Ekle aynı satırda ------------------------------------ */
#product-detail-page .tf-product-purchase {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid rgba(17, 24, 39, .08);
}
#product-detail-page .tf-product-purchase .tf-product-info-quantity {
    display: block;
    flex: 0 0 auto;
    padding: 0;
    border-top: 0;
}
#product-detail-page .tf-product-purchase .tf-product-info-quantity .quantity-title {
    margin-bottom: 8px;
}
#product-detail-page .tf-product-purchase .tf-product-info-buy-button {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border-top: 0;
}
/* Adet kutusu ile düğme aynı yükseklikte olsun; 46px'e karşı 54px yan yana
   dururken kırık bir çift gibi görünüyordu. */
#product-detail-page .tf-product-purchase .wg-quantity { height: 54px; }
#product-detail-page .tf-product-purchase .wg-quantity .btn-quantity { height: 52px; }
#product-detail-page .tf-product-purchase .wg-quantity input { height: 52px; }
#product-detail-page .tf-product-cta-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
#product-detail-page .tf-product-b2b-cta { margin-top: 10px; }
#product-detail-page .tf-product-b2b-cta .tf-btn { width: 100%; }

/* --- Mobil sabit satın alma çubuğu -------------------------------------- */
/* Mobilde ekranın altında zaten `.tf-toolbar-bottom` (Menü/Arama/Hesabım/
   Favoriler/Sepet) duruyor; çubuk 0'a sabitlenince onun üstüne biniyor,
   alt menünün yazıları okunmaz oluyordu. Çubuk o şeridin ÜSTÜNE oturur. */
:root {
    --mobile-toolbar-h: 67px;
}
.tf-product-sticky-bar {
    position: fixed;
    right: 0;
    bottom: var(--mobile-toolbar-h);
    left: 0;
    z-index: 1035;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid rgba(17, 24, 39, .10);
    box-shadow: 0 -10px 30px rgba(15, 23, 42, .12);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform .25s ease, visibility .25s ease;
}
.tf-product-sticky-bar.is-visible {
    transform: none;
    visibility: visible;
}
.tf-product-sticky-bar__inner {
    display: flex;
    align-items: center;
    gap: 12px;
}
.tf-product-sticky-bar__summary {
    flex: 1 1 auto;
    min-width: 0;
}
.tf-product-sticky-bar__title {
    display: block;
    overflow: hidden;
    color: #64748b;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tf-product-sticky-bar__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.tf-product-sticky-bar__price s {
    color: #94a3b8;
    font-size: 12px;
}
.tf-product-sticky-bar__price strong {
    color: #0f172a;
    font-size: 17px;
    font-weight: 800;
}
.tf-product-sticky-bar__cta {
    flex: 0 0 auto;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f43f5e 0%, #d1122a 100%);
    border-color: transparent;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
}
.tf-product-sticky-bar__cta:hover,
.tf-product-sticky-bar__cta:focus {
    background: linear-gradient(135deg, #fb7185 0%, #be123c 100%);
    color: #fff;
}
/* Yukarı çık düğmesi de sabit (bottom: 90px) ve çubukla çakışıyordu. */
body.has-product-sticky-bar .progress-wrap {
    bottom: calc(var(--mobile-toolbar-h) + 82px);
}

@media (min-width: 992px) {
    /* Masaüstünde asıl düğme sayfanın üst yarısında zaten görünür kalıyor;
       alt araç çubuğu da olmadığı için kaydırma da geri alınır. */
    .tf-product-sticky-bar { display: none; }
    body.has-product-sticky-bar .progress-wrap { bottom: 90px; }
}

@media (max-width: 767px) {
    #product-detail-page .tf-product-purchase {
        align-items: stretch;
        flex-direction: column;
    }
    /* Adet kutusu tüm genişliğe yayılıyordu: eksi ile artı düğmesinin arasında
       200px boşluk kalıyor, sayı ortada yapayalnız duruyordu. Sayaç kendi
       doğal ölçüsünde kalır, tüm genişliği yalnızca düğme alır. */
    #product-detail-page .tf-product-purchase .wg-quantity {
        width: auto;
        max-width: 160px;
    }
    .tf-product-meta-bar { gap: 6px 10px; }
    .tf-product-meta-bar__item { font-size: 12px; }
    .discount-countdown--price { gap: 6px; }
}

/* ==========================================================================
   Ürün Detay Sayfası — ikinci tasarım turu
   --------------------------------------------------------------------------
   Ekran görüntüsünden çıkan somut kusurlar giderilir: yalnız kalan küçük
   resim şeridi, sol/sağ sütun yükseklik farkı, boş varyant alanının bıraktığı
   kör çizgi ve sayfanın alt yarısındaki gevşek dikey ritim.
   ========================================================================== */

/* --- Galeri: tek görselde şerit yok, ana görsel kare ------------------- */
#product-detail-page .thumbs-slider--single .tf-product-media-thumbs {
    display: none;
}
#product-detail-page .thumbs-slider--single .tf-product-media-main {
    width: 100%;
}

/* Sabit `min-height: clamp(420px, 52vw, 590px)` sütun genişliğinden bağımsızdı:
   sağdaki bilgi kartı ~510px iken görsel kutusu ~440px kalıyor, iki sütun
   birbirini tutmuyordu. Kare oran, kartla aynı ölçekte büyüyüp küçülür ve
   kare ürün fotoğrafları da kırpılmadan oturur. */
#product-detail-page .tf-product-media-main {
    aspect-ratio: 1 / 1;
    max-height: 620px;
}
#product-detail-page .tf-product-media-main .swiper-wrapper,
#product-detail-page .tf-product-media-main .swiper-slide,
#product-detail-page .tf-product-media-main .item {
    height: 100%;
    min-height: 0;
}
/* Şerit, ana görselin karesi kadar uzar (esnek satırda `stretch` zaten
   varsayılan); sabit 590px tavanı kaldırılır ki iki sütun ayrışmasın. */
#product-detail-page .tf-product-media-thumbs {
    max-height: 620px;
}

/* --- Boş varyant alanı ------------------------------------------------- */
/* Varyantı olmayan üründe de sarmalayıcı çiziliyordu: fiyatın altında hiçbir
   şey ayırmayan bir çizgi ve 28px boşluk kalıyordu. İçinde JS'in okuduğu gizli
   input olduğu için `:empty` işe yaramaz; gerçek ölçüt seçim kutusu var mı. */
#product-detail-page .tf-product-info-variant-picker:not(:has(.variant-picker-item)) {
    margin-bottom: 0 !important;
    padding: 0;
    border-top: 0;
}

/* --- Fiyat kutusu ------------------------------------------------------ */
/* Kutunun kendi 16/18px dış boşluğu, sarmalayıcının 14px'iyle üst üste
   biniyordu (altta 32px). Aralığı tek yerden sarmalayıcı verir. */
#product-detail-page #product-price-block .tf-product-price-block {
    margin: 0;
    padding: 15px 18px;
}
#product-detail-page .tf-product-price-block__vat {
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(17, 24, 39, .07);
    font-size: 12px;
    font-weight: 600;
}

/* --- İkincil işlemler -------------------------------------------------- */
/* Altı çip, ana düğmeyle aynı görsel ağırlıktaydı ve altıncısı tek başına
   ikinci satıra düşüyordu. Ağırlık düşürüldü: bunlar yardımcı işlemler. */
#product-detail-page .tf-product-action-chips {
    gap: 6px;
    padding: 12px 0 0;
    border-bottom: 0;
}
#product-detail-page .tf-product-action-chip {
    min-height: 30px;
    padding: 5px 10px;
    background: transparent;
    border-color: transparent;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}
#product-detail-page .tf-product-action-chip i {
    font-size: 12px;
}
#product-detail-page .tf-product-action-chip:hover,
#product-detail-page .tf-product-action-chip:focus-visible {
    background: #f6f7f9;
    border-color: rgba(17, 24, 39, .10);
    color: var(--tf-primary-color, #d1122a);
}

/* --- Bilgi sekmesi ----------------------------------------------------- */
/* Sekme içindeki <h2> ürün adını h1 ile neredeyse aynı puntoda tekrar
   ediyordu; aynı ekranda iki kez dev başlık okunuyordu. */
.product-detail-info-panel .site-text > h2 {
    font-size: clamp(19px, 1.6vw, 22px);
    font-weight: 700;
}
.product-detail-info-panel .site-text > .tf-product-description {
    max-width: 72ch;
}
.product-detail-info-panel .tf-product-des-demo > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- Dikey ritim -------------------------------------------------------
   Bölüm araları TEK bir değerden yönetilir.

   Öncesinde üç ayrı düzenek üst üste biniyordu: temanın varsayılanları
   (`.site-mv-h` 16/24, `.site-mb` 40), bunları tek tek ezen `:has()`
   yamaları ve bölümlerin kendi iç dolguları. Her yama bir aralığı tek
   başına düzeltmek için eklenmişti; toplamı ölçtüğümde sayfa aşağı indikçe
   büyüyen rastgele bir dizi çıkıyordu — 19 / 24 / 29 / 99 piksel. Böyle bir
   dizi ritim kurmaz, yalnızca gürültü üretir: okuyucu bölümlerin nerede
   başlayıp bittiğini boşluktan anlayamaz.

   Sayfa ŞERİTLERDEN kuruludur (satın alma şeridi ve "Çok Satanlar" şeridi
   kendi zeminlerini taşır). Bu yüzden aralık, şeridin İÇ dolgusundan değil
   şeridin KENARINDAN ölçülür; iç dolgu şeridin kendi nefesidir ve dengeli
   olmalıdır.
   --------------------------------------------------------------------- */
#main-content:has(#product-detail-page) {
    --pd-section-gap: 48px;
}

/* Tema varsayılanları burada devre dışı; boşluğu aşağıdaki tek kural verir. */
#main-content:has(#product-detail-page) > section {
    margin-top: 0;
    margin-bottom: 0;
}
#main-content:has(#product-detail-page) > section + section {
    margin-top: var(--pd-section-gap);
}

/* Kırıntı yolu ile satın alma şeridi arası daha dar: şerit kendi zeminiyle
   zaten ayrışıyor, araya bölüm aralığı koymak onu sayfadan koparıyordu. */
#main-content:has(#product-detail-page) > .product-detail-breadcrumb + section {
    margin-top: 12px;
}

/* Satın alma şeridi: üstte kırıntı yolu var, altta bölüm aralığı — bu yüzden
   alt dolgu üsttekinden bir tık geniş. */
section.site-mv-h:has(#product-detail-page) {
    padding: 24px 0 32px;
}

/* Sekme paneli şerit değil; boşluğunu tamamen ritim kuralından alır. */
section.site-mb:has(.product-detail-info-panel) {
    padding-top: 0;
    padding-bottom: 0;
}

/* "Çok Satanlar" şeridinin dolgusu DENGESİZDİ: üstü 8, altı 36 pikseldi
   (üst dolgu sonradan bir aralık yaması olarak kısılmış). Çerçeveli bir
   şeritte bu, başlığın üst çizgiye yapışması demek. */
.product-detail-bestsellers {
    padding: 36px 0;
}

/* Dar ekranda hem aralık hem şerit dolgusu daralır: 48 piksel telefonda
   bölümleri ayırmaz, sayfayı uzatır.

   Bu iki kural dosyanın DAHA ÜSTÜNDEKİ ortam sorgularında da tanımlı
   (bkz. `.product-detail-bestsellers` ~891 ve `site-mv-h` ~5097). Ortam
   sorgusu özgüllük eklemediği için, aynı özgüllükteki iki bildirimden
   SONRA geleni kazanır — yukarıdaki dar ekran değerleri, buradaki geniş
   ekran kuralı tarafından eziliyordu. Değerler bu yüzden burada yeniden
   bildiriliyor. */
@media (max-width: 991px) {
    #main-content:has(#product-detail-page) {
        --pd-section-gap: 36px;
    }
    .product-detail-bestsellers {
        padding: 26px 0;
    }

    /* Sütunlar alt alta düştüğünde görsel ile bilgi kartı arasındaki boşluk
       46 piksele çıkıyordu: satır aralığının (22) üstüne görsel sarmalayıcının
       yalnızca masaüstünde anlamı olan alt kenar boşluğu (15) ve iç dolgusu (8)
       ekleniyordu. Bu, AYNI bloğun iki parçasını bölümler arası aralıktan daha
       uzak gösteriyordu — hiyerarşi tersine dönüyordu. Parçalar artık bölümlerden
       belirgin şekilde yakın. */
    #product-detail-page .container > .row {
        row-gap: 16px;
    }
    #product-detail-page .tf-product-media-wrap {
        margin-bottom: 0;
        padding-bottom: 0;
    }
}

@media (max-width: 767px) {
    section.site-mv-h:has(#product-detail-page) {
        padding: 14px 0 24px;
    }
}

@media (max-width: 575px) {
    #main-content:has(#product-detail-page) {
        --pd-section-gap: 28px;
    }
}

@media (max-width: 991px) {
    #product-detail-page .tf-product-media-main {
        aspect-ratio: auto;
        max-height: none;
    }
    #product-detail-page .tf-product-media-main .swiper-slide,
    #product-detail-page .tf-product-media-main .item {
        height: auto;
        min-height: clamp(300px, 74vw, 480px);
    }
}

/* ==========================================================================
   Ürün Detay Sayfası — üçüncü tasarım turu (görsel ince ayar)
   ========================================================================== */

/* --- Fiyat: kutu yalnızca kampanyada -----------------------------------
   İndirimsiz üründe de kampanya rengi ve çerçevesi çiziliyordu; içinde tek
   satır olduğu için geniş, sağ yarısı boş pembe bir dikdörtgen kalıyordu.
   Artık düz fiyat kart yüzeyinde duruyor: üstünde başlığın, altında satın
   alma satırının çizgisi zaten bir çerçeve oluşturuyor. */
#product-detail-page #product-price-block .tf-product-price-block {
    padding: 4px 0 2px;
    border: 0;
    background: none;
}
#product-detail-page #product-price-block .tf-product-price-block--discounted {
    padding: 14px 16px;
    border: 1px solid rgba(209, 18, 42, .16);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(209, 18, 42, .07), rgba(255, 255, 255, .6));
}

/* Kazanç tutarı satırın sağ ucuna itilir — üstü çizili fiyat solda,
   kazanç sağda; arada kalan boşluk artık ölçülü bir aralık. */
.tf-product-price-block__was {
    justify-content: flex-start;
}
.tf-product-price-block__savings {
    margin-left: auto;
    padding: 3px 10px;
    border: 1px solid rgba(22, 131, 75, .20);
    border-radius: 999px;
    background: #ecfdf3;
    color: #16834b;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* Geri sayım kutunun içinde biraz daha okunur olsun. */
#product-detail-page .discount-countdown--price {
    margin-top: 12px;
    padding-top: 10px;
}
#product-detail-page .discount-countdown--price .countdown__item {
    min-width: 34px;
    padding: 4px 6px;
}
#product-detail-page .discount-countdown--price .countdown__value {
    font-size: 13px;
}

/* --- Galeri: tek yüzey -------------------------------------------------
   Beyaz kartın içinde bir de kendi kenarlığı olan gri bir görsel kutusu
   vardı: çerçeve içinde çerçeve. Görsel artık kartın yüzeyiyle aynı. */
#product-detail-page .tf-product-media-wrap {
    padding: 10px;
}
#product-detail-page .tf-product-media-main {
    border-color: transparent;
    background: #f2f5f8;
}
#product-detail-page .tf-product-media-main .item {
    cursor: zoom-in;
}

/* --- Bilgi kartı: biraz daha nefes ------------------------------------- */
#product-detail-page .tf-product-info-list {
    padding: 26px 28px 24px;
}
#product-detail-page .tf-product-info-title {
    padding-bottom: 18px;
}

/* --- Güven şeridi: daha sakin ------------------------------------------
   Dolu gri kutu, üstündeki düğmeyle yarışıyordu. Zemin kalktı, yerini
   yalnızca üstteki ince çizgi aldı. */
#product-detail-page .product-trust-indicators {
    margin-top: 16px;
    padding: 14px 0 0;
    border: 0;
    border-top: 1px solid rgba(17, 24, 39, .08);
    border-radius: 0;
    background: none;
}

/* --- Sekmeler: etkin sekme belirgin olsun ------------------------------ */
.product-detail-info-panel .widget-menu-tab .item-title {
    position: relative;
    color: #64748b;
}
.product-detail-info-panel .widget-menu-tab .item-title.active {
    color: #0f172a;
}
/* Tema bu `::after`'ı zaten çiziyor (`width: 0` → etkinken `width: 100%`).
   Yalnızca konumu içeri alınır; `width: auto` OLMAZSA temanın `width: 100%`'i
   kazanıp çizgiyi sağdan 12px taşırıyor. */
.product-detail-info-panel .widget-menu-tab .item-title.active::after {
    right: 12px;
    bottom: -1px;
    left: 12px;
    width: auto;
    border-radius: 2px;
    background: var(--tf-primary-color, #d1122a);
}

@media (max-width: 767px) {
    #product-detail-page .tf-product-info-list { padding: 18px 16px 16px; }
    .tf-product-price-block__savings { margin-left: 0; }
}

/* Rozet yazımını tek dile getir: tema `.badge`'e zaten `text-transform:
   uppercase` veriyor, dolayısıyla "YENİ" / "ÜCRETSİZ KARGO" büyük harfle
   çıkıyordu; fiyat kutusundaki indirim rozeti ise "%35 İndirim" diye
   yazılıyordu. Aynı ekranda iki ayrı yazım vardı. */
.tf-product-price-block__badge,
.tf-product-price-block__savings {
    letter-spacing: .3px;
    text-transform: uppercase;
}

/* ==========================================================================
   Ürün Detay Sayfası — dördüncü tur: kartın iki bölgeye ayrılması
   --------------------------------------------------------------------------
   Bilgi kartı, aralarına dört ayrı ince çizgi serpiştirilmiş küçük öğelerden
   oluşan tek bir uzun yığındı; bir formu andırıyor, hangi kısmın ürünü
   tanıttığı hangisinin işlem olduğu ayırt edilmiyordu. Artık iki bölge var:
   üstte kimlik + fiyat (düz kart yüzeyi), altta satın alma kutusu (hafifçe
   kabarık yüzey). Çizgiler de dörtten ikiye indi.
   ========================================================================== */

#product-detail-page .tf-product-buybox {
    margin-top: 20px;
    padding: 16px 16px 14px;
    border: 1px solid rgba(17, 24, 39, .08);
    border-radius: 12px;
    background: linear-gradient(180deg, #fbfcfd 0%, #f6f8fa 100%);
}

/* Kutunun kendi çerçevesi var; içerideki ayırıcı çizgiler artık gereksiz. */
#product-detail-page .tf-product-buybox .tf-product-purchase {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
#product-detail-page .tf-product-buybox .product-trust-indicators {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(17, 24, 39, .07);
}

/* Ön sipariş notu kutunun içinde, düğmenin hemen üstünde. */
#product-detail-page .tf-product-buybox .tf-product-info-badges {
    margin: 0 0 12px;
}
#product-detail-page .tf-product-buybox .product-status-content {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(29, 78, 216, .16);
    border-radius: 8px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 13px;
}
#product-detail-page .tf-product-buybox .product-status-content p {
    margin: 0;
}

/* Adet kutusu kabarık yüzeyin üstünde beyaz kalsın ki düğmeyle eşleşsin. */
#product-detail-page .tf-product-buybox .wg-quantity {
    background: #fff;
}

/* --- Fiyat: daha güvenli bir tipografi ---------------------------------
   Başlık 36px, fiyat 30px idi; ikisi neredeyse aynı ağırlıkta olduğu için
   fiyat öne çıkmıyordu. KDV notu da fiyatın yanındaki hapta onunla
   yarışıyordu — artık altında sakin bir açıklama satırı. */
#product-detail-page .tf-product-price-block__now {
    align-items: flex-end;
    gap: 8px;
}
#product-detail-page .tf-product-price-block__current {
    font-size: clamp(34px, 4.2vw, 44px);
    letter-spacing: -.02em;
}
#product-detail-page .tf-product-price-block__vat {
    padding: 0;
    border: 0;
    background: none;
    color: #94a3b8;
    font-size: 12.5px;
    font-weight: 500;
}

/* --- İkincil işlemler: dağınık sarma yerine düzenli ızgara -------------
   Altı çip serbest sarıyordu; sonuncusu tek başına ikinci satıra düşüyor,
   satır sonları tırtıklı kalıyordu. Eşit sütunlu ızgarada hepsi hizalı. */
#product-detail-page .tf-product-action-chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 6px;
    padding: 14px 0 0;
    border-top: 1px solid rgba(17, 24, 39, .08);
}
#product-detail-page .tf-product-action-chip {
    justify-content: flex-start;
    min-width: 0;
    padding: 6px 8px;
}
#product-detail-page .tf-product-action-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575px) {
    #product-detail-page .tf-product-action-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #product-detail-page .tf-product-buybox {
        padding: 14px 12px 12px;
    }
}

/* ==========================================================================
   Mobil: ürünü katlanın üstüne çıkarmak
   --------------------------------------------------------------------------
   375px'te ürün görselinden ÖNCE 440px'lik sayfa donanımı vardı (promosyon
   şeridi + kurumsal tanıtım notu + logo satırı + kırıntı yolu). Ekranın
   yarısından fazlası tükendiği için ürün adı ve fiyat katlanın çok altında
   kalıyordu. Bilgi notu mobilde iki satıra sığacak ölçüye çekildi; kırıntı
   yolu ve galeri kartı da biraz sıkıldı. İçerik kırpılmıyor, yalnızca ölçek
   küçülüyor.
   ========================================================================== */
@media (max-width: 767px) {
    .site-entity-note {
        font-size: 11px;
        line-height: 1.45;
    }
    .site-entity-note.py-2 {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
    .site-entity-note p {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .product-detail-breadcrumb .tf-breadcrumb-wrap {
        min-height: 38px;
        padding: 2px 0;
    }
    #product-detail-page .tf-product-media-wrap {
        padding: 8px;
    }
    /* Kare görsel mobilde ekranın yarısını yiyordu; 4:3 hem ürünü tanıtmaya
       yetiyor hem de başlık ve fiyat için yer bırakıyor. */
    #product-detail-page .tf-product-media-main .swiper-slide,
    #product-detail-page .tf-product-media-main .item {
        min-height: 0;
        aspect-ratio: 4 / 3;
    }
}

/* ==========================================================================
   Favorilerim — karttan çıkarma düğmesi
   --------------------------------------------------------------------------
   Kaldırma yalnızca kartın üstünde, fareyle üzerine gelince beliren bir kalp
   ikonuyla yapılabiliyordu: yazısı yok ve dokunmatik cihazda hiç görünmüyor.
   Favori listesindeki en beklenen işlem gizli kalmamalı.
   ========================================================================== */
.card-product-remove-favorite {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 34px;
    margin-top: 10px;
    padding: 6px 10px;
    border: 1px solid rgba(17, 24, 39, .10);
    border-radius: 8px;
    background: #fff;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.card-product-remove-favorite svg {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
}
.card-product-remove-favorite:hover,
.card-product-remove-favorite:focus-visible {
    border-color: rgba(209, 18, 42, .30);
    background: rgba(209, 18, 42, .05);
    color: var(--tf-primary-color, #d1122a);
}

/* ==========================================================================
   Favori kalbi: favorideyken DOLU ve kırmızı
   --------------------------------------------------------------------------
   Favorideki ürünün kalbi yalnızca kırmızıya boyanıyordu (JS'ten satır içi
   `color: red`), ama glif hâlâ İÇİ BOŞ kalp olduğu için "ekle" hâlinden
   ayrılmıyordu. Tema zaten dolu bir glif taşıyor (`icon-heart-full`, \e92f)
   ama hiçbir yerde kullanılmamış.

   Ölçüt işaretlemede değil DURUM SINIFINDA: `remove-from-favorites`ı JS
   tıklamada zaten çeviriyor, dolayısıyla kalp sayfa yenilenmeden dolup
   boşalıyor.
   ========================================================================== */
.remove-from-favorites .icon-heart,
.remove-from-favorites i.icon-heart {
    color: var(--tf-primary-color, #d1122a);
}
.remove-from-favorites .icon-heart::before,
.remove-from-favorites i.icon-heart::before {
    content: "\e92f"; /* icon-heart-full */
}

/* Ekleme hâli: içi boş, nötr renk — üzerine gelince niyet belli olsun. */
.add-to-favorites .icon-heart,
.add-to-favorites i.icon-heart {
    transition: color .2s ease;
}
.add-to-favorites:hover .icon-heart,
.add-to-favorites:focus-visible .icon-heart {
    color: var(--tf-primary-color, #d1122a);
}

/* "Favorilerden çıkar" düğmesindeki dolu kalp kırmızı dursun; düğmenin
   kendisi ikincil ağırlıkta kalmaya devam eder. */
.card-product-remove-favorite svg {
    color: var(--tf-primary-color, #d1122a);
}

/* ==========================================================================
   Ürün Karşılaştırma sayfası
   --------------------------------------------------------------------------
   Düzen tek satırlık bir esnek kutu: her ürün bir sütun, karşılaştırma
   satırları o sütunun İÇİNDE yığılıyor. Ortak bir etiket sütunu olmadığı için
   kullanıcı başlıksız üç değer görüyordu (kategori / marka / stok) ve
   hangisinin ne olduğunu tahmin ediyordu. Etiket artık her hücrenin içinde.

   Satırlar yalnızca içerik yükseklikleri eşitse hizalı kalıyor; kategori bir
   üründe iki satıra sarınca şerit deseni kayıyordu. Sabit en az yükseklik
   hizayı garantiler.
   ========================================================================== */
.tf-compare-value,
.tf-compare-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 78px;
    padding: 12px 10px;
}
.tf-compare-label {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    line-height: 1.2;
    text-transform: uppercase;
}
.tf-compare-cell-value {
    color: #0f172a;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
}
.tf-compare-kdv-note {
    color: #64748b;
    font-size: 13px;
    padding-left: 5px;
}

/* Stok durumu: renk satır içinde yazılıyordu. */
.tf-compare-stock-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
}
.tf-compare-stock-state .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #fff;
    font-size: 9px;
}
.tf-compare-stock-state.is-in { color: #16834b; }
.tf-compare-stock-state.is-in .icon { background: #16834b; }
.tf-compare-stock-state.is-out { color: #9f1239; }
.tf-compare-stock-state.is-out .icon { background: #9f1239; }

/* ==========================================================================
   KAMPANYA VİTRİNİ (/kampanya/{slug})
   Kampanya kapak görseli sayfanın üstünde hero olarak kullanılır; üzerinde
   başlık ve bitişe kalan süre sayacı durur (labelv2'deki kampanya detayıyla
   aynı kurgu). Görsel yoksa mağaza rengine düşen degrade zemin devreye girer —
   blok hiçbir durumda boş kalmaz.
   ========================================================================== */
.promotion-hero {
    position: relative;
    padding: 56px 0;
    margin-bottom: 30px;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, var(--tf-primary-color, #d1122a) 0%, #1a1a1a 100%);
}
.promotion-hero--has-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.promotion-hero__title {
    margin: 0 0 10px;
    color: #fff;
    font-size: 34px;
    line-height: 1.2;
}
.promotion-hero__desc {
    max-width: 720px;
    margin: 0 auto 18px;
    color: rgba(255, 255, 255, .88);
    font-size: 16px;
}
.promotion-hero__countdown-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
}
/* Sayaç bileşeni (js-countdown) temanın kendi işaretlemesini basar; burada
   yalnızca koyu zemin üzerinde okunur hale getiriliyor. */
.promotion-hero .countdown__timer {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 0;
}
.promotion-hero .countdown__item {
    min-width: 68px;
    padding: 10px 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .25);
}
.promotion-hero .countdown__value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}
.promotion-hero .countdown__label {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, .8);
}
.promotion-hero__meta {
    margin-top: 14px;
    font-size: 13px;
    color: rgba(255, 255, 255, .75);
}
.promotion-hero__ended {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .45);
    font-weight: 600;
}
@media (max-width: 575px) {
    .promotion-hero { padding: 38px 0; }
    .promotion-hero__title { font-size: 24px; }
    .promotion-hero .countdown__item { min-width: 56px; padding: 8px 4px; }
    .promotion-hero .countdown__value { font-size: 19px; }
}

/* Ürün kartında ÜÇ fiyat: liste (üstü çizili) → ürün indirimi (ara fiyat) →
   kampanyalı fiyat. Ara fiyat da üstü çizili ama daha soluk: hangisinin nihai
   fiyat olduğu tek bakışta ayrılsın. */
.product-mid-price {
    text-decoration: line-through;
    opacity: .65;
    margin-right: 4px;
}

/* ŞİFRE GÖSTER/GİZLE DÜĞMESİ
   Düğme JavaScript ile ekleniyor (bkz. index.js), o yüzden sınıflar burada
   tanımlı ama işaretlemede geçmiyor.

   `padding-right` iki sınıfla yazıldı: `.tf-field.style-1 .tf-input` kuralı
   (0,3,0) özgüllüğünde `padding: 25px 18px 6px` veriyor, tek sınıfla yazılan
   bir geçersiz kılma bu kuralı YENEMEZ ve yazı düğmenin altına girerdi.
   Sınıfsız şifre alanı da var (kayıt formundaki `password_confirmation`), o
   yüzden etiket seçicisi de kapsanıyor. */
.tf-field--has-pw-toggle {
    position: relative;
}
.tf-field.tf-field--has-pw-toggle .tf-input,
.tf-field.tf-field--has-pw-toggle input[type="password"],
.tf-field.tf-field--has-pw-toggle input[type="text"] {
    padding-right: 48px;
}
.pw-toggle {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    display: grid;
    place-items: center;
    width: 44px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--text-2, #757575);
    line-height: 0;
    cursor: pointer;
}
.pw-toggle:hover,
.pw-toggle[aria-pressed="true"] {
    color: var(--main, #1f1f1f);
}
/* Klavye odağı GÖRÜNÜR olmalı: düğme yalnızca fareyle kullanılabilir bir
   kontrol değil. */
.pw-toggle:focus-visible {
    outline: 2px solid var(--main, #1f1f1f);
    outline-offset: -2px;
    border-radius: 4px;
}

/* E-BÜLTEN ŞERİDİ
   Girdi eskiden `flex-grow-1` ile kapsayıcıyı dolduruyordu — bir e-posta
   adresi için ölçülen genişlik 1058 pikseldi. Burada girdi `max-width` ile
   sınırlanıyor; şerit de üstündeki sütunlardan kendi çizgisiyle ayrılıyor,
   çünkü eskiden iki komşu bloğa da sıfır boşlukla yapışıktı. */
.demo-footer__newsletter {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 26px 0;
}
.demo-newsletter {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    align-items: flex-start;
    justify-content: space-between;
}
.demo-newsletter__intro {
    flex: 1 1 260px;
    min-width: 0;
}
.demo-newsletter__title {
    margin: 0 0 4px;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
}
.demo-newsletter__text {
    margin: 0;
    color: #a8bbd2;
    font-size: 13px;
    line-height: 1.5;
}
/* Alan grubu büyümez, KÜÇÜLÜR: `flex-grow` 0 olduğu için girdi artan
   genişliği yutmuyor. */
.demo-newsletter__fields {
    flex: 0 1 460px;
    min-width: 0;
}
.demo-newsletter__row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.demo-newsletter__input {
    flex: 1 1 220px;
    min-width: 0;
    max-width: 320px;
    height: 46px;
}
.demo-newsletter__consent {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 10px 0 0;
    color: #a8bbd2;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
}
/* Onay kutusu metinle birlikte küçülmesin ve ilk satırın ortasına gelsin. */
.demo-newsletter__consent input {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    accent-color: #f97316;
    cursor: pointer;
}
.demo-newsletter__consent a {
    color: #fff;
    text-decoration: underline;
}
.demo-newsletter__consent a:hover {
    color: #fb923c;
}
@media (max-width: 767px) {
    .demo-footer__newsletter { padding: 22px 0; }
    .demo-newsletter__fields { flex: 1 1 100%; }
    .demo-newsletter__input { max-width: none; }
    .demo-newsletter__row .save-newsletter-btn { flex: 1 1 100%; }
}

/* Footer "Yol tarifi" bağlantısı: adres bloğunun altında, ikonuyla birlikte
   tek bir tıklama hedefi. `align-items: center` yerine `flex-start` — adres
   uzun olduğunda ikon ilk satırın hizasında kalsın diye ikona küçük bir üst
   boşluk verilmiyor, çünkü bağlantı metni tek satır. */
.demo-footer__directions {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    margin-top: 12px;
    color: #b5c5d8;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}
.demo-footer__directions:hover,
.demo-footer__directions:focus-visible {
    color: #fb923c;
}
.demo-footer__directions-icon {
    font-size: 15px;
    color: #fb923c;
}
.demo-footer__directions:focus-visible {
    outline: 2px solid #fb923c;
    outline-offset: 3px;
    border-radius: 4px;
}

/* ÜRÜN ÖZETİ (kısa açıklama) — galerinin altında.
   İçerik panelden gelen zengin metin olduğu için tipografi burada verilir;
   aksi halde <p>/<ul> öğeleri tema varsayılanlarıyla dağınık görünüyor. */
.product-detail-summary {
    margin-top: 24px;
    padding: 18px 20px;
    background: var(--color-surface-alt, #f7f8fa);
    border: 1px solid var(--color-border-ui, #e5e7eb);
    border-radius: var(--radius-md, 10px);
}
.product-detail-summary__title {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-primary, #111827);
}
.product-detail-summary__body {
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-text-secondary, #4b5563);
}
/* Panelden gelen metin çoğunlukla art arda <p> satırları: aralarındaki
   varsayılan paragraf boşluğu künyeyi gereksiz uzatıyor. */
.product-detail-summary__body > *:first-child { margin-top: 0; }
.product-detail-summary__body > *:last-child { margin-bottom: 0; }
.product-detail-summary__body p { margin: 0 0 6px; }
.product-detail-summary__body ul,
.product-detail-summary__body ol { margin: 0 0 6px; padding-left: 20px; }
.product-detail-summary__body li { margin-bottom: 4px; }
.product-detail-summary__body table { width: 100%; max-width: 100%; }
/* Geniş tablo kutuyu yarmasın. */
.product-detail-summary__body { overflow-x: auto; }
@media (max-width: 767px) {
    .product-detail-summary { margin-top: 18px; padding: 16px; }
}


/* ==========================================================================
   ANASAYFA SLIDER (hero_style = "slider")

   YERLEŞİM İLKESİ: kutunun yüksekliğini METİN belirler, görsel o kutuyu
   `object-fit: cover` ile hem dikey hem yatay doldurur ve gerekirse kırpılır.

   Alternatifi denendi ve bırakıldı: görseli kendi oranıyla basıp metni altına
   yığmak. Kiracının yüklediği dosyalar geniş banner olduğu için (2.6:1)
   telefonda ince bir şerit + altında ondan yüksek bir metin bloğu çıkıyordu.
   Sabit `min-height` + cover ile hem slaytlar eşit yükseklikte kalıyor
   (geçişte zıplama yok) hem de her ekranda metne yetecek alan garanti.
   ========================================================================== */
.homepage-slider {
    position: relative;
    background: var(--color-surface-dark, #0f172a);
}

.homepage-slider__swiper {
    /* Swiper hazır olana kadar slaytlar yan yana dizilir; taşan kısım
       gizlenmezse sayfa yatay kayar. */
    overflow: hidden;
}

.homepage-slider__slide {
    position: relative;
    display: block;
}

/* Görsel katmanı kutuyu tamamen kaplar; yüksekliği metin belirler. */
.homepage-slider__picture {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
}

.homepage-slider__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Paneldeki "Karartma Oranı" — tüm yüzeye eşit uygulanır. */
.homepage-slider__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #000;
    pointer-events: none;
}

/* Metin katmanı: kutunun yüksekliğini BU belirler. */
.homepage-slider__body {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    /* Metne yetecek asgari alan; görsel bu kutuya göre kırpılır. */
    min-height: clamp(340px, 37vw, 620px);
    padding: 40px 0;
}

/* METİN OKUNABİLİRLİĞİ.
   Görseli kiracı yüklüyor: açık gökyüzü, beyaz fon veya parlak bir ürün
   fotoğrafı geldiğinde beyaz başlık okunmaz hale geliyor. Paneldeki
   "Karartma Oranı" TÜM yüzeyi eşit karartıyor; okunabilirlik için gereken
   değere çıkarıldığında görsel de sönüyor. Bu yüzden yalnızca METNİN
   olduğu tarafa yönlü bir perde konur — temanın kendi `.homepage-hero--demo`
   çözümüyle aynı yaklaşım. */
.homepage-slider__body::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(9, 20, 39, 0.75) 0%, rgba(9, 20, 39, 0.45) 38%, rgba(9, 20, 39, 0) 68%);
}

.homepage-slider__slide--right .homepage-slider__body::before {
    background: linear-gradient(270deg, rgba(9, 20, 39, 0.75) 0%, rgba(9, 20, 39, 0.45) 38%, rgba(9, 20, 39, 0) 68%);
}

/* "Koyu metin" seçiliyse zeminin AÇIK olması istenmiştir; koyu perde
   tercihi tersine çevirirdi. */
.homepage-slider__slide--dark-text .homepage-slider__body::before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.45) 38%, rgba(255, 255, 255, 0) 68%);
}

.homepage-slider__slide--dark-text.homepage-slider__slide--right .homepage-slider__body::before {
    background: linear-gradient(270deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.45) 38%, rgba(255, 255, 255, 0) 68%);
}

.homepage-slider__body .container {
    position: relative;
    z-index: 1;
    width: 100%;
}

.homepage-slider__content {
    max-width: 620px;
    color: var(--white, #fff);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.homepage-slider__slide--dark-text .homepage-slider__content {
    color: var(--color-surface-dark, #0f172a);
    text-shadow: 0 1px 10px rgba(255, 255, 255, 0.45);
}

.homepage-slider__slide--right .homepage-slider__content {
    margin-left: auto;
    text-align: right;
}

.homepage-slider__title {
    color: inherit;
    /* clamp: 1920'de büyük, mobilde taşmayan tek bir ölçek. */
    font-size: clamp(24px, 3.2vw, 52px);
    line-height: 1.15;
    margin: 0 0 12px;
}

.homepage-slider__desc {
    color: inherit;
    font-size: clamp(14px, 1.15vw, 18px);
    line-height: 1.55;
    margin: 0 0 20px;
}

/* İKİ SINIFLI SEÇİCİ KASITLI: temanın `.tf-btn` kuralı butonu `display:flex`
   yapıyor ve tek sınıflı bir kural onu yenemiyor — ölçümde buton tablette
   slaytın tamamına yayılıyordu. */
.homepage-slider__content .homepage-slider__btn {
    display: inline-flex;
    width: auto;
    align-items: center;
    justify-content: center;
    text-shadow: none;
}

/* --- Gezinme okları --- */
.homepage-slider__nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: var(--color-surface-dark, #0f172a);
    cursor: pointer;
    transition: background 0.2s ease, opacity 0.2s ease;
}

.homepage-slider__nav:hover {
    background: #fff;
}

.homepage-slider__nav:focus-visible {
    outline: 2px solid var(--white, #fff);
    outline-offset: 2px;
}

.homepage-slider__nav--prev { left: 16px; }
.homepage-slider__nav--next { right: 16px; }

.homepage-slider__nav.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
}

/* --- Sayfalama noktaları --- */
.homepage-slider__pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.homepage-slider__pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0;
    opacity: 0.55;
    background: #fff;
    border-radius: 50%;
    transition: opacity 0.2s ease, width 0.2s ease;
}

.homepage-slider__pagination .swiper-pagination-bullet-active {
    opacity: 1;
    width: 26px;
    border-radius: 5px;
}

/* --- Tablet ---
   Metin sütunu tüm genişliği aldığı için yönlü perde yetmiyor: satırın sonu
   çıplak görselin üzerinde kalıyordu. Burada perde sona kadar taşınır. */
@media (max-width: 991px) {
    .homepage-slider__body {
        min-height: 360px;
        padding: 32px 0;
    }

    .homepage-slider__content { max-width: 100%; }

    .homepage-slider__body::before,
    .homepage-slider__slide--right .homepage-slider__body::before {
        background: linear-gradient(90deg, rgba(9, 20, 39, 0.80) 0%, rgba(9, 20, 39, 0.62) 55%, rgba(9, 20, 39, 0.34) 100%);
    }

    .homepage-slider__slide--dark-text .homepage-slider__body::before,
    .homepage-slider__slide--dark-text.homepage-slider__slide--right .homepage-slider__body::before {
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.84) 0%, rgba(255, 255, 255, 0.66) 55%, rgba(255, 255, 255, 0.38) 100%);
    }
}

/* --- Telefon ---
   Metin ortalanır ve perde her yöne eşit uygulanır: dar ekranda yönlü perde
   metnin bir kısmını dışarıda bırakıyor. Oklar gizli — parmakla kaydırma var. */
@media (max-width: 575px) {
    .homepage-slider__body {
        min-height: 420px;
        padding: 28px 0 46px;
    }

    .homepage-slider__nav { display: none; }

    .homepage-slider__content,
    .homepage-slider__slide--right .homepage-slider__content {
        max-width: 100%;
        text-align: center;
    }

    .homepage-slider__title {
        font-size: 26px;
        margin-bottom: 10px;
    }

    .homepage-slider__desc {
        font-size: 15px;
        margin-bottom: 20px;
    }

    /* Telefonda tam genişlik CTA standart ve dokunma hedefi olarak daha iyi. */
    .homepage-slider__content .homepage-slider__btn {
        display: flex;
        width: 100%;
    }

    .homepage-slider__body::before,
    .homepage-slider__slide--right .homepage-slider__body::before {
        background: linear-gradient(180deg, rgba(9, 20, 39, 0.55) 0%, rgba(9, 20, 39, 0.78) 100%);
    }

    .homepage-slider__slide--dark-text .homepage-slider__body::before,
    .homepage-slider__slide--dark-text.homepage-slider__slide--right .homepage-slider__body::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.84) 100%);
    }

    .homepage-slider__pagination { bottom: 16px; }
}

/* Hareket azaltma tercihi: geçiş animasyonu kapanır. */
@media (prefers-reduced-motion: reduce) {
    .homepage-slider__swiper .swiper-wrapper {
        transition-duration: 0ms !important;
    }
}