/* ==========================================================================
   Sancarlife — marka görünümü
   --------------------------------------------------------------------------
   Devralınan tema (main.css, ~283 KB) kaynak kurulumun terracotta paletiyle
   geliyor. O dosyaya dokunmak yerine buradan eziyoruz; marka ayarları tek
   dosyada kalsın, geri alması kolay olsun diye.

   Menü stili tahminle değil, mevcut sancarlife.com temasının kendi
   kurallarından alındı (bbwWpTheme5/style.css):

       #mainNav .navbar-nav .nav-item .nav-link {
           color:#333333; font-weight:700; font-size:17px;
           border-bottom:2px solid transparent;
       }
       ...:hover, .active>.nav-link {
           color:#d08b13; border-bottom:2px solid #d08b13;
       }

   Yani: BEYAZ zeminli ince menü, koyu gri kalın yazı, üzerine gelince altın
   renk + 2px alt çizgi. Büyük harf YOK, ayraç çizgisi YOK.
   Yeşil yalnızca sayfanın en üstündeki ince şerittir.
   ========================================================================== */

:root {
    --sl-yesil: #006a44;
    --sl-yesil-koyu: #005436;
    --sl-altin: #d08b13;
    --sl-altin-koyu: #b0740f;
    --sl-metin: #333333;
    --sl-font: 'Inter Tight', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---------- Tipografi ---------- */

body,
input, select, textarea, button,
.nav-text, .nav-link,
h1, h2, h3, h4, h5, h6,
.section-title, .product-name, .btn {
    font-family: var(--sl-font) !important;
}

body { color: var(--sl-metin); }
h1, h2, h3, h4, h5, h6 { font-weight: 700; }

/* ---------- Üstteki ince yeşil şerit ---------- */

/* ==========================================================================
   SAYFA BAŞLIK BANDI (.page-header)
   Devralınan tema burada gri geometrik bir arka plan görseli kullanıyordu.
   Görsel markayla ilgisizdi; yerine yeşil marka bandı konuldu.
   İletişim sayfası kendi bandını (.il-ust) kullanır, buraya dahil değildir.
   ========================================================================== */

/* Başlık ve breadcrumb temada AYRI kardeş bloklar; ikisi birlikte tek bir
   şerit gibi görünsün diye başlık alt dolgusunu bırakır, breadcrumb onun
   içine oturur.

   Koyu yeşil dolu bant kaldırıldı: sayfanın en üstünde büyük, doygun bir
   renk kütlesi ağır duruyordu. Yerine açık zemin, ince altın vurgu ve
   koyu başlık — menüdeki yeşille yarışmıyor, içeriğe yer bırakıyor. */

.page-header {
    position: relative;
    background-image: none !important;
    background: linear-gradient(180deg, #fbfbf8 0%, #f4f4ee 100%) !important;
    /* Tema burada SABİT height:250px veriyor; dolgu ayarları ona yenildiği
       için bant devasa kalıyordu. Yükseklik içeriğe bırakılır. */
    height: auto !important;
    min-height: 0 !important;
    padding: 34px 0 8px !important;
    display: block !important;
    overflow: visible;
    text-align: left !important;
    border-bottom: 0 !important;
}

.page-header .page-title,
.page-header h1,
.page-header h2 {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto !important;
    padding: 0 20px;
    color: #16241d !important;
    font-family: var(--sl-font) !important;
    font-size: 33px !important;
    font-weight: 700 !important;
    letter-spacing: -.6px;
    line-height: 1.18;
    text-transform: none !important;
}

/* Başlığın altındaki kısa altın çizgi — bandı bitiren tek vurgu. */
.page-header .page-title::after,
.page-header h1::after {
    content: "";
    display: block;
    width: 46px;
    height: 3px;
    margin-top: 14px;
    border-radius: 3px;
    background: var(--sl-altin);
}

/* Breadcrumb — başlığın altında, ince ve sessiz. */
.breadcrumb-nav {
    position: relative;
    z-index: 3;
    margin: 0 !important;
    padding: 0 !important;
    background: linear-gradient(180deg, #f4f4ee 0%, #f4f4ee 100%) !important;
    border: 0 !important;
    border-bottom: 1px solid #e7e7de !important;
}

.breadcrumb-nav .container { max-width: 1180px; padding: 0 20px; }

.breadcrumb-nav .breadcrumb {
    margin: 0 !important;
    padding: 14px 0 16px !important;
    background: transparent !important;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
}

.breadcrumb-nav .breadcrumb li,
.breadcrumb-nav .breadcrumb a {
    background: transparent !important;
    color: #8a8a7e !important;
    font-size: 12.5px;
    letter-spacing: .02em;
}

.breadcrumb-nav .breadcrumb a:hover { color: var(--sl-altin) !important; }

.breadcrumb-nav .breadcrumb .active {
    color: var(--sl-yesil) !important;
    font-weight: 600;
}

.breadcrumb-nav .breadcrumb li + li::before { color: #c9c9bd !important; }

.breadcrumb-nav .breadcrumb .d-icon-home { font-size: 14px; }

@media (max-width: 600px) {
    .page-header { padding: 24px 0 6px !important; }
    .page-header .page-title,
    .page-header h1,
    .page-header h2 { font-size: 24px !important; }
    .page-header .page-title::after,
    .page-header h1::after { margin-top: 11px; }
    .breadcrumb-nav .breadcrumb { padding: 11px 0 13px !important; }
}

/* ---------- Marka rengi: metin ve vurgular ---------- */

a:hover,
.section-title,
.product-name:hover,
.breadcrumb a:hover {
    color: var(--sl-altin) !important;
}

/* ---------- Butonlar ---------- */

.btn-primary,
.btn-dark,
button[type="submit"],
.search-submit-btn,
.btn.btn-solid {
    background-color: var(--sl-yesil) !important;
    border-color: var(--sl-yesil) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-dark:hover,
button[type="submit"]:hover,
.search-submit-btn:hover,
.btn.btn-solid:hover {
    background-color: var(--sl-yesil-koyu) !important;
    border-color: var(--sl-yesil-koyu) !important;
}

.btn-outline {
    color: var(--sl-yesil) !important;
    border-color: var(--sl-yesil) !important;
}

.btn-outline:hover {
    background-color: var(--sl-yesil) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   ALT BİLGİ (footer)
   Koyu antrasit zemin, altın vurgular. Üç kat: logo şeridi · sütunlar · telif.
   ========================================================================== */

.sl-footer {
    background: #262626;
    color: rgba(255, 255, 255, .78);
    font-size: 15px;
    /* Üst boşluk yok: sayfa bölümlerinin kendi alt dolgusu var, burada
       ayrıca boşluk bırakınca renkli bantla alt bilgi arasında beyaz bir
       şerit kalıyordu. */
    margin-top: 0;
}

.sl-ft-kap {
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---- Üst şerit: logo · slogan · sosyal ---- */

.sl-ft-ust {
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    padding: 26px 0;
}

.sl-ft-ust .sl-ft-kap {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}

.sl-ft-logo {
    background: #ffffff;
    border-radius: 10px;
    padding: 12px 18px;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.sl-ft-logo img { height: 46px; width: auto; display: block; }

.sl-ft-slogan {
    flex: 1 1 320px;
    margin: 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .72);
}

.sl-ft-sosyal { display: flex; gap: 10px; margin-left: auto; }

.sl-ft-sosyal a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .08);
    color: #ffffff !important;
    font-size: 15px;
    transition: background .18s ease, transform .18s ease;
}

.sl-ft-sosyal a:hover {
    background: var(--sl-altin);
    transform: translateY(-2px);
}

/* ---- Orta: sütunlar ---- */

.sl-ft-orta { padding: 44px 0 40px; }

.sl-ft-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr 1.4fr;
    gap: 40px;
}

.sl-ft-sutun h4 {
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 20px;
    padding-bottom: 12px;
    position: relative;
}

.sl-ft-sutun h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 2px;
    background: var(--sl-altin);
}

.sl-ft-sutun p {
    margin: 0 0 18px;
    font-size: 14.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .68);
}

.sl-ft-tel {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--sl-altin) !important;
    font-size: 21px;
    font-weight: 800;
    margin-bottom: 14px;
    letter-spacing: .3px;
}

.sl-ft-tel:hover { color: #eaa22a !important; }

.sl-ft-btn {
    display: inline-block;
    padding: 12px 26px;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 6px;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 700;
    transition: all .18s ease;
}

.sl-ft-btn:hover {
    background: var(--sl-altin);
    border-color: var(--sl-altin);
    color: #ffffff !important;
}

.sl-ft-liste { list-style: none; margin: 0; padding: 0; }

.sl-ft-liste li { margin-bottom: 11px; }

.sl-ft-liste a {
    color: rgba(255, 255, 255, .72) !important;
    font-size: 14.5px;
    position: relative;
    padding-left: 0;
    transition: color .16s ease, padding-left .16s ease;
}

.sl-ft-liste a:hover {
    color: var(--sl-altin) !important;
    padding-left: 6px;
}

.sl-ft-iletisim { list-style: none; margin: 0; padding: 0; }

.sl-ft-iletisim li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    font-size: 14.5px;
    line-height: 1.6;
}

.sl-ft-iletisim li:last-child { border-bottom: 0; }

.sl-ft-iletisim svg {
    color: var(--sl-altin);
    flex-shrink: 0;
    margin-top: 2px;
}

.sl-ft-iletisim a,
.sl-ft-iletisim span {
    color: rgba(255, 255, 255, .78) !important;
}

.sl-ft-iletisim a:hover { color: var(--sl-altin) !important; }

/* ---- Çalışma saatleri + bayi kartı (sağ sütun) ---- */

.sl-ft-saatler { list-style: none; margin: 0 0 22px; padding: 0; }

.sl-ft-saatler li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    font-size: 14px;
}

