/* ---------------------------------------------------------------------------
 * ETHOS - ESKI SITEDEN GELEN TEKNIK TABLOLARIN BICIMI
 *
 * Urun aciklamalarindaki teknik tablolar eski WordPress'te TablePress
 * eklentisiyle yapilmisti. Tablo HTML'i yeni siteye eksiksiz tasindi
 * (rowspan/colspan dahil) ama eklentinin CSS'i tasinmadigi icin cizgisiz,
 * renksiz duz bir liste gibi gorunuyordu. Bu dosya o gorunumu geri veriyor.
 *
 * Yalnizca .tablepress sinifli tablolari etkiler; sitenin baska hicbir
 * tablosuna dokunmaz.
 * ------------------------------------------------------------------------- */

.tablepress {
    width: 100%;
    margin: 20px 0 28px;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 13px;
    line-height: 1.35;
    color: #23233a;
    background: #fff;
    border: 1px solid #d9d9e3;
}

.tablepress td,
.tablepress th {
    padding: 7px 9px;
    border: 1px solid #d9d9e3;
    text-align: center;
    vertical-align: middle;
    word-break: normal;
}

/* --- Baslik satirlari ---------------------------------------------------
 * TablePress baslik sayisini tablonun sinifinda tasiyor: header1, header2,
 * header3. Ilk satir her zaman basliktir; header2/header3 tablolarda ikinci
 * ve ucuncu satirlar da baslik sayilir.
 * --------------------------------------------------------------------- */
.tablepress thead th,
.tablepress tr.row-1 td,
.tablepress.header2 tr.row-2 td,
.tablepress.header3 tr.row-2 td,
.tablepress.header3 tr.row-3 td {
    background: #332c63;
    color: #fff;
    font-weight: 600;
    letter-spacing: .2px;
    border-color: #4a4280;
}

/* --- Govde: satir satir okunurlugu artiran zebra --- */
.tablepress tbody tr:nth-child(even) td {
    background: #f6f6fa;
}

.tablepress tbody tr:hover td {
    background: #eceaf6;
}

/* Zebra ve hover baslik satirlarini ezmesin */
.tablepress thead th,
.tablepress tr.row-1 td,
.tablepress.header2 tr.row-2 td,
.tablepress.header3 tr.row-2 td,
.tablepress.header3 tr.row-3 td {
    background: #332c63 !important;
}

/* Ilk sutun (olcu/boy adi) biraz daha belirgin dursun */
.tablepress td.column-1 {
    font-weight: 600;
    background: #f0eff7;
}
.tablepress tr.row-1 td.column-1,
.tablepress.header2 tr.row-2 td.column-1,
.tablepress.header3 tr.row-2 td.column-1,
.tablepress.header3 tr.row-3 td.column-1 {
    background: #332c63 !important;
}

/* --- Dar ekran ---------------------------------------------------------
 * Bu tablolarin bazilari 18 sutun. Telefonda tasmamasi icin tabloyu
 * yatay kaydirilabilir yapiyoruz.
 * --------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .tablepress {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .tablepress td,
    .tablepress th {
        padding: 6px 8px;
        font-size: 12px;
    }
}

/* ---------------------------------------------------------------------------
 * ACIKLAMADAKI DIGER TABLOLAR
 *
 * TablePress disinda kalan tablolar da var: FLEXA olcu tablolari
 * (.flexa-table) ve hic sinifi olmayan duz tablolar. Hepsi ayni dili
 * konussun diye ortak bicim.
 *
 * Ozgullugu bilerek yuksek tuttum: FLEXA tablolarinin kendi <style>
 * blogu icerigin icinde gomulu geliyor ve sayfada bu dosyadan SONRA
 * okundugu icin normalde ustun cikardi.
 * ------------------------------------------------------------------------- */
.eth-pd-description table,
.eth-pd-description .flexa-table {
    width: 100%;
    margin: 22px 0 26px;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 13px;
    line-height: 1.4;
    color: #23233a;
    background: #fff;
    border: 1px solid #e2e2ea;
}

.eth-pd-description table th,
.eth-pd-description table td,
.eth-pd-description .flexa-table th,
.eth-pd-description .flexa-table td {
    padding: 10px 12px;
    border: 1px solid #ececf2;
    vertical-align: middle;
}

