/*
Theme Name: yellowStar E-Ticaret
Theme URI: https://ystdesign.com.tr
Author: ystdesign
Author URI: https://ystdesign.com.tr
Description: yellowStar E-Ticaret Teması — WooCommerce ve Elementor Pro tam destekli, hızlı ve modern tema.
Version: 2.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: yellowstar-eticaret
*/

body {
    margin: 0;
    padding: 0;
}

/* ============================================================
   yellowStar E-Ticaret — Ek Stiller
   ystdesign | v1.0
   ============================================================ */


/* ── 1. STORY HALKASI ARKA PLAN ─────────────────────────────── */
.elementor-element-8bb4e26 .elementor-element-populated {
    background-image: radial-gradient(ellipse at 70% 70%, #ee583f 8%, #d92d77 42%, #bd3381 58%) !important;
}
.elementor-flip-box__layer__overlay {
    cursor: pointer !important;
}


/* ── 2. ÜRÜN LİSTELEME ─────────────────────────────────────── */
.yst-11 table tbody > tr:nth-child(odd) > td,
.yst-11 table tbody > tr:nth-child(odd) > th {
    background-color: hsl(0deg 0% 100% / 7%);
}
.yst-11 table th                                 { padding: 0; }
.yst-11 .woocommerce-Price-amount                { color: #000; }
.yst-11 .woocommerce-variation-availability .stock { color: #000; }


/* ── 3. HESABIM / GİRİŞ SAYFASI ────────────────────────────── */
.woocommerce-button {
    background-color: var(--e-global-color-accent) !important;
    border-color: var(--e-global-color-accent) !important;
    width: 100% !important;
    padding: 12px !important;
    margin-top: 9px !important;
    color: #fff !important;
    border-radius: 50px !important;
}
.woocommerce-MyAccount-navigation li {
    background-color: #000 !important;
    margin-bottom: 5px !important;
    padding: 9px;
    width: 81%;
}
.woocommerce-MyAccount-navigation a          { color: #fff; font-size: 19px; }
.woocommerce-MyAccount-navigation-link > a > br { display: none !important; }
ul                                            { list-style-type: none !important; }
.woocommerce-account .woocommerce-MyAccount-content {
    background: #f5f5f5 !important;
    padding: 27px !important;
}

/* İleri/Geri Butonları */
.wc-forward {
    background-color: var(--e-global-color-accent) !important;
    border-color: #9e6634 !important;
    border-radius: 5px !important;
    color: #fff !important;
    padding: 12px !important;
}
.wc-forward:hover { background-color: #000 !important; }
.woocommerce .wc-backward {
    display: block;
    text-align: center;
    margin-bottom: 1em;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 13px 25px !important;
    color: #fff !important;
    background: var(--e-global-color-accent) !important;
    border-radius: 50px !important;
}


/* ── 4. ALIŞVERİŞ SEPET & ÖDEME ────────────────────────────── */
table thead:first-child tr:first-child th      { border-block-start: 0; }
.woocommerce table.shop_table td               { border-top: 0 !important; }
.woocommerce table td, .woocommerce table th   { padding: 15px; line-height: 1.5; vertical-align: top; border: 0 !important; }

.woocommerce .cart .button,
.woocommerce .cart input.button {
    float: none;
    background: var(--e-global-color-accent);
    font-size: 14px;
    color: #fff;
    padding: 10px 30px;
    border-radius: 50px;
    font-weight: 500;
}
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
    color: #fff;
    cursor: not-allowed;
    opacity: .5;
    padding: 10px 30px;
}
.woocommerce-cart table.cart td.actions .coupon .input-text {
    border: 1px solid #f6f6f6;
    padding: 6px 6px 5px 17px;
    border-radius: 50px;
    width: 57%;
}
.woocommerce input[type=number] {
    border: 1px solid #f6f6f6;
    padding: 8px;
    border-radius: 50px;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    display: block;
    text-align: center;
    margin-bottom: 1em;
    font-size: 18px;
    font-weight: 500;
    padding: 1em;
    background: var(--e-global-color-accent);
    border-radius: 50px !important;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    outline: 0;
    border: 0;
    background: #f5f5f5;
    border-radius: 50px;
}
.woocommerce .select2-container--default .select2-selection--single {
    background-color: #f5f5f5;
    border: 0;
    border-radius: 50px;
}
.select2-container .select2-selection--single {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    padding: 8px;
    height: 43px;
    margin: 0 0 -4px;
    user-select: none;
}
.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
    display: block;
    text-align: center;
    margin-bottom: 1em;
    font-size: 15px;
    font-weight: 500;
    padding: 13px 25px;
    background: var(--e-global-color-accent);
    border-radius: 50px !important;
}
.woocommerce-privacy-policy-text p { font-size: 13px !important; }


/* ── 5. SİPARİŞ DURUMU POPUP ───────────────────────────────── */
#elementor-popup-modal-731 .woocommerce form .form-row-first,
#elementor-popup-modal-731 .woocommerce form .form-row-last,
#elementor-popup-modal-731 .woocommerce-page form .form-row-first,
#elementor-popup-modal-731 .woocommerce-page form .form-row-last {
    width: 100% !important;
    overflow: visible;
}


/* ── 6. SCROLL BAR ──────────────────────────────────────────── */
.yst-scroll-1 { height: 300px; padding-right: 20px; overflow-y: auto; overflow-x: hidden; }
::-webkit-scrollbar                  { width: 10px; }
::-webkit-scrollbar-track            { box-shadow: inset 0 0 5px #fff; border-radius: 10px; }
::-webkit-scrollbar-thumb            { background: var(--e-global-color-secondary); border-radius: 10px; }


/* ── 7. STORIES ─────────────────────────────────────────────── */
.yst-stories-wrap { position: relative; width: 100%; padding: 6px 0; }
.yst-stories {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 8px 6px;
    align-items: flex-start;
    justify-content: center;
}
.yst-stories::-webkit-scrollbar { height: 6px; }

.yst-story           { flex: 0 0 auto; scroll-snap-align: start; }
.yst-story-btn       { all: unset; cursor: pointer; display: block; }

.yst-story-ring {
    width: 98px; height: 98px;
    border-radius: 999px;
    display: grid; place-items: center;
    background-image: radial-gradient(ellipse at 70% 70%, #ee583f 8%, #d92d77 42%, #bd3381 58%);
}
.yst-story-inner {
    width: 92px; height: 92px;
    border-radius: 999px;
    background: #fff;
    display: grid; place-items: center;
    position: relative; overflow: hidden;
}
.yst-story-inner img {
    width: 88px; height: 88px;
    border-radius: 999px;
    object-fit: cover; object-position: center top;
    display: block;
    transition: filter .15s ease;
}
.yst-story-label {
    position: absolute; inset: 0;
    border-radius: 999px;
    background: rgba(0,0,0,.65);
    color: #fff; font-weight: 800; font-size: 12px;
    display: grid; place-items: center;
    opacity: 0;
    transition: opacity .15s ease;
    text-align: center; padding: 8px;
}
.yst-story.is-active .yst-story-inner img   { filter: brightness(.45); }
.yst-story.is-active .yst-story-label        { opacity: 1; }

@media (max-width: 768px) {
    .yst-story-ring  { width: 84px; height: 84px; }
    .yst-story-inner { width: 78px; height: 78px; }
    .yst-story-inner img { width: 74px; height: 74px; }
}

/* Story Modal */
.yst-story-modal {
    position: fixed; inset: 0; z-index: 99999;
    display: none; align-items: center; justify-content: center;
    background: rgba(0,0,0,.78) !important;
    padding: 18px;
    opacity: 0; transition: opacity .18s ease;
}
.yst-story-modal.is-open { display: flex; opacity: 1; }
.yst-story-modal-card {
    width: min(520px, 92vw) !important;
    background: #111; border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
    max-height: 88vh !important;
    transform: translateY(10px) scale(.98);
    transition: transform .22s ease;
}
.yst-story-modal.is-open .yst-story-modal-card { transform: translateY(0) scale(1); }
.yst-story-modal-top {
    display: flex; align-items: center;
    justify-content: space-between; padding: 12px;
}
.yst-story-modal-close { all: unset; cursor: pointer; font-size: 22px; line-height: 1; padding: 6px 10px; color: #fff; }
.yst-story-stage {
    position: relative; width: 100%;
    height: 62vh !important; max-height: 560px !important;
    background: #000;
    border-radius: 16px !important; overflow: hidden !important;
}
.yst-story-progress {
    position: absolute; left: 10px; right: 10px; top: 10px;
    height: 3px; background: rgba(255,255,255,.18);
    border-radius: 999px; overflow: hidden; z-index: 2;
}
.yst-story-progress > span { display: block; height: 100%; width: 0%; background: #fff; }
.yst-story-modal-img  { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.yst-story-modal-meta { padding: 12px; background: #111; color: #fff; }
.yst-story-modal-title { margin: 0 0 6px; font-size: 16px; font-weight: 900; }
.yst-story-modal-price { margin: 0 0 10px; font-size: 13px; font-weight: 700; opacity: .85; }
.yst-story-modal-actions { display: flex !important; gap: 10px !important; }
.yst-story-modal-actions a {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 14px; border-radius: 14px;
    text-decoration: none; font-weight: 900; width: 50% !important;
}
.yst-story-modal-actions a.yst-primary   { background: #fff; color: #111; }
.yst-story-modal-actions a.yst-secondary { background: #2b2b2b; color: #fff; }


/* ── 8. SATIN AL SATIRI ────────────────────────────────────── */
.yst-buy-row .yst-wa-order {
    flex: 1; min-width: 200px;
    text-align: center;
    background: #2cb742 !important;
    padding: 12px !important;
}
.yst-buy-row .yst-buy-now {
    flex: 1; min-width: 200px;
    align-items: center !important;
    justify-content: center !important;
    display: flex !important;
    background: var(--e-global-color-secondary) !important;
    color: #fff !important;
    padding: 12px !important;
}


/* ── 9. HOVER GÖRSEL — ÜRÜN LİSTESİ ────────────────────────── */
.e-loop-item .elementor-widget-image .elementor-widget-container              { position: relative; overflow: hidden; }
.e-loop-item .elementor-widget-image .elementor-widget-container a            { position: relative; display: block; overflow: hidden; }
.e-loop-item .elementor-widget-image .elementor-widget-container a img.yst-hover-img {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease;
    z-index: 2;
}
.e-loop-item .elementor-widget-image .elementor-widget-container a:hover img.yst-hover-img { opacity: 1 !important; }

/* ── 10. CHECKOUT KARGO FARKLI ADRES ────────────────────────── */
.elementor-widget-woocommerce-checkout-page #ship-to-different-address { padding-left: 0 !important; }

/* ============================================================ */