/*
 * Farmart overrides.
 *
 * 1) Brand colors: Metronic/KtUI theme variables -> agriculture green.
 *    Same values are set in metronic/src/css/config.ktui.css for future builds.
 *
 * 2) Utility fallbacks: wwwroot/assets/css/styles.css is the prebuilt Metronic
 *    bundle (Tailwind only emits classes used by the demo pages). The classes
 *    below are used by Farmart views but missing from that bundle. Once the
 *    CSS is rebuilt from metronic/ (`npm install && npm run build`, which also
 *    scans ../Views), this section can be deleted.
 */

/* ---- 1) Brand colors ----
 * Primary   : logo amber (#ffb000). Too light for white text, so buttons/badges use dark text
 *             and text-level uses (links, icons, .text-primary) use the darker --primary-strong.
 * Secondary : logo gray, already covered by Metronic's --mono / --foreground.
 * Tertiary  : green (stock/patent badges).
 */
:root {
    /* Metronic teması Inter kullanır (customization/theming.md); hazır styles.css sistem fontunda kaldığı için burada.
       @font-face tanımları _Layout.cshtml'de (sitede barındırılan woff2). */
    --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --primary: #ffb000;
    --primary-foreground: oklch(21% 0.006 285.885);   /* zinc-900 */
    --primary-strong: oklch(55.5% 0.163 48.998);      /* amber-700, 5:1 on white */
    --tertiary: oklch(52.7% 0.154 150.069);           /* green-700 */
    --tertiary-foreground: oklch(1 0 0);
    --tertiary-soft: oklch(98.2% 0.018 155.826);      /* green-50 */
}

.dark {
    --primary: #ffb000;
    --primary-foreground: oklch(21% 0.006 285.885);
    --primary-strong: oklch(87.9% 0.169 91.605);      /* amber-300 */
    --tertiary: oklch(52.7% 0.154 150.069);
    --tertiary-foreground: oklch(1 0 0);
    --tertiary-soft: oklch(26.6% 0.065 152.934);      /* green-950 */
}

/* Amber text on white is unreadable; text-level primary uses the strong shade. */
.text-primary,
.kt-link {
    color: var(--primary-strong);
}

@media (hover: hover) {
    .hover\:text-primary:hover {
        color: var(--primary-strong);
    }
}

/* Line tabs: amber stays as the active underline, the active/hovered label is dark (amber text is 1.8:1 on white). */
.kt-tabs-line .kt-tab-toggle.active {
    color: var(--foreground);
}

@media (hover: hover) {
    .kt-tabs-line .kt-tab-toggle:hover {
        color: var(--foreground);
    }
}

.bg-tertiary { background-color: var(--tertiary); }
.border-tertiary { border-color: var(--tertiary); }
.text-tertiary { color: var(--tertiary); }
.text-tertiary-foreground { color: var(--tertiary-foreground); }
.bg-tertiary\/10 { background-color: color-mix(in oklab, var(--tertiary) 10%, transparent); }

/* Logo has dark-gray text; give it a light plate in dark mode. */
.dark .farmart-logo {
    background-color: #fff;
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
}

/* Homepage hero: white card with a yellow wave along the bottom. */
.home-hero {
    position: relative;
    background-color: var(--background);
    border-color: color-mix(in oklab, var(--primary) 35%, transparent);
}

.home-hero > .kt-card-content {
    position: relative;
    z-index: 1;
}

.home-hero-wave {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    width: 100%;
    height: 96px;
    color: var(--primary);
    pointer-events: none;
}

[dir="rtl"] .home-hero-wave {
    transform: scaleX(-1);
}

/* Keep the buttons clear of the wave when text and image sit side by side. */
@media (min-width: 640px) {
    .home-hero > .kt-card-content {
        padding-bottom: 72px;
    }
}

@media (max-width: 639px) {
    .home-hero-wave {
        height: 64px;
    }
}