.sl-ft-saatler li:last-child { border-bottom: 0; }
.sl-ft-saatler span { color: rgba(255, 255, 255, .62); }
.sl-ft-saatler strong { color: #ffffff; font-weight: 600; }
.sl-ft-saatler .kapali strong { color: rgba(255, 255, 255, .38); font-weight: 500; }

.sl-ft-bayi {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-left: 3px solid var(--sl-altin);
    border-radius: 0 10px 10px 0;
    padding: 18px;
}

.sl-ft-bayi strong {
    display: block;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
}

.sl-ft-bayi span {
    display: block;
    color: rgba(255, 255, 255, .62);
    font-size: 13.5px;
    line-height: 1.6;
    margin-bottom: 14px;
}

.sl-ft-bayi a {
    display: inline-block;
    padding: 9px 20px;
    background: var(--sl-altin);
    border-radius: 6px;
    color: #ffffff !important;
    font-size: 13.5px;
    font-weight: 700;
    transition: background .18s ease;
}

.sl-ft-bayi a:hover { background: var(--sl-altin-koyu); }

/* ---- Alt: telif ---- */

.sl-ft-alt {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 18px 0;
    background: #1f1f1f;
}

.sl-ft-alt-ic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.sl-ft-alt p { margin: 0; font-size: 13.5px; color: rgba(255, 255, 255, .55); }

.sl-ft-alt a {
    color: rgba(255, 255, 255, .72) !important;
    font-size: 13.5px;
    font-weight: 600;
}

.sl-ft-alt a:hover { color: var(--sl-altin) !important; }

@media (max-width: 991px) {
    .sl-ft-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
    .sl-ft-sosyal { margin-left: 0; }
}

@media (max-width: 600px) {
    .sl-ft-grid { grid-template-columns: 1fr; gap: 28px; }
    .sl-ft-ust .sl-ft-kap { gap: 20px; }
    .sl-ft-tel { font-size: 19px; }
}

/* ---------- Küçük ekran ---------- */

@media (max-width: 991px) {
}

/* =========================================================
   ANASAYFA
   home.php içindeki bölümler. Tema kendi ana sayfa
   bölümlerini `main.css` içinde tanımlamadığı için burada
   `!important` gerekmiyor; yalnızca `.main` üst boşluğu
   temadan geliyor, o eziliyor.
   ========================================================= */

.sl-anasayfa { margin-top: 0 !important; }

/* ---------- Ortak parçalar ---------- */

.sl-etiket {
    display: inline-block;
    background: var(--sl-altin);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: 40px;
    margin-bottom: 18px;
}

.sl-etiket-koyu {
    background: rgba(0, 106, 68, .09);
    color: var(--sl-yesil);
}

.sl-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 30px;
    border-radius: 40px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    border: 2px solid transparent;
    transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}

.sl-btn:hover { transform: translateY(-2px); }

