/* =========================
   ÜRÜNLER GRID
========================= */

.products-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;

    align-items: stretch;

}



/* =========================
   KART
========================= */

.product-card {

    background: #111;

    border-radius: 14px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    height: 100%;

    transition: .3s ease;

    border: 1px solid rgba(255, 255, 255, .08);

}


.product-card:hover {

    transform: translateY(-5px);

}



/* =========================
   RESİM
========================= */

.product-card>img {

    width: 100%;

    height: 230px;

    object-fit: cover;

    display: block;

}





/* =========================
   İÇERİK
========================= */

.product-info {

    padding: 20px;

    display: flex;

    flex-direction: column;

    flex: 1;

}





/* BAŞLIK + FİYAT */

.product-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

}



.product-header h3 {

    margin: 0;

    color: #fff;

    font-size: 21px;

    font-weight: 700;

}





/* FİYAT */

.product-cost {

    color: #ff6600;

    font-size: 20px;

    font-weight: 700;

    white-space: nowrap;

}





/* AÇIKLAMA */

.product-info p {

    color: #bbb;

    line-height: 1.6;

    margin: 15px 0;

    min-height: 55px;

}





/* BUTON ALTA SABİT */

.product-button {

    margin-top: auto;

    text-align: center;

}



.product-button .btn {

    display: block;

    width: 85%;

    margin: auto;

    padding: 13px 20px;

    background: #ff6600;

    color: #fff;

    border-radius: 8px;

    text-decoration: none;

    font-weight: bold;

    transition: .3s;

}



.product-button .btn:hover {

    background: #ff8533;

}





/* TABLET */

@media(max-width:1000px) {

    .products-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}





/* MOBİL */

@media(max-width:600px) {

    .products-grid {

        grid-template-columns: 1fr;

    }


    .product-card>img {

        height: 220px;

    }

}

/* =========================
   SINGLE PRODUCT
========================= */

.single-product {

    max-width: 1340px;
    margin: 20px auto;
    padding: 35px;

    background: #fff;
    border-radius: 24px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .08);

}


/* =========================
   ANA YAPI
========================= */

.product-layout {

    display: flex;

    gap: 30px;

    align-items: flex-start;

    width: 100%;

}

/* =========================
   GALERİ
========================= */

.product-gallery {

    flex: 0 0 420px;

    width: 420px;

}


.main-image {

    width: 100%;
    height: 520px;

    overflow: hidden;

    border-radius: 20px;

    background: #f8fafc;

    display: flex;
    align-items: center;
    justify-content: center;

}


.main-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: .3s ease;

}


.main-image img:hover {

    transform: scale(1.04);

}


/* küçük resimler */

.thumbs {

    display: flex;
    gap: 15px;

    margin-top: 20px;

    flex-wrap: wrap;

}


.thumb {

    width: 85px;
    height: 85px;

    border-radius: 12px;

    overflow: hidden;

    cursor: pointer;

    border: 2px solid #e5e7eb;

    background: #fff;

    transition: .3s ease;

}


.thumb:hover {

    border-color: #2563eb;

    transform: translateY(-4px);

}


.thumb img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}



/* =========================
   ÜRÜN BİLGİ ALANI
========================= */


.product-info {

    flex: 1;

    min-width: 0;

    width: 100%;

}



/* Orta + fiyat */

.product-columns {

    display: flex;

    width: 100%;

    gap: 15px;

}


/* ORTA ALAN GENİŞ */

.product-left {

    flex: 1 1 auto;

    min-width: 0;

    width: 100%;

    max-width: none;

}


/* Başlık */

.product-title {

    font-size: 38px;

    font-weight: 700;

    color: #111827;

    margin: 0 0 20px 0;

}


/* Açıklama */

.product-short {

    color: #6b7280;

    font-size: 17px;

    line-height: 1.7;

    padding: 15px;

    border: 2px solid #f27a1a;

    border-radius: 8px;

    background: #f9fafb;

    min-height: 100px;

    height: auto;

    width: 100%;

    box-sizing: border-box;

    margin-bottom: 25px;

}

/* =========================
   ÜRÜN EK BİLGİLERİ
========================= */

.product-extra-info {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-top: 20px;

    margin-bottom: 25px;

    width: 100%;

}



/* Bilgi kutuları */

.info-box {

    display: flex;

    justify-content: space-between;

    align-items: center;

    width: 100%;

    padding: 14px 16px;

    background: #f9fafb;

    border: 1px solid #e5e7eb;

    border-radius: 10px;

    box-sizing: border-box;

    transition: .2s ease;

}


.info-box:hover {

    border-color: #f27a1a;

    background: #fffaf5;

}



/* Sol başlık */

.info-title {

    font-size: 15px;

    font-weight: 700;

    color: #111827;

}



/* Sağ değer */

.info-value {

    font-size: 15px;

    font-weight: 600;

    color: #374151;

    text-align: right;

}



/* Stok */

.stock-status {

    color: #15803d;

    background: #dcfce7;

    padding: 5px 12px;

    border-radius: 20px;

    font-size: 14px;

}

/* Adet Seçici */
.quantity-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    width: max-content;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.quantity-box button {
    width: 28px;
    height: 28px;
    border: 0;
    background: #f3f4f6;
    font-size: 16px;
    cursor: pointer;
}

.quantity-box button:hover {
    background: #111;
    color: #fff;
}