/* Anchor targets land below the sticky header. */
#urun-videosu,
#uyumlu-parcalar {
    scroll-margin-top: 90px;
}

/* ---- 2) Utility fallbacks ---- */
@layer utilities {
    .footer { display: block; }
    .w-fit { width: fit-content; }
    .line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
    .w-\[260px\] { width: 260px; }
    .h-\[200px\] { height: 200px; }
    .h-\[420px\] { height: 420px; }
    .w-\[40\%\] { width: 40%; }
    .max-w-\[900px\] { max-width: 900px; }
    .max-w-\[960px\] { max-width: 960px; }
    .h-\[320px\] { height: 320px; }
    .h-0\.5 { height: calc(var(--spacing) * 0.5); }
    .w-px { width: 1px; }
    .mt-1\.5 { margin-top: calc(var(--spacing) * 1.5); }
    .gap-x-9 { column-gap: calc(var(--spacing) * 9); }
    .gap-y-3 { row-gap: calc(var(--spacing) * 3); }
    .bg-muted\/60 { background-color: color-mix(in oklab, var(--muted) 60%, transparent); }
    .-top-1\.5 { top: calc(var(--spacing) * -1.5); }
    .-end-1\.5 { inset-inline-end: calc(var(--spacing) * -1.5); }
    .-mt-2 { margin-top: calc(var(--spacing) * -2); }
    .rounded { border-radius: 0.25rem; }
    .max-w-\[640px\] { max-width: 640px; }
    .min-h-\[90px\] { min-height: 90px; }
    .bg-accent\/40 { background-color: color-mix(in oklab, var(--accent) 40%, transparent); }
    .border-destructive\/30 { border-color: color-mix(in oklab, var(--destructive) 30%, transparent); }
    .w-\[160px\] { width: 160px; }
    .max-w-\[460px\] { max-width: 460px; }
    .min-h-0 { min-height: 0; }
    .py-16 { padding-block: calc(var(--spacing) * 16); }
    .h-\[360px\] { height: 360px; }
    .min-h-\[140px\] { min-height: 140px; }
    .mt-0\.5 { margin-top: calc(var(--spacing) * 0.5); }
    .leading-7 { line-height: 1.75rem; }
    .bg-destructive\/10 { background-color: color-mix(in oklab, var(--destructive) 10%, transparent); }
    .inset-0 { inset: 0; }
    .opacity-70 { opacity: 0.7; }
    .max-w-\[1100px\] { max-width: 1100px; }
    .max-h-\[80vh\] { max-height: 80vh; }
    .top-\[3\%\] { top: 3%; }
    .top-\[5\%\] { top: 5%; }
    .min-h-\[200px\] { min-height: 200px; }
    .cursor-zoom-in { cursor: zoom-in; }
    .pointer-events-none { pointer-events: none; }
    .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .p-1 { padding: calc(var(--spacing) * 1); }
    .start-4 { inset-inline-start: calc(var(--spacing) * 4); }
    .max-w-\[520px\] { max-width: 520px; }
    .top-1\.5 { top: calc(var(--spacing) * 1.5); }
    .top-2\.5 { top: calc(var(--spacing) * 2.5); }
    .start-2\.5 { inset-inline-start: calc(var(--spacing) * 2.5); }
    .end-1\.5 { inset-inline-end: calc(var(--spacing) * 1.5); }
    .mt-10 { margin-top: calc(var(--spacing) * 10); }
    .p-6 { padding: calc(var(--spacing) * 6); }
    .object-contain { object-fit: contain; }
    .object-cover { object-fit: cover; }
    .leading-tight { line-height: 1.25; }
    .text-white\/80 { color: rgb(255 255 255 / 0.8); }

    .hover\:underline:hover { text-decoration-line: underline; }
    .hover\:bg-white\/90:hover { background-color: rgb(255 255 255 / 0.9); }
    .hover\:border-primary\/40:hover { border-color: color-mix(in oklab, var(--primary) 40%, transparent); }
    .hover\:shadow-sm:hover { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
    .hover\:\[\&_i\]\:text-destructive:hover i { color: var(--destructive); }

    .dark .dark\:inline { display: inline; }

    @media (width >= 40rem) {
        .sm\:flex { display: flex; }
        .sm\:inline { display: inline; }
        .sm\:block { display: block; }
        .sm\:w-\[320px\] { width: 320px; }
        .sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
        .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .sm\:col-span-2 { grid-column: span 2 / span 2; }
    }

    @media (width >= 64rem) {
        .lg\:gap-8 { gap: calc(var(--spacing) * 8); }
        .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .lg\:text-base { font-size: var(--text-base); line-height: 1.5; }
        .lg\:h-10 { height: calc(var(--spacing) * 10); }
        .lg\:p-6 { padding: calc(var(--spacing) * 6); }
        .lg\:items-start { align-items: flex-start; }
        .lg\:text-3xl { font-size: var(--text-3xl); line-height: 2.25rem; }
        .lg\:text-lg { font-size: var(--text-lg); line-height: 1.75rem; }
        .lg\:w-\[380px\] { width: 380px; }
    }

    @media (width >= 80rem) {
        .xl\:flex { display: flex; }
        .xl\:col-span-2 { grid-column: span 2 / span 2; }
        .xl\:sticky { position: sticky; }
        .xl\:top-\[90px\] { top: 90px; }
    }
}

/* Header arama önerileri (wwwroot/js/site.js). */
.farmart-search-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    inset-inline: 0;
    z-index: 50;
    max-height: 70vh;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--background);
    box-shadow: 0 16px 40px -12px rgb(0 0 0 / 0.18);
    padding: 0.375rem;
}

