/* ============================================================
   Findik theme bridge
   Brand colors + shared component styles so the existing
   (Bootstrap-based) page bodies render correctly under the
   theme layout (_Layout.cshtml).
   ============================================================ */
:root {
    --bs-primary: #3D7A1A;
    --bs-primary-rgb: 61, 122, 26;
    --bs-link-color: #3D7A1A;
    --bs-link-hover-color: #2E6012;
    --secondary-color: #7B4219;
    --accent-color: #C8975A;
    --cream-bg: #FAF7F2;
    --warm-beige: #F0E8DC;
}

/* Bootstrap primary buttons -> brand green */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #2E6012;
    --bs-btn-hover-border-color: #2A5510;
    --bs-btn-active-bg: #2A5510;
    --bs-btn-active-border-color: #1E3D0C;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: color-mix(in srgb, var(--bs-primary) 72%, #ffffff 28%);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: #2E6012;
    --bs-btn-active-border-color: #2E6012;
    --bs-btn-active-color: #fff;
}

a { color: var(--bs-link-color); }
a:hover { color: var(--bs-link-hover-color); }

.btn:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: color-mix(in srgb, var(--bs-primary) 55%, #ffffff 45%);
    box-shadow: 0 0 0 0.25rem rgba(61, 122, 26, 0.18);
}
.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }

/* (Note: .section-title is intentionally left to the theme so
   breadcrumb white-color titles keep working.) */

/* Category / option pills */
.cat-pill {
    background: #fff;
    color: #5A4A3A;
    border-radius: 50px;
    padding: 8px 20px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s;
    border: 1px solid #DDD5C8;
    display: inline-block;
}
.cat-pill:hover, .cat-pill:focus-visible, .cat-pill.active {
    background: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
}