/* Başlık satırı: sitenin laciverti */
.eth-pd-description table thead th,
.eth-pd-description table thead td,
.eth-pd-description .flexa-table thead th,
.eth-pd-description .flexa-table thead tr {
    background: #332c63 !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    line-height: 1.3;
    border-color: #4a4280 !important;
    vertical-align: bottom;
    text-align: left;
}

.eth-pd-description table tbody tr:nth-child(even) td,
.eth-pd-description .flexa-table tbody tr:nth-child(even) td {
    background: #f7f7fb;
}

.eth-pd-description table tbody tr:hover td,
.eth-pd-description .flexa-table tbody tr:hover td {
    background: #eeecf7;
}

/* Sayısal sütunlar ortada, ilk iki sütun (kod / renk) solda */
.eth-pd-description table tbody td,
.eth-pd-description .flexa-table tbody td {
    text-align: center;
}
.eth-pd-description table tbody td:first-child,
.eth-pd-description table tbody td:nth-child(2),
.eth-pd-description .flexa-table tbody td:first-child,
.eth-pd-description .flexa-table tbody td:nth-child(2) {
    text-align: left;
}

/* İlk sütun genelde ürün kodu */
.eth-pd-description table tbody td:first-child,
.eth-pd-description .flexa-table tbody td:first-child {
    font-weight: 600;
    white-space: nowrap;
}

/* Yatay kaydırma
   Açıklama artık iki kolonlu; 18 sütunlu teknik tablolar masaüstünde de
   sığmıyor. Bu yüzden eşik 1024'ten 1400'e çekildi. */
@media (max-width: 1400px) {
    .eth-pd-description table,
    .eth-pd-description .flexa-table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .eth-pd-description table th,
    .eth-pd-description table td,
    .eth-pd-description .flexa-table th,
    .eth-pd-description .flexa-table td {
        padding: 8px 10px;
        font-size: 12px;
    }
}

/* İçerikten gelen gömülü <style> blokları ekranda metin olarak
   görünmesin */
.eth-pd-description style { display: none !important; }

/* ---------------------------------------------------------------------------
 * ACIKLAMA ICINDEKI GALERI GORSELLERI
 *
 * Eski sitede bu gorseller Woodmart galerisiydi: her biri
 * <a data-index="N"><img class="wd-gallery-image"></a> seklinde, hepsi
 * tek bir <p> icinde. Onlari kusatan <div>'in bicimi tasinmadigi icin
 * gorseller 300 pikselik halleriyle serbest akiyor; sayfa uzuyor,
 * hizalama dagiliyor.
 *
 * Cozum sarmal beklemeden dogrudan gorseli boyutlandirmak: esit kareler,
 * icine sigdirilmis (object-fit: contain) urun fotograflari. Boylece
 * ne kadar farkli oranda gorsel olursa olsun duzgun bir izgara cikiyor.
 * ------------------------------------------------------------------------- */
.eth-pd-description img.wd-gallery-image {
    display: inline-block;
    width: 148px;
    height: 148px;
    max-width: 100%;
    object-fit: contain;
    background: #fafafb;
    border: 1px solid #ececf2;
    border-radius: 10px;
    padding: 10px;
    margin: 6px;
    vertical-align: top;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.eth-pd-description a:hover > img.wd-gallery-image {
    border-color: #332c63;
    box-shadow: 0 6px 16px rgba(51, 44, 99, .14);
    transform: translateY(-2px);
}

/* Galeriyi tasiyan paragrafi ortalayip aralarini duzenler.
   :has() desteklemeyen eski tarayicilarda gorseller yine duzgun akar,
   yalnizca ortalama olmaz — bicim bozulmaz. */
.eth-pd-description p:has(img.wd-gallery-image) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 2px;
    margin: 18px 0 24px;
}

.eth-pd-description p:has(img.wd-gallery-image) > a {
    display: inline-flex;
    text-decoration: none !important;
}

@media (max-width: 767px) {
    .eth-pd-description img.wd-gallery-image {
        width: 104px;
        height: 104px;
        padding: 7px;
        margin: 4px;
        border-radius: 8px;
    }
}

