/* =============================================
   PRODUCT CARD COMMON STYLES
   Her iki modül (customer_product & category_products) tarafından kullanılır.
   Dosya yolu: catalog/view/css/product_card_common.css
   ============================================= */

/* =========================
   PRODUCT CARD
========================= */
.pc-catCart {
    height: 100%;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}
.pc-catCart:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.pc-cart-width {
    display: grid;
    min-height: 130px;
    align-content: center;
    margin-bottom: -3px !important;
}

/* =========================
   IMAGE
========================= */
.pc-pimg-container {
    position: relative;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}
.pc-pimg {
    width: 100%;
    display: block;
    height: auto;
}

/* =========================
   PRODUCT NAME
========================= */
.pc-product-name {
    margin: 5px 0;
    height: 15px !important;
    font-size: 14px;
    font-weight: 500;
    color: #333 !important;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================
   RATING
========================= */
.pc-rating-container {
    display: flex;
    align-items: center;
    font-size: 11px;
    color: #777;
}
.pc-stars {
    margin-right: 5px;
    font-size: 12px;
    color: #ffc107;
}

/* =========================
   COLOR PALETTE
========================= */
.pc-color-palette {
    display: flex;
    gap: 2px;
    align-items: center;
}
.pc-color-circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
    cursor: pointer;
    transition: transform 0.2s ease;
    filter: saturate(0.7) brightness(1.1);
    text-decoration: none;
}
.pc-color-circle:hover {
    transform: scale(1.2);
}
.pc-color-circle--more {
    background-color: #e0e0e0;
    color: #555;
    font-size: 9px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    text-decoration: none;
}

/* =========================
   VIEW BADGE (satıldı / adet / sectionlar)
========================= */
.pc-view-badge {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 2px;
}

