/* ============================================================
   TRADERA TARZI ÜRÜN KARTI
   ============================================================ */
:root{
    --tr-red:#FF0100;
    --tr-red-dark:#D40000;
    --tr-green:#003B29;
    --tr-ink:#1A1A1A;
    --tr-gray:#6B6B6B;
    --tr-line:#EAEAEA;
    --tr-yellow:#FFF203;
}

.tr-card{
    border:1px solid var(--tr-line);
    border-radius:12px;
    padding:22px;
    background:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,0.04);
    position:sticky;
    top:90px;
}

.tr-kat{
    font-size:13px;
    color:var(--tr-gray);
    margin-bottom:8px;
}
.tr-kat a{ color:var(--tr-gray); }
.tr-kat a:hover{ color:var(--tr-red-dark); text-decoration:underline !important; }

.tr-title{
    font-size:21px;
    font-weight:600;
    color:var(--tr-ink);
    line-height:28px;
    margin-bottom:12px;
}

.tr-meta{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13.5px;
    color:var(--tr-gray);
    margin-bottom:18px;
    flex-wrap:wrap;
}
.tr-meta .tr-dot{
    width:4px;height:4px;border-radius:50%;
    background:var(--tr-gray);
    display:inline-block;
}
.tr-meta strong{ color:var(--tr-ink); }

.tr-specs{ margin-bottom:18px; }
.tr-specs h6{
    display:flex;
    justify-content:space-between;
    font-size:13px;
    font-weight:500;
    color:#434343;
    padding:8px 0;
    border-bottom:1px solid var(--tr-line);
    margin:0;
}
.tr-specs h6 span{ color:var(--tr-ink); font-weight:400; }

.tr-priceblock{ margin-bottom:16px; }
.tr-priceblock .label{
    font-size:13px;
    color:var(--tr-gray);
    margin-bottom:6px;
}
.tr-priceblock .price{
    font-size:30px;
    font-weight:700;
    color:var(--tr-ink);
    background:linear-gradient(to top, var(--tr-yellow) 35%, transparent 35%);
    display:inline-block;
    padding:0 2px;
}
.tr-priceblock .sub{
    font-size:12.5px;
    color:var(--tr-gray);
    margin-top:6px;
}

.tr-countdown{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13.5px;
    color:var(--tr-red-dark);
    font-weight:500;
    margin-bottom:16px;
    background:#FFF3F2;
    border-radius:8px;
    padding:8px 12px;
}
.tr-countdown i{ font-size:14px; }
.tr-countdown.tr-ended{
    color:var(--tr-gray);
    background:#F3F3F3;
}

.tr-btn-primary{
    width:100%;
    height:52px;
    border:none !important;
    background:var(--tr-green);
    color:#fff;
    font-size:15px;
    font-weight:600;
    border-radius:8px;
    margin-bottom:10px;
    transition:background .15s ease;
}
.tr-btn-primary:hover{ background:#00281c; color:#fff; }

.tr-btn-secondary{
    width:100%;
    height:48px;
    border:1.5px solid var(--tr-line) !important;
    background:#fff;
    color:var(--tr-ink);
    font-size:14.5px;
    font-weight:500;
    border-radius:8px;
    margin-bottom:16px;
    transition:all .15s ease;
}
.tr-btn-secondary:hover{ border-color:var(--tr-red) !important; color:var(--tr-red-dark); }

.tr-rows{
    border-top:1px solid var(--tr-line);
    padding-top:12px;
    margin-bottom:16px;
}
.tr-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:13.5px;
    color:var(--tr-ink);
    padding:8px 0;
}
.tr-row .k{ color:var(--tr-gray); }

.tr-protect{
    border:1px solid var(--tr-line);
    border-radius:10px;
    padding:16px;
    margin-bottom:20px;
    display:flex;
    gap:14px;
    align-items:flex-start;
}
.tr-protect i.shield{ font-size:26px; color:var(--tr-green); flex-shrink:0; margin-top:2px; }
.tr-protect h5{
    font-size:13.5px;
    font-weight:600;
    color:var(--tr-ink);
    margin-bottom:8px;
}
.tr-protect p{
    font-size:12.8px;
    color:var(--tr-gray);
    line-height:19px;
    margin-bottom:4px;
    display:flex;
    align-items:flex-start;
    gap:6px;
}
.tr-protect p i{ color:var(--tr-green); font-size:11px; margin-top:4px; }