/* ---------------------------------------------------------------------------
 * YAPISKANLIGI ENGELLEYEN KURAL
 *
 * main.css'in 24. satirinda su var:
 *     html, body { overflow-x: hidden }
 *
 * "overflow-x: hidden" tarayicida bir kaydirma kabi olusturur ve o kabin
 * icindeki HICBIR "position: sticky" calismaz. Bu yuzden hem sagdaki
 * icindekiler kolonu hem de main.css'te zaten tanimli olan yapiskan menu
 * sayfa kayarken yerinde kalmiyordu.
 *
 * "clip" da tasmayi ayni sekilde keser ama kaydirma kabi olusturmaz;
 * yapiskanlik calismaya devam eder. Desteklemeyen eski tarayicilar
 * "hidden" ile eskisi gibi davranir, bozulma olmaz.
 * ------------------------------------------------------------------------- */
@supports (overflow-x: clip) {
    html,
    body {
        overflow-x: clip;
    }
}

/* ---------------------------------------------------------------------------
 * YAPISKAN MENU
 *
 * Sayfa yapisi soyle:
 *     .eth-shell-header
 *         .eth-topbar   (mor ust bant)
 *         .eth-header   (beyaz menu)
 *
 * main.css'te sarmalin kendisi yapiskan yapilmis; menu asagi iniyor ama
 * mor bantla birlikte, yani ekranin ~130 pikselini surekli kapliyor.
 *
 * Burada sarmali serbest birakip yapiskanligi menuye veriyoruz: mor bant
 * yukari kayip gidiyor, yalnizca beyaz menu tepede kaliyor. JavaScript
 * gerekmiyor — sarmal "static" olunca cocugu tepeye yapisabiliyor.
 *
 * Ana sayfa disarida birakildi; orada menu kahramanin uzerine binen ayri
 * bir tasarimda ve bu kural onu bozar.
 * ------------------------------------------------------------------------- */
body:not(.eth-page-home) .eth-shell-header {
    position: sticky;
    /* Mor bant 42 piksel (main.css: .eth-topbar min-height:42px).
       Sarmalı o kadar yukarı kaydırarak yapıştırıyoruz: mor bant ekranın
       üstünde kalıyor, geriye yalnızca beyaz menü görünüyor.

       Not: sarmalı "static" yapıp yapışkanlığı doğrudan .eth-header'a
       vermek işe yaramaz — yapışkan bir öğe kapsayıcısının dışına
       çıkamaz, menü birkaç piksel sonra bırakır. */
    top: -42px;
    z-index: 800;
    background: #fff;
}

body:not(.eth-page-home) .eth-header {
    background: #fff;
    box-shadow: 0 2px 10px rgba(20, 20, 45, .06);
}

/* Mor bant kısalırsa kaydırma da ona uysun */
@media (max-width: 1024px) {
    body:not(.eth-page-home) .eth-shell-header { top: 0; }
}

/* Menü tepede dururken bağlantı hedefleri altında kalmasın */
body:not(.eth-page-home) [id] {
    scroll-margin-top: 108px;
}

/* ---------------------------------------------------------------------------
 * URUN SAYFASINDAKI KATALOG BUTONU
 *
 * Panelden yuklenen katalog (media/product/file/) urun sayfasinda hic
 * gosterilmiyordu. urun-detay.php'ye eklenen butonun bicimi.
 * ------------------------------------------------------------------------- */
.eth-pd-catalog {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 22px;
    border: 1px solid #332c63;
    border-radius: 6px;
    background: #fff;
    color: #332c63;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.eth-pd-catalog:hover,
.eth-pd-catalog:focus {
    background: #332c63;
    color: #fff;
}

.eth-pd-catalog i {
    font-size: 16px;
}

.eth-pd-catalog em {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    opacity: .7;
}

/* Yazdirma: renkler kagida da ciksin */
@media print {
    .tablepress thead th,
    .tablepress tr.row-1 td,
    .tablepress.header2 tr.row-2 td,
    .tablepress.header3 tr.row-2 td,
    .tablepress.header3 tr.row-3 td {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}