/**
 * product-detail.css
 *
 * FAZ 1 — Ürün Detay Sayfası Kırmızı Tema + Responsive Foundation
 *
 * BRIEF 1 — ÜRÜN DETAY YENİ TASARIM
 * Scope: .product-detail container (ProductDetail.razor)
 * Breakpoints: 768px (mobil), 1280px (desktop)
 */

/* ==================== ROOT CONTAINER + CSS VARIABLES (Workbench Design) ==================== */
.product-detail {
    /* Workbench CSS Variables (birebir workbench-tasarim.html'den) */
    --ack-page: #F6F7F9;
    --ack-surface: #FFFFFF;
    --ack-surface-soft: #F9FAFB;

    --ack-red: #DC2626;
    --ack-red-dark: #B91C1C;
    --ack-red-soft: #FEE2E2;

    --ack-border: #E5E7EB;
    --ack-border-strong: #D1D5DB;

    --ack-text: #111827;
    --ack-text-muted: #6B7280;
    --ack-text-soft: #9CA3AF;

    --ack-blue: #2563EB;
    --ack-blue-soft: #EFF6FF;
    --ack-blue-border: #BFDBFE;

    --ack-green: #059669;
    --ack-green-soft: #D1FAE5;
    --ack-green-border: #86EFAC;

    --ack-warning: #D97706;
    --ack-warning-soft: #FEF3C7;
    --ack-warning-border: #FCD34D;

    --ack-ai: #7C3AED;
    --ack-ai-soft: #F3E8FF;

    background: var(--ack-page);
    padding: 0 24px 24px;
    min-height: 100dvh;
}

/* ==================== STICKY SHELL (Paket 1A - Workbench) ==================== */
.product-detail__sticky-shell {
    position: sticky;
    top: 48px;
    z-index: 40;
    background: var(--ack-page);
    margin: 0 -24px 8px; /* YZC-030 P-B: 16px → 8px boşluk azaltma */
    padding: 16px 24px 0;
    border-bottom: 1px solid rgba(229, 231, 235, 0.9);
    box-shadow: 0 4px 8px rgba(17, 24, 39, 0.04);
}

.product-detail__content {
    position: relative;
    z-index: 1;
    padding-top: 8px; /* YZC-030 P-B: 16px → 8px tab altı boşluk azaltma */
}

/* ==================== MUDBLAZOR THEME OVERRIDE (Kırmızı) ==================== */
/* Sadece .product-detail içinde geçerli, ProductList etkilenmez */

.product-detail .mud-button-filled.mud-button-filled-primary {
    background-color: var(--ack-red);
    color: white;
}

.product-detail .mud-button-filled.mud-button-filled-primary:hover {
    background-color: var(--ack-red-dark);
}

.product-detail .mud-button-filled.mud-button-filled-primary:disabled {
    background-color: #9CA3AF;
}

.product-detail .mud-chip.mud-chip-color-success {
    background-color: var(--ack-green-light);
    color: var(--ack-green);
}

.product-detail .mud-chip.mud-chip-color-warning {
    background-color: var(--ack-yellow-light);
    color: var(--ack-yellow);
}

.product-detail .mud-chip.mud-chip-color-info {
    background-color: var(--ack-blue-light);
    color: var(--ack-blue);
}

/* ==================== TAB STRIP (Paket 1A - Workbench) ==================== */
.product-tabs-strip {
    display: flex;
    gap: 24px;
    padding: 0 4px 8px 4px;
    border-bottom: 1px solid var(--ack-border);
}

.product-tab {
    background: none;
    border: none;
    padding: 10px 0 12px;
    font-size: 13px;
    color: var(--ack-text-muted);
    cursor: pointer;
    margin-bottom: -1px;
    font-family: inherit;
}

.product-tab--active {
    color: var(--ack-red);
    font-weight: 600;
    border-bottom: 2px solid var(--ack-red);
}

.product-tab:hover:not(.product-tab--active) {
    color: var(--ack-text);
}

/* ==================== LAYOUT GRID (Paket 1A - Workbench 3-column) ==================== */
.ack-prod-detail-grid {
    display: grid;
    grid-template-columns: 220px 1fr 290px;
    gap: 14px;
    margin-top: 24px;
}

.ack-prod-detail-left {
    /* Sol kolon: Görseller, Riskler, Kanal Durumu */
}

.ack-prod-detail-main {
    /* Orta kolon: Hızlı Güncelleme, Değişiklik Önizleme */
}

.ack-prod-detail-right {
    /* Sağ kolon: Fiyatlar, Stok, Sales Excel */
}

@media (max-width: 1199px) {
    .ack-prod-detail-grid {
        grid-template-columns: 200px 1fr 260px;
    }
}