.sl-btn-altin { background: var(--sl-altin); color: #fff !important; }
.sl-btn-altin:hover { background: var(--sl-altin-koyu); color: #fff !important; }

.sl-btn-yesil { background: var(--sl-yesil); color: #fff !important; }
.sl-btn-yesil:hover { background: var(--sl-yesil-koyu); color: #fff !important; }

.sl-btn-cizgi {
    border-color: rgba(255, 255, 255, .55);
    color: #fff !important;
}

.sl-btn-cizgi:hover {
    background: #fff;
    border-color: #fff;
    color: var(--sl-yesil) !important;
}

.sl-bolum { padding: 78px 0; }
.sl-bolum-gri { background: #f6f6f3; }

.sl-bolum-bas {
    max-width: 640px;
    margin: 0 auto 46px;
    text-align: center;
}

.sl-bolum-bas h2,
.sl-uretim h2,
.sl-cagri h2 {
    font-family: var(--sl-font);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.25;
    color: #1b1b1b;
    margin: 0 0 14px;
}

.sl-bolum-bas p {
    font-size: 15px;
    line-height: 1.75;
    color: #6a6a6a;
    margin: 0;
}

/* ---------- Kapak ---------- */

.sl-kapak {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.sl-kapak-gorsel {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
}

.sl-kapak-perde {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        rgba(0, 62, 40, .93) 0%,
        rgba(0, 84, 54, .82) 38%,
        rgba(0, 84, 54, .30) 68%,
        rgba(0, 84, 54, 0) 100%);
}

.sl-kapak-ic {
    position: relative;
    z-index: 2;
    padding: 70px 20px;
    max-width: 1180px;
}

.sl-kapak-ic h1 {
    font-family: var(--sl-font);
    font-size: 52px;
    font-weight: 700;
    line-height: 1.13;
    color: #fff;
    margin: 0 0 20px;
    max-width: 15ch;
}

.sl-kapak-ic h1 em {
    font-style: normal;
    color: #f3c15f;
}

.sl-kapak-ic p {
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .88);
    max-width: 52ch;
    margin: 0 0 32px;
}

.sl-kapak-butonlar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* ---------- Kategori kartları ---------- */

.sl-kat-kart {
    display: block;
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 26px rgba(0, 0, 0, .07);
    margin-bottom: 26px;
    transition: transform .28s ease, box-shadow .28s ease;
}

.sl-kat-kart:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .13);
}

.sl-kat-gorsel {
    display: block;
    height: 250px;
    background-size: cover;
    background-position: center;
    transition: transform .5s ease;
}

.sl-kat-kart:hover .sl-kat-gorsel { transform: scale(1.06); }

.sl-kat-ic {
    display: block;
    padding: 24px 26px 26px;
    border-top: 3px solid var(--sl-altin);
}

.sl-kat-ic strong {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #1b1b1b;
    margin-bottom: 8px;
}

.sl-kat-ic em {
    display: block;
    font-style: normal;
    font-size: 14px;
    line-height: 1.7;
    color: #6a6a6a;
    min-height: 72px;
}

.sl-kat-ok {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sl-yesil);
}

.sl-kat-ok i { transition: transform .25s ease; }
.sl-kat-kart:hover .sl-kat-ok i { transform: translateX(5px); }

/* ---------- Özellik kutuları ---------- */

.sl-ozellik {
    background: #fff;
    border-radius: 16px;
    padding: 32px 26px;
    height: 100%;
    margin-bottom: 24px;
    border: 1px solid #ececE6;
    transition: transform .25s ease, box-shadow .25s ease;
}

.sl-ozellik:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .09);
}

.sl-ozellik-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: rgba(0, 106, 68, .08);
    color: var(--sl-yesil);
    font-size: 22px;
    margin-bottom: 18px;
}

.sl-ozellik h4 {
    font-family: var(--sl-font);
    font-size: 17px;
    font-weight: 700;
    color: #1b1b1b;
    margin: 0 0 10px;
}

.sl-ozellik p {
    font-size: 14px;
    line-height: 1.72;
    color: #6a6a6a;
    margin: 0;
}

/* ---------- Üretim ---------- */

/* Görsel ile metin sütunu aynı yüksekliği paylaşır. Önce satır
   `align-items-center` ile ortalanıyordu; metin daha uzun olduğu için
   görsel ortada asılı kalıyor, üstü ve altı metinle hizasız duruyordu. */
.sl-uretim { align-items: stretch !important; }

.sl-uretim > [class*="col-"] { display: flex; flex-direction: column; justify-content: center; }

.sl-uretim-gorsel {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 30px;
    height: 100%;
    min-height: 380px;
}

.sl-uretim-gorsel::after {
    content: '';
    position: absolute;
    inset: 14px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-radius: 12px;
    pointer-events: none;
}

.sl-uretim-gorsel img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 991px) {
    .sl-uretim-gorsel { height: auto; min-height: 0; }
    .sl-uretim > [class*="col-"] { display: block; }
}

.sl-uretim p {
    font-size: 15px;
    line-height: 1.85;
    color: #6a6a6a;
}

.sl-liste {
    list-style: none;
    padding: 0;
    margin: 24px 0 30px;
}

.sl-liste li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    color: #3d3d3d;
    padding: 9px 0;
    border-bottom: 1px dashed #e6e6e0;
}

.sl-liste li:last-child { border-bottom: 0; }

.sl-liste i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--sl-altin);
    font-size: 13px;
}

/* ---------- Bayilik çağrısı ---------- */

.sl-cagri {
    background: linear-gradient(120deg, #005436 0%, #006a44 58%, #017a4f 100%);
    padding: 58px 0;
}

.sl-cagri-ic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 28px;
}

.sl-cagri h2 { color: #fff; margin-bottom: 8px; }

.sl-cagri p {
    font-size: 15px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .85);
    margin: 0;
    max-width: 56ch;
}

.sl-cagri-butonlar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* ---------- Anasayfa: küçük ekran ---------- */

@media (max-width: 991px) {
    .sl-kapak { min-height: 0; }
    .sl-kapak-ic h1 { font-size: 38px; }
    .sl-kapak-perde {
        background: linear-gradient(180deg, rgba(0, 62, 40, .92) 0%, rgba(0, 84, 54, .86) 100%);
    }
    .sl-bolum { padding: 54px 0; }
    .sl-bolum-bas h2, .sl-uretim h2, .sl-cagri h2 { font-size: 27px; }
    .sl-kat-ic em { min-height: 0; }
    .sl-cagri-ic { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 575px) {
    .sl-kapak-ic h1 { font-size: 31px; }
    .sl-kapak-ic { padding: 52px 20px; }
    .sl-btn { padding: 12px 22px; font-size: 14px; }
}

/* =========================================================
   BOŞ DURUM
   Ürün/blog listesi boşken çıplak uyarı kutusu yerine
   ziyaretçiyi yönlendiren bölüm.
   ========================================================= */

.sl-bos {
    text-align: center;
    max-width: 620px;
    margin: 10px auto 40px;
    padding: 52px 30px 56px;
    background: #f8f8f5;
    border: 1px dashed #dcdcd2;
    border-radius: 18px;
}

.sl-bos-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: rgba(0, 106, 68, .08);
    color: var(--sl-yesil);
    font-size: 29px;
    margin-bottom: 22px;
}

.sl-bos h3 {
    font-family: var(--sl-font);
    font-size: 24px;
    font-weight: 700;
    color: #1b1b1b;
    margin: 0 0 12px;
}

