/* ===========================================================================
   Öz Cıvata — siteye özel stiller
   ---------------------------------------------------------------------------
   Tema dosyalarını (style.css, responsive.css …) DEĞİŞTİRMEYİN; tema
   güncellenirse değişiklikler kaybolur. Siteye özel her kural bu dosyada
   toplanır ve tema dosyalarından SONRA yüklenir.
   =========================================================================== */


/* --- B2B giriş butonu (üst bar) -------------------------------------------
   Müşteri talebi: B2B platformuna yönlendiren buton sitenin en üst kısmında,
   sosyal medya ikonlarının solunda belirgin şekilde dursun. */
.oz-b2b-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 22px;
    padding: 9px 18px;
    border: 1px solid var(--base-color, #0e7fe1);
    border-radius: 4px;
    background: var(--base-color, #0e7fe1);
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
    vertical-align: middle;
    transition: background .3s ease, color .3s ease;
}
.oz-b2b-btn:hover {
    background: transparent;
    color: var(--base-color, #0e7fe1) !important;
}
.oz-b2b-btn i { font-size: 13px; }

/* Dar ekranlarda menüyü sıkıştırmasın: yazı gizlenir, ikon kalır */
@media (max-width: 1199px) {
    .oz-b2b-btn span { display: none; }
    .oz-b2b-btn { padding: 9px 12px; margin-right: 14px; }
}


/* --- Ürün detayı: Kategori / Standart değerleri ----------------------------
   Etiketler ("KATEGORİ", "STANDART") beyaz ve kalınken, asıl bilgiyi taşıyan
   değerlerin hiçbir sınıfı yoktu; bölümün varsayılan gri rengini alıp soluk
   görünüyorlardı. Değer etiketten daha okunaklı olmalı. */
#product-category-info,
#product-standard-info {
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: .2px;
}


/* --- Footer menüsü: tek satır ---------------------------------------------
   8 öğe 729px yer kaplıyor, sütun ise 682px idi ve menü iki satıra
   kayıyordu. Telif sütununda 508px alanın yalnızca 222px'i kullanıldığı
   için genişliği menüye aktarıyoruz; ayrıca öğe aralığını bir tık
   daraltıyoruz. Böylece 1200px'te bile tek satır kalır. */
@media (min-width: 992px) {
    footer .footer-bottom .col-lg-7 { flex: 0 0 auto; width: 68%; }
    footer .footer-bottom .col-lg-5 { flex: 0 0 auto; width: 32%; }

    .footer-navbar { white-space: nowrap; }
    .footer-navbar li a { padding-right: 13px; }
}


/* --- İletişim formu: KVKK onay kutusu --------------------------------------
   Varsayılan Bootstrap kutusu koyu zeminde beyaz bir blok gibi görünüyor ve
   metne yapışık duruyordu; "hatalı alan mı, zorunlu mu" ayırt edilemiyordu. */
.kvkk-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-left: 0;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
}

/* !important şart: temanın genel input kuralı bu kutuya padding: 12px 25px
   verip 52x26'lık bir dikdörtgene dönüştürüyordu. */
.kvkk-check .form-check-input {
    flex: 0 0 auto;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    padding: 0 !important;
    margin: 1px 0 0 0 !important;
    float: none;
    cursor: pointer;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 3px;
    appearance: none;
    -webkit-appearance: none;
}
.kvkk-check .form-check-input:hover { border-color: var(--base-color, #0e7fe1); }
.kvkk-check .form-check-input:checked {
    background-color: var(--base-color, #0e7fe1);
    border-color: var(--base-color, #0e7fe1);
    /* Onay tiki: dış dosya olmadan çalışsın diye gömülü SVG */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}
.kvkk-check .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(14, 127, 225, 0.25);
    border-color: var(--base-color, #0e7fe1);
}
.kvkk-check .form-check-label {
    margin: 0;
    line-height: 1.55;
    cursor: pointer;
}
/* Zorunlu alan olduğu açıkça görünsün */
.kvkk-check .form-check-label::after {
    content: " *";
    color: var(--base-color, #0e7fe1);
    font-weight: 700;
}


/* --- İletişim formu: sonuç mesajı ------------------------------------------
   contact-form.php ?status=... ile geri dönüyordu ama sayfada bunu gösteren
   hiçbir şey yoktu: kullanıcı gönderdikten sonra başarılı mı değil mi
   göremiyordu. */
#form-status {
    display: none;
    margin-bottom: 22px;
    padding: 14px 18px;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1.5;
}
#form-status.is-success {
    display: block;
    background: rgba(40, 167, 69, 0.12);
    border: 1px solid rgba(40, 167, 69, 0.45);
    color: #7ee2a0;
}
#form-status.is-error {
    display: block;
    background: rgba(220, 53, 69, 0.12);
    border: 1px solid rgba(220, 53, 69, 0.45);
    color: #f3a1aa;
}


/* --- Slider okunabilirlik katmanı (yalnızca ana sayfa) ---------------------
   Slayt görselleri panelden değiştirilebiliyor; açık tonlu bir görsel
   yüklendiğinde beyaz başlık/alt yazı okunmaz hale geliyordu. Karartmayı
   görsele gömmek yerine katman olarak veriyoruz ki ileride yüklenecek her
   görselde de çalışsın.

   Metin solda durduğu için geçiş soldan sağa; ürün tarafı (sağ) neredeyse
   temiz kalır. pointer-events:none şart — üstündeki "sonraki slayt" düğmesi
   tıklanabilir kalmalı. */
#ozcivata-slider_wrapper .tp-revslider-mainul > li::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        100deg,
        rgba(18, 18, 18, 0.88) 0%,
        rgba(18, 18, 18, 0.72) 30%,
        rgba(18, 18, 18, 0.42) 52%,
        rgba(18, 18, 18, 0.12) 72%,
        rgba(18, 18, 18, 0.05) 100%
    );
}
/* Üst menünün görsel üzerinde kaybolmaması için ince bir kararma */
#ozcivata-slider_wrapper .tp-revslider-mainul > li::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 220px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%);
}
/* Tablet ve altında metin ortalanıyor -> yatay geçiş yerine her yöne eşit
   kararma daha okunaklı. */