@media (max-width: 991px) {
    .ack-prod-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== PLACEHOLDER CARDS ==================== */
.product-detail .mud-card {
    border-radius: 8px;
}

/* ==================== RESPONSIVE: TABLET (768px - 1279px) ==================== */
@media (max-width: 1279px) and (min-width: 768px) {
    .product-detail {
        padding: 12px 16px;
    }

    .ack-prod-detail-grid {
        grid-template-columns: 240px 1fr;
        gap: 16px;
    }

    .product-tabs-strip .mud-tab {
        font-size: 12px;
        padding: 8px 12px;
    }
}

/* ==================== RESPONSIVE: MOBIL (< 768px) ==================== */
@media (max-width: 767px) {
    .product-detail {
        padding: 8px 12px;
    }

    /* Tek kolon layout */
    .ack-prod-detail-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ack-prod-detail-left {
        position: relative;
        top: 0;
    }

    /* Tab strip kompakt */
    .product-tabs {
        margin-bottom: 12px;
    }

    .product-tabs-strip .mud-tab {
        font-size: 11px;
        padding: 6px 8px;
        min-height: 44px; /* Touch target */
    }

    /* Tab horizontal scroll (eğer sığmazsa) */
    .product-tabs-strip .mud-tabs-toolbar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Touch targets minimum */
    .product-detail button {
        min-height: 44px;
        min-width: 44px;
    }

    .product-detail .mud-button-root {
        min-height: 44px;
    }

    /* Card padding */
    .product-detail .mud-card {
        padding: 12px !important;
    }

    .product-detail .mud-card-content {
        padding: 12px !important;
    }
}

/* ==================== PRINT (bonus) ==================== */
@media print {
    .product-detail {
        background: white;
        padding: 0;
    }

    .product-tabs {
        display: none; /* Tab şeridi print'te görünmez */
    }

    .ack-prod-detail-grid {
        grid-template-columns: 1fr; /* Print'te tek kolon */
    }
}

/* ==================== HEADER V2 (Paket 1A - Workbench) ==================== */
.ack-header-v2 {
    background: var(--ack-surface);
    border: 1px solid var(--ack-border);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 12px;
}

.ack-header-v2__breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
}

.ack-header-v2__back {
    color: var(--ack-red);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
}

.ack-header-v2__back:hover {
    text-decoration: underline;
}

.ack-header-v2__sep {
    color: var(--ack-text-soft);
}

.ack-header-v2__category {
    color: var(--ack-text-muted);
}