.sl-bos p {
    font-size: 15px;
    line-height: 1.8;
    color: #6a6a6a;
    margin: 0 0 26px;
}

.sl-bos-butonlar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.sl-btn-cizgi-yesil {
    border-color: var(--sl-yesil);
    color: var(--sl-yesil) !important;
}

.sl-btn-cizgi-yesil:hover {
    background: var(--sl-yesil);
    color: #fff !important;
}

/* ---------- Katalog kartları ---------- */

.sl-katalog-kart {
    background: #fff;
    border: 1px solid #ececE6;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 26px;
    height: calc(100% - 26px);
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease;
}

.sl-katalog-kart:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .1);
}

.sl-katalog-kapak {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 210px;
    background-size: cover;
    background-position: center;
    background-color: #f2f2ec;
}

.sl-katalog-kapak-bos {
    color: var(--sl-yesil);
    font-size: 40px;
    opacity: .35;
}

.sl-katalog-ic {
    padding: 24px 24px 26px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    align-items: flex-start;
}

.sl-katalog-ic h4 {
    font-family: var(--sl-font);
    font-size: 18px;
    font-weight: 700;
    color: #1b1b1b;
    margin: 0 0 10px;
}

.sl-katalog-ic p {
    font-size: 14px;
    line-height: 1.72;
    color: #6a6a6a;
    margin: 0 0 20px;
    flex: 1 1 auto;
}

/* =========================================================
   ÜRÜNLER — liste, kenar çubuğu, detay
   ========================================================= */

/* ---------- Kenar çubuğu ---------- */

.sl-yan {
    background: #f8f8f5;
    border: 1px solid #ececE6;
    border-radius: 16px;
    padding: 24px 22px;
    margin-bottom: 30px;
}

.sl-yan h4 {
    font-family: var(--sl-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sl-yesil);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--sl-altin);
}

.sl-yan-liste,
.sl-yan-liste ul { list-style: none; padding: 0; margin: 0; }

.sl-yan-liste > li + li { border-top: 1px dashed #e6e6e0; }

.sl-yan-liste a {
    display: block;
    padding: 10px 0;
    font-size: 15px;
    color: #4a4a4a;
    transition: color .2s ease, padding-left .2s ease;
}

.sl-yan-liste a:hover { color: var(--sl-altin) !important; padding-left: 5px; }
.sl-yan-liste > li.acik > a { color: var(--sl-yesil) !important; font-weight: 700; }
.sl-yan-liste ul { padding-left: 14px; border-left: 2px solid #e6e6e0; margin-bottom: 8px; }
.sl-yan-liste ul a { padding: 7px 0; font-size: 14px; }
.sl-yan-liste ul li.acik > a { color: var(--sl-altin) !important; font-weight: 600; }

/* ---------- Ürün kartı ---------- */

/* Kartlarda özet metni yok: farklı uzunluklar kartları eşit olmayan
   boylarda bırakıyor ve liste yoruyordu. Görsel öne çıkar, ad altında
   durur; ayrıntı detay sayfasında. */

.sl-adet {
    margin: 6px 0 0;
    text-align: center;
}

.sl-adet span {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 30px;
    background: #f4f4ee;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .03em;
    color: #7d7d70;
}

.sl-kat-giris {
    max-width: 640px;
    margin: 0 auto 26px;
    text-align: center;
    font-size: 15.5px;
    line-height: 1.8;
    color: #6a6a6a;
}

.sl-urun-kart {
    display: block;
    position: relative;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(20, 30, 25, .05);
    transition: transform .3s cubic-bezier(.2, .7, .3, 1),
                box-shadow .3s ease;
}

.sl-urun-kart:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 44px rgba(20, 30, 25, .14);
}

.sl-urun-gorsel {
    display: block;
    position: relative;
    overflow: hidden;
    background: #f2f2ec;
}

.sl-urun-gorsel img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}

.sl-urun-kart:hover .sl-urun-gorsel img { transform: scale(1.07); }

/* Görselin altına doğru inen ince karartma — ad ile görsel arasındaki
   geçişi yumuşatır, kart tek parça görünür. */
.sl-urun-gorsel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40%;
    background: linear-gradient(to top, rgba(18, 23, 26, .28), transparent);
    opacity: 0;
    transition: opacity .3s ease;
}

.sl-urun-kart:hover .sl-urun-gorsel::after { opacity: 1; }

/* Kategori etiketi — yalnızca "Tüm Ürünler" listesinde çıkar */
.sl-urun-etiket {
    position: absolute;
    left: 14px;
    top: 14px;
    z-index: 2;
    padding: 6px 14px;
    border-radius: 30px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(6px);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sl-yesil);
}

.sl-urun-ic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 22px 22px;
}

.sl-urun-ic strong {
    display: block;
    font-family: var(--sl-font);
    font-size: 17.5px;
    font-weight: 600;
    line-height: 1.35;
    color: #12171a;
    transition: color .22s ease;
}

.sl-urun-kart:hover .sl-urun-ic strong { color: var(--sl-yesil); }

/* Ad ile ok yan yana.
   Ok önce koyu yeşil dolu bir daireydi; adın yanında ağır ve orantısız
   duruyordu. Artık açık zeminli, ince; hover'da yalnızca yeşil tonu
   koyulaşıp ok sağa kayıyor. */
.sl-urun-ic .sl-kat-ok {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f4f4ee;
    font-size: 0;
    color: #9a9a8c;
    transition: background-color .25s ease, color .25s ease;
}

.sl-urun-ic .sl-kat-ok i {
    font-size: 11px;
    transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}

.sl-urun-kart:hover .sl-urun-ic .sl-kat-ok {
    background: rgba(0, 106, 68, .1);
    color: var(--sl-yesil);
}

.sl-urun-kart:hover .sl-urun-ic .sl-kat-ok i { transform: translateX(3px); }

/* ---------- Sayfalama ---------- */

.sl-sayfalama {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 18px;
}

.sl-sayfalama a {
    min-width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid #e0e0d6;
    font-size: 15px;
    font-weight: 600;
    color: #4a4a4a;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.sl-sayfalama a:hover {
    border-color: var(--sl-yesil);
    color: var(--sl-yesil) !important;
}

.sl-sayfalama a.aktif {
    background: var(--sl-yesil);
    border-color: var(--sl-yesil);
    color: #fff !important;
}

/* ---------- Ürün detayı ---------- */

.sl-detay-kapak {
    border-radius: 18px;
    overflow: hidden;
    background: #f2f2ec;
    margin-bottom: 16px;
}

.sl-detay-kapak img { display: block; width: 100%; height: auto; }

.sl-detay-kucukler {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
    margin-bottom: 30px;
}

.sl-detay-kucukler img {
    display: block;
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #ececE6;
    transition: border-color .2s ease, transform .2s ease;
}