@media (max-width: 991px) {
    #ozcivata-slider_wrapper .tp-revslider-mainul > li::after {
        background: rgba(18, 18, 18, 0.62);
    }
}

/* ---------------------------------------------------------------------
   Ürün ölçü tabloları
   ---------------------------------------------------------------------
   Tablolar canlı siteden birleşik hücreleriyle (rowspan/colspan) birlikte
   alınıyor. Bazı standartlarda 14 sütuna kadar çıkıyor; dar ekranda sayfayı
   yatay taşırmasın diye her tablo kendi kaydırma kutusuna alınıyor
   (kutuyu js/products.js oluşturur).                                    */
.oz-tablo-kaydir {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 24px;
}

.ud_aciklama table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    text-align: center;
    font-size: 14px;
}

.ud_aciklama th,
.ud_aciklama td {
    border: 1px solid rgba(255, 255, 255, .18);
    padding: 7px 10px;
    vertical-align: middle;
    white-space: nowrap;
}

.ud_aciklama thead th {
    background: #0a5eb0;
    color: #fff;
    font-weight: 600;
    line-height: 1.35;
}

/* Birleşik hücreler satır ortasında kalsın; ölçüyü hangi satırların
   paylaştığı ancak böyle okunuyor. */
.ud_aciklama td[rowspan] {
    vertical-align: middle;
    background: rgba(255, 255, 255, .03);
}

.ud_aciklama tbody td:first-child {
    font-weight: 600;
    color: #fff;
}

.ud_aciklama tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, .04);
}

.ud_aciklama .product-description {
    text-align: left;
}

@media (max-width: 575px) {
    .ud_aciklama table { font-size: 12.5px; }
    .ud_aciklama th,
    .ud_aciklama td { padding: 5px 7px; }
}
/* Slider konum numarasi ---------------------------------------------------
   Sablonun ozgun halinde bu numara koyu gorsellerin uzerine koyu mavi ince
   konturla ciziliyor ve sol kenardan kirpiliyordu; pratikte gorunmuyordu.
   Ekranda okunabilen tek numara "sonraki slayt" dugmesindeki oldugu icin
   birinci slaytta konum "02" gibi okunuyordu. Kontur beyaza cekildi;
   tasarimin istedigi hayalet gorunum korunuyor ama numara secilebiliyor. */
.oz-slayt-numarasi {
    -webkit-text-stroke-color: rgba(255, 255, 255, .55) !important;
}

/* Ust bar opak arka plan -------------------------------------------------
   Musteri notu (22.09.2026): "okunabilirligi arttirmak icin en ust bar'a
   arkaplan mi yapsak opak? sitenin arka plan renginde #191919".

   Renk <header> elemanina DEGIL, nav'in kendisine veriliyor. Sebebi:
   tema nav'i akistan cikariyor (style.css -> "header .disable-fixed {
   position: absolute }"), header'in baska akistaki cocugu da yok; yani
   <header> sifir yuksekliginde. Ana sayfada <header> uzerinde duran satir
   ici gradient de bu yuzden hic gorunmuyordu -- kaldirildi.

   !important sart: Bootstrap'in .bg-transparent kurali
   "background-color: transparent !important" diyor (vendors.css) ve nav
   o sinifi tasiyor. Acilir menuler (.dropdown-menu) bu kuraldan
   etkilenmez, kendi arka planlarini korur.

   Mobil menu zaten ayni renkte (data-mobile-nav-bg-color="#191919"),
   boylece bar her sayfada ve her genislikte tutarli. */
header .navbar {
    background-color: #191919 !important;
}

/* Alt sayfa baslik bandi okunabilirligi ----------------------------------
   Musteri notu (22.09.2026): "alt sayfaya girdiginde basliklar da zor
   okunuyor, opak gri bir arkaplan?".
   Baslik bandi banner gorselinin uzerine beyaz h1 + breadcrumb basiyor;
   acik tonlu bir banner yuklendiginde yazi kayboluyordu. Gorseli tamamen
   kapatmak yerine dikey bir karartma katmani konuldu: ust uc koyu (opak
   ust barla birlesir), alt uc koyu (baslik ve breadcrumb orada duruyor --
   bolum align-items-end), orta bolge acik kalir ve gorsel gorunmeye devam
   eder. Slider'daki karartma katmaniyla ayni yaklasim.
   Bu sinif yalnizca 10 alt sayfada var; ana sayfada kullanilmiyor. */
.page-title-big-typography {
    position: relative;
}

.page-title-big-typography::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom,
        rgba(25, 25, 25, .78) 0%,
        rgba(25, 25, 25, .35) 45%,
        rgba(25, 25, 25, .82) 100%);
}

.page-title-big-typography > .container {
    position: relative;
    z-index: 1;
}