/* Product card (used by cart/wishlist/account suggestion grids) */
.product-card {
    border: 1px solid #DDD5C8;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    background: #fff;
}
.product-card:hover {
    transform: translateY(-3px);
    border-color: #A8C890;
    box-shadow: 0 14px 30px rgba(61, 122, 26, 0.13);
}
.product-card .card-img-top { height: 220px; object-fit: cover; background: var(--warm-beige); }
.product-card .product-name {
    font-weight: 600; font-size: 0.95rem; color: #1A0F05; text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-card .product-name:hover { color: var(--bs-primary); }
.product-card .product-price { font-size: 1.2rem; font-weight: 700; color: var(--secondary-color); }
.product-card .old-price { text-decoration: line-through; color: #9E8E80; font-size: 0.85rem; margin-left: 6px; }
.product-card .badge-stock { position: absolute; top: 12px; left: 12px; }
.no-img {
    background: #f1f5f9; height: 220px; display: flex; align-items: center;
    justify-content: center; color: #94a3b8; font-size: 3rem;
}

/* Product gallery thumbnails */
.thumb-btn {
    width: 72px; height: 72px; padding: 0; border-radius: 10px; overflow: hidden;
    border: 2px solid #e5e7eb; background: #fff; cursor: pointer; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center; position: relative;
}
.thumb-btn img { width: 100%; height: 100%; object-fit: cover; }
.thumb-btn.active { border-color: var(--bs-primary); }
.thumb-btn .bi { font-size: 1.4rem; color: #64748b; }

/* Variant family swatches */
.variant-swatches { min-height: 0; }
.variant-swatch-pill {
    display: inline-block; padding: 3px 12px; border: 1px solid #DDD5C8; border-radius: 20px;
    font-size: 12px; color: #091638; text-decoration: none; line-height: 1.6;
}
.variant-swatch-pill:hover, .variant-swatch-pill.active {
    background: var(--bs-primary); color: #fff; border-color: var(--bs-primary);
}
.variant-swatch-pill.out-of-stock { opacity: 0.45; }
.variant-swatch-more { font-size: 12px; color: #64748b; padding: 3px 6px; }

/* Inner-page header: white menu + top bar over the dark breadcrumb hero
   (the theme's natural look for transparent-header pages). Triggered by
   ViewData["HeaderOnDark"] = true in the page. */
.findik-header-on-dark .ltn__main-menu > ul > li > a { color: #fff; }
.findik-header-on-dark .ltn__main-menu > ul > li > a:hover { color: #84b62c; }
.findik-header-on-dark .ltn__header-top-area,
.findik-header-on-dark .ltn__header-top-area a,
.findik-header-on-dark .ltn__top-bar-menu ul li a,
.findik-header-on-dark .ltn__social-media ul li a,
.findik-header-on-dark .ltn__drop-menu .active-currency { color: #fff; }
.findik-header-on-dark .ltn__header-top-area { border-bottom-color: rgba(255, 255, 255, 0.15); }

/* Subtle dark backing behind the transparent header so the white logo/menu
   stay legible over bright hero images, without turning the header into a
   solid bar. */
.findik-header-on-dark.ltn__header-transparent {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.25) 60%, rgba(0, 0, 0, 0) 100%);
}

/* No shadow under the header — including the theme's blue-tinted one that
   appears once the middle bar sticks to the top on scroll. */
.ltn__header-area,
.ltn__header-middle-area,
.ltn__header-middle-area.sticky-active {
    box-shadow: none;
}

/* ============================================================
   Header band: a full-bleed stripe running through the vertical centre
   of the header's middle row. The logo is taller than the band, so it
   straddles it and the band reads as passing behind the header content.
   The search / user / cart options are the theme's 50px white boxes, so
   they stay as white pills on the band.
   ============================================================ */
.ltn__header-middle-area {
    position: relative;
}
.ltn__header-middle-area::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 88px;
    transform: translateY(-50%);
    background: #9D6942;
    z-index: 0;
}
/* Keep the logo / menu / options above the band (the row is already
   position: relative in the theme). */
.ltn__header-middle-area > .container > .row,
.ltn__header-middle-area > .container-fluid > .row {
    z-index: 1;
}
/* Menu links sit directly on the band, so they go white on every page
   (this also covers the light home-page header). */
.ltn__header-middle-area .ltn__main-menu > ul > li > a {
    color: #fff;
}
.ltn__header-middle-area .ltn__main-menu > ul > li > a:hover {
    color: #EBD5C2;
}
/* Below xl the menu collapses and the row wraps (logo on one line, the
   option buttons on the next), so a centred fixed-height band would cut
   between them. Let it fill the whole middle area instead, wrapping the
   logo and the buttons together. */
@media (max-width: 1199px) {
    .ltn__header-middle-area::before {
        top: 0;
        height: 100%;
        transform: none;
    }
}

/* Cart / checkout order summary rows */
.order-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.order-summary-row .order-summary-name { min-width: 0; flex: 1 1 auto; }
.order-summary-row .order-summary-price { flex-shrink: 0; white-space: nowrap; }

/* Brand logo sizing: logo-defne.png is 255x190 (tall). The theme leaves
   .site-logo img unconstrained, so it rendered ~190px tall and overlapped the
   hero slider. Constrain to a sensible header height while keeping ratio. */
.site-logo img {
    max-height: 100px;
    width: auto;
    height: auto;
}
@media (max-width: 991px) {
    /* Mobile: bigger logo, and trim the theme's oversized header padding /
       logo-wrap margin (margin: 10px 0 30px) that left big empty gaps above
       and below the logo. */
    .site-logo img { max-height: 88px; }
    .ltn__header-5 .ltn__header-middle-area {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .ltn__header-5 .site-logo-wrap {
        margin: 4px 0 8px !important;
    }
}

/* Product card hover actions: the eye is an <a> (styled round/filled by
   the theme), but the cart and wishlist actions are <button>s inside a <form>,
   which the theme's `li a` rules never reach — so they rendered off-size and
   mis-aligned. Make the form + button fill the 50x50 cell exactly like the
   <a>, so all three cells match. */
.product-hover-action li form {
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
    height: 100%;
}
.product-hover-action li button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background-color: var(--white, #fff);
    color: inherit;
    font-weight: 700;
    cursor: pointer;
}
.product-hover-action li:hover button {
    background-color: var(--ltn__secondary-color);
    color: var(--white, #fff);
}
/* product-item-3 renders each action as a separate circle. The theme only
   styled the <a> (eye), so the <form>/<button> cells (cart, wishlist) came out
   a different size/shape — the middle one looked bigger. Force all three cells
   AND their inner a/form/button to the exact same box so the circles match. */
.ltn__product-item-3 .product-hover-action li {
    width: 46px;
    height: 46px;
    line-height: 46px;
    border-right: 0; /* separate circles: no divider line */
    box-sizing: border-box;
}
.ltn__product-item-3 .product-hover-action li a,
.ltn__product-item-3 .product-hover-action li form,
.ltn__product-item-3 .product-hover-action li button {
    box-sizing: border-box;
    width: 46px;
    height: 46px;
    min-width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    line-height: 1;
    border: 0;
    border-radius: 50%;
    background-color: var(--white, #fff);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.ltn__product-item-3 .product-hover-action li a:hover,
.ltn__product-item-3 .product-hover-action li:hover button {
    background-color: var(--ltn__secondary-color);
    color: var(--white, #fff);
}

/* Shop grid AJAX loading state: a slim top progress bar + centered spinner
   over the results while a sort / price / filter request is in flight. */
.shop-loading {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.6);
    display: none;
}
.shop-loading.active {
    display: block;
}
.shop-loading-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 40%;
    background: var(--bs-primary, #3D7A1A);
    border-radius: 3px;
    animation: dfShopBar 1.1s ease-in-out infinite;
}
@keyframes dfShopBar {
    0% { left: -40%; width: 40%; }
    50% { width: 55%; }
    100% { left: 100%; width: 40%; }
}
.shop-loading-spinner {
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    color: var(--bs-primary, #3D7A1A);
}

/* Header user-menu logout: render the POST button like the other menu links */
.user-menu-logout-form { margin: 0; line-height: 1; }
.user-menu-logout-form button {
    background: none; border: 0; padding: 0; margin: 0;
    font: inherit; color: inherit; cursor: pointer; text-align: left; width: 100%;
}
.ltn__drop-menu ul li ul li:hover .user-menu-logout-form button { color: var(--ltn__secondary-color); }

/* My-account sidebar: render the POST logout as a nav item matching .nav a */
.ltn__tab-menu-list .nav .account-logout-form { padding: 0; margin: 0; }
.ltn__tab-menu-list .nav .account-logout-form button {
    display: flex; justify-content: space-between; align-items: center;
    width: 100%; padding: 15px 20px; background: none; border: 0;
    border-bottom: 1px solid var(--border-color-1, #ededed);
    font: inherit; color: inherit; cursor: pointer; text-align: left;
}
.ltn__tab-menu-list .nav .account-logout-form button:hover { color: var(--ltn__secondary-color); }
.ltn__myaccount-tab-content-inner { background: #fff; padding: 30px; border: 1px solid var(--border-color-9, #ededed); }

/* type="tel" — the theme's CSS covers text/email/password/number but not tel */
.ltn__form-box input[type="tel"],
.input-item input[type="tel"],
.ltn__checkout-single-content input[type="tel"] {
    height: 65px;
    border: 2px solid var(--border-color-1, #f1f1f1);
    border-radius: 0;
    padding: 0 20px;
    width: 100%;
    font-size: 15px;
    color: var(--ltn__paragraph-color, #5C727D);
    background: #fff;
    outline: none;
    transition: border-color .3s;
    display: block;
}
.ltn__form-box input[type="tel"]:focus,
.input-item input[type="tel"]:focus,
.ltn__checkout-single-content input[type="tel"]:focus {
    border-color: var(--ltn__secondary-color, #ff5d3c);
    outline: none;
}

/* Native <select> after nice-select destroy (city/district cascade, saved-address selector) */
.input-item select {
    height: 65px;
    border: 2px solid var(--border-color-1, #f1f1f1) !important;
    border-radius: 0 !important;
    padding: 0 40px 0 20px !important;
    font-size: 15px;
    color: var(--ltn__paragraph-color, #5C727D);
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C727D' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 18px center !important;
    cursor: pointer;
    transition: border-color .3s;
}
.input-item select:focus {
    border-color: var(--ltn__secondary-color, #ff5d3c) !important;
    outline: none;
    box-shadow: none;
}

/* Uniform product card images: some uploads are square, some are wide/tall.
   Without this, a landscape image makes its whole card taller than its
   siblings in the same grid row (home grid, shop grid, related products). */
.ltn__product-item .product-img img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* Real rating count shown next to the star icons (product cards, detail page). */
.product-ratting {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.product-ratting .rating-count {
    font-size: 12px;
    color: #9E8E80;
}

/* Clickable 1-5 star rating input (product review form). Radios are placed
   5->1 in the DOM and reversed with flex so CSS sibling selectors can fill
   stars up to the hovered/checked one while still displaying 1->5 visually. */
.df-star-rating-input {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
}
.df-star-rating-input input {
    display: none;
}
.df-star-rating-input label {
    font-size: 26px;
    color: #DDD5C8;
    cursor: pointer;
    transition: color .15s;
}
.df-star-rating-input input:checked ~ label,
.df-star-rating-input label:hover,
.df-star-rating-input label:hover ~ label {
    color: #f0ad4e;
}

.df-review-item {
    border-bottom: 1px solid var(--border-color-9, #ededed);
    padding: 18px 0;
}
.df-review-item:first-child {
    padding-top: 0;
}
.df-review-item .product-ratting {
    margin: 6px 0;
}

/* Product detail: hover-to-zoom on the main image (magnifier-style). The
   image scales up in place, panning to follow the cursor; the frame clips
   the overflow so it never breaks the layout. Only applies on pointers that
   support hover (skips touch, where the tap should just open the lightbox). */
@media (hover: hover) {
    .ltn__shop-details-large-img .single-large-img {
        overflow: hidden;
        cursor: zoom-in;
    }
    .ltn__shop-details-large-img .single-large-img img {
        transition: transform 0.1s ease-out;
        will-change: transform;
    }
    .ltn__shop-details-large-img .single-large-img.df-zoomed img {
        transform: scale(2.2);
    }
}

/* ============================================================
   Home hero: peek carousel. The centre slide is large with rounded
   corners; the previous/next slides peek in from the left/right.
   Advancing slides everything left so the next slide takes centre
   (see Home/Index.cshtml script). Circular arrows straddle the
   centre slide's left/right edges.

   On the home page the header is put into normal flow (solid) so the
   slider always starts BELOW the menu buttons — never under them, on
   any screen size. Scoped to .df-home so inner pages keep the theme's
   transparent header over their breadcrumb hero.
   ============================================================ */
.df-home .ltn__header-area.ltn__header-transparent {
    position: relative;
    background: var(--section-bg-1, #F7F5EB);
}
.df-card-slider {
    --slide-w: min(64vw, 1180px);
    --slide-h: clamp(320px, 34vw, 440px);
    --pad-top: 46px;
    --pad-bottom: 44px;
    position: relative;
    width: 100%;
    height: calc(var(--pad-top) + var(--slide-h) + var(--pad-bottom));
    overflow: hidden;
    background: var(--section-bg-1, #F7F5EB);
}
.df-card {
    position: absolute;
    top: var(--pad-top);
    left: 50%;
    width: var(--slide-w);
    height: var(--slide-h);
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(155deg, #8A4D1F 0%, #C8975A 100%);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
    /* JS centres slot 0 with translateX(-50%) and shifts neighbours out to
       the sides; hidden until then so they don't flash stacked. */
    transform: translateX(-50%);
    opacity: 0;
    will-change: transform;
}
.df-card:first-child {
    opacity: 1;
}
.df-card-bg {
    position: absolute;
    /* Image fills the whole slide. */
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}
/* Dark gradient over the image so an overlaid title/label stays legible on any
   photo. Opt-in per slide ("Arka plan karartma" in the admin): slides that are
   already finished artwork would just look muddy under it. */
.df-card-bg-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.1) 42%, rgba(0, 0, 0, 0.35) 100%);
}
.df-card-index {
    position: absolute;
    top: 26px;
    left: clamp(28px, 6vw, 90px);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1.5px;
    /* Legible on a bright, un-darkened photo too. */
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
.df-card-label {
    position: absolute;
    top: 26px;
    right: clamp(28px, 6vw, 90px);
    color: rgba(255, 255, 255, 0.92);
    font-size: 15px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
.df-card-title {
    position: absolute;
    bottom: 34px;
    left: clamp(28px, 6vw, 90px);
    /* Keep the headline in the left half: the product shot sits centre-right in
       every slide, and a wider title ran straight across the jar. Longer copy
       wraps onto a second line instead. */
    max-width: min(520px, 50%);
    margin: 0;
    color: #fff;
    text-transform: uppercase;
    font-weight: 800;
    line-height: 1.06;
    font-size: clamp(1.5rem, 3.1vw, 2.4rem);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
/* When the slide has a link button, the title moves up to make room for it. */
.df-card.has-btn .df-card-title {
    bottom: 96px;
}
.df-card-btn {
    position: absolute;
    bottom: 34px;
    left: clamp(28px, 6vw, 90px);
    display: inline-block;
    padding: 11px 28px;
    border-radius: 30px;
    background: #fff;
    color: #3D7A1A;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.25s, color 0.25s;
}
.df-card-btn:hover,
.df-card-btn:focus {
    background: #3D7A1A;
    color: #fff;
}
/* Prev / next controls: black circular buttons straddling the centre
   slide's left & right edges, vertically centred on the slide. */
.df-card-arrow {
    position: absolute;
    top: calc(var(--pad-top) + var(--slide-h) / 2);
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.15rem;
    background: #111;
    border: 0;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    transition: background 0.25s, transform 0.2s;
}
.df-card-prev { left: calc(50% - var(--slide-w) / 2 - 28px); }
.df-card-next { right: calc(50% - var(--slide-w) / 2 - 28px); }
.df-card-arrow:hover,
.df-card-arrow:focus {
    color: #fff;
    background: #3D7A1A;
    transform: translateY(-50%) scale(1.08);
}
@media (max-width: 991px) {
    .df-card-slider {
        --slide-w: 78vw;
    }
    .df-card-prev { left: 10px; }
    .df-card-next { right: 10px; }
}
@media (max-width: 767px) {
    .df-card-slider {
        --slide-w: 88vw;
        --slide-h: clamp(220px, 52vw, 320px);
        --pad-top: 18px;
        --pad-bottom: 22px;
    }
    .df-card-title {
        font-size: clamp(1.2rem, 6vw, 1.8rem);
        max-width: 82%;
    }
    .df-card.has-btn .df-card-title {
        bottom: 84px;
    }
    .df-card-btn {
        padding: 9px 20px;
        font-size: 12px;
    }
    .df-card-index,
    .df-card-label {
        font-size: 13px;
    }
    .df-card-arrow {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }
}


/* ============================================================
   Product description: rendered from Markdown (see ProductDescriptionText),
   so it can contain paragraphs, bold text and lists. The theme styles a bare
   <p>, not these, so give them sane rhythm.
   ============================================================ */
.df-product-description p {
    margin-bottom: 14px;
}
.df-product-description p:last-child {
    margin-bottom: 0;
}
.df-product-description strong {
    color: #1A0F05;
    font-weight: 700;
}
.df-product-description ul,
.df-product-description ol {
    margin: 0 0 14px;
    padding-left: 20px;
    list-style: revert;
}
.df-product-description li {
    margin-bottom: 6px;
}
.df-product-description h1,
.df-product-description h2,
.df-product-description h3,
.df-product-description h4 {
    margin: 20px 0 10px;
    font-size: 1.15rem;
}

/* ============================================================
   Hakkımızda sayfası (Home/About): vizyon-misyon ve iletişim kartları.
   ============================================================ */
.df-about-closing,
.df-vm-closing {
    font-weight: 600;
    color: var(--bs-primary, #3D7A1A);
}
.df-vm-card {
    background: #fff;
    border: 1px solid #E5DED2;
    border-radius: 16px;
    padding: 32px 30px;
    height: 100%;
    margin-bottom: 30px;
}
.df-vm-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary, #3D7A1A);
    color: #fff;
    font-size: 20px;
    margin-bottom: 18px;
}
.df-vm-card h3 {
    margin-bottom: 16px;
}
.df-contact-card {
    background: #fff;
    border: 1px solid #E5DED2;
    border-radius: 16px;
    padding: 30px 24px;
    text-align: center;
    height: 100%;
    margin-bottom: 30px;
}
.df-contact-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F0E8DC;
    color: var(--bs-primary, #3D7A1A);
    font-size: 20px;
    margin: 0 auto 16px;
}
.df-contact-card h6 {
    margin-bottom: 8px;
}
.df-contact-card p {
    margin-bottom: 4px;
}
.df-contact-card a {
    color: inherit;
}
.df-contact-card a:hover {
    color: var(--bs-primary, #3D7A1A);
}

/* ============================================================
   Müşteri sipariş ekranlarındaki kargo bilgi kutusu (_OrderShippingInfo).
   ============================================================ */
.df-shipping-box {
    border: 1px solid #E5DED2;
    border-radius: 12px;
    background: #FAF7F2;
    padding: 16px 18px;
    margin: 18px 0;
}
.df-shipping-title {
    margin: 0 0 12px;
    font-size: 0.95rem;
    color: var(--bs-primary, #3D7A1A);
}
.df-shipping-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px 20px;
}
.df-shipping-label {
    display: block;
    font-size: 0.78rem;
    color: #8A7A6A;
    margin-bottom: 2px;
}
.df-shipping-value {
    display: block;
    font-weight: 600;
    color: #1A0F05;
    font-size: 0.92rem;
}
.df-tracking-no {
    letter-spacing: 0.5px;
    user-select: all;
}
.df-shipping-hint {
    margin: 12px 0 0;
    font-size: 0.8rem;
    color: #8A7A6A;
}

/* Checkout kargo firması logosu (varsa; yoksa onerror ile gizlenir) */
.df-cargo-logo {
    height: 26px;
    width: auto;
    max-width: 90px;
    object-fit: contain;
}

/* Kargo firma ikonu: gerçek logo (varsa) yoksa jenerik baş-harf rozeti */
.df-cargo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    flex: 0 0 40px;
}
.df-cargo-badge {
    display: none; /* logo yüklenemezse onerror ile inline-flex olur */
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Footer ödeme / kargo logo şeritleri */
.df-logo-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}
.df-logo-strip img {
    height: 28px;
    width: auto;
    background: #fff;
    padding: 4px 6px;
    border-radius: 6px;
    object-fit: contain;
}

/* Tek parça ödeme bandı (PSP'nin hazır verdiği görsel) */
.df-logo-strip .df-payment-band {
    height: auto;
    max-width: 100%;
    padding: 6px 8px;
}