/* =========================
   URUN KARTLARI GRID
========================= */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1rem;
}

.product-card {
    background:#fff;   
    border-radius:12px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition: all 0.3s ease;
    position: relative;
}

.product-card:hover { transform: translateY(-3px); }

.product-image-container {
    position: relative;
    width:100%;
    aspect-ratio:3/4;
    overflow:hidden;
    cursor:pointer;
    background:#f8fafc;
}

.product-image { 
    width:100%; 
    height:100%; 
    object-fit:contain; 
    transition:0.3s; 
}

.product-image-container:hover .product-image { 
    transform: scale(1.05); 
}

.zoom-overlay { 
    position:absolute; 
    top:0; left:0; right:0; bottom:0;
    display:flex; 
    justify-content:center; 
    align-items:center;
    background: rgba(0,0,0,0.5);
    opacity:0; 
    transition:0.3s;
    border-radius:12px;
}

.product-image-container:hover .zoom-overlay { 
    opacity:1; 
}

.zoom-overlay .zoom-icon {
    color:#fff;
    font-size:1.5rem;
}

/* =========================
   ÜRÜN İÇERİĞİ
========================= */
.product-content {
    padding:0.8rem 1rem;
    display:flex;
    flex-direction:column;
    flex-grow:1;
}

.product-title { 
    font-weight:600; 
    font-size:0.95rem; 
    margin-bottom:0.5rem; 
    line-height:1.3; 
    overflow:hidden; 
    text-overflow:ellipsis; 
    display:-webkit-box; 
    -webkit-line-clamp:2; 
    -webkit-box-orient:vertical; 
}

.product-price { font-weight:700; color:#3b82f6; margin-bottom:0.5rem; }
.product-price .old-price {
    text-decoration: line-through;
    color: #ef4444;
    margin-left: 0.5rem;
    font-weight: 500;
}
.product-price .new-price {
    font-weight: 700;
    color: #111;
}

.product-actions { display:flex; gap:0.5rem; margin-bottom:0.5rem; }

.btn-view { 
    flex:1; 
    background:#10b981; 
    border:1px solid #ccc; 
    color:#fff; 
    padding:0.5rem; 
    border-radius:6px; 
        margin-top:0.5rem; 

    text-align:center; 
}
.btn-view:hover { background:#f0f0f0; }

.btn-add-cart { 
    flex:1; 
    background:#3b82f6; 
    color:#fff; 
    padding:0.5rem; 
    border:none; 
    border-radius:6px; 
        margin-top:0.5rem; 

    cursor:pointer; 
}
.btn-add-cart:hover { background:#2563eb; }

.buy-now { 
    width:100%; 
    background:#10b981; 
    color:#fff; 
    padding:0.5rem; 
    border:none; 
    border-radius:6px; 
    margin-top:0.5rem; 
    cursor:pointer; 
}
.buy-now:hover { background:#059669; }

/* =========================
   ETİKETLER
========================= */
.label {
    position: absolute;
    top: 0.5rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 6px;
    color: #fff;
    z-index: 10;
}

.label-new { 
    left: 0.5rem; 
    background: #10b981;
}

.label-discount { 
    right: 0.5rem; 
    background: #ef4444;
}

/* =========================
   MODAL RESİM BÜYÜTME
========================= */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background: rgba(0,0,0,0.85);
    align-items: center;
    justify-content: center;
    overflow:auto;
    padding: 1rem;
}

.modal-content {
    margin:auto;
    display:block;
    max-width:90%;
    max-height:80vh;
    border-radius:12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    transition: transform 0.3s ease;
}

.modal-content:hover { transform: scale(1.02); }

.close {
    position:absolute;
    top:1rem;
    right:1rem;
    color:#fff;
    font-size:2rem;
    font-weight:bold;
    cursor:pointer;
    transition:0.3s;
}
.close:hover { color:#f0f0f0; transform: scale(1.2); }

/* =========================
   RENK/BEDEN MODALI
========================= */
.variant-modal {
    display: none;
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(0,0,0,0.5);
    z-index: 1100;
    align-items:center;
    justify-content:center;
    padding:1rem;
}

.variant-modal.active { display:flex; }

.variant-modal-content {
    background:#fff;
    border-radius:12px;
    padding:1.5rem;
    max-width:450px;
    width:100%;
    max-height:90vh;
    overflow-y:auto;
    box-shadow:0 10px 25px rgba(0,0,0,0.25);
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    animation: fadeInUp 0.3s ease;
}

@keyframes fadeInUp {
    0% { transform: translateY(20px); opacity:0; }
    100% { transform: translateY(0); opacity:1; }
}

.variant-modal h3 {
    font-size:1.25rem;
    font-weight:700;
    text-align:center;
    margin-bottom:1rem;
    color:#111;
}

.option-group { margin-bottom:1.5rem; }
.option-group label { 
    display:block; 
    margin-bottom:0.5rem; 
    font-weight:600; 
    color:#374151; 
    font-size:0.95rem; 
}
.option-buttons {
    display:flex;
    flex-wrap:wrap;
    gap:0.5rem;
}

.option-btn {
    padding:0.5rem 1rem;
    border:2px solid #e5e7eb;
    border-radius:8px;
    background:#fff;
    cursor:pointer;
    transition: all 0.3s ease;
    font-size:0.875rem;
    text-align:center;
    color:#111;
}
.option-btn:hover { border-color:#3b82f6; }
.option-btn.selected {
    background:#3b82f6;
    color:#fff;
    border-color:#3b82f6;
}

.variant-modal-actions {
    display:flex;
    gap:0.75rem;
    margin-top:1.5rem;
    justify-content:flex-end;
}
.variant-modal-actions button {
    flex:1;
    padding:0.75rem;
    border-radius:8px;
    font-weight:600;
    cursor:pointer;
    transition:all 0.3s ease;
}

.variant-cancel {
    background:#fff;
    border:1px solid #d1d5db;
    color:#111;
}
.variant-cancel:hover { background:#f3f4f6; }

.variant-confirm {
    background:#3b82f6;
    border:1px solid #3b82f6;
    color:#111;
}
.variant-confirm:hover { background:#2563eb; color:#fff; }

/* =========================
   RESPONSIVE
========================= */
@media(max-width:1024px) { .products-grid { grid-template-columns:repeat(3,1fr); } }
@media(max-width:768px) { .products-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px) {
    .products-grid { grid-template-columns:repeat(2,1fr); }
    .variant-modal-content { padding:1rem; }
    .option-btn { flex:1 1 45%; text-align:center; }
    .variant-modal-actions { flex-direction:column-reverse; gap:0.5rem; }
    .variant-confirm, .variant-cancel { width:100%; }
    .modal-content { max-width:100%; max-height:60vh; }
}
@media(max-width:768px) { .modal-content { max-width:95%; max-height:70vh; } }
/* ===========================
   Ürün Bölümleri ve Başlıklar
=========================== */

/* Section başlıkları */
.product-section {
    margin: 60px 0; /* slider ve diğer bölümlerle arası boşluk */
    padding: 0 1rem; /* sağ-sol boşluk */
}

.product-section .section-title {
    text-align: center; /* başlık ortalama */
    font-size: 2rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 2rem; /* başlık ile ürünler arası boşluk */
}

/* Ürünler grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem; /* ürün kartları arasındaki boşluk */
}

/* Responsive */
@media (max-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: 1fr;
    }
}

/* Başlıklar (h1, h2) genel stiller */
h1, h2 {
    text-align: center;
    color: #111;
    margin: 2rem 0;
    font-weight: 700;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}