.farmart-search-panel.hidden { display: none; }

.farmart-search-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.farmart-search-item:hover,
.farmart-search-item.is-active,
.farmart-search-all.is-active {
    background: var(--accent);
}

.farmart-search-item img {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 0.5rem;
    border: 1px solid var(--border);
    background: #fff;
}

.farmart-search-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    flex-grow: 1;
}

.farmart-search-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mono);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.farmart-search-meta {
    font-size: 0.75rem;
    color: var(--secondary-foreground);
}

.farmart-search-price {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mono);
    white-space: nowrap;
}

.farmart-search-all {
    display: block;
    margin-top: 0.25rem;
    border-top: 1px solid var(--border);
    border-radius: 0 0 0.5rem 0.5rem;
    padding: 0.625rem 0.5rem;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary-strong);
}

.farmart-search-empty {
    padding: 1rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--secondary-foreground);
    text-align: center;
}

/* Ödeme yöntemi seçenekleri (Views/Checkout/Index). */
.farmart-pay-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

.farmart-pay-option:has(input:checked) {
    border-color: var(--primary);
    background: color-mix(in oklab, var(--primary) 8%, transparent);
}

/* Aramada ürün adının eşleşen kısmı. */
.farmart-search-name b { font-weight: 700; }
.farmart-search-meta b { font-weight: 700; color: var(--mono); }

/* RTL (ar): Metronic mantıksal sınıflar (ms/me/ps/pe/start/end) yönü kendisi çevirir;
   yön bildiren ok ikonları ise elle aynalanır. */
[dir="rtl"] .ki-right,
[dir="rtl"] .ki-left,
[dir="rtl"] .ki-arrow-right,
[dir="rtl"] .ki-arrow-left {
    display: inline-block;
    transform: scaleX(-1);
}

/* Sipariş sorgulama formu (ana sayfa, /siparis-sorgula): dar ekranda alt alta, sm ve üstünde numara | e-posta | düğme. */
.farmart-lookup-form {
    display: grid;
    gap: 0.75rem;
    align-items: start;
}
@media (min-width: 640px) {
    .farmart-lookup-form {
        grid-template-columns: 1fr 1fr auto;
    }
}