.sl-detay-kucukler a:hover img { border-color: var(--sl-altin); transform: translateY(-2px); }

.sl-detay-ad {
    font-family: var(--sl-font);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    color: #1b1b1b;
    margin: 4px 0 10px;
}

.sl-detay-kod { font-size: 14px; color: #8a8a8a; margin-bottom: 16px; }
.sl-detay-kod strong { color: #4a4a4a; }

.sl-detay-ozet {
    font-size: 16px;
    line-height: 1.8;
    color: #4a4a4a;
    margin-bottom: 18px;
}

.sl-detay-metin {
    font-size: 15px;
    line-height: 1.85;
    color: #6a6a6a;
    margin-bottom: 24px;
}

.sl-detay-baslik {
    font-family: var(--sl-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sl-yesil);
    margin: 0 0 12px;
}

.sl-ozellik-tablo {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 28px;
}

.sl-ozellik-tablo th,
.sl-ozellik-tablo td {
    padding: 11px 14px;
    font-size: 14px;
    text-align: left;
    border-bottom: 1px solid #ececE6;
}

.sl-ozellik-tablo th {
    width: 42%;
    font-weight: 600;
    color: #4a4a4a;
    background: #f8f8f5;
}

.sl-ozellik-tablo td { color: #6a6a6a; }

.sl-detay-cagri {
    background: #f8f8f5;
    border: 1px solid #ececE6;
    border-left: 4px solid var(--sl-altin);
    border-radius: 14px;
    padding: 24px 24px 26px;
}

.sl-detay-cagri h4 {
    font-family: var(--sl-font);
    font-size: 18px;
    font-weight: 700;
    color: #1b1b1b;
    margin: 0 0 8px;
}

.sl-detay-cagri p {
    font-size: 14px;
    line-height: 1.7;
    color: #6a6a6a;
    margin: 0 0 18px;
}

.sl-detay-cagri .sl-bos-butonlar { justify-content: flex-start; }

/* ---------- Benzer ürünler ---------- */

.sl-benzer { margin-top: 60px; }

.sl-benzer h3 {
    font-family: var(--sl-font);
    font-size: 26px;
    font-weight: 700;
    color: #1b1b1b;
    margin: 0 0 26px;
    padding-bottom: 14px;
    border-bottom: 1px solid #ececE6;
}

@media (max-width: 991px) {
    .sl-detay-ad { font-size: 24px; }
    .sl-urun-ic { padding: 16px 18px 18px; }
    .sl-urun-ic strong { font-size: 16px; }
    .sl-kat-sekme a { padding: 9px 18px; font-size: 13.5px; }
}

/* =========================================================
   BAŞLIK — üst şerit + tek satır ana menü
   Kaynak: yass2/pages/box/header/menu.php

   Menü sağa hizalı: logo solda tek başına durur, gezinme ve
   çağrı düğmesi sağda toplanır. Metin rengi siyaha yakın
   (#12171a) — yeşil yalnızca aktif/hover durumunda görünür,
   böylece marka rengi vurgu olarak kalır.
   ========================================================= */

.sl-header { position: relative; z-index: 100; }

.sl-kap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 26px;
    display: flex;
    align-items: center;
}

/* ---------- Üst şerit ---------- */

.sl-ust {
    background: #0b3b28;
    color: rgba(255, 255, 255, .72);
    font-size: 12.5px;
    letter-spacing: .01em;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.sl-ust .sl-kap { justify-content: space-between; min-height: 42px; gap: 16px; }

.sl-ust-sol,
.sl-ust-sag { display: flex; align-items: center; }

/* Sol taraf: iletişim bilgileri, aralarında ince ayraç */
.sl-ust-sol a { padding: 0 18px; }
.sl-ust-sol a:first-child { padding-left: 0; }
.sl-ust-sol a + a { border-left: 1px solid rgba(255, 255, 255, .14); }

.sl-ust a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .72) !important;
    transition: color .2s ease;
}

.sl-ust a:hover { color: #fff !important; }

.sl-ust i { font-size: 11.5px; color: var(--sl-altin); }

.sl-ust-sag { gap: 10px; }

/* Dil ve bayi girişi — sağda iki küçük düğme */
.sl-ust-dil,
.sl-ust-bayi {
    padding: 5px 14px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, .16);
    font-weight: 500;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.sl-ust-dil:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); }

.sl-ust-bayi {
    background: var(--sl-altin);
    border-color: var(--sl-altin);
    color: #fff !important;
}

.sl-ust-bayi i { color: rgba(255, 255, 255, .85); }
.sl-ust-bayi:hover { background: var(--sl-altin-koyu); border-color: var(--sl-altin-koyu); }

/* ---------- Ana satır ---------- */

.sl-ana {
    background: #fff;
    border-bottom: 1px solid #ededE6;
    transition: box-shadow .25s ease;
}

.sl-ana .sl-kap { min-height: 84px; gap: 28px; }

.sl-logo { flex: 0 0 auto; margin-right: auto; }

.sl-logo img {
    display: block;
    height: 48px;
    width: auto;
    transition: height .25s ease;
}

/* Menü sağda, çağrı düğmesinin solunda */
.sl-nav { flex: 0 0 auto; }

.sl-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 2px;
}

.sl-nav a {
    position: relative;
    display: block;
    padding: 30px 18px;
    font-family: var(--sl-font);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.15px;
    color: #12171a !important;
    transition: color .22s ease;
    isolation: isolate;
}

/* Hover: arkada yumuşak bir zemin belirir, altında ortadan açılan
   altın çizgi. Üst kenara yeşil çubuk denendi ama menü çubuğunun
   üstünde kopuk bir sekme gibi duruyordu, kaldırıldı. */
.sl-nav a::before {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    top: 18px;
    bottom: 18px;
    border-radius: 10px;
    background: rgba(0, 106, 68, .06);
    opacity: 0;
    transform: scale(.94);
    transition: opacity .22s ease, transform .22s ease;
    z-index: -1;
}

.sl-nav a::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 24px;
    height: 2px;
    border-radius: 2px;
    background: var(--sl-altin);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}

.sl-nav a:hover { color: var(--sl-yesil) !important; }
.sl-nav a:hover::after { transform: scaleX(1); }
.sl-nav a:hover::before { opacity: 1; transform: scale(1); }

.sl-nav a.aktif { color: var(--sl-yesil) !important; }
.sl-nav a.aktif::after { transform: scaleX(1); }


/* ---------- Sağ taraf ---------- */

.sl-ana-sag {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sl-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 28px;
    border-radius: 40px;
    background: #12171a;
    color: #fff !important;
    font-family: var(--sl-font);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.1px;
    transition: background-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.sl-cta:hover {
    background: var(--sl-yesil);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 106, 68, .26);
}

