/* urunler.php styles — Light Theme */

.filter-bar {
    background: var(--bg-2); border-bottom: 1px solid rgba(184,148,58,0.12);
    padding: 0 60px; display: flex; gap: 0; overflow-x: auto; scrollbar-width: none;
}
.filter-bar::-webkit-scrollbar { display: none; }
.filter-btn {
    display: inline-block; padding: 20px 28px; font-size: 9px; font-weight: 500;
    letter-spacing: 3px; text-transform: uppercase; color: var(--mid); text-decoration: none;
    border-bottom: 2px solid transparent; transition: all 0.3s ease; white-space: nowrap;
    cursor: pointer; background: none; border-top: none; border-left: none; border-right: none;
    font-family: "Montserrat", sans-serif;
}
.filter-btn:hover, .filter-btn.active { color: var(--gold); border-bottom-color: var(--gold); }

.cat-section { padding: 80px 60px; }
.cat-section:nth-child(odd) { background: var(--bg); }
.cat-section:nth-child(even) { background: var(--bg-2); }
.cat-inner { max-width: 1360px; margin: 0 auto; }
.cat-header { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px; margin-bottom: 60px; }
.cat-eyebrow {
    font-size: 8px; letter-spacing: 5px; text-transform: uppercase; color: var(--gold);
    display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
}
.cat-eyebrow::before { content: ""; width: 36px; height: 1px; background: var(--gold); }
.cat-title { font-family: "Cormorant Garamond", serif; font-size: clamp(32px, 4vw, 52px); font-weight: 300; line-height: 1.05; letter-spacing: -0.5px; color: var(--ink); }
.cat-title em { font-style: italic; color: var(--gold); }
.cat-desc { font-size: 13px; color: var(--mid); font-weight: 300; line-height: 1.85; max-width: 420px; }

.prod-items { display: grid; gap: 1px; background: rgba(184,148,58,0.10); }
.prod-items.cols-3 { grid-template-columns: repeat(3,1fr); }
.prod-items.cols-2 { grid-template-columns: repeat(2,1fr); }
.prod-item { background: var(--bg); padding: 44px 38px; position: relative; overflow: hidden; transition: background 0.35s; }
.prod-item:nth-child(even) { background: var(--bg-2); }
.prod-item:hover, .prod-item:nth-child(even):hover { background: var(--bg-3); }
.prod-item::before {
    content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
    background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease;
}
.prod-item:hover::before { transform: scaleX(1); }
.pi-tag { font-size: 7.5px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; display: block; }
.pi-name { font-family: "Cormorant Garamond", serif; font-size: 22px; font-weight: 400; color: var(--ink); margin-bottom: 12px; line-height: 1.2; }
.pi-desc { font-size: 12px; color: var(--mid); font-weight: 300; line-height: 1.75; margin-bottom: 24px; }
.pi-features { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pi-features li { font-size: 11px; color: var(--ink-3); font-weight: 300; display: flex; align-items: center; gap: 10px; }
.pi-features li::before { content: ""; width: 16px; height: 1px; background: var(--gold); flex-shrink: 0; }
.pi-badge {
    position: absolute; top: 20px; right: 20px;
    background: var(--gold-faint); border: 1px solid rgba(184,148,58,0.25);
    color: var(--gold); padding: 4px 10px; font-size: 7px; letter-spacing: 2px; text-transform: uppercase;
}

.brands-section { background: var(--bg-2); padding: 60px; border-top: 1px solid rgba(184,148,58,0.10); }
.brands-inner { max-width: 1360px; margin: 0 auto; text-align: center; }
.brands-label { font-size: 8px; letter-spacing: 5px; text-transform: uppercase; color: var(--mid); margin-bottom: 48px; display: block; }
.brands-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 1px; background: rgba(184,148,58,0.10); }
.brand-item {
    background: var(--bg); padding: 28px 24px;
    display: flex; align-items: center; justify-content: center;
    font-family: "Cormorant Garamond", serif; font-size: 18px; font-weight: 300;
    color: var(--mid-light); letter-spacing: 2px; transition: all 0.3s;
}
.brand-item:hover { color: var(--gold); background: var(--bg-2); }

@media (max-width:1100px) {
    .filter-bar { padding: 0 32px; }
    .cat-section { padding: 60px 32px; }
    .prod-items.cols-3 { grid-template-columns: 1fr 1fr; }
    .brands-grid { grid-template-columns: repeat(3,1fr); }
    .cat-header { grid-template-columns: 1fr; }
}
@media (max-width:640px) {
    .prod-items.cols-3, .prod-items.cols-2 { grid-template-columns: 1fr; }
    .brands-grid { grid-template-columns: repeat(2,1fr); }
    .brands-section { padding: 40px 32px; }
}