.pc-badge { font-size: 9px; font-weight: 600; white-space: nowrap; }
.pc-badge--sold { color: #ff4500; }
.pc-badge--stock { color: #e00; border-bottom: 2px solid #e00; padding-bottom: 1px; }
.pc-badge--cart { color: #2d7d46; }
.pc-badge--wishlist { color: #e91e63; }
.pc-badge--viewed { color: #666; }

.pc-view-badge i {
    font-size: 10px;
    color: #333;
}
.pc-view-badge b {
    color: #4b4b4b;
}

@media (min-width: 990px) {
    .pc-badge { font-size: 12px; }
    .pc-view-badge {
        padding: 0px 3px;
    }
    .pc-app-price-text {
        font-size: 18px !important;
    }
}

/* =========================
   PRICE
========================= */
.pc-price-container {
    margin-bottom: 10px;
    min-height: 50px;
}
.pc-old-price-kamp {
    display: flex;
    align-items: baseline;
    margin: 0 0 2px 5px;
    font-size: 12px;
    font-weight: 300;
    color: #555;
    position: relative;
}
.pc-app-price-badge {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #000000;
}
.pc-app-price-badge-kampanya {
    font-size: 14px;
    justify-content: space-around;
    color: #fff;
    padding: 2px 15px;
    border-radius: 5px;
    background: linear-gradient(90deg, #115b19, #41924a, #41924a, #115b19) !important;
}
.pc-app-price-text {
    padding: 2px 2px;
    font-size: 15px;
    font-weight: 700;
    color: #006e00;
    border-radius: 5px;
    flex-grow: 1;
    text-align: center;
    background: #5cb95d3d;
}
.pc-special .csp-price {
    font-size: 15px;
}
.pc-kampanya-name {
    color: #fff;
}

.pc-discount-badge {
    background: #ed6700;
    color: white;
    padding: 0px 3px;
    margin: 2px 0px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    border-radius: 5px;
}

.pc-discount-badge-standart {
    background: #ed6700;
    color: white;
}

.pc-discount-badge-premium {
    background: #c99a37;
    color: white;
}

.pc-discount-badge-elite {
    background: #4a4a4a;
    color: #fbe796;
}

@media (min-width: 380px) {
    .pc-app-price-badge {
        font-size: 15px !important;
    }
}

/* =========================
   SEPETE EKLE BUTONU (Görselin sağ altı)
========================= */
.pc-add-cart-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #ffffff94;
    color: black;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.pc-add-cart-btn:hover {
    background: white;
    transform: scale(1.1);
}
.pc-add-cart-btn:active {
    transform: scale(0.95);
}
.pc-add-cart-btn.eklendi {
    background: rgba(40, 167, 69, 0.9);
    color: white;
}

.pc-product-code {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 4;
    display: block;
    max-width: calc(100% - 16px);
    padding: 5px 9px;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,0.78);
    color: #17120f;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.16);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: copy;
    pointer-events: auto;
}

.pc-product-code.is-copied {
    background: rgba(244,251,247,0.9);
    color: #287c4a;
}

/* =========================
   BEDEN SEÇİMİ PANELİ
========================= */
.pc-size-panel-container {
    position: relative;
    background: #fff;
    border-top: 1px solid #eee;
    padding: 12px 10px 10px;
    animation: pcSizePanelSlideUp 0.25s ease-out;
}

@keyframes pcSizePanelSlideUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pc-size-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.pc-size-panel-title {
    font-size: 13px;
    font-weight: 700;
    color: #333;
}
.pc-size-panel-close {
    cursor: pointer;
    font-size: 20px;
    color: #999;
    line-height: 1;
    padding: 0 4px;
    transition: color 0.15s;
}
.pc-size-panel-close:hover {
    color: #333;
}

.pc-size-panel-product-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}
.pc-size-panel-product-info img {
    width: 40px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
}
.pc-size-panel-product-info .pc-sp-name {
    font-size: 12px;
    font-weight: 500;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pc-size-panel-product-info .pc-sp-price {
    font-size: 14px;
    font-weight: 700;
    color: #000;
}

.pc-size-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.pc-size-option {
    min-width: 44px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #ddd;
    border-radius: 6px;
    background: #fff;
    color: #333;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    padding: 0 10px;
    position: relative;
}
.pc-size-option:hover {
    border-color: #333;
}
.pc-size-option.selected {
    border-color: #6c757d;
    background: #6c757d;
    color: #fff;
}
.pc-size-option.out-of-stock {
    border-color: #eee;
    color: #ccc;
    cursor: not-allowed;
    background: #fafafa;
    text-decoration: line-through;
}

.pc-size-panel-cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 0;
    border: none;
    border-radius: 8px;
    background: linear-gradient(90deg,#ff3131,#ff914d);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}
.pc-size-panel-cart-btn:hover {
    background: #333;
}
.pc-size-panel-cart-btn:active {
    transform: scale(0.98);
}
.pc-size-panel-cart-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}
.pc-size-panel-cart-btn.eklendi {
    background: #28a745;
}
.pc-size-panel-cart-btn i {
    font-size: 16px;
}

.pc-size-warning {
    color: #e00;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 6px;
    display: none;
    animation: pcShake 0.3s ease;
}
@keyframes pcShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

/* =========================
   RENK PANELİ (mobil)
========================= */
.pc-color-option-container {
    /* color-option-products-container ile aynı */
}

/* =========================
   TAB HEADER (ortak)
========================= */
.pc-tabbed-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.pc-nav-tabs {
    display: flex;
    gap: 25px;
    margin: 0;
    padding: 5px 0;
    list-style: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: none;
}
.pc-nav-tabs::-webkit-scrollbar { display: none; }

.pc-nav-tabs .pc-nav-link {
    position: relative;
    padding: 5px 0;
    border: none;
    background: transparent;
    color: rgb(107, 107, 106);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}
.pc-nav-tabs .pc-nav-link:hover,
.pc-nav-tabs .pc-nav-link.active {
    color: #0086d9;
}
.pc-nav-tabs .pc-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #0086d9;
    transition: width 0.15s;
}
.pc-nav-tabs .pc-nav-link.active::after {
    width: 100%;
}

/* Dark mode tabs */
.pc-module-dark-bg .pc-nav-tabs .pc-nav-link {
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.pc-module-dark-bg .pc-nav-tabs .pc-nav-link:hover,
.pc-module-dark-bg .pc-nav-tabs .pc-nav-link.active {
    color: #ffffff;
}
.pc-module-dark-bg .pc-nav-tabs .pc-nav-link::after {
    background-color: #ffffff;
}

/* =========================
   VIEW ALL BUTTON (ortak)
========================= */
.pc-view-all-btn {
    padding: 5px 15px;
    font-size: 15px;
    font-weight: bold;
    color: #000;
    border-radius: 20px;
    text-decoration: none;
    transition: background 0.15s;
    white-space: nowrap;
}
.pc-view-all-btn:hover {
    background: rgb(0 0 0 / 20%);
    color: #fff !important;
    text-decoration: none;
}
.pc-module-dark-bg .pc-view-all-btn {
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.pc-module-dark-bg .pc-view-all-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #fff !important;
}

/* =========================
   LOADING (ortak)
========================= */
.pc-loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}
.pc-spinner-border {
    width: 3rem;
    height: 3rem;
    border: 0.25em solid rgba(0,0,0,0.1);
    border-right-color: #000;
    border-radius: 50%;
    animation: pcSpinner 0.75s linear infinite;
}
.pc-module-dark-bg .pc-spinner-border {
    border-color: rgba(255, 255, 255, 0.3);
    border-right-color: #fff;
}
@keyframes pcSpinner {
    to { transform: rotate(360deg); }
}

/* =========================
   ANIMATED TEXT (Sana Özel tab)
========================= */
.pc-animated-text {
    position: relative;
    padding: 5px 0;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    border: none;
    background: linear-gradient(90deg, #ff00be, #ff7a17, #ff00be);
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: pcFlow 3s linear infinite;
}
.pc-animated-text::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #ff00be, #ff7a17);
    transition: width 0.15s;
}
.pc-animated-text.active::after {
    width: 100%;
}
@keyframes pcFlow {
    0%   { background-position: 0%; }
    100% { background-position: 200%; }
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 768px) {
    .pc-size-panel-container {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 1300;
        width: 100%;
    }
}

.cp-module-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px 10px 20px;
    margin: 0;
}
.cp-module-title {
    font-size: 26px;
    font-weight: 700;
    margin: 0;
    color: #000000;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pc-module-dark-bg .cp-module-title {
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.cp-header-view-all {
    font-size: 12px;
    font-weight: 600;
    color: #000;
    padding: 8px 16px;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    background: rgba(0,0,0,0.05);
}
.cp-header-view-all:hover {
    background: rgba(0,0,0,0.15);
    color: #000 !important;
    text-decoration: none;
}
.pc-module-dark-bg .cp-header-view-all {
    color: #ffffff;
    background: rgba(255,255,255,0.2);
}
.pc-module-dark-bg .cp-header-view-all:hover {
    background: rgba(255,255,255,0.3);
    color: #ffffff !important;
}
.cp-module-colorful-bg .cp-module-title {
    background: linear-gradient(90deg, #ff00be, #ff7a17, #ff00be);
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: pcFlow 3s linear infinite;
}

/* Info icon & tooltip */
.cp-campaign-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    color: #666;
    font-size: 12px;
    cursor: help;
    transition: all 0.2s ease;
    margin-left: 5px;
}
.cp-campaign-info-icon:hover {
    background: rgba(0, 0, 0, 0.2);
    color: #000;
    transform: scale(1.1);
}
.pc-module-dark-bg .cp-campaign-info-icon {
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
}
.pc-module-dark-bg .cp-campaign-info-icon:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
}
.cp-campaign-tooltip { position: relative; }
.cp-campaign-tooltip .cp-tooltiptext {
    visibility: hidden;
    width: 250px;
    background-color: #333;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 9999;
    bottom: 125%;
    left: 50%;
    margin-left: -125px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.cp-campaign-tooltip .cp-tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}
.cp-campaign-tooltip:hover .cp-tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* Module container */
.cp-product-module-container {
    opacity: 1;
    visibility: visible;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.cp-tab-pane-css {
    padding: 1px !important;
    padding-bottom: 0px !important;
}

@media (max-width: 768px) {
    .cp-product-module-container {
        background-size: cover !important;
    }
    .cp-module-title {
        font-size: 22px;
    }
    .cp-module-header {
        padding: 10px 10px 5px 20px;
        gap: 10px;
    }
    .cp-header-view-all {
        padding: 7px 12px;
        font-size: 11px;
    }
    .cp-campaign-tooltip .cp-tooltiptext {
        width: 200px;
        margin-left: -100px;
        font-size: 12px;
    }
}

/* Tek fiyat kampanyası (discount_type = d). product_info.tpl kartında yüzde rozetinin
   yerini alır; kartın geri kalan zf- stilleri category/search/special şablonlarında
   ayrı ayrı duruyor, bu rozet üç sayfada da çıktığı için tek kaynakta tutuluyor. */
.zf-flat-price-badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    height: var(--zf-category-discount-height, 24px);
    padding: 0 9px;
    border-radius: 6px;
    background: linear-gradient(180deg, #cfa663 0%, #a97c3f 100%);
    color: #fff;
    font-size: calc(var(--zf-category-discount-size, 12px) - 1px);
    font-weight: 800;
    letter-spacing: .03em;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 1px 1px rgba(74, 51, 19, .32);
    box-shadow: 0 2px 6px rgba(122, 88, 42, .24);
}

/* Dar ekranda .zf-price-left display:contents oluyor; rozet yüzde rozetiyle aynı sırada kalmalı */
@media (max-width: 575px) {
    .zf-flat-price-badge {
        order: 2;
        height: 22px;
        padding: 0 6px;
        font-size: 10px;
        letter-spacing: .01em;
    }
}

/* Renk panelinde tükenmiş renk (.zf-color-options-popover ve mobil .zf-color-sheet).
   Panelin geri kalan stili 5 sayfanın inline <style>'ında KOPYA duruyor; bu etiket
   bilerek yalnızca burada — yeni sınıflar olduğu için kopyaya gerek yok.
   Veri: other_color[].sold_out (model getOtherColorStok). */
.zf-color-option-thumb {
    position: relative;
    display: block;
}

.zf-color-option-soldout {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    padding: 3px 2px;
    transform: translateY(-50%);
    background: rgba(26, 22, 18, 0.72);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .2px;
    text-align: center;
}

.zf-color-option-link.is-soldout img { opacity: .55; }
.zf-color-option-link.is-soldout .zf-color-option-name { color: #9a9088; }

/* ==================== Renk paleti pill (tüm zerafet listeleme kartları) ==================== */
/* Markup tek yerde: product/product_info.tpl · tıklama: .zf-color-options-trigger JS (popover/sheet). */
.zf-color-palette .zf-color-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 3px 9px 3px 7px;
    border: 1px solid #ece2d6;
    border-radius: 999px;
    background: #fff;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.zf-color-palette .zf-color-trigger:hover { border-color: #dcae7e; }

.zf-color-trigger .zf-color-dots { display: inline-flex; align-items: center; }
.zf-color-trigger .zf-color-dots > * + * { margin-left: -5px; }

.zf-color-trigger .zf-color-chip {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid rgba(35, 28, 23, 0.12);
    box-shadow: 0 0 0 1.5px #fff;
    background-size: cover;
    background-position: center;
    filter: saturate(0.6) brightness(1.03);
}

.zf-color-trigger .zf-color-count {
    font-size: 11px;
    font-weight: 700;
    color: #8a7f74;
    padding-left: 7px;
    border-left: 1px solid #ece2d6;
    white-space: nowrap;
}

@media (max-width: 575px) {
    .zf-color-palette .zf-color-trigger { padding: 2px 8px 2px 6px; gap: 5px; }
    .zf-color-trigger .zf-color-chip { width: 13px; height: 13px; }
    .zf-color-trigger .zf-color-count { font-size: 10px; padding-left: 5px; }
}

/* ==================== Kart durum rozetleri + fiyat bloğu (tüm listelemeler) ==================== */
/* Durumlar: OUTLET (show_outlet) · SERİ SONU (discount_type_d) · TEK FİYAT+timer (discount_type 'd') · grade notu. */
/* Sıra: üstü çizili fiyat + %oran → durum rozeti → güncel fiyat → grade notu.
   Sıra DOM'dan gelir; tüm çocuklar order:0 olmalı (aşağıdaki nota bak). */
/* Not: 5 sayfanın inline CSS'inde eski yatay .zf-price-row'dan kalma kurallar var:
   .zf-current-price{margin-left:auto; order:3} · .zf-discount-badge{order:2} ·
   .zf-old-price{text-align:right;flex:0 0 100%;order:1}.
   Dikey .zf-price-block'ta bunlar fiyatı sağa itiyor ve `order:3` onu grade notunun ALTINA
   atıyordu (DOM sırası doğru olsa da). Aşağıdaki .zf-price-block ... seçicileri (0,2,0) o inline
   kuralları (0,1,0) ezer — medya sorgusu özgüllük eklemediği için tüm genişliklerde geçerli.
   order:1/2 zararsız: ikisi de .zf-oldprice-row içinde ve sıraları zaten doğru. */
.zf-price-block { display: flex; flex-direction: column; align-items: stretch; gap: 3px; margin-top: 6px; text-align: left; }
.zf-price-block > * { align-self: stretch; }

.zf-status-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 1px; }

.zf-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 2px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.3px;
    line-height: 1;
}
.zf-status-outlet   { background: #f0e4d0; color: #8a6a3f; }
.zf-status-serisonu { background: #dfeee7; color: #35795f; }
/* Dolu bordo hap — sitenin kendi kiremit ailesi (datespecial fiyat çubuğu, banner).
   Padding/radius burada, .zf-status-badge'in kompakt ölçüsünü YALNIZCA bu rozet için ezer;
   OUTLET / SERİ SONU kompakt kalır. Üç kopya: product_card_common.css · product.tpl ·
   product_detail_ajax.css. */
.zf-status-tekfiyat {
    background: #9a2429;
    color: #fff;
    padding: 8px 18px;
    border-radius: 999px;
}

.zf-card-timer { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: #7a726a; }
.zf-card-timer i { font-size: 12px; }
.zf-timer-val { font-variant-numeric: tabular-nums; }

.zf-oldprice-row { display: flex; align-items: baseline; gap: 8px; }
.zf-price-block .zf-old-price {
    flex: 0 0 auto; width: auto; margin: 0; text-align: left;
    font-size: 15px; font-weight: 500; color: #5c534c;
    line-height: 1.1;
    /* text-decoration: none şart — sayfaların inline `<style>`'ındaki (0,1,0) `.zf-old-price`
       kuralı line-through veriyor; ezilmezse ::after ile birlikte çift çizgi çıkar. */
    text-decoration: none;
    position: relative; display: inline-block;
}
/* Üstü çizgi text-decoration ile DEĞİL pseudo-element ile çizilir: kuruş (.zf-price-frac)
   küçük punto olduğu için tarayıcı o parçanın çizgisini kendi font metriğine göre daha
   aşağıdan basıyor ve çizgi kırılıyordu (2026-09-18). Kopyaları: product_card_common.css
   (listeleme kartı) · product.tpl (tam sayfa detay) · product_detail_ajax.css (hızlı görünüm). */
.zf-price-block .zf-old-price::after {
    content: ''; position: absolute; left: 0; right: 0; top: 50%;
    height: 1px; background: currentColor; pointer-events: none;
}
.zf-price-block .zf-discount-badge {
    display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 5px;
    background: #fdeaea; color: #d34a43; font-size: 12px; font-weight: 700; line-height: 1.4;
}
.zf-price-block .zf-current-price { order: 0; margin-left: 0; text-align: left; font-size: 20px; font-weight: 800; color: #2b2521; line-height: 1.1; }
/* TEK FİYAT: fiyat NORMAL renkte — indirimi dolu kiremit rozet anlatıyor, kırmızı fiyat
   gereksiz vurgu oluyordu (2026-09-01). Kanca duruyor: renk gerekirse tek satırda döner.
   Sayfaların inline .zf-current-price kopyalarını ezmek için (0,3,0) özgüllük gerekir. */
.zf-price-block .zf-current-price.is-tekfiyat { color: #2b2521; }

/* Kuruş + ₺: tam sayının %65'i, AYNI satır/hiza/renk (superscript ve gri YOK — pazar
   tezgahı hissi verir, satır yüksekliğini bozar). 11px tabanı mobilde okunurluk sınırı.
   İşaretlemeyi system/helper/general.php -> zfPriceHtml() yapar. */
.zf-price-frac { font-size: max(0.65em, 11px); }

.zf-grade-note { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 12px; color: #6f665f; line-height: 1.3; }
.zf-grade-note i { font-size: 12px; color: #8a8078; }
.zf-grade-hl { color: #2e9e5b; font-weight: 700; }

@media (max-width: 575px) {
    .zf-price-block .zf-current-price { font-size: 17px; }
    .zf-status-badge { font-size: 13px; padding: 4px 6px; }
    .zf-card-timer, .zf-grade-note { font-size: 9px; }
    .zf-price-block .zf-old-price { font-size: 14px; }
}

/* ==========================================================================
   Personel istatistik tablosu — YALNIZCA oc_setting'teki yetkili üyelere basılır.
   Markup: product_info.tpl sonu · kapı: isStaffViewer() (system/helper/general.php)

   Bilerek nötr/teknik görünür (gri, tabular sayılar): müşteri arayüzüyle karışmasın.
   Sayılar HAM — müşteriye giden "N+ İnceledi" rozeti (×3.1415) bambaşka bir alandır.
   ========================================================================== */
.zf-staff-stats {
    margin: 0 8px 8px;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    background: #f6f7f9;
    overflow: hidden;
    font-family: -apple-system, "Segoe UI", system-ui, Roboto, sans-serif;
}

.zf-staff-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 8px;
    background: #e9edf1;
    border-bottom: 1px solid #dfe3e8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #5b6672;
}

.zf-staff-head i { font-size: 11px; }

.zf-staff-cols {
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #8a949e;
}

.zf-staff-table { width: 100%; border-collapse: collapse; }

.zf-staff-table th,
.zf-staff-table td {
    padding: 3px 8px;
    font-size: 11.5px;
    line-height: 1.35;
    border-top: 1px solid #e6eaee;
}

.zf-staff-table tr:first-child th,
.zf-staff-table tr:first-child td { border-top: 0; }

.zf-staff-table th { text-align: left; font-weight: 500; color: #6b7580; }

.zf-staff-table td {
    width: 30%;
    text-align: right;
    font-weight: 700;
    color: #2b2521;
    font-variant-numeric: tabular-nums;
}

/* Dönüşüm en önemli satır: hafif zeminle ayrılır, renk yüklenmez —
   %0 dönüşümü yeşile boyamak yanıltıcı olurdu. */
.zf-staff-conv th,
.zf-staff-conv td { background: #eef1f4; color: #2b2521; font-weight: 700; }

/* Çoklu görünümde kart gövdesi zaten gizli ve kart 4-6 kolona düşüyor; tablo taşar. */
.zf-view-gallery .zf-staff-stats,
.zf-view-desktop-6 .zf-staff-stats { display: none; }

/* Model kapsamındaki renk dökümü — modelin her rengi ayrı satır, 30g tıklamaya göre sıralı */
.zf-staff-colors { border-top: 1px solid #dfe3e8; background: #fff; }

.zf-staff-subhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 3px 8px;
    background: #f1f4f7;
    border-bottom: 1px solid #e6eaee;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b7580;
}

.zf-staff-subhead i { font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; color: #9aa4ae; }

.zf-staff-colors .zf-staff-table th { font-weight: 500; color: #5b6672; }
.zf-staff-colors .zf-staff-table td { font-weight: 600; color: #4a545e; }

/* Kartın kendi rengi — hangi satırın bu karta ait olduğu görünsün */
.zf-staff-colors .is-current th { font-weight: 700; color: #17120f; box-shadow: inset 2px 0 0 #b8913e; }
.zf-staff-colors .is-current td { font-weight: 700; color: #2b2521; }

/* Renk adının önündeki nokta — hex oc_renkler'den gelir, model tarafında doğrulanır */
.zf-staff-dot {
    display: inline-block;
    width: 8px; height: 8px;
    margin-right: 5px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .18);
    vertical-align: middle;
}

/* Göster/gizle düğmesi — sol altta sabit. Sağ alt bilerek boş bırakıldı:
   orada WhatsApp butonu ve premium toast var. */
.zf-staff-toggle {
    position: fixed;
    left: 14px;
    bottom: 14px;
    width: 100px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid #cfd6dd;
    border-radius: 20px;
    background: #5b6672;
    color: #fff;
    font-family: -apple-system, "Segoe UI", system-ui, Roboto, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(23, 18, 15, .18);
    transition: background .15s ease, color .15s ease;
}

.zf-staff-toggle i { font-size: 13px; }
.zf-staff-toggle:hover { background: #47505a; color: #fff; }

/* Kapalıyken düğme nötrleşir ama görünür kalır — geri açmanın tek yolu o */
.zf-staff-toggle.is-off { background: #fff; color: #6b7580; }
.zf-staff-toggle.is-off:hover { background: #f1f4f7; color: #47505a; }

body.zf-staff-off .zf-staff-stats { display: none !important; }

@media (max-width: 575px) {
    .zf-staff-toggle { padding: 6px 10px; font-size: 11px; }
}

/* Renk durum etiketi — yalnızca aksiyon isteyen renklerde basılır ("normal"de model boş döner).
   Eşikler ve mantık: ModelToolStaffStats::colorStatus() */
.zf-staff-tag {
    display: inline-block;
    margin-left: 5px;
    padding: 0 4px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .02em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

.zf-staff-tag.is-good { background: #e3f3e9; color: #2e9e5b; }
.zf-staff-tag.is-weak { background: #fdf0e2; color: #b5731c; }
.zf-staff-tag.is-dead { background: #fdeaea; color: #d34a43; }
.zf-staff-tag.is-thin { background: #eef1f4; color: #8a949e; }

/* Renk adı + etiket dar kartta alt satıra kayabilsin */
.zf-staff-colors .zf-staff-table th { white-space: normal; }

/* Tek Fiyat Kombin etiket sayfasının ÖZEL kartı (.zf-tfcard) — ortak kartın yerine geçer,
   yalnız o sayfada basılır. Markup: product/tekfiyat_card.tpl
   Düzen (masaüstü): [ana görsel + ♡][parça sütunu] · [3'LÜ KOMBİN rozeti + set fiyatı] · [Kombini Gör]
   Düzen (telefon):  [ana görsel + ♡] / [yatay parça şeridi] · rozet / fiyat · [Kombini Gör]
   Harita: docs/fiyatlandirma/tek-fiyat-kombin.md §4.4 */
.zf-tfcard {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(60, 45, 25, .09);
}

.zf-tfcard-visual {
    display: flex;
    gap: 6px;
    padding: 6px;
    background: linear-gradient(135deg, #fffdf9, #fdf4e6);
}

/* Ana görselin sarmalı: kalp bunun sağ üstüne oturur (ortak karttaki .zf-wishlist-btn ile
   aynı yer). Kalp <a> içine konamayacağı için ayrı sarmal şart. */
.zf-tfcard-main {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-self: flex-start;
    min-width: 0;
}

/* Ana görsel oranı sabit: kartlar aynı yükseklikte dursun ve parça sütunu ona göre uzasın.
   Seti olmayan yedek kartta da aynı oran geçerli — kolon yüksekliği kaymaz. */
.zf-tfcard-hero {
    position: relative;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: 10px;
    background: #f3ede3;
}

@supports not (aspect-ratio: 2 / 3) {
    .zf-tfcard-hero { min-height: 260px; }
}

.zf-tfcard-hero img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zf-tfcard-soldout {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(23, 18, 15, .78);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Parça sütunu: setin tamamı, aralarında altın "+" madalyonu */
/* Boşluk "+" madalyonunun oturacağı kadar: madalyon 22px, boşluğun ORTASINA gelir. */
.zf-tfcard-parts {
    display: flex;
    flex: 0 0 30%;
    flex-direction: column;
    gap: 12px;
    max-width: 118px;
}

/* 🔴 overflow GİZLENMEZ: "+" madalyonu ::before ile bu kutunun İÇİNDE duruyor, kutu kırpılırsa
   madalyon yarım görünür. Köşe yuvarlaması bu yüzden görselin kendisinde. */
.zf-tfcard-part {
    position: relative;
    display: block;
    flex: 1 1 0;
    min-height: 0;
    border: 1px solid rgba(191, 150, 84, .28);
    border-radius: 10px;
    background: #fff;
    color: #8a6a3f;
    text-decoration: none;
}

/* 🔴 `contain`: parça kutusu 2/3'ten kısa, `cover` eteğin boyunu/başörtünün ucunu kesiyordu —
   bu sayfada parçanın TAMAMI görünmeli (etek boyu satın alma kararının kendisi). Dekupe görsel
   beyaz zeminde kayıpsız oturur; dekupesi olmayan üründe kenarda beyaz boşluk kalır (kabul). */
.zf-tfcard-part img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 9px;
    background: #fff;
    object-fit: contain;
}

.zf-tfcard-part.is-current { border-color: #cfa663; cursor: default; }

/* "+" yalnız parçaların ARASINA düşer; dikey sütunda üst kenarın ortasında durur */
.zf-tfcard-part + .zf-tfcard-part::before {
    content: "+";
    position: absolute;
    top: -17px;
    left: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    border-radius: 50%;
    background: linear-gradient(135deg, #cfa663, #a97c3f);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

/* Favori: ortak karttaki .zf-wishlist-btn ile AYNI dil — görselin sağ üstünde 34px yuvarlak.
   Aksiyon satırından çıkarıldı (2026-08-27): müşteri kalbi burada arıyor, alt satır da tek
   başına "Kombini Gör"e kalıyor. */
.zf-tfcard-fav {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(30, 25, 20, .12);
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #5a4a3e;
    font-size: 19px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(44, 35, 28, .08);
    cursor: pointer;
}

.zf-tfcard-fav.is-active { color: #9b3151; }

.zf-tfcard-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    padding: 10px 11px 12px;
}

/* Ürün adı kalktığı için gövde sadece fiyat + düğme: içerik görselin hemen altına yaslanır. */
.zf-tfcard-price {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* 🔴 Rozet dili SİTENİN kendi dili: ortak karttaki .zf-status-badge.zf-status-tekfiyat hapı
   (pembe zemin / kırmızı yazı) burada "3'LÜ KOMBİN" der. Düz yazı denendi (2026-08-27), tutarla
   aynı ağırlıkta kalınca "1.000 TL'lik ürün" diye okunuyordu — sitede 1.000 TL zaten tek ürün
   fiyat kademesi. Haber değeri "3 parça"da; rozet onu taşır, tutar kırmızı ve büyük kalır. */
.zf-tfcard-kombin {
    flex: 0 0 auto;
    font-size: 11.5px;
}

.zf-tfcard-amount {
    color: #d34a43;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

.zf-tfcard-actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

/* Kalp yukarı taşındığı için CTA satırın TAMAMI: sayfanın tek birincil aksiyonu. */
.zf-tfcard-cta {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 8px 12px;
    border-radius: 12px;
    /* 🔴 Tema altını (#cfa663 → #a97c3f) beyaz yazıyla ~2,4:1 kontrast veriyordu; sayfanın tek
       birincil aksiyonu parlaklığı kısık telefonda okunmuyordu. Aynı altın ailesinin koyu ucu
       beyazla 5,0–7,2:1 verir. */
    background: linear-gradient(135deg, #8f682b, #6f4f22);
    box-shadow: 0 1px 4px rgba(80, 58, 24, .28);
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: .02em;
    text-align: center;
    text-decoration: none;
}

/* 🔴 !important: temada global `a:hover { color:#F27A1A !important }` var (custom.css:889) */
.zf-tfcard-cta,
.zf-tfcard-cta:link,
.zf-tfcard-cta:visited,
.zf-tfcard-cta:hover,
.zf-tfcard-cta:focus,
.zf-tfcard-cta:active { color: #fff !important; text-decoration: none; }

@media (hover: hover) {
    .zf-tfcard-cta:hover { background: linear-gradient(135deg, #7d5a24, #5f4319); }
}

.zf-tfcard-cta-arrow { display: inline-flex; font-size: 15px; line-height: 1; }

/* "Kombini Gör" hiçbir kademede bölünmez. */
.zf-tfcard-cta-label { white-space: nowrap; }

/* 🔴 TELEFON: parça sütunu ana görselin ALTINA yatay şerit olur (2026-08-27).
   Sağda dururken kart ~172px'e inince ana görsele ~100px genişlik kalıyordu ve 2/3'lük
   fotoğrafın eninin ~%44'ü kırpılıyordu — mağazanın "fotoğraf öndedir" diline aykırı.
   Yatay şeritte ana görsel tam genişlik + oranını korur, üç parça altında eşit paylaşır. */
@media (max-width: 575px) {
    .zf-tfcard-visual { flex-direction: column; gap: 10px; }
    .zf-tfcard-main { align-self: stretch; }
    .zf-tfcard-parts {
        flex: 0 0 auto;
        /* Boşluk "+" madalyonunun (22px) oturacağı kadar; daha genişi parçaları küçültüyor. */
        flex-direction: row;
        gap: 20px;
        max-width: none;
        padding: 0 2px;
    }
    .zf-tfcard-part { flex: 1 1 0; aspect-ratio: 2 / 3; }
    /* Yatay dizilimde "+" parçaların SOLUNDA, dikey ortada durur. */
    .zf-tfcard-part + .zf-tfcard-part::before {
        top: 50%;
        left: -21px;
        margin: -11px 0 0 0;
    }
    .zf-tfcard-body { gap: 7px; padding: 9px 9px 10px; }
    /* Rozet + tutar tek satıra sığmaz; sitenin kendi düzeni gibi rozet ÜSTTE, tutar altta. */
    .zf-tfcard-price { flex-direction: column; gap: 4px; }
    .zf-tfcard-kombin { font-size: 11px; }
    .zf-tfcard-amount { font-size: 18px; }
    .zf-tfcard-cta { min-height: 40px; font-size: 13.5px; }
}

/* Çoklu görünümde (gallery / desktop-6) gövde gizlenir — ortak kartla aynı kural.
   🔴 Parça şeridi de gizlenir: gövde yokken fiyat ve CTA basılmıyor, geriye etiketsiz bir
   kolaj kalıyordu. O görünümlerde kart yalnız ana görseldir. */
.zf-view-gallery .zf-tfcard-body,
.zf-view-desktop-6 .zf-tfcard-body,
.zf-view-gallery .zf-tfcard-parts,
.zf-view-desktop-6 .zf-tfcard-parts { display: none; }