/* Broşür katalog ve detay sayfaları. Bağımsız stil dosyası (Tailwind derlemesi gerektirmez). */
.bro-wrap { max-width: 1280px; margin: 0 auto; padding: 28px 16px 64px; }
.bro-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bro-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; line-height: 1.3; border: 1px solid #dbe4f0; background: #f8fafc; color: #334155; }
.bro-chip i { font-size: 11px; color: #3a86ff; }
.bro-chip--hero { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); color: #dbeafe; }
.bro-chip--hero i { color: #93c5fd; }
.bro-chip--premium { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.bro-chip--premium i { color: #d97706; }

/* Katalog filtreleri */
.bro-filters { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: end; background: #fff; border: 1px solid #e5e7eb; border-radius: 18px; padding: 14px; box-shadow: 0 6px 24px rgba(15, 23, 42, .05); }
.bro-filters label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #64748b; margin-bottom: 4px; }
.bro-filters input, .bro-filters select { width: 100%; min-height: 44px; border: 1px solid #d7dee8; border-radius: 12px; padding: 8px 12px; font: inherit; font-size: 14px; color: #0f172a; background: #fff; }
.bro-filters input:focus, .bro-filters select:focus { outline: 3px solid rgba(58, 134, 255, .25); border-color: #3a86ff; }
.bro-filter-actions { display: flex; gap: 8px; }
.bro-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 22px 0 14px; color: #475569; font-size: 14px; }
.bro-summary strong { color: #0f172a; }

/* Butonlar */
.bro-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 18px; border-radius: 14px; font-weight: 800; font-size: 14px; line-height: 1.2; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .15s; font-family: inherit; }
.bro-btn:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
.bro-btn--primary { background: #3a86ff; color: #fff; }
.bro-btn--primary:hover { background: #2563eb; }
.bro-btn--ghost { background: #fff; color: #1e3a8a; border-color: #cfdcf3; }
.bro-btn--ghost:hover { border-color: #3a86ff; color: #1d4ed8; }

/* Kartlar */
.bro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.bro-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #e5e7eb; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 18px rgba(15, 23, 42, .05); transition: transform .18s, box-shadow .18s, border-color .18s; }
.bro-card:hover, .bro-card:focus-within { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(15, 23, 42, .12); border-color: #bcd3fb; }
.bro-card-media { position: relative; aspect-ratio: 297 / 210; background: linear-gradient(135deg, #eef4ff, #f8fafc); overflow: hidden; }
.bro-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bro-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 33.1%, rgba(15,23,42,.08) 33.3%, transparent 33.6%, transparent 66.5%, rgba(15,23,42,.08) 66.7%, transparent 67%); pointer-events: none; }
.bro-card-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; }
.bro-card-title { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.35; color: #0f172a; }
.bro-card-title a { color: inherit; text-decoration: none; }
.bro-card-title a::after { content: ""; position: absolute; inset: 0; }
.bro-card-title a:focus-visible { outline: none; }
.bro-card:focus-within { outline: 3px solid #1d4ed8; outline-offset: 2px; }
.bro-card-meta { margin: 0; font-size: 13px; color: #475569; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.bro-card-meta span { display: inline-flex; align-items: center; gap: 5px; }
.bro-card-meta i { color: #94a3b8; font-size: 12px; }
.bro-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; font-size: 13px; font-weight: 800; color: #1d4ed8; }

.bro-empty { text-align: center; background: #fff; border: 1px dashed #cbd5e1; border-radius: 20px; padding: 40px 16px; color: #475569; }
.bro-empty i { font-size: 30px; color: #94a3b8; margin-bottom: 10px; }
.bro-pagination { margin-top: 26px; }

/* Detay */
.bro-detail { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.bro-panel-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 22px; box-shadow: 0 8px 28px rgba(15, 23, 42, .06); }
.bro-viewer { padding: 14px; }
.bro-viewer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.bro-tabs { display: inline-flex; gap: 4px; padding: 4px; background: #f1f5f9; border-radius: 14px; }
.bro-tab { min-height: 42px; padding: 8px 16px; border: 0; border-radius: 11px; background: transparent; font: inherit; font-size: 14px; font-weight: 800; color: #475569; cursor: pointer; }
.bro-tab[aria-selected="true"] { background: #fff; color: #1d4ed8; box-shadow: 0 2px 8px rgba(15, 23, 42, .1); }
.bro-tab:focus-visible, .bro-zoom button:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
.bro-zoom { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.bro-zoom button { min-height: 38px; padding: 6px 11px; border: 1px solid #d7dee8; border-radius: 10px; background: #fff; font: inherit; font-size: 12px; font-weight: 700; color: #334155; cursor: pointer; }
.bro-zoom button[aria-pressed="true"] { background: #eff6ff; border-color: #3a86ff; color: #1d4ed8; }
.bro-stage { position: relative; aspect-ratio: 297 / 210; border-radius: 14px; overflow: hidden; background: #f1f5f9 repeating-linear-gradient(45deg, #f1f5f9 0 12px, #eef2f7 12px 24px); }
.bro-stage[data-panel="all"] .bro-face img { width: 100%; transform: none; }
.bro-stage[data-panel="1"] .bro-face img { width: 300%; transform: translateX(0); }
.bro-stage[data-panel="2"] .bro-face img { width: 300%; transform: translateX(-33.3333%); }
.bro-stage[data-panel="3"] .bro-face img { width: 300%; transform: translateX(-66.6667%); }
.bro-face { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: flex-start; }
.bro-face[hidden] { display: none; }
.bro-face img { display: block; height: auto; max-width: none; opacity: 0; transition: opacity .25s, transform .25s; }
.bro-stage:not([data-panel="all"]) { aspect-ratio: 99 / 210; max-width: 420px; margin: 0 auto; }
.bro-face img.is-loaded { opacity: 1; }
.bro-loading, .bro-error { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 700; color: #475569; pointer-events: none; }
.bro-loading i { animation: bro-spin 1s linear infinite; color: #3a86ff; }
.bro-error { color: #b91c1c; background: #fef2f2; }
.bro-error[hidden], .bro-loading[hidden] { display: none; }
.bro-fold { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed rgba(15, 23, 42, .28); pointer-events: none; }
.bro-stage:not([data-panel="all"]) .bro-fold { display: none; }
.bro-viewer-note { margin: 10px 2px 0; font-size: 12px; line-height: 1.5; color: #64748b; }
@keyframes bro-spin { to { transform: rotate(360deg); } }

.bro-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 92px; }
.bro-download { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.bro-download h2, .bro-section h2 { margin: 0; font-size: 18px; font-weight: 800; color: #0f172a; }
.bro-dl { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; border-radius: 16px; border: 2px solid #dbe4f0; background: #fff; color: #0f172a; text-decoration: none; transition: border-color .15s, background-color .15s; }
.bro-dl:hover { border-color: #3a86ff; background: #f8fbff; }
.bro-dl:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
.bro-dl-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; background: #eff6ff; color: #1d4ed8; }
.bro-dl--pdf .bro-dl-icon { background: #fef2f2; color: #dc2626; }
.bro-dl-text { display: flex; flex-direction: column; min-width: 0; }
.bro-dl-text strong { font-size: 15px; font-weight: 800; }
.bro-dl-text span { font-size: 12px; color: #64748b; }
.bro-dl-go { margin-left: auto; color: #94a3b8; }
.bro-note { margin: 0; font-size: 12px; line-height: 1.55; color: #64748b; }
.bro-alert { margin: 0; border-radius: 12px; padding: 10px 12px; font-size: 13px; font-weight: 700; background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.bro-alert--info { background: #eff6ff; color: #1e3a8a; border-color: #bfdbfe; }

.bro-facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bro-facts div { background: #f8fafc; border-radius: 12px; padding: 8px 10px; }
.bro-facts dt { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #64748b; }
.bro-facts dd { margin: 2px 0 0; font-size: 14px; font-weight: 700; color: #0f172a; }
.bro-info { padding: 18px; display: flex; flex-direction: column; gap: 12px; }

.bro-sections { margin-top: 22px; display: grid; gap: 16px; }
.bro-section { padding: 20px; }
.bro-section p, .bro-section li { font-size: 15px; line-height: 1.75; color: #334155; }
.bro-section p { margin: 10px 0 0; }
.bro-steps { margin: 10px 0 0; padding-left: 20px; }
.bro-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bro-tags a, .bro-tags span { display: inline-flex; border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 700; background: #f1f5f9; color: #334155; text-decoration: none; }
.bro-tags a:hover { background: #e0ecff; color: #1d4ed8; }
.bro-related { margin-top: 28px; }
.bro-related h2 { font-size: 22px; font-weight: 800; color: #0f172a; margin: 0 0 14px; }

@media (max-width: 1024px) {
    .bro-detail { grid-template-columns: 1fr; }
    .bro-aside { position: static; }
    .bro-filters { grid-template-columns: 1fr 1fr; }
    .bro-filters .bro-filter-q { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .bro-wrap { padding: 18px 16px 48px; }
    .bro-filters { grid-template-columns: 1fr; }
    .bro-filter-actions .bro-btn { flex: 1; }
    .bro-viewer { padding: 10px; }
    .bro-tabs { width: 100%; }
    .bro-tab { flex: 1; }
    .bro-facts { grid-template-columns: 1fr; }
    .bro-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .bro-card, .bro-face img, .bro-btn { transition: none; }
    .bro-loading i { animation: none; }
}