* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #1f2937;
    background: #f8fafc;
}
a { color: #0f766e; text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 24px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}
.header-slogan {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Caveat', cursive;
    font-size: 1.6rem;
    font-weight: 700;
    color: #0f766e;
    white-space: nowrap;
}
.header-slogan:empty { display: none; }
@media (max-width: 960px) {
    .header-slogan { display: none; }
}
.brand { display: flex; align-items: center; font-weight: 700; font-size: 1.1rem; color: #0f172a; }
.brand-logo { height: 58px; width: auto; display: block; }
.site-nav { display: flex; align-items: center; gap: 16px; font-size: 0.95rem; }
.logout-form { margin: 0; }
.link-btn { background: none; border: none; padding: 0; margin: 0; font: inherit; color: #0f766e; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.wizard-cancel-form { margin-top: 28px; }
.wizard-cancel-form .link-btn { color: #b91c1c; font-size: 0.85rem; }

.site-main { flex: 1; padding: 24px 5vw; }

.site-footer {
    margin-top: auto;
    background: #2b2f33;
    padding: 24px 5vw 16px;
    color: #cbd5e1;
}
.footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}
.footer-brand-name { font-weight: 700; color: #fff; }
.footer-tagline { margin: 6px 0 0; font-size: 0.85rem; color: #9ca3af; max-width: 360px; }
.footer-links { display: flex; gap: 16px; font-size: 0.9rem; }
.footer-links a { color: #5eead4; }
.footer-links a:hover { color: #99f6e4; }
.footer-copyright { margin: 20px 0 0; font-size: 0.78rem; color: #6b7280; }

.messages { list-style: none; padding: 0; margin: 0 0 16px; }
.messages li { background: #ecfdf5; border: 1px solid #a7f3d0; padding: 8px 12px; border-radius: 6px; margin-bottom: 6px; }

.login-card {
    max-width: 380px;
    margin: 60px auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 32px;
    text-align: center;
}
.login-card h1 { font-size: 1.3rem; margin-bottom: 12px; }
.login-card .hint { color: #64748b; font-size: 0.9rem; margin-bottom: 24px; }
.login-divider { display: flex; align-items: center; gap: 10px; margin: 20px 0; color: #94a3b8; font-size: 0.8rem; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; }
.auth-form { text-align: left; }
.auth-form p { margin-bottom: 14px; }
.auth-form label { display: block; margin-bottom: 4px; font-size: 0.9rem; }
.auth-form input {
    width: 100%;
    padding: 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
}
.auth-form .btn-primary { width: 100%; }
.auth-switch { margin-top: 20px; font-size: 0.85rem; }
.staff-link { margin-top: 12px; font-size: 0.8rem; color: #94a3b8; }
.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 12px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #1f2937;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
}
.social-btn:hover { background: #f1f5f9; text-decoration: none; }
.social-btn.google { border-color: #d1d5db; color: #3c4043; }
.social-btn.instagram { border-color: #d1d5db; }
.provider-icon { flex-shrink: 0; }

.staff-login-card {
    max-width: 360px;
    margin: 60px auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 32px;
}
.staff-login-card h1 { font-size: 1.2rem; margin-bottom: 8px; }
.staff-login-card .hint { color: #64748b; font-size: 0.85rem; margin-bottom: 20px; }
.staff-login-card form p { margin-bottom: 14px; }
.staff-login-card label { display: block; margin-bottom: 4px; font-size: 0.9rem; }
.staff-login-card input {
    width: 100%;
    padding: 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
}
.staff-login-card button {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 6px;
    background: #0f172a;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
.form-errors { color: #b91c1c; font-size: 0.85rem; margin-bottom: 12px; }

.panel-layout { display: flex; gap: 32px; align-items: flex-start; }
.panel-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 0;
}
.panel-sidebar a {
    display: block;
    padding: 10px 20px;
    color: #334155;
    font-size: 0.92rem;
}
.panel-sidebar a:hover { background: #f1f5f9; text-decoration: none; }
.panel-sidebar .section-label {
    padding: 14px 20px 6px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
}
.panel-sidebar .pending-note {
    display: block;
    margin: 10px 16px;
    padding: 10px 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    font-size: 0.82rem;
    color: #92400e;
    text-decoration: none;
}
.panel-sidebar .pending-note:hover { text-decoration: underline; }
.panel-content {
    flex: 1;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 28px;
    min-height: 300px;
}

.messages-layout { display: flex; gap: 20px; align-items: stretch; min-height: 460px; }
.messages-list { width: 300px; flex-shrink: 0; border: 1px solid #e2e8f0; border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; }
.messages-list-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px; border-bottom: 1px solid #e2e8f0; }
.messages-list-header h1 { font-size: 1.1rem; margin: 0; }
.conversation-row { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-bottom: 1px solid #f1f5f9; color: #1e293b; position: relative; }
.conversation-row:hover { background: #f8fafc; text-decoration: none; }
.conversation-row.active { background: #ecfdf5; border-left: 3px solid #0f766e; padding-left: 13px; }
.conversation-name { font-weight: 600; font-size: 0.92rem; padding-right: 26px; }
.conversation-preview { font-size: 0.82rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversation-unread {
    position: absolute;
    top: 12px;
    right: 16px;
    background: #0f766e;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

.messages-thread { flex: 1; display: flex; flex-direction: column; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
.messages-thread-header { padding: 16px; border-bottom: 1px solid #e2e8f0; }
.messages-thread-header h2 { margin: 0; font-size: 1rem; }
.messages-thread-body { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; max-height: 480px; }
.message-bubble { max-width: 70%; padding: 10px 14px; border-radius: 12px; }
.bubble-theirs { align-self: flex-start; background: #f1f5f9; }
.bubble-mine { align-self: flex-end; background: #ecfdf5; }
.message-date { margin: 0 0 4px; font-size: 0.72rem; color: #94a3b8; }
.message-body { margin: 0; font-size: 0.92rem; white-space: pre-wrap; word-break: break-word; }
.message-reply-form { display: flex; gap: 10px; padding: 16px; border-top: 1px solid #e2e8f0; }
.message-reply-form textarea { flex: 1; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-family: inherit; resize: vertical; }
.messages-thread .empty-note { padding: 24px; }

.recipient-field input[type="text"].input-invalid { border-color: #dc2626; }
.recipient-suggestions {
    display: none;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    margin-top: 6px;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.recipient-suggestion { padding: 8px 12px; font-size: 0.9rem; cursor: pointer; }
.recipient-suggestion:hover { background: #f1f5f9; }
.field-error { display: none; margin-top: 4px; font-size: 0.8rem; color: #dc2626; }

.panel-sidebar details.sidebar-group { border-top: 1px solid #f1f5f9; }
.panel-sidebar details.sidebar-group summary {
    padding: 12px 20px;
    font-size: 0.92rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    list-style: none;
}
.panel-sidebar details.sidebar-group summary::-webkit-details-marker { display: none; }
.panel-sidebar details.sidebar-group summary::before { content: '▸ '; color: #94a3b8; }
.panel-sidebar details.sidebar-group[open] summary::before { content: '▾ '; }
.panel-sidebar details.sidebar-group a { padding-left: 36px; display: flex; align-items: center; gap: 8px; }
.sidebar-count {
    display: inline-block;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
}
.sidebar-logout-form { border-top: 1px solid #f1f5f9; padding: 12px 20px; }

.staff-summary-cards { display: flex; gap: 16px; margin-top: 20px; }
.staff-summary-card {
    flex: 1;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 18px;
    text-align: center;
    color: inherit;
}
.staff-summary-card:hover { background: #f1f5f9; text-decoration: none; }
.staff-summary-count { display: block; font-size: 1.8rem; font-weight: 700; color: #0f766e; }
.staff-summary-label { display: block; font-size: 0.85rem; color: #64748b; margin-top: 4px; }

.staff-table { width: 100%; border-collapse: collapse; margin: 12px 0 28px; font-size: 0.9rem; }
.staff-table th, .staff-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid #f1f5f9; }
.staff-table th { color: #64748b; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
.staff-table-actions form { display: flex; gap: 8px; }
.product-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid #e2e8f0; }
.stock-update-form { display: flex; align-items: center; gap: 8px; }
.stock-quantity-input { width: 80px; padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 6px; }
.product-edit-images { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 24px; }
.product-edit-image { text-align: center; position: relative; cursor: grab; }
.product-edit-image img { width: 110px; height: 110px; object-fit: cover; border-radius: 8px; border: 1px solid #e2e8f0; display: block; margin-bottom: 6px; pointer-events: none; }
.product-edit-image.is-dragging { opacity: 0.4; }
.product-edit-image .cover-badge {
    display: none;
    position: absolute;
    top: 4px;
    left: 4px;
    background: #16a34a;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
}
.product-edit-image.is-cover .cover-badge { display: block; }

.staff-complaint-card {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 14px;
}
.staff-complaint-card.is-resolved { background: #f8fafc; }
.staff-complaint-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; gap: 12px; }
.staff-complaint-note { color: #475569; font-size: 0.88rem; }
.staff-complaint-resolve-form { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; }
.staff-complaint-resolve-form textarea {
    flex: 1;
    padding: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-family: inherit;
    resize: vertical;
}
.btn-primary {
    display: inline-block;
    padding: 10px 18px;
    background: #0f766e;
    color: #fff;
    border-radius: 6px;
    border: none;
    font-weight: 600;
    cursor: pointer;
}
.status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}
.status-pending { background: #fffbeb; color: #92400e; }
.status-approved { background: #ecfdf5; color: #047857; }
.status-rejected { background: #fef2f2; color: #b91c1c; }
.status-eksik_evrak { background: #fff7ed; color: #c2410c; }

.staff-detail-table { border-collapse: collapse; margin: 16px 0; width: 100%; max-width: 640px; }
.staff-detail-table th, .staff-detail-table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.staff-detail-table th { width: 200px; color: #64748b; font-weight: 600; font-size: 0.85rem; }
.staff-note-box {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 12px 0;
    color: #7c2d12;
    max-width: 640px;
}
.staff-review-actions { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.staff-review-actions form { display: flex; gap: 10px; }
.staff-request-info-form { flex-direction: column; align-items: flex-start; }
.staff-request-info-form label { font-size: 0.9rem; font-weight: 600; color: #334155; }
.staff-request-info-form textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-family: inherit;
    resize: vertical;
}

/* Ana sayfa: harita + filtreler */
.splash-screen {
    display: none;
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.5s ease;
}
.splash-screen.is-active { display: flex; }
.splash-screen.is-hidden { opacity: 0; pointer-events: none; }
.splash-screen-img {
    max-width: min(420px, 80vw);
    width: 100%;
    height: auto;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
    animation: splash-zoom-in 0.4s ease;
}
@keyframes splash-zoom-in {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.map-section {
    width: 100vw;
    box-sizing: border-box;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    padding: 10px 5vw;
    margin-bottom: 14px;
}
.map-section-inner {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
}
.map-wrap { position: relative; flex: 1 1 auto; min-width: 0; max-width: 1742px; }
.map-wrap svg { width: 100%; height: auto; display: block; }

.map-legend {
    flex-shrink: 0;
    width: 220px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
    background: #fff;
}
.map-legend-title { font-size: 0.85rem; margin: 0 0 10px; color: #334155; }
.map-legend-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 700px;
    overflow-y: auto;
}
.map-legend-list li { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: #475569; }
.map-legend-icon { width: 18px; height: 18px; flex-shrink: 0; }
.map-wrap svg path {
    fill: #e2e8f0;
    stroke: #ffffff;
    stroke-width: 0.5;
    transition: fill 0.15s ease;
}
.map-wrap svg g { cursor: pointer; }
.map-wrap svg g.js-hover path { fill: #5eead4; }
.map-wrap svg g.has-products path { fill: #0f766e; }
.map-wrap svg g.has-products.js-hover path { fill: #115e59; }
.map-wrap svg g.is-selected path { fill: #b45309; }

.map-tooltip {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 200px;
    pointer-events: none;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
    overflow: hidden;
}
.map-tooltip.is-visible { display: block; }
.map-tooltip-header {
    background: #0f766e;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 8px 14px;
}
.map-tooltip-count {
    padding: 12px 14px 0;
    font-size: 1.9rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1;
}
.map-tooltip-count-label {
    padding: 4px 14px 10px;
    font-size: 0.78rem;
    color: #64748b;
    border-bottom: 1px solid #e2e8f0;
}
.map-tooltip-breakdown { padding: 8px 14px 12px; }
.map-tooltip-breakdown div {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #475569;
    padding: 3px 0;
}
.map-tooltip-breakdown div span:last-child { font-weight: 600; color: #0f172a; }

.filter-section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 32px;
}
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}
.filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 120px;
    min-width: 0;
}
.filter-field label {
    font-size: 0.78rem;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.filter-field select {
    width: 100%;
    padding: 7px 6px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.85rem;
    background: #fff;
    min-width: 0;
}
#secondary-filter-slot { display: contents; }
.filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}
.filter-actions .btn-primary { white-space: nowrap; padding: 8px 16px; }
.filter-actions .clear-filters { font-size: 0.82rem; color: #64748b; white-space: nowrap; }

/* Ürün kartları */
.product-section h2 { font-size: 1.1rem; margin-bottom: 16px; }
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}
.product-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}
.product-card:hover { text-decoration: none; }
.product-photo {
    aspect-ratio: 4 / 3;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-photo img { width: 100%; height: 100%; object-fit: cover; }
.product-photo-placeholder {
    font-size: 2.2rem;
    font-weight: 700;
    color: #94a3b8;
}
.product-body { padding: 14px 16px; position: relative; }
.product-body h3 { margin: 4px 0; font-size: 1rem; }
.product-category { margin: 0; font-size: 0.78rem; color: #94a3b8; }
.product-producer { margin: 4px 0; font-size: 0.85rem; color: #475569; }
.product-price { margin: 8px 0 0; font-weight: 700; color: #0f766e; }
.gi-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.72rem;
    font-weight: 600;
}
.empty-note { color: #64748b; }

/* Bileşenler sayfası */
.showcase-section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}
.showcase-section h2 { font-size: 1.05rem; margin: 0 0 16px; }
.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 16px;
}
.icon-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}
.icon-box {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f766e;
}
.icon-box svg { width: 100%; height: 100%; }
.icon-box img { width: 100%; height: 100%; object-fit: contain; }
.icon-name { font-size: 0.85rem; color: #334155; text-align: center; }

.icon-grid-manual { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.icon-box-manual { width: 56px; height: 56px; }
.icon-grid-manual .icon-name { font-size: 0.8rem; }

.emblem-group-title { font-size: 0.92rem; margin: 20px 0 10px; color: #334155; }
.emblem-group-title:first-of-type { margin-top: 4px; }
.icon-grid-emblem { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); margin-bottom: 8px; }
.icon-box-emblem { width: 72px; height: 72px; }
.icon-swatch-dark { background: #334155; border-color: #334155; }
.icon-name-dark { color: #e2e8f0; }

/* Ürün detay sayfası */
.btn-secondary {
    display: inline-block;
    padding: 10px 18px;
    background: #fff;
    color: #0f766e;
    border-radius: 6px;
    border: 1px solid #0f766e;
    font-weight: 600;
    cursor: pointer;
}
.btn-sm { padding: 6px 12px; font-size: 0.85rem; }
.btn-danger {
    display: inline-block;
    padding: 10px 18px;
    background: #fff;
    color: #b91c1c;
    border-radius: 6px;
    border: 1px solid #fca5a5;
    font-weight: 600;
    cursor: pointer;
}

.product-detail-layout {
    display: grid;
    grid-template-columns: 240px 1fr 280px;
    gap: 28px;
    align-items: start;
}

.product-gallery { display: flex; flex-direction: column; gap: 10px; }
.product-gallery-main {
    aspect-ratio: 1 / 1;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.product-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery-main img.is-zoomable { cursor: zoom-in; }
.product-gallery-main .product-photo-placeholder { font-size: 3rem; font-weight: 700; color: #94a3b8; }
.product-gallery-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gallery-thumb {
    padding: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: #f1f5f9;
    cursor: pointer;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb.is-active { border-color: #0f766e; }

.product-documents { margin-top: 4px; }
.product-documents-title { font-size: 0.85rem; font-weight: 600; color: #475569; margin-bottom: 8px; }
.product-documents-list { display: flex; flex-wrap: wrap; gap: 10px; }
.document-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 64px;
    text-decoration: none;
    color: inherit;
}
.document-thumb {
    position: relative;
    width: 64px;
    height: 64px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
}
.document-thumb img:not(.document-badge) { width: 100%; height: 100%; object-fit: cover; display: block; }
.document-badge {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 24px;
    height: 24px;
    object-fit: contain;
    background: #fff;
    border-radius: 50%;
    padding: 2px;
    box-shadow: 0 0 0 1px #e2e8f0;
}
.document-label { font-size: 0.7rem; color: #64748b; text-align: center; line-height: 1.2; }

.product-main h1 { margin: 0 0 10px; font-size: 1.6rem; }

.rating-summary { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.rating-stars-display .star, .review-stars .star { color: #d1d5db; font-size: 1.1rem; }
.rating-stars-display .star-filled, .review-stars .star-filled { color: #f59e0b; }
.rating-count { font-size: 0.85rem; color: #64748b; }

.buy-actions {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 24px;
}
.buy-note {
    width: 100%;
    padding: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.88rem;
    margin-bottom: 10px;
    resize: vertical;
}
.buy-actions-buttons { display: flex; gap: 12px; }
.buy-price { margin: 12px 0 0; font-size: 1.3rem; font-weight: 700; color: #0f766e; }

.product-description, .product-qa, .product-reviews { margin-bottom: 28px; }
.product-description h2, .product-qa h2, .product-reviews h2 { font-size: 1.05rem; margin-bottom: 10px; }

.qa-ask-form, .qa-answer-form, .rating-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    align-items: flex-start;
}
.qa-ask-form textarea, .qa-answer-form textarea {
    flex: 1 1 260px;
    padding: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    resize: vertical;
}
.qa-item { padding: 12px 0; border-bottom: 1px solid #e2e8f0; }
.qa-question { margin: 0 0 6px; }
.qa-answer { margin: 0; padding-left: 16px; color: #334155; }
.qa-meta { font-size: 0.78rem; color: #94a3b8; }

.star-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    border: none;
    padding: 0;
    margin: 0;
    gap: 2px;
}
.star-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.star-input label { font-size: 1.5rem; color: #d1d5db; cursor: pointer; line-height: 1; }
.star-input input:checked + label,
.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label {
    color: #f59e0b;
}
.rating-comment {
    flex: 1 1 220px;
    padding: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
}
.review-item { padding: 10px 0; border-bottom: 1px solid #e2e8f0; }
.review-item p { margin: 4px 0 0; }

.product-sidebar { display: flex; flex-direction: column; gap: 20px; }
.sidebar-block {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
}
.sidebar-block h3 { font-size: 0.92rem; margin: 0 0 12px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 0.76rem;
    font-weight: 600;
}
.tag-badge.tag-gi { background: #fef3c7; color: #92400e; }
.tag-badge.tag-animal { background: #eff6ff; color: #1d4ed8; }
.tag-badge.tag-producer-type { background: #f1f5f9; color: #475569; }
.sidebar-producer { margin: 12px 0 0; font-size: 0.82rem; color: #64748b; }

.producer-card-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
}
.producer-card-link:hover { text-decoration: none; }
.producer-card-link:hover .producer-card-name { text-decoration: underline; }
.producer-card-avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ecfdf5;
    color: #047857;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.producer-card-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.producer-card-name { font-weight: 600; }
.producer-card-meta { font-size: 0.8rem; color: #64748b; }

.producer-social-link {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.85rem;
    font-weight: 600;
}
.producer-social-icon { width: 18px; height: 18px; }

.producer-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.producer-detail-meta { color: #64748b; margin: 4px 0 12px; }
.producer-detail-info { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 20px; margin-bottom: 24px; }
.producer-detail-info p { margin: 0 0 10px; }

.sidebar-product-list { display: flex; flex-direction: column; gap: 12px; }
.sidebar-product-card {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 10px;
    align-items: center;
    color: inherit;
}
.sidebar-product-card:hover { text-decoration: none; }
.sidebar-product-card:hover .sidebar-product-name { text-decoration: underline; }
.sidebar-product-photo {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.sidebar-product-photo img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-product-photo .product-photo-placeholder { font-size: 1.1rem; color: #94a3b8; font-weight: 700; }
.sidebar-product-name { font-size: 0.85rem; grid-column: 2; }
.sidebar-product-price { font-size: 0.8rem; color: #0f766e; font-weight: 600; grid-column: 2; }

.similar-products-section { margin-top: 48px; padding-top: 32px; border-top: 1px solid #e2e8f0; }

@media (max-width: 900px) {
    .product-detail-layout { grid-template-columns: 1fr; }
}

.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.8);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 40px;
}
.lightbox-overlay.is-open { display: flex; }
.lightbox-overlay img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    animation: lightbox-zoom-in 0.15s ease;
}
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 28px;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 10px;
}
@keyframes lightbox-zoom-in {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Üretici başvuru sihirbazı */
.wizard-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 16px 0 24px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 16px;
}
.wizard-step { font-size: 0.85rem; }
.wizard-step a, .wizard-step span {
    display: block;
    padding: 6px 12px;
    border-radius: 999px;
    color: #64748b;
    background: #f1f5f9;
}
.wizard-step a { text-decoration: none; }
.wizard-step a:hover { background: #e2e8f0; }
.wizard-step.is-current a, .wizard-step.is-current span { background: #0f766e; color: #fff; font-weight: 600; }
.wizard-step.is-done a { background: #ecfdf5; color: #047857; }
.wizard-step.is-locked span { color: #cbd5e1; }

.wizard-form { text-align: left; max-width: 520px; }
.wizard-form p { margin-bottom: 14px; }
.wizard-form label { display: block; margin-bottom: 4px; font-size: 0.9rem; font-weight: 600; color: #334155; }
.wizard-form input:not([type="checkbox"]):not([type="radio"]), .wizard-form select, .wizard-form textarea {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.95rem;
}
.wizard-form + .wizard-form { margin-top: 12px; }
.wizard-form ul {
    list-style: none;
    margin: 0;
    padding: 10px 14px;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
}
.wizard-form ul li { padding: 3px 0; }
.wizard-form ul li label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
    font-size: 0.9rem;
    margin: 0;
}
.wizard-form input[type="checkbox"] { width: auto; }

.icon-field .input-icon-group { position: relative; display: flex; align-items: center; gap: 8px; }
.wizard-form .input-icon-group input:not([type="checkbox"]):not([type="radio"]) { flex: 1; padding-left: 36px; }
.input-icon-group .input-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    pointer-events: none;
}
.status-badge-below { display: block; width: fit-content; margin: 6px auto 0; white-space: nowrap; }
.status-badge-below.status-pending { animation: status-badge-pulse 1.5s ease-in-out infinite; }
@keyframes status-badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.input-icon-group.has-prefix .input-icon { position: static; transform: none; flex-shrink: 0; }
.wizard-form .input-icon-group.has-prefix input:not([type="checkbox"]):not([type="radio"]) { padding-left: 10px; }
.input-prefix { flex-shrink: 0; font-weight: 600; color: #475569; }
.icon-field .field-help { display: block; margin-bottom: 4px; font-size: 0.8rem; color: #64748b; }
.wizard-form .field-help { display: block; margin: 2px 0 8px; font-size: 0.8rem; color: #64748b; }
.checkbox-field label { display: flex; align-items: center; gap: 8px; font-weight: 400; }

.telegram-qr-block { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 10px; }
.telegram-qr-block > div { width: 100%; }
.telegram-qr-image { width: 120px; height: 120px; border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px; background: #fff; }
.telegram-qr-hint { margin-top: 4px; font-weight: 600; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; padding: 6px 10px; border-radius: 6px; display: inline-block; font-size: 0.85rem; }
.telegram-qr-divider { display: flex; align-items: center; width: 100%; margin: 0; color: #94a3b8; font-size: 0.8rem; font-weight: 600; }
.telegram-qr-divider::before, .telegram-qr-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.12); }
.telegram-qr-divider::before { margin-right: 10px; }
.telegram-qr-divider::after { margin-left: 10px; }
.telegram-web-btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 6px;
    background: #4f6bff;
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
}
.telegram-web-btn:hover { background: #3d56e0; }
.telegram-command-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.telegram-command-row code { white-space: nowrap; }
.btn-copy {
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
    cursor: pointer;
}
.btn-copy:hover { background: rgba(255, 255, 255, 0.14); }

.profile-settings-layout { display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.profile-settings-layout .wizard-form { flex: 1 1 380px; min-width: 280px; }
.field-input-row { display: flex; align-items: center; gap: 8px; }
.field-input-row input { flex: 1; }

.verify-guide-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1 1 340px;
    max-width: 420px;
    position: sticky;
    top: 20px;
}

.verify-guide {
    display: none;
    margin: 0;
    background: #161b29;
    color: #e2e8f0;
    border-radius: 14px;
    padding: 20px 22px;
}
.verify-guide.is-visible { display: block; }
.verify-guide h3 { margin: 0 0 10px; font-size: 1rem; color: #fff; }
.verify-guide-steps { list-style: none; margin: 0; padding: 0; }
.verify-guide-steps li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.verify-guide-steps li:last-child { border-bottom: none; }
.verify-guide-steps .step-num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #4f6bff;
    color: #a8bdff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
}
.verify-guide-steps p { margin: 0; font-size: 0.9rem; line-height: 1.4; }
.verify-guide code {
    background: rgba(79, 107, 255, 0.18);
    color: #a8bdff;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.85rem;
}
.verify-guide .telegram-qr-block { margin-top: 8px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.verify-guide .field-help { color: #cbd5e1; }
.verify-guide .field-help a { color: #93b4ff; }

.category-chain { margin-bottom: 14px; }
.category-chain > label { display: block; margin-bottom: 4px; font-size: 0.9rem; font-weight: 600; color: #334155; }
.category-chain-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.category-chain-select { flex: 1; width: auto; min-width: 0; margin-bottom: 0; }
.category-chain-stop {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    font-weight: 400;
    color: #64748b;
    white-space: nowrap;
    margin-bottom: 0;
}
.category-chain-stop input[type="checkbox"] { width: auto; }

.wizard-document-list { list-style: none; padding: 0; margin: 0 0 20px; max-width: 520px; }
.wizard-document-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 0.88rem;
}
.inline-form { margin: 0; }

/* Beğendiğim Ürünler / kaydet butonu */
.product-card-wrap, .sidebar-product-card-wrap { position: relative; }
.save-toggle-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    color: #94a3b8;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
}
.save-toggle-btn:hover { text-decoration: none; border-color: #0f766e; color: #0f766e; }
.save-toggle-btn.is-saved { color: #dc2626; border-color: #dc2626; }
.sidebar-product-card-wrap .save-toggle-btn { width: 26px; height: 26px; font-size: 0.9rem; }

.saved-product-control { display: flex; align-items: center; gap: 10px; }
.saved-product-control .save-toggle-btn { position: static; }
.saved-product-control span { font-size: 0.85rem; color: #64748b; }
.saved-note-form { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.saved-note-form textarea {
    padding: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-family: inherit;
    resize: vertical;
}

.saved-products-list { display: flex; flex-direction: column; gap: 14px; }
.saved-product-row {
    display: grid;
    grid-template-columns: 72px 1fr 260px;
    gap: 16px;
    align-items: start;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
}
.saved-product-photo {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.saved-product-photo img { width: 100%; height: 100%; object-fit: cover; }
.saved-product-info { display: flex; flex-direction: column; gap: 2px; }
.saved-product-name { font-weight: 600; color: inherit; }
.saved-product-producer { margin: 0; font-size: 0.85rem; color: #475569; }
.saved-product-price { margin: 0; font-weight: 700; color: #0f766e; }
.saved-product-note-form { display: flex; flex-direction: column; gap: 8px; }
.saved-product-note-form textarea {
    padding: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-family: inherit;
    resize: vertical;
}
.saved-product-note-actions { display: flex; gap: 8px; }