/* --- RESPONSIVE GÖRÜNÜRLÜK (Mobil / Masaüstü Ayırımı) --- */
.d-mobile-none { display: none !important; }
.d-desktop-none { display: block !important; }

@media screen and (min-width: 1024px) {
    .d-mobile-none { display: block !important; }
    .d-desktop-none { display: none !important; }
}

/* --- TABLO & KAPSAYICI STİLLERİ --- */
.browse-product__variants {}
@media screen and (min-width: 1024px) {
    .browse-product__variants {  }
}

.browse-product__variants__top {
    margin-bottom: 20px;
}

.browse-product__table {
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* --- MASAÜSTÜ TABLO TASARIMI --- */
.browse-product__variants table {
    width: 100%;
    border-collapse: collapse;
}

.browse-product__variants table thead tr {
    background-color: #f9f9f9;
}

.browse-product__variants table thead tr th {
    text-align: left;
    color: rgba(0,0,0,.5);
    min-width: 160px;
    max-width: 160px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
}

.browse-product__variants table tbody tr {
    background-color: #fff;
    border: 1px solid #eee8e6;
    margin-bottom: 4px;
    box-shadow: 0 16px 32px rgba(0,0,0,.04);
}

.browse-product__variants table tbody tr td {
    color: #1e1d27;
    min-width: 160px;
    max-width: 160px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
}

.browse-product__variants table tbody tr td:first-of-type {
    font-weight: 600;
}

/* --- MOBİL KART LISTESİ TASARIMI --- */
.browse-product__variants ul {
    margin-bottom: 12px;
    padding: 0;
    list-style: none;
}

.browse-product__variants ul li {
    background-color: #fff;
    border: 1px solid #eee;
    display: flex;
}

.browse-product__variants ul li:nth-child(2n) {
    border-top: none;
    border-bottom: none;
}

.browse-product__variants ul li span {
    color: #1e1d27;
    padding: 6px 12px;
    font-size: 12px;
    line-height: 20px;
}

.browse-product__variants ul li span:first-child {
    opacity: .6;
    flex: 0 0 45%;
    width: 45%;
}

.browse-product__variants ul li span:nth-child(2) {
    border-left: 1px solid #eee;
    flex: 0 0 55%;
    width: 55%;
}

/* --- NAVİGASYON OKLARI KONTROLLERİ --- */
.browse-product__table-navigation {
    display: none;
}

@media screen and (min-width: 1024px) {
    .browse-product__table-navigation {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
    }

    .browse-product__table-navigation p {
        cursor: pointer;
        margin: 0 !important;
        display: flex;
        align-items: center;
        padding: 4px;
        user-select: none;
    }

    .browse-product__table-navigation p.left-begin,
    .browse-product__table-navigation p.left {
        transform: rotate(180deg);
    }

    .browse-product__table-navigation p.left-begin,
    .browse-product__table-navigation p.right-end {
        align-items: center;
        display: flex;
    }

    .browse-product__table-navigation .left-begin img:first-child {
        margin-right: -18px;
    }

    .browse-product__table-navigation .right-end img:nth-child(2) {
        margin-left: -18px;
    }
}


/*Ürün Grid Yapısı*/
.urun-grid .uk-text-success {
    color: #57c575 !important;
    font-weight: 900;
}

/* 1. Mobil Görünüm (0 - 639px arası varsayılan değer) */
.urun-grid .el-item {
    box-shadow: 0 12px 35px rgba(18,43,80,.08);
    border-radius: 22px;
    border: 1px solid #d9e2ec;
    padding: 20px;
    background: #fff;
}

/* 2. Tablet Görünüm (640px - 959px arası) */
@media (min-width: 640px) and (max-width: 959px) {
    .urun-grid .el-item {
        /* Tablet için ideal yükseklik */
    }
}

/* 3. Masaüstü / PC Görünüm (960px ve üzeri) */
@media (min-width: 960px) {
    .urun-grid .el-item {
        height: 350px;
    }
}


/* Ürün Sayfası */
.urun-govde, .golge {
    box-shadow: 0 12px 35px rgba(18, 43, 80, .08);
    border-radius: 22px;
    border: 1px solid #d9e2ec;
    padding: 40px;
    background: #fff;
}
@media (max-width: 959px) {
    .urun-govde, .golge {
		padding: 30px 20px;
    }
}

/* PDF DÖKÜMANLAR */

/* Kartı göreceli pozisyona getirip taşmaları kontrol altına alıyoruz */
.pdf-dokumanlar .el-item {
    position: relative;
    overflow: hidden;
}

/* Orijinal gri döküman formu ve tam ortalanmış lacivert (#164194) indirme oku */
.pdf-dokumanlar .el-item::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    opacity: 0.2;
    height: 30px;
    pointer-events: none; /* Tıklamayı engellemez */
    
    /* Vektörel olarak kusursuz çizilmiş SVG */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="none" stroke="%234a5c7a" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" d="M 22 8 L 54 8 L 76 30 L 76 52 M 12 80 L 12 20 C 12 13.4, 16.4 8, 22 8 M 12 80 C 12 86.6, 16.4 92, 22 92 L 48 92"/><path fill="none" stroke="%234a5c7a" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" d="M 54 8 L 54 30 L 76 30"/><line x1="24" y1="38" x2="52" y2="38" stroke="%237ea4dd" stroke-width="6" stroke-linecap="round"/><line x1="24" y1="52" x2="46" y2="52" stroke="%237ea4dd" stroke-width="6" stroke-linecap="round"/><line x1="24" y1="66" x2="38" y2="66" stroke="%237ea4dd" stroke-width="6" stroke-linecap="round"/><circle cx="70" cy="70" r="20" fill="%23164194"/><path fill="%23ffffff" d="M 65 58 H 75 V 68 H 80 L 70 80 L 60 68 H 65 Z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s ease;
}