.tr-seller{
    border:1px solid var(--tr-line);
    border-radius:10px;
    padding:16px;
}
.tr-seller .name{
    font-size:15px;
    font-weight:600;
    color:var(--tr-ink);
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.tr-seller .stars{ color:#F6C243; font-size:12.5px; }
.tr-seller .loc{
    font-size:12.8px;
    color:var(--tr-gray);
    margin-top:4px;
    margin-bottom:10px;
}
.tr-seller .badges{ display:flex; flex-direction:column; gap:6px; }
.tr-seller .badges span{
    font-size:12.8px;
    color:var(--tr-ink);
    display:flex;
    align-items:center;
    gap:8px;
}
.tr-seller .badges i{ color:var(--tr-green); width:14px; text-align:center; }

.tr-fav{
    background:transparent;
    border:none !important;
    font-size:13.5px;
    color:var(--tr-gray);
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:10px;
}
.tr-fav i{ color:var(--tr-red); }

@media (max-width:991px){
    .tr-card{ position:static; margin-top:16px; }
}


/* ============================================================
   ÜRÜN GALERİSİ (1 büyük + yanda 2 küçük, +N overlay, ok+sayaç)
   ============================================================ */
.tr-gallery{
    display:flex;
    align-items:stretch;
    gap:6px;
    width:100%;
    height:480px;
    box-sizing:border-box;
}
.tr-gallery-main{
    position:relative;
    flex:1.7 1 0%;
    min-width:0;
    border:1px solid var(--tr-line);
    border-radius:10px;
    overflow:hidden;
    background:#FAFAFA;
}
.tr-gallery-main img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
    cursor:pointer;
}

.tr-gallery-side{
    flex:1 1 0%;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:6px;
}
.tr-gallery-thumb{
    position:relative;
    flex:1 1 0%;
    min-height:0;
    border:1px solid var(--tr-line);
    border-radius:10px;
    overflow:hidden;
    cursor:pointer;
    background:#FAFAFA;
}
.tr-gallery-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.tr-gallery-more{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.55);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    font-weight:700;
    pointer-events:none;
}

.tr-gallery-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:38px;
    height:38px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,0.9);
    color:#1A1A1A;
    font-size:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,0.15);
    z-index:3;
    transition:background .15s ease;
}
.tr-gallery-nav:hover{ background:#fff; }
.tr-gallery-nav.prev{ left:12px; }
.tr-gallery-nav.next{ right:12px; }

.tr-gallery-counter{
    position:absolute;
    bottom:12px;
    right:12px;
    background:rgba(0,0,0,0.6);
    color:#fff;
    font-size:12.5px;
    font-weight:500;
    padding:4px 10px;
    border-radius:999px;
    z-index:3;
}

@media (max-width:991px){
    .tr-gallery{ height:380px; }
}
@media (max-width:576px){
    .tr-gallery{
        flex-direction:column;
        height:auto;
    }
    .tr-gallery-main{ height:280px; }
    .tr-gallery-side{ flex-direction:row; height:90px; }
}

.tr-desc{
    clear:both;
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid var(--tr-line);
}
.tr-desc p{
    font-size:13.5px;
    line-height:24px;
    color:#333;
    white-space:pre-line;
    margin:0;
}

/* ---------- Lightbox ---------- */
.tr-lightbox{
    position:fixed;
    inset:0;
    background:rgba(10,10,10,0.92);
    z-index:99999;
    display:none;
    align-items:center;
    justify-content:center;
}
.tr-lightbox.is-open{ display:flex; }
.tr-lightbox-img{
    max-width:82%;
    max-height:82%;
    object-fit:contain;
    border-radius:6px;
}
.tr-lightbox-close{
    position:absolute;
    top:22px;
    right:26px;
    width:42px;
    height:42px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,0.12);
    color:#fff;
    font-size:16px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .15s ease;
}
.tr-lightbox-close:hover{ background:rgba(255,255,255,0.25); }
.tr-lightbox-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:48px;
    height:48px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,0.12);
    color:#fff;
    font-size:18px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .15s ease;
}
.tr-lightbox-arrow:hover{ background:rgba(255,255,255,0.25); }
.tr-lightbox-prev{ left:22px; }
.tr-lightbox-next{ right:22px; }
.tr-lightbox-counter{
    position:absolute;
    bottom:26px;
    left:50%;
    transform:translateX(-50%);
    background:rgba(255,255,255,0.12);
    color:#fff;
    font-size:13px;
    font-weight:500;
    padding:6px 14px;
    border-radius:999px;
}
@media (max-width:576px){
    .tr-lightbox-arrow{ width:38px; height:38px; font-size:15px; }
    .tr-lightbox-prev{ left:10px; }
    .tr-lightbox-next{ right:10px; }
}