.sl-cta.aktif { background: var(--sl-yesil); }
.sl-cta.aktif:hover { background: var(--sl-yesil-koyu); }

/* ---------- Yapışkan ---------- */

.sl-header.sl-yapisik .sl-ana {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .1);
}

.sl-header.sl-yapisik .sl-ana .sl-kap { min-height: 66px; }
.sl-header.sl-yapisik .sl-logo img { height: 38px; }
.sl-header.sl-yapisik .sl-nav a { padding-top: 21px; padding-bottom: 21px; }
.sl-header.sl-yapisik .sl-nav a::after { bottom: 15px; }
.sl-header.sl-yapisik .sl-cta { padding: 11px 24px; }

/* ---------- Mobil düğme ---------- */

.sl-mobil-dugme {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0 11px;
    border: 1px solid #e4e4da;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s ease;
}

.sl-mobil-dugme:hover { border-color: var(--sl-yesil); }

.sl-mobil-dugme span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: #12171a;
    transition: transform .25s ease, opacity .2s ease;
}

.sl-mobil-dugme.acik span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sl-mobil-dugme.acik span:nth-child(2) { opacity: 0; }
.sl-mobil-dugme.acik span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Mobil çekmece ---------- */

.sl-cekmece {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 300;
    width: min(330px, 88vw);
    height: 100%;
    background: #fff;
    box-shadow: -8px 0 34px rgba(0, 0, 0, .18);
    padding: 28px 24px;
    overflow-y: auto;
}

.sl-cekmece[hidden] { display: none; }
.sl-cekmece ul { list-style: none; margin: 0 0 24px; padding: 0; }
.sl-cekmece li + li { border-top: 1px solid #f1f1e9; }

.sl-cekmece a {
    display: block;
    padding: 15px 4px;
    font-family: var(--sl-font);
    font-size: 16px;
    font-weight: 600;
    color: #12171a !important;
}

.sl-cekmece a.aktif { color: var(--sl-yesil) !important; }

.sl-cekmece-alt {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 20px;
    border-top: 2px solid var(--sl-altin);
}

.sl-cekmece-alt a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border-radius: 11px;
    background: #f6f6f1;
    font-size: 14.5px;
    font-weight: 500;
}

.sl-cekmece-alt a i { color: var(--sl-yesil); width: 16px; }

.sl-perde {
    position: fixed;
    inset: 0;
    z-index: 290;
    background: rgba(10, 20, 15, .5);
}

.sl-perde[hidden] { display: none; }

/* ---------- Kırılımlar ---------- */

@media (max-width: 1150px) {
    .sl-nav a { padding-left: 13px; padding-right: 13px; font-size: 14.5px; }
    .sl-nav a::after { left: 13px; right: 13px; }
    .sl-ana .sl-kap { gap: 18px; }
}

@media (max-width: 991px) {
    .sl-nav { display: none; }
    .sl-mobil-dugme { display: flex; }
    .sl-ana .sl-kap { min-height: 70px; }
    .sl-logo img { height: 40px; }
}

/* Telefon/e-posta hiçbir zaman satır ortasından bölünmemeli;
   dar ekranda "+90 / 553 / 985" diye alt alta düşüyordu. */
.sl-ust a { white-space: nowrap; }
.sl-ust .sl-kap { flex-wrap: nowrap; }

@media (max-width: 767px) {
    .sl-kap { padding: 0 14px; }

    .sl-ust { font-size: 12px; }
    .sl-ust .sl-kap { min-height: 38px; gap: 10px; }

    /* E-postayı gizle: `.sl-ust a` (0,1,1) bu kuraldan güçlü olduğu için
       aynı ağırlıkta bir seçici gerekiyor, yoksa gizlenmiyor. */
    .sl-ust .sl-ust-gizle-mobil { display: none; }

    .sl-ust-sol a { padding: 0; }
    .sl-ust-sol a + a { border-left: 0; }

    .sl-ust-dil,
    .sl-ust-bayi { padding: 4px 12px; }

    .sl-cta { display: none; }
    .sl-logo img { height: 34px; }
    .sl-ana .sl-kap { min-height: 62px; }
}

/* Çok dar ekran: dil düğmesinin yazısı gider, yalnızca ikon kalır. */
@media (max-width: 400px) {
    .sl-ust { font-size: 11.5px; }
    .sl-ust-dil span,
    .sl-ust-dil { font-size: 0; padding: 5px 9px; }
    .sl-ust-dil i { font-size: 13px; }
    .sl-ust-bayi { padding: 4px 10px; font-size: 11.5px; }
    .sl-logo img { height: 30px; }
}

/* =========================================================
   BLOG LİSTESİ
   Tema kartları çerçevesiz, düğmeleri kutu içinde büyük harf
   basıyordu; site diliyle uyumlu hâle getirildi.
   ========================================================= */

.posts .post {
    background: #fff;
    border: 1px solid #ececE4;
    border-radius: 16px;
    overflow: hidden;
    height: calc(100% - 30px);
    display: flex;
    flex-direction: column;
    text-align: left !important;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.posts .post:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .12);
}

.posts .post-media {
    margin: 0;
    overflow: hidden;
    background: #f2f2ec;
}

.posts .post-media img {
    display: block;
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform .5s ease;
}

.posts .post:hover .post-media img { transform: scale(1.06); }

.posts .post-details {
    padding: 20px 22px 24px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    align-items: flex-start;
}

.posts .post-meta { margin-bottom: 8px; }

.posts .post-date {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sl-altin) !important;
}