/* Hover yapıldığında ikona çok hafif dinamik ölçekleme */
.pdf-dokumanlar .el-item:hover::after {
    transform: translateY(-50%) scale(1.08);
}
/* RFA / Revit Modeli Kartı İçin Görünürlük Ayarı */
.pdf-dokumanlar .el-item:has(a[href*=".rfa"])::after {
    /* İkonun içindeki koyu lacivert renkleri beyaza çevirir */
    filter: brightness(0) invert(1) !important;
    /* Opaklığı artırarak lacivert zeminde tam net görünmesini sağlar */
    opacity: 0 !important;
}

/* Fareyle üzerine gelindiğinde (Hover) ikonu %100 net yap */
.pdf-dokumanlar .el-item:has(a[href*=".rfa"]):hover::after {
    opacity: 0 !important;
}


/* YOOtheme varsayılan ayracını sıfırla ve yerine ok (>) yerleştir */
.uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before {
    content: ">" !important;
    margin: 0 8px !important;
    color: #9a9eb5; 
    font-weight: bold;
}

.sayfa-kilavuzu {
    box-shadow: 0 12px 35px rgba(18, 43, 80, .08);
    padding: 10px 10px 10px 20px;
    border: 1px solid #d9e2ec;
    border-radius: 10px;
}
/* Sadece ilk elemanın içindeki Home ikonunu dikey ortala */
.uk-breadcrumb > li:first-child [uk-icon] {
    vertical-align: middle !important;
    position: relative;
    top: -2px; /* İkonu milimetrik yukarı/aşağı oynatmak için bu değeri değiştirebilirsin */
}

/* =========================================================
   ÜRÜN KATEGORİLERİ - ANA BÖLÜM
   ========================================================= */

.ana_bolum {
    border: 1px solid #edf0f5;
    border-radius: 20px;
    background: #f7f8fa;
    padding: 50px;
    box-shadow:0 6px 10px rgba(18, 43, 80, .08);
}


/* =========================================================
   DUYAR / ÜST BAŞLIK
   ========================================================= */

.ana_bolum .el-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
    color: #e85d04;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

span.cizgi {
    display: inline-block;
    width: 28px;
    height: 2px;
    background: #e85d04;
    border-radius: 2px;
}


/* =========================================================
   ANA BAŞLIK
   ========================================================= */

.ana_bolum .sol .el-title {
    margin: 0;
    color: #173f8f;
    ffont-size: clamp(30px, 3vw, 42px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.8px;
}


/* =========================================================
   AÇIKLAMA
   ========================================================= */

.ana_bolum .el-content {
    color: #5f6b7a;
}


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

.ana_bolum .sag .el-image {
    width: min(100%, 600px);
    height: auto;
    max-height: 280px;
    object-fit: contain;
    object-position: center right;
    user-select: none;
    margin-right:55px;
}


/* =========================================================
   RESİM ALANI
   Gradient'in uygulanacağı kapsayıcı
   ========================================================= */

.ana_bolum .resim_sutun .uk-margin {
    position: relative;
    overflow: hidden;
}


/* =========================================================
   GRADIENT / DEGRADE GEÇİŞ
   Solda #f8f8f8 → sağda tamamen transparan
   ========================================================= */

.ana_bolum .resim_sutun .uk-margin::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    background: linear-gradient(
        90deg,
        rgba(248, 248, 248, 1) 0%,
        rgba(248, 248, 248, 0.88) 12%,
        rgba(248, 248, 248, 0.62) 30%,
        rgba(248, 248, 248, 0.32) 50%,
        rgba(248, 248, 248, 0.12) 70%,
        rgba(248, 248, 248, 0) 100%
    );
}


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

@media (max-width: 767px) {

    .ana_bolum {
        padding: 40px 25px !important;
    }

    .ana_bolum .el-image {
        width: 100%;
        max-height: 220px;
    }

    .ana_bolum .resim_sutun .uk-margin::after {
        background: linear-gradient(
            90deg,
            rgba(248, 248, 248, 0.95) 0%,
            rgba(248, 248, 248, 0.55) 30%,
            rgba(248, 248, 248, 0.15) 65%,
            rgba(248, 248, 248, 0) 100%
        );
    }
}
@media (min-width: 960px) {
.kategori_tanitim {
    padding-left:55px;
}
}


/* İletişim Mouse Hareket */
#mouse {
  animation: bounceWheel 2s ease-in-out infinite;
  transform-origin: center bottom;
}
#mouse .el-image {
  transform: rotate(180deg) !important;
}
@keyframes bounceWheel {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.duyar_genel_ozellikler p {
    max-width: 100%;
    float: left;
    margin: 0px;
    margin-right: 5px;
    width: auto;
}