.ack-header-v2__name {
    color: var(--ack-text);
    font-weight: 600;
    /* YZC-014 P-F: Uzun ürün adı truncate + tooltip */
    max-width: 600px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

.ack-header-v2__row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ack-chip {
    background: var(--ack-surface);
    border: 1px solid var(--ack-border);
    padding: 5px 11px;
    border-radius: 4px;
    font-size: 11px;
    color: var(--ack-text-muted);
    white-space: nowrap;
}

.ack-chip strong {
    color: var(--ack-blue);
    font-weight: 600;
    margin-right: 3px;
}

.ack-chip--info {
    background: var(--ack-blue-soft);
    border-color: var(--ack-blue-border);
}

.ack-chip--locked {
    background: var(--ack-blue-soft);
    border-color: var(--ack-blue-border);
}

.ack-chip--locked::after {
    content: ' 🔒';
    font-size: 9px;
    opacity: 0.6;
}

.ack-header-v2__actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* AI Analiz butonu gradyan */
.ack-btn-ai {
    background: linear-gradient(135deg, var(--ack-red) 0%, var(--ack-red-dark) 100%) !important;
    color: white !important;
    border: none !important;
}

.ack-btn-ai:hover {
    background: linear-gradient(135deg, var(--ack-red-dark) 0%, var(--ack-red) 100%) !important;
}

/* Aktif rozeti pill */
.ack-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.ack-status-pill--active {
    background: #D1FAE5;
    color: #047857;
}

.ack-status-pill--inactive {
    background: #F3F4F6;
    color: #6B7280;
}

/* Responsive: mobilde wrap */
@media (max-width: 767px) {
    .ack-header-v2 {
        padding: 10px 12px;
    }

    .ack-header-v2__breadcrumb {
        font-size: 13px;
        width: 100%; /* Tam genişlik, altına butonlar düşer */
    }

    .ack-header-v2__breadcrumb-name {
        max-width: 200px; /* Mobilde daha kısa */
    }

    .ack-header-v2__actions {
        width: 100%;
        justify-content: flex-end;
    }

    /* Mobilde buton metinleri kısalt veya sadece ikon */
    .ack-header-v2__actions .mud-button-root {
        min-width: auto;
        padding: 6px 12px;
    }
}

/* ==================== CARD (Paket 1B - Workbench) ==================== */
.ack-card {
    background: var(--ack-surface, #FFFFFF);
    border: 1px solid var(--ack-border, #E5E7EB);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
}

.ack-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.ack-card__icon {
    font-size: 13px;
    color: var(--ack-blue, #2563EB);
}

.ack-card__title {
    color: var(--ack-blue, #2563EB);
    font-size: 13px;
    font-weight: 600;
    margin: 0;
}

.ack-card__head--warning .ack-card__icon,
.ack-card__head--warning .ack-card__title {
    color: var(--ack-warning, #D97706);
}

/* ==================== IMAGES (Paket 1B) ==================== */
.ack-images-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 8px;
}

.ack-image-thumb {
    background: var(--ack-surface-soft, #F9FAFB);
    border: 1px solid var(--ack-border, #E5E7EB);
    border-radius: 6px;
    aspect-ratio: 1;
    overflow: hidden;
}

/* ==================== BUTTONS BLOCK (Paket 1B) ==================== */
.ack-btn-block {
    width: 100%;
    padding: 7px;
    border-radius: 5px;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-family: inherit;
    border: 1px solid;
}

.ack-btn-block--info {
    background: var(--ack-blue-soft, #EFF6FF);
    border-color: var(--ack-blue-border, #BFDBFE);
    color: var(--ack-blue, #2563EB);
}

.ack-btn-block--info:hover {
    background: var(--ack-blue, #2563EB);
    color: white;
}

/* ==================== RISK LIST (Paket 1B) ==================== */
.ack-risk-list,
.ack-channel-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ack-risk-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 0;
    border-bottom: 1px solid #F3F4F6;
}

.ack-risk-item:last-child {
    border-bottom: none;
}

.ack-risk-dot {
    color: var(--ack-warning, #D97706);
    font-size: 9px;
}

.ack-risk-text {
    flex: 1;
    font-size: 12px;
    color: var(--ack-text, #111827);
}

.ack-risk-arrow {
    color: var(--ack-text-soft, #9CA3AF);
    font-size: 12px;
}

/* ==================== CHANNEL LIST (Paket 1B) ==================== */
.ack-channel-item {
    display: flex;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #F3F4F6;
}

.ack-channel-item:last-child {
    border-bottom: none;
}

.ack-channel-name {
    flex: 1;
    font-size: 12px;
    color: var(--ack-text, #111827);
}

.ack-channel-status {
    font-size: 11px;
}

.ack-channel-status--active {
    color: var(--ack-green, #059669);
}

.ack-channel-status--warning {
    color: var(--ack-warning, #D97706);
}

.ack-channel-status--passive {
    color: var(--ack-text-muted, #6B7280);
}

/* ==================== FORM ROWS (Paket 1C) ==================== */
.ack-form-row {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
}

.ack-form-row--1 {
    grid-template-columns: 1fr;
}

.ack-form-row--2 {
    grid-template-columns: 1fr 1fr;
}

.ack-form-row--3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.ack-form-row--4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.ack-form-row--5 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.ack-form-row--2-1-1 {
    grid-template-columns: 2fr 1fr 1fr;
}

@media (max-width: 991px) {
    .ack-form-row--3,
    .ack-form-row--4,
    .ack-form-row--5,
    .ack-form-row--2-1-1 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .ack-form-row--2,
    .ack-form-row--3,
    .ack-form-row--4,
    .ack-form-row--5,
    .ack-form-row--2-1-1 {
        grid-template-columns: 1fr;
    }
}

/* ==================== FIELD (Paket 1C) ==================== */
.ack-field {
    position: relative;
}

.ack-field label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: var(--ack-text-muted, #6B7280);
    margin-bottom: 4px;
}

.ack-field input,
.ack-field select,
.ack-field textarea {
    width: 100%;
    background: white;
    border: 1px solid var(--ack-border-strong, #D1D5DB);
    border-radius: 5px;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--ack-text, #111827);
    font-family: inherit;
    box-sizing: border-box;
}

.ack-field input:focus,
.ack-field select:focus,
.ack-field textarea:focus {
    outline: none;
    border-color: var(--ack-blue, #2563EB);
    box-shadow: 0 0 0 3px var(--ack-blue-soft, #EFF6FF);
}

.ack-input--mono {
    font-family: 'SF Mono', Monaco, Consolas, monospace;
}

.ack-textarea {
    min-height: 60px;
    resize: vertical;
}

.ack-textarea-counter {
    position: absolute;
    right: 10px;
    bottom: 6px;
    font-size: 10px;
    color: var(--ack-text-soft, #9CA3AF);
}

/* ==================== AI BADGE (Paket 1C) ==================== */
.ack-ai-badge {
    background: var(--ack-ai-soft, #F3E8FF);
    color: var(--ack-ai, #7C3AED);
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 3px;
    font-weight: 500;
}

/* ==================== CARD STEP (Paket 1C) ==================== */
.ack-card__step {
    background: var(--ack-blue, #2563EB);
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
}

.ack-card__hint {
    margin-left: auto;
    font-size: 11px;
    color: var(--ack-text-muted, #6B7280);
}

/* ==================== CASCADE INFO (Paket 1C) ==================== */
.ack-cascade-info {
    background: var(--ack-blue-soft, #EFF6FF);
    border: 1px dashed var(--ack-blue-border, #BFDBFE);
    border-radius: 5px;
    padding: 6px 10px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--ack-blue, #2563EB);
}

/* ==================== DIFF TABLE (Paket 1C) ==================== */
.ack-diff-table {
    width: 100%;
    font-size: 12px;
    border-collapse: collapse;
}

.ack-diff-table th {
    color: var(--ack-text-muted, #6B7280);
    font-size: 11px;
    font-weight: 500;
    text-align: left;
    padding: 8px 0;
}

.ack-diff-table td {
    padding: 9px 0;
    border-top: 1px solid #F3F4F6;
}

.ack-diff-old {
    color: var(--ack-text-muted, #6B7280);
}

.ack-diff-new {
    color: var(--ack-text, #111827);
}

.ack-diff-arrow {
    color: var(--ack-text-soft, #9CA3AF);
    padding: 0 6px;
}

.ack-diff-status {
    color: var(--ack-warning, #D97706);
}

.ack-source-badge {
    font-size: 10px;
    padding: 3px 7px;
    border-radius: 3px;
    font-weight: 500;
}

.ack-source-badge--ai {
    background: var(--ack-ai-soft, #F3E8FF);
    color: var(--ack-ai, #7C3AED);
}

.ack-source-badge--excel {
    background: var(--ack-green-soft, #D1FAE5);
    color: var(--ack-green, #059669);
}

.ack-diff-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    margin-top: 4px;
    border-top: 1px solid var(--ack-border, #E5E7EB);
}

.ack-diff-count {
    font-size: 12px;
    color: var(--ack-text-muted, #6B7280);
}

.ack-diff-actions {
    display: flex;
    gap: 8px;
}

/* ==================== BUTTONS (Paket 1C) ==================== */
.ack-btn {
    border: none;
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
}

.ack-btn--primary {
    background: var(--ack-red, #DC2626);
    color: white;
}

.ack-btn--primary:hover {
    background: var(--ack-red-dark, #B91C1C);
}

.ack-btn--ghost {
    background: white;
    border: 1px solid var(--ack-border-strong, #D1D5DB);
    color: var(--ack-text-muted, #6B7280);
}

.ack-btn--ghost:hover {
    background: var(--ack-surface-soft, #F9FAFB);
}


/* ==================== PROTOTYPE BADGE (P0 — 2026-05-06) ==================== */
/* Mock/prototype kartları gerçek veri gibi göstermemek için disabled görünüm */
.ack-card.ack-card--prototype {
    opacity: 0.65;
    position: relative;
    pointer-events: none;
    user-select: none;
}

.ack-card.ack-card--prototype::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 14px,
        rgba(220, 38, 38, 0.04) 14px,
        rgba(220, 38, 38, 0.04) 28px
    );
    pointer-events: none;
    border-radius: inherit;
}

.ack-card__prototype-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    margin-left: auto;
    background: var(--ack-red-soft, #FEE2E2);
    color: var(--ack-red-dark, #B91C1C);
    border: 1px solid var(--ack-red, #DC2626);
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* ==================== STOCK LOCATIONS CARD (Brief 1C) ==================== */
.ack-stock-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.ack-stock-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 12px;
    border-bottom: 1px solid #F3F4F6;
}

.ack-stock-row:last-child {
    border-bottom: none;
}

.ack-stock-location {
    flex: 1;
    color: var(--ack-text, #111827);
    font-family: 'SF Mono', Monaco, Consolas, monospace;
}

.ack-stock-qty {
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    color: var(--ack-text, #111827);
    text-align: right;
}

.ack-stock-label {
    flex: 1;
    color: var(--ack-text-muted, #6B7280);
    font-size: 11px;
}

.ack-stock-summary {
    border-top: 1px solid var(--ack-border, #E5E7EB);
    padding-top: 8px;
    margin-top: 4px;
}

.ack-stock-summary .ack-stock-row {
    border-bottom: none;
    padding: 4px 0;
}

.ack-autocomplete {
    font-size: 12px;
}

.ack-autocomplete .mud-input {
    font-size: 12px;
}

/* Height equalization: match standard input/select height */
.ack-autocomplete .mud-input-control {
    min-height: unset;
}

.ack-autocomplete .mud-input-control-input-container {
    padding: 8px 10px;
}

.ack-autocomplete .mud-input {
    padding: 0;
    line-height: 1.4;
}
/* P-A: Image thumbnail grid */
.ack-image-thumbs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.ack-thumb {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.ack-thumb.active {
    border-color: #1976d2;
}

.ack-thumb:hover {
    opacity: 0.85;
}

/* YZC-013 P-B: Quick Status Bar */
.ack-quick-status-bar {
    display: flex;
    gap: 8px;
    padding: 6px 12px;
    background: #fafafa;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    flex-wrap: wrap;
}

.ack-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 16px;
    font-size: 12px;
    color: #424242;
    text-decoration: none;
    transition: all 0.15s ease;
    cursor: pointer;
}

.ack-status-chip:hover {
    border-color: #1976d2;
    background: #e3f2fd;
    color: #1976d2;
}

.ack-status-chip__icon { font-size: 13px; }
.ack-status-chip__warn {
    color: #f57c00;
    font-weight: 600;
    margin-left: 4px;
}

.ack-status-chip--stock { border-left: 3px solid #4caf50; }
.ack-status-chip--price { border-left: 3px solid #2196f3; }
.ack-status-chip--channel { border-left: 3px solid #9c27b0; }

.ack-risk-indicator {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: #fff3e0;
    color: #e65100;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    margin-left: 8px;
    transition: background 0.15s ease;
}

.ack-risk-indicator:hover {
    background: #ffe0b2;
    text-decoration: none;
}

@media (max-width: 600px) {
    .ack-quick-status-bar { gap: 4px; padding: 4px 8px; }
    .ack-status-chip { font-size: 11px; padding: 3px 8px; }
}

/* YZC-014 P-D: Sticky 2-modlu (geniş ↔ compact) */
.product-detail__sticky-shell {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    transition: all 0.2s ease;
}

/* Compact mod (scroll sonrası) */
.product-detail__sticky-shell.is-compact .ack-header-v2__breadcrumb,
.product-detail__sticky-shell.is-compact .ack-quick-status-bar {
    display: none;
}

.product-detail__sticky-shell.is-compact .ack-header-v2__row {
    /* Compact tek satırlık özet */
    font-size: 13px;
    padding: 4px 12px;
}

.product-detail__sticky-shell.is-compact .ack-product-title-compact {
    display: inline-block;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

/* Compact mod'da görünecek mini info */
.ack-compact-mini-info { display: none; }
.product-detail__sticky-shell.is-compact .ack-compact-mini-info { display: inline; }

/* YZC-014 P-E: Mobile bottom save bar + Save UX metin */
.ack-mobile-save-bar {
    display: none; /* desktop'ta gizli */
}

.ack-save-status-inline {
    display: inline-block;
    font-size: 11px;
    color: #757575;
    margin-right: 8px;
    vertical-align: middle;
}

@media (max-width: 600px) {
    .ack-mobile-save-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 30;
        padding: 8px 16px;
        background: #fff;
        border-top: 1px solid #e0e0e0;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
        align-items: center;
        justify-content: space-between;
    }

    .ack-save-status {
        font-size: 12px;
        color: #424242;
    }

    /* Desktop Kaydet butonu mobile'da gizli */
    .ack-header-save-desktop { display: none !important; }

    /* Sayfa içeriğine bottom padding ekle (bar üstüne yapışmasın) */
    .product-detail__content { padding-bottom: 70px; }

    /* YZC-014 P-F: Ürün adı mobile truncate */
    .ack-header-v2__name {
        max-width: 90vw;
        font-size: 15px;
    }
}

/* YZC-017 P-H: Sticky shell altinda bosluk azalt (UX-4) */
.product-detail__content {
    padding-top: 8px !important;
}
.product-detail__sticky-shell {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* YZC-017 P-H: Form alan yukseklik kuvvetli esitleme (P-G v2) */
.ack-prod-detail-grid .mud-input-control,
.ack-prod-detail-grid .mud-select-input,
.ack-prod-detail-grid .mud-autocomplete-input,
.ack-prod-detail-grid .mud-input-text {
    height: 56px !important;
    min-height: 56px !important;
}

/* Input root container */
.ack-prod-detail-grid .mud-input-root,
.ack-prod-detail-grid .mud-select .mud-input-root {
    height: 56px !important;
}

/* Autocomplete arrow + clear butonlari ayni yukseklik */
.ack-prod-detail-grid .mud-autocomplete .mud-input-adornment,
.ack-prod-detail-grid .mud-select .mud-input-adornment {
    height: 56px;
    align-self: center;
}

/* YZC-017 P-I: Sticky bosluk daha sikiyla kaldir */
.product-detail__sticky-shell {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 1px solid #e0e0e0;
}
.product-detail__sticky-shell .mud-tabs {
    margin-bottom: 0 !important;
}
.product-detail__content {
    padding-top: 4px !important;
    margin-top: 0 !important;
}

/* P-I: Tum form alanlari aynı yukseklik (specific selector) */
.ack-prod-detail-grid .mud-input-control-input-container {
    min-height: 56px !important;
    align-items: center;
}
.ack-prod-detail-grid .mud-input-slot {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

/* ==================== YZC-018 AŞAMA 1: AckFormField Wrapper (UX-5) ==================== */
/* YZC-018 P-A: Form wrapper component — dış DOM kabuğu, iç Mud input'a dokunma */
.ack-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 64px;     /* tüm input'lar için sabit yükseklik */
}

.ack-form-field__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary, #666);
    padding-left: 4px;
}

.ack-form-field__input {
    flex: 1;
    display: flex;
    align-items: center;
}

/* Tüm Mud input'ların dış margin sıfırla */
.ack-form-field__input > .mud-input-control {
    width: 100%;
    margin: 0 !important;  /* sadece dış margin, iç DOM'a dokunma */
}

/* ==================== YZC-041-B HOT-FIX (geçici v2) ==============
   Mud outlined fieldset + slot + input agresif override.
   YZC-042 yapısal refactor sonrası bu blok SİL.
   Hot test kanıt: 13 alan UNIFORM 55px (asimetri sıfır).
   ============================================================== */
.ack-form-field {
  min-height: 0 !important;
}
.ack-form-field__label {
  font-size: 11px !important;
  color: #6B7280 !important;
  margin-bottom: 2px !important;
  padding-left: 0 !important;
  display: block !important;
  line-height: 1.2 !important;
}
.ack-form-field__input,
.ack-form-field__input > .mud-input-control,
.ack-form-field__input .mud-select {
  height: 36px !important;
  min-height: 36px !important;
}
.ack-form-field__input .mud-input-slot,
.ack-form-field__input .mud-input-slot.mud-input-slot-margin-dense {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
}
.ack-form-field__input .mud-input-slot input {
  height: 34px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
}
.ack-form-field__input fieldset.mud-input-outlined-border {
  height: 36px !important;
  top: 0 !important;
  padding: 0 8px !important;
  border-radius: 5px !important;
}
.ack-form-field__input .mud-input-adornment {
  height: 36px !important;
  align-self: center !important;
}
.ack-form-field__input .mud-input-adornment-end button {
  padding: 4px !important;
}
.ack-form-field__input .mud-input-helper-text {
  display: none !important;
}
.ack-form-field__input .mud-input-control-margin-dense {
  margin: 0 !important;
}

/* ==================== YZC-043 — OZ1-5 mobil yan yana ============
   OZ1-5 satırı her viewport'ta 5 kolon yan yana.
   Diğer responsive davranışları (--2-1-1, --3, --2) etkilenmez.
   ============================================================== */
.ack-form-row--5 {
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 4px !important;
}
.ack-form-row--5 .ack-field > label {
  font-size: 10px !important;
  margin-bottom: 2px !important;
}
.ack-form-row--5 .ack-field input {
  padding: 4px 6px !important;
  font-size: 12px !important;
}

/* ==================== YZC-041-D — Native-Look (geçici) ===========
   MudAutocomplete'i Ana Kategori native <select> görünümüne yaklaştır.
   Autocomplete arama davranışı korunur, sadece görsel stil.
   YZC-042 yapısal refactor sonrası bu blok SİL.
   ============================================================== */
.ack-form-field__input .mud-input-slot {
  background: #fff !important;
  border: none !important;
}
.ack-form-field__input fieldset.mud-input-outlined-border {
  border: 1px solid #D1D5DB !important;
  border-radius: 5px !important;
  height: 34px !important;
  top: 0 !important;
}
/* YZC-041-E: input element kendisi .mud-input-slot class'lı */
.ack-form-field__input .mud-input-control,
.ack-form-field__input .mud-input-control.mud-input-control-margin-dense {
  height: 34px !important;
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
}
.ack-form-field__input .mud-input,
.ack-form-field__input .mud-input.mud-input-margin-dense {
  height: 34px !important;
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
}
.ack-form-field__input input.mud-input-slot,
.ack-form-field__input input.mud-input-root {
  height: 30px !important;
  min-height: 30px !important;
  line-height: 30px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  font-size: 12px !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #111827 !important;
}
.ack-form-field__input .mud-icon-button-edge-end {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  padding: 0 !important;
  margin-right: 6px !important;
}
.ack-form-field__input .mud-icon-button-edge-end svg {
  width: 14px !important;
  height: 14px !important;
  color: #6B7280 !important;
}
.ack-form-field__input fieldset.mud-input-outlined-border:hover {
  border-color: #9CA3AF !important;
}

/* ==================== YZC-041-F — Override ez (geçici) ===========
   YZC-017 P-H .ack-prod-detail-grid kuralı (satır 1099-1142) AckFormField
   wrapper içindeki input'ları 56px'e zorluyor. Parent-chain selector ile
   ezilir. YZC-042 yapısal refactor sonrası bu blok SİL.
   ============================================================== */
.ack-prod-detail-grid .ack-form-field__input .mud-input-control,
.ack-prod-detail-grid .ack-form-field__input .mud-input-root,
.ack-prod-detail-grid .ack-form-field__input .mud-input-slot,
.ack-prod-detail-grid .ack-form-field__input .mud-input-control-input-container,
.ack-prod-detail-grid .ack-form-field__input .mud-input {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.ack-prod-detail-grid .ack-form-field__input input.mud-input-slot,
.ack-prod-detail-grid .ack-form-field__input input.mud-input-root {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  line-height: 30px !important;
  padding: 0 12px !important;
  text-align: left !important;
}
.ack-prod-detail-grid .ack-form-field__input .mud-input-adornment {
  height: 30px !important;
}
/* YZC-041-I: Üretici/Paket dropdown içeriği sola yasla (parent flex) */
.ack-prod-detail-grid .ack-form-field__input,
.ack-prod-detail-grid .ack-form-field__input .mud-input,
.ack-prod-detail-grid .ack-form-field__input .mud-input-control,
.ack-prod-detail-grid .ack-form-field__input .mud-input-control-input-container {
  justify-content: flex-start !important;
}
.ack-prod-detail-grid .ack-form-field__input .mud-select {
  justify-content: flex-start !important;
  text-align: left !important;
}

/* ==================== YZC-041-H — Label-input gap fix ===========
   AckFormField wrapper'da label-input arası gap 6px iken Ana Kategori
   native'de 4px. Mehmet ekran kanıtı: "label ile input arası fazla boşluk".
   Çözüm: wrapper gap 2px + label line-height 16px (native ile eşit).
   Net etki: gap 6 → 4 (Ana Kategori ile birebir).
   YZC-042 yapısal refactor sonrası bu blok SİL.
   ============================================================== */
.ack-form-field {
  gap: 2px !important;
}
.ack-form-field__label {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 11px !important;
  line-height: 16px !important;
  color: #6B7280 !important;
}

/* ==================== YZC-041-G — Form satır responsive override ===========
   YZC-017'nin @media (max-width: 991px) 2-kolon davranışı 850-991px arası
   viewport'larda Paket/DateCode'u alt satıra düşürüyordu — Üretici 3. satıra
   atlıyordu. Form satırları tam kolon kalsın, sadece <600px'te tek kolona düş.
   Mehmet onayı (Çarşamba 16:45) — preview 850px'te kanıtlı PASS.
   ============================================================== */
.ack-form-row--2-1-1 {
  grid-template-columns: 2fr 1fr 1fr !important;
  gap: 8px !important;
}
.ack-form-row--3 {
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 8px !important;
}
.ack-form-row--2 {
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}
@media (max-width: 600px) {
  .ack-form-row--2-1-1,
  .ack-form-row--3,
  .ack-form-row--2 {
    grid-template-columns: 1fr !important;
  }
}

/* ==================== YZC-047-A — Üst sticky kompakt ===========
   product-detail__sticky-shell 213px → 180px. Padding/margin sıkıştır,
   chip yüksekliği 28→22, breadcrumb 13px→11px, font sıkıştır.
   Form alanlarına %15 daha alan açar.
   Mehmet onayı (Çarşamba 17:15) — hot test PASS.
   ============================================================== */
.product-detail__sticky-shell {
  padding: 8px 24px 0 !important;
  margin: 0 -24px 4px !important;
}
.ack-header-v2 {
  padding: 8px 16px !important;
}
.ack-header-v2__breadcrumb {
  font-size: 11px !important;
  margin-bottom: 4px !important;
  line-height: 1.3 !important;
}
.ack-header-v2__name {
  font-size: 13px !important;
  font-weight: 600 !important;
}
.ack-header-v2__row {
  gap: 6px !important;
  margin-bottom: 4px !important;
  align-items: center !important;
}
.ack-header-v2__row > .ack-chip,
.ack-header-v2__row > span.ack-chip {
  height: 22px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
}
.ack-quick-status-bar {
  gap: 6px !important;
  margin-top: 4px !important;
}
.ack-status-chip {
  height: 24px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  gap: 4px !important;
}
.ack-status-chip__icon {
  font-size: 12px !important;
}
.ack-status-chip__warn {
  font-size: 10px !important;
}
.ack-header-v2__actions {
  gap: 6px !important;
}
.ack-status-pill {
  height: 22px !important;
  padding: 2px 6px !important;
  font-size: 11px !important;
}

/* ==================== YZC-047-B — Hazırlık Skoru chip ===========
   ack-quick-status-bar başına gelir, 5 kategori tamlık skoru.
   Renk: success (yeşil 80+) / warning (sarı 50-79) / danger (kırmızı <50)
   ============================================================== */
.ack-readiness-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
}
.ack-readiness-chip__icon {
  font-size: 12px;
}
.ack-readiness-chip--success {
  background: #DEF7EC;
  color: #03543F;
  border-color: #BCF0DA;
}
.ack-readiness-chip--warning {
  background: #FEF3C7;
  color: #92400E;
  border-color: #FDE68A;
}
.ack-readiness-chip--danger {
  background: #FEE2E2;
  color: #991B1B;
  border-color: #FECACA;
}

/* ==================== YZC-044 — Ana Resim KURAL 60 standart chip ============
   ProductImagesPanel TitleExtra'da görünür chip.
   ✓ Standart (yeşil) / ⚠ NxN (sarı) / ⊘ Placeholder (gri)
   ============================================================== */
.ack-image-standard-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
  margin-left: 8px;
  border: 1px solid transparent;
}
.ack-image-standard-chip--ok {
  background: #DEF7EC;
  color: #03543F;
  border-color: #BCF0DA;
}
.ack-image-standard-chip--warn {
  background: #FEF3C7;
  color: #92400E;
  border-color: #FDE68A;
}
.ack-image-standard-chip--missing {
  background: #E5E7EB;
  color: #6B7280;
  border-color: #D1D5DB;
}

/* ==================== YZC-037 — Placeholder tab stubs ============
   3 tab read-only mini özet (İçerik & SEO / Fiyat & Stok / Kanal)
   Key-value grid + section başlığı + empty/warn varyantları
   ============================================================== */
.ack-tab-stub-section {
  margin-bottom: 8px;
}
.ack-tab-stub-section > strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #E5E7EB;
}
.ack-tab-stub-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
@media (min-width: 768px) {
  .ack-tab-stub-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4px 24px;
  }
}
.ack-tab-stub-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #F3F4F6;
  font-size: 12px;
  gap: 12px;
}
.ack-tab-stub-row:last-child {
  border-bottom: none;
}
.ack-tab-stub-label {
  color: #6B7280;
  font-weight: 500;
  flex-shrink: 0;
}
.ack-tab-stub-value {
  color: #111827;
  font-weight: 600;
  text-align: right;
  flex: 1;
  font-variant-numeric: tabular-nums;
}
.ack-tab-stub-value--empty {
  color: #9CA3AF;
  font-weight: 400;
  font-style: italic;
}
.ack-tab-stub-value--warn {
  color: #92400E;
  background: #FEF3C7;
  padding: 2px 6px;
  border-radius: 4px;
  flex: 0 0 auto;
}

/* YZC-049-A — Depo / Lokasyon Yönetim Modal (ÜA2 KURAL 87 V3) */
.ack-loc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  overflow: hidden;
}
.ack-loc-table thead th {
  background: #F9FAFB;
  color: #374151;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .3px;
  text-transform: uppercase;
  padding: 10px 8px;
  border-bottom: 1px solid #E5E7EB;
  white-space: nowrap;
}
.ack-loc-table tbody td {
  padding: 8px;
  border-bottom: 1px solid #F3F4F6;
  vertical-align: middle;
}
.ack-loc-table tbody tr:last-child td {
  border-bottom: 0;
}
.ack-loc-table tbody tr:hover {
  background: #F9FAFB;
}
.ack-loc-table input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: #16A34A;
  cursor: pointer;
}
.ack-loc-table .mud-input-control,
.ack-loc-table .mud-select {
  margin: 0;
}
.ack-loc-table .mud-input-slot {
  padding: 4px 8px !important;
  font-size: 13px;
}
.ack-loc-autocomplete {
  min-width: 150px;
}

/* YZC-049-C — Lokasyon Notları Drawer (ÜA2 KURAL 87 V3) */
.ack-loc-note-card {
  background: #fff;
  border-radius: 6px;
  border-left: 3px solid #6b7280;
  padding: 10px 12px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.ack-loc-note-card[data-type="LocationCount"]    { border-left-color: #1976d2; }
.ack-loc-note-card[data-type="LocationWarning"]  { border-left-color: #f59e0b; }
.ack-loc-note-card[data-type="LocationTransfer"] { border-left-color: #2e7d32; }
.ack-loc-note-card[data-type="LocationGeneric"]  { border-left-color: #6b7280; }
.ack-loc-note-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  gap: 8px;
  flex-wrap: wrap;
}
.ack-loc-note-body {
  font-size: 13px;
  color: #1a1a1a;
  line-height: 1.4;
}
.ack-loc-note-meta {
  font-size: 11px;
  color: #999;
  white-space: nowrap;
}
.ack-loc-note-badge {
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  background: #e5e7eb;
  color: #374151;
}
.ack-loc-note-badge--locationcount    { background: #dbeafe; color: #0d47a1; }
.ack-loc-note-badge--locationwarning  { background: #fef3c7; color: #92400e; }
.ack-loc-note-badge--locationtransfer { background: #dcfce7; color: #1b5e20; }
.ack-loc-note-badge--locationgeneric  { background: #e5e7eb; color: #374151; }

/* YZC-050 — Cross-Reference Modal (ÜA2 KURAL 87 V3, minor enhancement) */
.ack-xr-table tbody tr:hover { background: #f9fafb; }
.ack-xr-table th { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: #374151; }
.ack-xr-pct { font-size: 11px; }