.posts .post-title {
    margin: 0 0 10px;
    font-family: var(--sl-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}

.posts .post-title a { color: #12171a !important; transition: color .2s ease; }
.posts .post:hover .post-title a { color: var(--sl-yesil) !important; }

/* Özet 3 satıra sabitlenir. Izgara (isotope) kartları mutlak
   konumlandırdığı için yükseklik flex ile eşitlenemiyor; metni
   kırpmak kartları aynı boyda tutmanın en sade yolu. */
.posts .post-content {
    font-size: 14px;
    line-height: 1.7;
    color: #6a6a6a;
    margin: 0 0 18px;
    flex: 1 1 auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Başlık da en fazla iki satır — üç satıra taşan başlık kartı bozuyordu. */
.posts .post-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 49px;
}

/* Tema düğmesi kutulu ve büyük harfti; sade bir bağlantıya çevrildi. */
.posts .post-details .btn {
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    color: var(--sl-yesil) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}

.posts .post-details .btn i { transition: transform .25s ease; }
.posts .post:hover .post-details .btn i { transform: translateX(5px); }
.posts .post-details .btn::before,
.posts .post-details .btn::after { display: none !important; }

@media (max-width: 991px) {
    .posts .post-media img { height: 200px; }
}

/* =========================================================
   KATALOG — PDF görüntüleyici
   Kaynak: yass2/pages/markalar.php + plugins/pdfjs/sl-pdf.js
   ========================================================= */

/* Birden fazla katalog varsa üstteki sekmeler */
.sl-kat-sekme {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 30px;
}

.sl-kat-sekme a {
    padding: 11px 24px;
    border-radius: 30px;
    border: 1px solid #e4e4da;
    background: #fff;
    font-family: var(--sl-font);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -.1px;
    color: #4a5148 !important;
    transition: border-color .22s ease, color .22s ease,
                background-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.sl-kat-sekme a:hover {
    border-color: var(--sl-yesil);
    color: var(--sl-yesil) !important;
    transform: translateY(-2px);
}

.sl-kat-sekme a.aktif {
    background: var(--sl-yesil);
    border-color: var(--sl-yesil);
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(0, 106, 68, .22);
}

/* ---------- Görüntüleyici kabı ---------- */

.sl-pdf {
    border: 1px solid #e4e4da;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .07);
    outline: none;
}

/* ---------- Üst çubuk ---------- */

.sl-pdf-cubuk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    background: #12171a;
    color: #fff;
}

.sl-pdf-sol,
.sl-pdf-sag { display: flex; align-items: center; gap: 8px; }

.sl-pdf-dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    color: #fff !important;
    font-size: 14px;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}

.sl-pdf-dugme:hover {
    background: var(--sl-yesil);
    border-color: var(--sl-yesil);
    color: #fff !important;
}

.sl-pdf-dugme:active { transform: scale(.94); }

.sl-pdf-indir { background: var(--sl-altin); border-color: var(--sl-altin); }
.sl-pdf-indir:hover { background: var(--sl-altin-koyu); border-color: var(--sl-altin-koyu); }

/* Sağ grupta indirme düğmesini biraz ayır */
.sl-pdf-ayir { margin-left: 6px; }

.sl-pdf-sayfa {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: rgba(255, 255, 255, .8);
}

.sl-pdf-giris {
    width: 56px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.sl-pdf-giris:focus { outline: none; border-color: var(--sl-altin); }

/* Tarayıcının sayı okları kutuyu daraltıyordu */
.sl-pdf-giris::-webkit-outer-spin-button,
.sl-pdf-giris::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sl-pdf-giris { -moz-appearance: textfield; }

.sl-pdf-oran {
    min-width: 52px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .8);
}

/* ---------- Gövde ---------- */

.sl-pdf-govde {
    position: relative;
    height: 78vh;
    min-height: 460px;
    overflow-y: auto;
    overflow-x: auto;
    background: #f1f1ec;
    scroll-behavior: smooth;
}

.sl-pdf-sayfalar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 18px 12px 26px;
}

.sl-pdf-sayfa-kutu {
    position: relative;
    background: #fff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
    border-radius: 3px;
    overflow: hidden;
    flex: 0 0 auto;
}