/* ============================================================
   MODAL TASARIMI (Teklif ver / Bid history)
   ============================================================ */
.modal-backdrop.show{ opacity:.5; }

#teklifvermodal .modal-content,
#arts .modal-content{
    border:none;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,0.18);
}

/* Ortak modal header (JS ile enjekte edilecek kapatma butonu için) */
.tr-modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 22px;
    border-bottom:1px solid var(--tr-line);
}
.tr-modal-header h3{
    font-size:16px;
    font-weight:600;
    color:var(--tr-ink);
    margin:0;
}
.tr-modal-close{
    width:32px;
    height:32px;
    border-radius:50%;
    border:none;
    background:#F6F6F6;
    color:var(--tr-ink);
    font-size:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background .15s ease, color .15s ease;
}
.tr-modal-close:hover{ background:var(--tr-red); color:#fff; }

#teklifvermodal .modal-body,
#arts .modal-body{
    padding:22px;
    max-height:75vh;
    overflow-y:auto;
}

/* Teklif ver formu (AJAX ile teklif_modal_icerik.php içinden gelen içerik bu sınıfları kullanabilir) */
.teklifvermodal h3{
    font-weight:600;
    font-size:16px;
    color:#000;
    text-align:center;
    margin-bottom:4px;
}
.teklifvermodal h4{
    font-weight:500;
    font-size:13px;
    color:#6B6B6B;
    text-align:center;
    margin-bottom:18px;
}
.teklifvermodal h6{
    font-size:13px;
    color:#1A1A1A;
    margin-bottom:7px;
    margin-top:12px;
    font-weight:500;
}
.teklifvermodal input{
    font-size:14px;
    font-weight:500;
    height:46px;
    width:100%;
    background:#FAFAFA;
    border-radius:8px;
    border:1.5px solid var(--tr-line) !important;
    padding:0 14px;
    transition:border-color .15s ease;
}
.teklifvermodal input:focus{
    border-color:var(--tr-green) !important;
    background:#fff;
}
.teklifvermodal button{
    background:var(--tr-green);
    font-size:14.5px;
    width:100%;
    border:none !important;
    border-radius:8px;
    color:#fff;
    height:48px;
    margin-top:16px;
    font-weight:600;
}
.teklifvermodal button:hover{ background:#00281c; }
.teklifvermodal hr{
    width:100%;
    height:1px;
    border:none;
    display:block;
    background:var(--tr-line);
    margin:16px 0;
}
.teklifvermodal h5{
    font-size:13px;
    color:var(--tr-red-dark);
    text-align:center;
    margin-top:12px;
    font-weight:500;
    background:#FFF3F2;
    border-radius:8px;
    padding:10px;
}

/* Bid history listesi */
.acikfiyatlar{
    overflow:auto !important;
    max-height:400px;
    background:#fff;
}
.acikfiyatlar h3{
    font-size:16px;
    font-weight:600;
    text-align:left;
    color:var(--tr-ink);
    margin-bottom:4px;
}
.acikfiyatlar hr{
    border:none;
    height:1px;
    background:var(--tr-line);
    margin:12px 0 4px;
}
.acikfiyatlar h5{
    border-radius:8px !important;
    border:none !important;
    padding:12px 14px !important;
    margin:0 0 6px 0 !important;
    background:#FAFAFA !important;
    line-height:20px !important;
    color:var(--tr-ink) !important;
    font-weight:400 !important;
    text-align:left !important;
    font-size:13px !important;
}
.acikfiyatlar h5 span{
    font-weight:600;
    color:var(--tr-green);
}

#bildirim{
    position: fixed;
    top: 40px;
    right: 40px;
    background:var(--tr-green);
    color: white;
    padding: 12px 18px;
    border-radius: 8px;
    z-index: 9999;
    opacity: 0;
    transform: translateY(-20px);
    font-size:13px !important;
    font-weight:500;
    box-shadow:0 8px 24px rgba(0,0,0,0.15);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
#bildirim.goster{ opacity:1; transform: translateY(0); }
#bildirim.kapat{ opacity:0; transform: translateY(-20px); }

@media (max-width:576px){
    #teklifvermodal .modal-body,
    #arts .modal-body{ padding:16px; }
    .tr-modal-header{ padding:14px 16px; }
}