.quantity-box input {
    width: 40px;
    height: 28px;
    border: 0;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    text-align: center;
    font-size: 14px;
    outline: none;
}

/* Mobil */

@media(max-width:600px) {

    .info-box {

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;

    }


    .info-value {

        text-align: left;

    }

}

/* =========================
   SAĞ FİYAT
========================= */


.product-right {

    flex: 0 0 280px;

    width: 280px;

}



/* kupon */

.product-coupon {

    background: #fef3c7;

    color: #92400e;

    padding: 8px 10px;

    border-radius: 6px;

    text-align: center;

    font-size: 14px;

    font-weight: 600;

}



/* fiyat kutusu */


.product-price-section {


    background: #f3f4f6;

    border: 1px solid #e5e7eb;

    border-radius: 12px;
    text-align: center;

    padding: 25px 20px;

    margin-top: 15px;


    width: 100%;

    box-sizing: border-box;


}

.product-price {
    font-size: clamp(20px, 4vw, 42px);
    line-height: 1.1;
    word-break: break-word;
}

/* PARA BİRİMİ SEÇİCİ */
.currency-switcher {
    display: flex;
    align-items: center;
    margin-left: 15px;
}

.currency-switcher select {
    height: 32px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .3);
    background: transparent;
    color: inherit;
    font-size: 13px;
    cursor: pointer;
    outline: none;
    transition: .2s;
}

.currency-switcher select:hover {
    opacity: .8;
}

.currency-switcher select option {
    color: #333;
    background: #fff;
}

/* fiyat */


.price-left {

    width: 100%;

    text-align: center;

}



.old-price {

    color: #9ca3af;

    font-size: 20px;

    text-decoration: line-through;

    margin-bottom: 6px;

}



.sale-price {

    color: #f27a1a;

    font-size: 32px;

    font-weight: 900;

    line-height: 1.2;

    text-align: center;

}



/* indirim */


.badge-text {

    background: #ef4444;

    color: #fff;


    padding: 5px 10px;

    border-radius: 5px;


    font-size: 18px;

    font-weight: 700;


    text-align: center;


    margin-bottom: 15px;

}



/* teslimat */


.delivery-time {

    display: block;

    width: 100%;


    color: #15803d;

    background: #dcfce7;


    border: 1px solid #22c55e;


    padding: 8px;


    border-radius: 20px;


    text-align: center;


    margin-top: 15px;

}



/* satın al */


.product-buy-btn {
    display: inline-block;
    width: 140px;
    background: #f27a1a;
    color: #fff;
    text-align: center;
    padding: 8px;
    border-radius: 6px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    margin: 15px auto;
    text-decoration: none;
    cursor: pointer;
}





.product-buy-btn:hover {

    background: #d96915;

}



/* =========================
   SEÇENEKLER
========================= */


.product-variants {

    color: #01042c;

    margin-bottom: 20px;

}


.variant-title {

    font-weight: 600;

    margin-bottom: 10px;

}



.variant-list {


    display: flex;

    flex-wrap: wrap;

    gap: 10px;


}



.variant-box {


    border: 2px solid #f27a1a;


    padding: 8px 15px;


    border-radius: 8px;


    cursor: pointer;


    background: #fff;


    transition: .3s;


}



.variant-box:hover {


    border-color: #2563eb;

    background: #f0f9ff;


}



.variant-box.selected {


    background: #fff7e6;


}



/* =========================
   BUTTONS
========================= */


.product-actions {


    display: flex;

    gap: 15px;

    margin-top: 30px;


}



.product-actions {
    display: flex;
    gap: 10px;
}

.product-actions button {
    flex: 0 0 auto;
    width: 160px;
    height: 40px;
    padding: 8px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}

.btn-buy-now {
    background: #f27a1a;
    color: #fff;
}






.btn-add-to-cart {

    background: #2563eb;

    color: white;

}




/* =========================
   SEKME
========================= */


.product-tabs {

    width: 100%;

    margin-top: 40px;

    border-top: 2px solid #e5e7eb;

    padding-top: 20px;

}


.product-tabs .tab-buttons {

    display: flex;

    gap: 25px;

    margin-bottom: 20px;

}


.product-tabs .tab-btn {

    flex: 1;

    height: 45px;

    background: #fff;

    border: 2px solid #2563eb;

    border-radius: 8px;

    cursor: pointer;

    font-weight: 600;

}



.product-tabs .tab-btn.active,
.product-tabs .tab-btn:hover {

    background: #2563eb;

    color: white;

}



.product-tabs .tab-content {

    display: none;

    padding: 25px;

    border: 1px solid #e5e7eb;

    border-radius: 12px;

    line-height: 1.8;

}


.product-tabs .tab-content.active {

    display: block !important;

}




/* =========================
   MOBİL
========================= */


@media(max-width:1000px) {


    .product-layout,
    .product-columns {

        flex-direction: column;

    }



    .product-gallery {

        width: 100%;

        max-width: 420px;

    }



    .product-right {

        width: 100%;

        max-width: 280px;

    }



}



@media(max-width:600px) {


    .single-product {

        padding: 20px;

    }



    .product-title {

        font-size: 26px;

    }



    .sale-price {

        font-size: 28px;

    }



    .product-actions {

        flex-direction: column;

    }



    .product-tabs .tab-buttons {

        flex-direction: column;

    }


}

.product-buy-btn {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.product-buy-btn:focus,
.product-buy-btn:active,
.product-buy-btn:hover {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}