/* Çizilmemiş sayfada hafif bir bekleme dokusu */
.sl-pdf-sayfa-kutu:not(.cizildi) {
    background: linear-gradient(100deg, #fff 30%, #f4f4ef 50%, #fff 70%);
    background-size: 240% 100%;
    animation: slPdfBekle 1.4s ease-in-out infinite;
}

@keyframes slPdfBekle {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.sl-pdf-sayfa-kutu canvas { display: block; }

.sl-pdf-sayfa-no {
    position: absolute;
    right: 10px;
    bottom: 8px;
    z-index: 2;
    padding: 2px 9px;
    border-radius: 20px;
    background: rgba(18, 23, 26, .55);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
}

.sl-pdf-sayfa-kutu.cizildi .sl-pdf-sayfa-no { opacity: 1; }

/* ---------- Yükleme ---------- */

.sl-pdf-yukleniyor {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: #f1f1ec;
    z-index: 5;
}

.sl-pdf-halka {
    width: 44px;
    height: 44px;
    border: 3px solid #dedeD2;
    border-top-color: var(--sl-yesil);
    border-radius: 50%;
    animation: slPdfDon .9s linear infinite;
}

@keyframes slPdfDon { to { transform: rotate(360deg); } }

.sl-pdf-yuzde {
    font-size: 14px;
    font-weight: 600;
    color: #7a7a70;
}

.sl-pdf-hata { font-size: 15px; color: #8a4a4a; margin-bottom: 14px; }

.sl-pdf-noscript {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 60px 20px;
    text-align: center;
}

/* ---------- Tam ekran ---------- */

.sl-pdf-tam { border-radius: 0; border: 0; background: #12171a; }
.sl-pdf-tam .sl-pdf-govde { height: calc(100vh - 62px); background: #1b2226; }
.sl-pdf-tam .sl-pdf-sayfa-kutu { box-shadow: 0 4px 26px rgba(0, 0, 0, .5); }

/* ---------- Alt düğmeler ---------- */

.sl-pdf-alt {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 26px;
}

/* ---------- Küçük ekran ---------- */

@media (max-width: 767px) {
    .sl-pdf-cubuk { flex-wrap: wrap; justify-content: center; padding: 10px 12px; }
    .sl-pdf-govde { height: 66vh; min-height: 380px; }
    .sl-pdf-dugme { width: 36px; height: 36px; }
    .sl-pdf-oran { display: none; }
    .sl-pdf-sayfalar { padding: 12px 8px 20px; gap: 12px; }
}

/* =========================================================
   ÜRÜN DETAY — galeri
   ========================================================= */

.sl-detay-galeri { outline: none; }

.sl-detay-kapak {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #f2f2ec;
    margin-bottom: 14px;
}

.sl-detay-kapak img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Oklar — görselin üstünde, yalnızca üzerine gelince belirginleşir */
.sl-galeri-ok {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .82);
    color: #12171a;
    font-size: 15px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .22s ease, background-color .2s ease;
}

.sl-detay-kapak:hover .sl-galeri-ok { opacity: 1; }
.sl-galeri-ok:hover { background: #fff; }
.sl-galeri-sol { left: 14px; }
.sl-galeri-sag { right: 14px; }

/* Dokunmatikte hover yok — oklar hep görünür */
@media (hover: none) {
    .sl-galeri-ok { opacity: .9; }
}

/* Küçük görseller */
.sl-detay-kucukler {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-bottom: 30px;
    scrollbar-width: thin;
}

.sl-kucuk {
    flex: 0 0 auto;
    width: 92px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    background: #f2f2ec;
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease;
}

.sl-kucuk img {
    display: block;
    width: 100%;
    height: 70px;
    object-fit: cover;
}

.sl-kucuk:hover { transform: translateY(-2px); }
.sl-kucuk.aktif { border-color: var(--sl-altin); }

/* Ürün açıklaması — WordPress'ten gelen HTML */
.sl-detay-metin p { margin-bottom: 14px; }
.sl-detay-metin strong { color: #2c3a34; }
.sl-detay-metin ul { padding-left: 20px; margin-bottom: 16px; }
.sl-detay-metin li { margin-bottom: 6px; }

@media (max-width: 991px) {
    .sl-detay-kucukler { margin-bottom: 24px; }
    .sl-kucuk { width: 78px; }
    .sl-kucuk img { height: 60px; }
}

/* =========================================================
   ÜRÜN DETAY — WhatsApp, renk seçenekleri, teklif formu
   ========================================================= */

/* ---------- WhatsApp ---------- */

.sl-wa {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 12px 24px 12px 16px;
    margin: 6px 0 24px;
    border-radius: 12px;
    background: #25d366;
    color: #fff !important;
    line-height: 1.25;
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.sl-wa:hover {
    background: #1eb455;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(37, 211, 102, .3);
}

.sl-wa-ikon { font-size: 30px; line-height: 1; }
.sl-wa-yazi { display: flex; flex-direction: column; }
.sl-wa-yazi em { font-style: normal; font-size: 12px; opacity: .92; }
.sl-wa-yazi strong { font-size: 16.5px; font-weight: 700; }

/* ---------- Renk seçenekleri ---------- */

.sl-renkler { margin-bottom: 26px; }

.sl-renkler h4 {
    font-family: var(--sl-font);
    font-size: 17px;
    font-weight: 700;
    color: #12171a;
    margin: 0 0 12px;
}

.sl-renk-liste { display: flex; flex-wrap: wrap; gap: 10px; }

.sl-renk {
    display: block;
    width: 78px;
    border: 2px solid #e6e6dc;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    transition: border-color .2s ease, transform .2s ease;
}

.sl-renk img { display: block; width: 100%; height: 58px; object-fit: cover; }

.sl-renk span {
    display: block;
    padding: 4px 4px 5px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    color: #6a6a6a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sl-renk:hover { border-color: var(--sl-yesil); transform: translateY(-2px); }

.sl-renk.aktif { border-color: var(--sl-altin); }
.sl-renk.aktif span { color: var(--sl-altin); }

/* ---------- Teklif formu ---------- */

/* ---------- Teklif düğmesi (modalı açar) ---------- */

.sl-teklif-ac {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 22px;
    margin-top: 6px;
    border: 1px solid #e2e2d8;
    border-radius: 14px;
    background: #f8f8f5;
    text-align: left;
    cursor: pointer;
    transition: border-color .22s ease, background-color .22s ease, transform .22s ease;
}

.sl-teklif-ac:hover {
    border-color: var(--sl-yesil);
    background: #f3faf6;
    transform: translateY(-2px);
}

.sl-teklif-ac i {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: rgba(0, 106, 68, .1);
    color: var(--sl-yesil);
    font-size: 18px;
}

.sl-teklif-ac span { display: flex; flex-direction: column; line-height: 1.35; }
.sl-teklif-ac em { font-style: normal; font-size: 12.5px; color: #8a8a7e; }
.sl-teklif-ac strong { font-family: var(--sl-font); font-size: 16.5px; font-weight: 700; color: #12171a; }

.sl-teklif-form { display: flex; flex-direction: column; gap: 12px; }
.sl-teklif-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sl-teklif-ikili > * { min-width: 0; }

.sl-teklif-form input,
.sl-teklif-form textarea {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid #e0e0d6;
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 14.5px;
    color: #222;
    resize: vertical;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.sl-teklif-form input:focus,
.sl-teklif-form textarea:focus {
    outline: none;
    border-color: var(--sl-yesil);
    box-shadow: 0 0 0 3px rgba(0, 106, 68, .1);
}

.sl-teklif-form button {
    padding: 14px 20px;
    border: 0;
    border-radius: 10px;
    background: var(--sl-yesil);
    color: #fff;
    font-family: var(--sl-font);
    font-size: 15.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease;
}

.sl-teklif-form button:hover { background: var(--sl-yesil-koyu); }

.sl-teklif-sonuc {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 14.5px;
    line-height: 1.6;
}

.sl-teklif-sonuc.basarili { background: #e8f5ef; border: 1px solid #bfe5d3; color: #1c6b4c; }
.sl-teklif-sonuc.hata     { background: #fdf0ef; border: 1px solid #f2c9c5; color: #9a3b33; }

@media (max-width: 480px) {
    .sl-teklif-ikili { grid-template-columns: 1fr; }
    .sl-teklif { padding: 20px; }
    .sl-wa { width: 100%; justify-content: center; }
}

/* =========================================================
   MODAL — teklif formu
   ========================================================= */

.sl-modal {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.sl-modal[hidden] { display: none; }

.sl-modal-perde {
    position: absolute;
    inset: 0;
    background: rgba(12, 20, 16, .55);
    backdrop-filter: blur(3px);
    animation: slModalPerde .25s ease;
}

@keyframes slModalPerde { from { opacity: 0; } to { opacity: 1; } }

.sl-modal-kutu {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .3);
    animation: slModalKutu .28s cubic-bezier(.2, .7, .3, 1);
}

@keyframes slModalKutu {
    from { opacity: 0; transform: translateY(18px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.sl-modal-kapat {
    position: absolute;
    right: 14px;
    top: 12px;
    z-index: 3;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease;
}

.sl-modal-kapat:hover { background: rgba(255, 255, 255, .32); }

.sl-modal-bas {
    padding: 26px 26px 22px;
    background: linear-gradient(120deg, #005436 0%, #006a44 60%, #017a4f 100%);
    color: #fff;
}

.sl-modal-bas h3 {
    font-family: var(--sl-font);
    font-size: 21px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
    padding-right: 34px;
}

.sl-modal-bas p {
    font-size: 13.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .85);
    margin: 0 0 12px;
}

.sl-modal-urun {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 30px;
    background: rgba(255, 255, 255, .15);
    font-size: 12.5px;
    font-weight: 600;
}

.sl-modal-govde { padding: 22px 26px 26px; }

/* Modal içindeki WhatsApp düğmesi tam genişlik */
.sl-wa-tam { width: 100%; justify-content: center; margin: 14px 0 0; }

@media (max-width: 480px) {
    .sl-modal { padding: 0; align-items: flex-end; }
    .sl-modal-kutu { max-width: none; max-height: 94vh; border-radius: 18px 18px 0 0; }
    .sl-modal-bas { padding: 22px 20px 18px; }
    .sl-modal-govde { padding: 18px 20px 24px; }
    .sl-teklif-ac { padding: 14px 16px; }
}

.sl-teklif-sonuc.bekle { background: #fdf6e8; border: 1px solid #f0dcb4; color: #8a6520; }