/* =====================================================================
   PROTICARET - CUSTOM.CSS
   Ana sayfa görsel yenileme (Kapsam A)
   - style.css / style.min.css dosyalarına DOKUNULMAZ.
   - Bu dosya ThemeMaster.master içinde bundle'dan SONRA yüklenir.
   - Modül .ascx dosyalarındaki gömülü <style> bloklarını ezmek için
     modül kuralları "main" ön ekiyle yazıldı.
   - Geri almak için: ThemeMaster.master içindeki custom.css satırını sil.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. RENK VE TASARIM DEĞİŞKENLERİ
   Marka rengi #2087b6 (28.09.2026'da #4AC4F3 yerine; site genelinde
   değiştirildi). Beyaz zeminde kontrastı 4.0:1; küçük metin ve
   butonlarda koyu tonlar (#0A78AB, #08699A) kullanılır.
   --------------------------------------------------------------------- */
:root {
    --pt-primary: #2087b6;       /* Logo mavisi: ikon, çizgi, dekor      */
    --pt-primary-600: #0A78AB;   /* Link / vurgulu metin (4.9:1)          */
    --pt-primary-700: #08699A;   /* Buton zemini, beyaz yazı (6.0:1)      */
    --pt-primary-800: #0B4B7A;   /* Lacivert: hover, koyu alanlar         */
    --pt-primary-tint: #E8F7FD;  /* Açık mavi zemin (ikon arka planı)     */

    --pt-ink: #1B2A3A;           /* Başlıklar                              */
    --pt-text: #4A5868;          /* Gövde metni                            */
    --pt-muted: #6B7A8A;         /* İkincil metin                          */
    --pt-surface: #F4F8FB;       /* Gri bölüm zemini                       */
    --pt-border: #E3EAF0;

    --pt-radius: 12px;
    --pt-radius-sm: 8px;
    --pt-shadow: 0 2px 8px rgba(16, 42, 67, .06);
    --pt-shadow-hover: 0 10px 28px rgba(16, 42, 67, .12);
    --pt-transition: .25s ease;
}

/* ---------------------------------------------------------------------
   2. GENEL TİPOGRAFİ
   Sadece ana sayfa bölümlerine uygulanır; site geneline (sepet, ürün,
   hesap sayfaları) yayılmaması için bölüm sınıflarıyla sınırlandı.
   --------------------------------------------------------------------- */
.how-works h3, .software h3, .explain-section h3,
.pr-fancy-box h4, .proticaret-first-section h3 {
    color: var(--pt-ink);
}

.how-works p, .software p, .explain-section p, .pr-fancy-box p {
    color: var(--pt-text);
}

/* Bölüm başlıkları (heading-title) */
.heading-title .title {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 700;
    color: var(--pt-ink);
    letter-spacing: -.3px;
}

/* Başlık altı çizgi: eski "left:46%" hilesi yerine tam ortalama */
.heading-title .title:after {
    left: 50%;
    margin-left: 0;
    transform: translateX(-50%);
    width: 64px;
    height: 4px;
    background: var(--pt-primary);
}

.heading-title p {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 16px;
    line-height: 1.75;
    color: var(--pt-text);
}

/* Metin içi linkler */
.a-link-btn {
    color: var(--pt-primary-600);
    text-decoration: none;
    transition: color var(--pt-transition);
}

.a-link-btn:hover,
.a-link-btn:focus {
    color: var(--pt-primary-800) !important; /* style.css'teki !important'ı ezer */
    text-decoration: underline;
}

/* ---------------------------------------------------------------------
   3. BUTONLAR
   --------------------------------------------------------------------- */
.button {
    background: var(--pt-primary-700);
    color: #fff;
    padding: 12px 26px;
    border-radius: var(--pt-radius-sm);
    font-weight: 600;
    letter-spacing: .3px;
    box-shadow: 0 4px 12px rgba(8, 105, 154, .25);
    transition: background var(--pt-transition), transform var(--pt-transition), box-shadow var(--pt-transition);
}

.button:hover,
.button:focus {
    background: var(--pt-primary-800);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(11, 75, 122, .3);
    text-decoration: none;
}

.button:focus-visible {
    outline: 3px solid var(--pt-primary);
    outline-offset: 2px;
}

.button.button-white {
    background: #fff;
    color: var(--pt-primary-800);
}

/* ---------------------------------------------------------------------
   4. BÖLÜM ZEMİNLERİ
   --------------------------------------------------------------------- */
.grey-bg {
    background: var(--pt-surface);
}

/* ---------------------------------------------------------------------
   5. ÜST 3 İKON KUTUSU (Modül 2180 - proticaret-first-section)
   --------------------------------------------------------------------- */
.proticaret-first-section .icon-box {
    height: 100%;
    background: #fff;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    padding: 28px 22px;
    text-align: center;
    box-shadow: var(--pt-shadow);
    transition: transform var(--pt-transition), box-shadow var(--pt-transition);
}

.proticaret-first-section .icon-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--pt-shadow-hover);
}

.proticaret-first-section .icon-bg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--pt-primary-tint);
    color: var(--pt-primary-600);
    margin-bottom: 16px;
}

.proticaret-first-section .icon-bg svg {
    width: 44px;
    height: 44px;
}

.proticaret-first-section .icon-box h3 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: 8px;
}

.proticaret-first-section .icon-box span {
    color: var(--pt-text);
    line-height: 1.6;
}

/* ---------------------------------------------------------------------
   6. B2B / C2C TANITIM BÖLÜMLERİ (Modül 1760, 1761)
   --------------------------------------------------------------------- */
.how-works h3,
.software h3 {
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 700;
    margin-bottom: 18px;
}

.how-works p,
.software p {
    line-height: 1.8;
}

.pr-works-img {
    border-radius: var(--pt-radius);
}

/* Madde listeleri: onay işareti logo mavisi */
.pr-list li:before {
    color: var(--pt-primary);
}

.pr-list li a {
    color: var(--pt-ink);
    transition: color var(--pt-transition);
}

.pr-list li a:hover {
    color: var(--pt-primary-600);
    text-decoration: none;
}

/* ---------------------------------------------------------------------
   7. ÖZELLİK KUTULARI (Modül 1762 - pr-fancy-box)
   --------------------------------------------------------------------- */
.pr-fancy-box {
    height: calc(100% - 24px);
    margin-bottom: 24px;
    padding: 32px 20px 24px;
    background: #fff;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow);
    transition: transform var(--pt-transition), box-shadow var(--pt-transition), border-color var(--pt-transition);
}

.pr-fancy-box:hover {
    transform: translateY(-4px);
    border-color: var(--pt-primary);
    box-shadow: var(--pt-shadow-hover);
}

.pr-fancy-box .pr-icon {
    width: 72px;
    height: 72px;
    line-height: 72px;
    font-size: 26px;
    background: var(--pt-primary-tint);
    color: var(--pt-primary-600);
    transition: background var(--pt-transition), color var(--pt-transition);
}

.pr-fancy-box:hover .pr-icon {
    background: var(--pt-primary);
    color: #fff;
}

.pr-fancy-box h4 {
    font-size: 18px;
    font-weight: 700;
    padding-top: 12px !important;
    padding-bottom: 8px !important;
}

.pr-fancy-box p {
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------
   8. SEKMELİ CAROUSEL (Modül 1763 - tabs-nav)
   --------------------------------------------------------------------- */
ul.tabs-nav {
    border-bottom: 1px solid var(--pt-border);
}

ul.tabs-nav li a {
    color: var(--pt-text);
    font-weight: 600;
    transition: color var(--pt-transition), background var(--pt-transition);
}

ul.tabs-nav li a:hover {
    color: var(--pt-primary-600);
    text-decoration: none;
}

ul.tabs-nav li.tab-active a {
    background-color: #fff !important;
    color: var(--pt-ink);
    border-bottom: 3px solid var(--pt-primary);
}

ul.tabs-nav .tab-active a:before {
    color: var(--pt-primary);
}

.explain-section .item-child img {
    border-radius: var(--pt-radius);
}

.explain-section .item-child h3 {
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 700;
    margin-bottom: 16px;
}

/* ---------------------------------------------------------------------
   9. İSTATİSTİK / SAYAÇ BÖLÜMÜ (Modül 1764)
   Eski açık mavi örtü (%90 açık mavi) beyaz yazıyla okunaklı değildi.
   Koyu maviden logo mavisine geçişli örtü ile kontrast artırıldı.
   --------------------------------------------------------------------- */
.istatistik:after {
    background: linear-gradient(135deg, rgba(11, 75, 122, .95) 0%, rgba(8, 105, 154, .92) 60%, rgba(32, 135, 182, .88) 100%);
}

.istatistik .count {
    font-size: clamp(30px, 3.4vw, 42px);
    font-weight: 800;
    color: #fff;
}

.istatistik h4,
.istatistik .text,
.istatistik .counter-info p {
    color: rgba(255, 255, 255, .92);
}

.istatistik .counter-info strong {
    color: #fff;
}

.istatistik .counter-info a {
    color: #fff;
    text-decoration: underline;
}

/* ---------------------------------------------------------------------
   10. BLOG SLIDER (Modül 1767)
   BlogSliderModule.ascx içindeki gömülü stili ezmek için "main" ön eki.
   --------------------------------------------------------------------- */
main .blog-slider-module .blog-item {
    background: #fff;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    overflow: hidden;
    box-shadow: var(--pt-shadow);
    transition: transform var(--pt-transition), box-shadow var(--pt-transition);
}

main .blog-slider-module .blog-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--pt-shadow-hover);
}

main .blog-slider-module .blog-image {
    overflow: hidden;
}

main .blog-slider-module .blog-image img {
    transition: transform .4s ease;
}

main .blog-slider-module .blog-item:hover .blog-image img {
    transform: scale(1.04);
}

main .blog-slider-module .blog-content a:hover {
    color: var(--pt-primary-600);
}

main .blog-slider-module a.detaylar {
    color: var(--pt-primary-600);
    font-weight: 600;
}

/* ---------------------------------------------------------------------
   11. MOBİL / TABLET
   --------------------------------------------------------------------- */
/* Not: Kayan dekor görseller ve examine-btn mobil davranışı
   responsive.css içinde zaten tanımlı, burada tekrar edilmedi. */

@media (max-width: 767.98px) {
    .heading-title {
        margin-bottom: 20px;
    }

    .heading-title p {
        padding: 0;
    }

    .pr-fancy-box {
        padding: 24px 16px 18px;
    }

    ul.tabs-nav li a {
        padding: 0 14px;
        line-height: 56px;
    }
}

/* ---------------------------------------------------------------------
   12. MÜŞTERİ YORUMLARI (Modül 1766 - CustomerSliderModule.ascx)
   Gömülü stildeki gri kutu (#eaeff5) ve altın sarısı (#cb9400) ok
   rengi marka diline uyarlandı. "main" ön eki gömülü stili ezmek için.
   --------------------------------------------------------------------- */
main .customer-slider-module .quote-content {
    background-color: #fff;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow);
    color: var(--pt-text);
    font-size: 15px;
    line-height: 1.75;
}

/* Tırnak ikonu metnin ilk harflerinin üstüne biniyordu: metin aşağı alındı.
   (İkon ve müşteri görseli gömülü stilde absolute konumlu; konum
   referansını bozmamak için sadece üst boşluk artırıldı.) */
main .customer-slider-module .quote-content {
    padding-top: 110px;
}

main .customer-slider-module .quote-content:before {
    color: var(--pt-primary);
    opacity: .35;
}

main .customer-slider-module .customerImage img {
    border: 4px solid #fff;
    box-shadow: 0 4px 12px rgba(16, 42, 67, .15);
}

main .customer-slider-module .customer-name {
    color: var(--pt-ink);
    font-weight: 600;
}

main .customer-slider-module .owl-theme .owl-nav div {
    border-color: var(--pt-border);
    border-radius: 50%;
    background: #fff;
    color: var(--pt-primary-700);
}

main .customer-slider-module .owl-theme .owl-nav div:hover {
    background: var(--pt-primary-700);
    border-color: var(--pt-primary-700);
    color: #fff;
}

/* ---------------------------------------------------------------------
   13. CAROUSEL KARTLARI EŞİT YÜKSEKLİK (Blog slider)
   Metni kısa olan kart diğerlerinden kısa görünüyordu.
   --------------------------------------------------------------------- */
main .blog-slider-module .owl-stage {
    display: flex;
}

main .blog-slider-module .owl-item {
    display: flex;
}

main .blog-slider-module .owl-item > .blog-item {
    width: 100%;
    display: flex;
    flex-direction: column;
}

main .blog-slider-module .blog-content {
    flex: 1 1 auto;
}

/* ---------------------------------------------------------------------
   14. CAROUSEL NOKTALARI (ana sayfa içeriği)
   Gri kare noktalar yuvarlak yapıldı, aktif nokta logo mavisi.
   --------------------------------------------------------------------- */
main .owl-theme .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 5px 5px;
    border-radius: 50%;
    background: #CFD9E2;
    transition: width var(--pt-transition), background var(--pt-transition);
}

main .owl-theme .owl-dots .owl-dot.active span,
main .owl-theme .owl-dots .owl-dot:hover span {
    width: 26px;
    border-radius: 6px;
    background: var(--pt-primary);
}

/* ---------------------------------------------------------------------
   15. MOBİL KOMPAKT KARTLAR (telefon, 576px altı)
   Kartlar alt alta tam genişlikte çok uzun bir sayfa oluşturuyordu.
   Telefonda ikon solda, metin sağda olacak şekilde yatay kart düzeni.
   --------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    /* Üst 3 ikon kutusu (Modül 2180) */
    .proticaret-first-section .row {
        flex-direction: column;
    }

    .proticaret-first-section .col {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 12px;
    }

    .proticaret-first-section .icon-box {
        display: grid;
        grid-template-columns: 56px 1fr;
        column-gap: 16px;
        align-items: center;
        text-align: left;
        padding: 16px;
    }

    .proticaret-first-section .icon-bg {
        grid-row: span 2;
        width: 56px;
        height: 56px;
        margin-bottom: 0;
    }

    .proticaret-first-section .icon-bg svg {
        width: 28px;
        height: 28px;
    }

    .proticaret-first-section .icon-box h3 {
        font-size: 15px;
        margin-bottom: 2px;
    }

    .proticaret-first-section .icon-box span {
        font-size: 14px;
    }

    /* 8 özellik kutusu (Modül 1762) */
    .pr-fancy-box {
        display: grid;
        grid-template-columns: 56px 1fr;
        column-gap: 16px;
        align-items: start;
        height: auto;
        margin-bottom: 12px;
        padding: 16px;
    }

    .pr-fancy-box .pr-icon {
        width: 56px;
        height: 56px;
        line-height: 56px;
        font-size: 22px;
        margin-bottom: 0;
    }

    .pr-fancy-box .fancy-content {
        text-align: left; /* Kutudaki .text-center (!important) kalıtımını ezer */
    }

    .pr-fancy-box h4 {
        font-size: 16px;
        padding-top: 0 !important;
        padding-bottom: 4px !important;
    }

    .pr-fancy-box p {
        font-size: 14px;
    }
}

/* ---------------------------------------------------------------------
   16. BLOG SLIDER OKLARI
   Gri kare oklar yuvarlak, marka renginde butonlara çevrildi.
   (Owl sürümüne göre ok elemanı <button> veya <div> olabilir.)
   --------------------------------------------------------------------- */
main .blog-slider-module .owl-nav {
    margin-top: 20px;
    text-align: center;
}

main .blog-slider-module .owl-nav .owl-prev,
main .blog-slider-module .owl-nav .owl-next {
    width: 40px;
    height: 40px;
    margin: 0 6px;
    padding: 0 !important;
    border: 1px solid var(--pt-border) !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: var(--pt-primary-700) !important;
    font-size: 18px !important;
    line-height: 38px !important;
    box-shadow: var(--pt-shadow);
    transition: background var(--pt-transition), color var(--pt-transition), border-color var(--pt-transition);
}

main .blog-slider-module .owl-nav .owl-prev:hover,
main .blog-slider-module .owl-nav .owl-next:hover {
    background: var(--pt-primary-700) !important;
    border-color: var(--pt-primary-700) !important;
    color: #fff !important;
}

main .blog-slider-module .owl-nav .disabled {
    opacity: .4;
    cursor: default;
}

/* ---------------------------------------------------------------------
   17. SEKMELİ CAROUSEL - MOBİL (Modül 1763)
   Sekme menüsü telefonda yatay kaydırılabilir "hap" butonlara döner.
   Büyük tema görselleri telefonda sınırlı yükseklikte gösterilir.
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    ul.tabs-nav {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px 2px 12px;
        margin-bottom: 24px;
        border-bottom: 0;
        text-align: left;
    }

    ul.tabs-nav::-webkit-scrollbar {
        display: none;
    }

    ul.tabs-nav li {
        flex: 0 0 auto;
    }

    ul.tabs-nav li a {
        display: block;
        padding: 0 16px;
        line-height: 40px;
        font-size: 14px;
        white-space: nowrap;
        border: 1px solid var(--pt-border);
        border-radius: 999px;
        background: #fff;
    }

    ul.tabs-nav li a:before {
        display: none; /* Büyük ikonlar telefonda yer kaplıyor */
    }

    ul.tabs-nav li.tab-active a {
        background-color: var(--pt-primary-700) !important;
        border: 1px solid var(--pt-primary-700);
        color: #fff;
    }

    .explain-section .item-child img {
        width: auto !important;
        max-width: 100%;
        max-height: 260px;
        margin: 0 auto 20px;
        display: block;
        object-fit: contain;
    }
}

/* ---------------------------------------------------------------------
   18. ÜST SLIDER - MASAÜSTÜ (Modül 2004, HtmlModuleSlider.ascx)
   Açık mavi zemin (#5CCAF4) üzerinde ince beyaz yazı okunmuyordu
   (kontrast ~1.9:1). Soldan sağa koyu maviden logo mavisine geçen
   zemin: yazının durduğu sol taraf koyu, görselin durduğu sağ taraf
   marka mavisi. Slider stilleri tema CSS dosyalarında değil (DB'deki
   site script ayarlarından geliyor olabilir); bu yüzden yüksek
   özgüllük + !important kullanıldı.
   --------------------------------------------------------------------- */
@media (min-width: 992px) {
    /* Mavi zemin, arka plan görselinin üstündeki %90 opak
       .pro-slider::before katmanından geliyor. Katman geçişli yapıldı;
       alttaki arka plan görseli korunuyor. */
    main .proticaret-slider .pro-slider::before {
        background: linear-gradient(110deg, rgba(8, 105, 154, .96) 0%, rgba(10, 120, 171, .93) 45%, rgba(32, 135, 182, .88) 100%) !important;
    }

    main .proticaret-slider .pro-slider-left h1 {
        color: #fff !important;
        font-weight: 700 !important;
        font-size: clamp(34px, 3.2vw, 48px) !important;
        line-height: 1.2 !important;
        letter-spacing: -.5px;
        margin-bottom: 20px;
    }

    main .proticaret-slider .pro-slider-left p {
        color: rgba(255, 255, 255, .92) !important;
        font-size: 17px;
        line-height: 1.7;
        max-width: 560px;
    }

    main .proticaret-slider .pro-slider-left p strong {
        color: #fff !important;
    }

    /* Beyaz butonlar: lacivert yazı, üzerine gelince hafif yükselme */
    main .proticaret-slider .button.button-white {
        background: #fff !important;
        color: var(--pt-primary-800) !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
    }

    main .proticaret-slider .button.button-white:hover {
        background: var(--pt-primary-tint) !important;
        color: var(--pt-primary-800) !important;
    }
}

/* ---------------------------------------------------------------------
   19. HEADER "ÜCRETSİZ İNDİR" BUTONU (header.ascx)
   Yeni buton iç boşluğu dar kolonda (col-lg-2) yazıyı iki satıra
   bölüyordu. Yazı tek satırda tutuldu, kolon içeriğe göre genişler.
   --------------------------------------------------------------------- */
.header-middle-free .download-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    padding: 12px 18px;
}

.header-middle-free .download-button i {
    margin: 0;
}

@media (min-width: 992px) {
    .header-middle-free {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    .header-middle-free .download-button {
        width: auto;
    }
}

/* ---------------------------------------------------------------------
   20. KATEGORİ SAYFASI - ÜRÜN KARTLARI (ProductShowcaseModule + site.js)
   Sadece bu sitenin custom.css'inde; B2B projeleri etkilenmez.
   - Sipariş sayısı (.orderCount) ve stok adedi (.stock-Qty) gizlendi.
   - Stilsiz görünen ürün etiket kutuları (.product-label-category)
     gizlendi.
   - Adet seçici ve "Sepete Ekle" (24 Ağustos güncellemesinde stilleri
     silinmişti) marka diline uygun yeniden stillendi.
   --------------------------------------------------------------------- */
#view-content .orderCount,
#view-content .stock-Qty,
#view-content .product-label-category,
#view-content .product-rating {
    display: none !important;
}

#view-content .product-item {
    background: #fff;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    overflow: hidden;
    transition: box-shadow var(--pt-transition), border-color var(--pt-transition);
}

#view-content .product-item:hover {
    border-color: var(--pt-primary);
    box-shadow: var(--pt-shadow-hover);
}

#view-content .product-name a {
    color: var(--pt-ink);
    font-weight: 600;
}

#view-content .product-name a:hover {
    color: var(--pt-primary-600);
    text-decoration: none;
}

#view-content .old-price {
    color: var(--pt-muted);
}

#view-content .price b {
    color: var(--pt-primary-800);
}

/* Adet seçici: [-] [ 1 Adet ] [+] tek satır */
#view-content .quantity-vitrin {
    width: 100%;
    max-width: 220px;
    margin-top: 14px;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
    overflow: hidden;
}

#view-content .quantity-vitrin ul {
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}

#view-content .quantity-vitrin .vitrin-qty-minus,
#view-content .quantity-vitrin .vitrin-qty-plus {
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pt-surface);
    color: var(--pt-primary-700);
    cursor: pointer;
    transition: background var(--pt-transition);
}

#view-content .quantity-vitrin .vitrin-qty-minus:hover,
#view-content .quantity-vitrin .vitrin-qty-plus:hover {
    background: var(--pt-primary-tint);
}

#view-content .quantity-vitrin .vitrin-qty-piece {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    border-left: 1px solid var(--pt-border);
    border-right: 1px solid var(--pt-border);
}

#view-content .quantity-vitrin .vitrin-qty-piece input {
    width: 100%;
    min-width: 0;
    height: 38px;
    border: 0;
    text-align: center;
    font-weight: 600;
    color: var(--pt-ink);
}

/* Birim metni (Adet / "Yıllık Lisans Bedeli: ..." vb.) miktar kutusunda gösterilmez */
#view-content .quantity-vitrin .vitrin-qty-piece span {
    display: none !important;
}

#view-content .quantity-vitrin.inactive,
#view-content .quantity-vitrin.inactive * {
    pointer-events: none;
    cursor: no-drop;
    opacity: .6;
}

#view-content .vitrin-addToCart {
    display: block;
    width: 100%;
    max-width: 220px;
    margin-top: 10px;
    padding: 10px 16px;
    border-radius: var(--pt-radius-sm);
    background: var(--pt-primary-700);
    color: #fff !important;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background var(--pt-transition);
}

#view-content .vitrin-addToCart:hover {
    background: var(--pt-primary-800);
    text-decoration: none;
}

#view-content .vitrin-addToCart.inactive {
    background: #C9D3DC;
    cursor: no-drop;
}

/* Izgara görünümlerinde adet seçici ve buton ortalı */
#view-content:not(.one-content) .quantity-vitrin,
#view-content:not(.one-content) .vitrin-addToCart {
    margin-left: auto;
    margin-right: auto;
}

/* Sol menüdeki arama kutusu: küçük yazı, dar buton */
.category-sidebar .header-middle-search {
    display: flex;
    align-items: stretch;
    height: 42px;
    margin-bottom: 20px;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
    overflow: hidden;
    background: #fff;
}

.category-sidebar .header-middle-search input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 100% !important;
    padding: 0 12px !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 13px !important;
    line-height: 40px !important;
}

.category-sidebar .header-middle-search input[type="text"]::placeholder {
    font-size: 13px;
    color: var(--pt-muted);
}

.category-sidebar .header-middle-search .search-button {
    flex: 0 0 42px;
    width: 42px !important;
    height: 100% !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: var(--pt-primary);
    color: #fff;
    font-size: 15px !important;
}

.category-sidebar .header-middle-search .search-button:hover {
    background: var(--pt-primary-700);
}

/* Kısa açıklama (site.js - Code14) */
#view-content .short-description {
    margin: 8px 0 10px;
    color: var(--pt-text);
    font-size: 14px;
    line-height: 1.6;
}

/* Resmin sağ üst köşesindeki favori butonu (action-hover) gösterilmiyor.
   Not: "far fa-heart" (Font Awesome regular) fontu sunucuda yüklü
   olmadığı için ikon boş, sadece çerçevesi görünüyordu. */
#view-content .product-item .action-hover {
    display: none !important;
}

/* Fiyat: miktar kutusunun tam üstünde, sola hizalı;
   piyasa fiyatı (üstü çizili) üstte, satış fiyatı altta */
#view-content .product-info .product-price.d-flex {
    display: block !important;
    width: 100%;
    max-width: 220px;
    margin: 12px 0 0;
    text-align: left;
}

#view-content .product-info .product-price .product-price {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin: 0;
}

#view-content .product-info .old-price {
    margin: 0;
    font-size: 14px;
    text-decoration: line-through;
}

#view-content .product-info .price.user-price {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
}

#view-content:not(.one-content) .product-info .product-price.d-flex {
    margin-left: auto;
    margin-right: auto;
}

#view-content:not(.one-content) .product-info .product-price .product-price {
    align-items: center;
}

/* Masaüstü liste görünümü: "Sepete Ekle" butonu adet seçicinin yanında */
@media (min-width: 992px) {
    #view-content.one-content .quantity-vitrin {
        display: inline-block;
        vertical-align: middle;
        width: 220px;
        margin-top: 14px;
    }

    #view-content.one-content .vitrin-addToCart {
        display: inline-block;
        vertical-align: middle;
        width: auto;
        min-width: 180px;
        max-width: none;
        height: 40px;
        margin: 14px 0 0 12px;
        padding: 0 24px;
        line-height: 40px;
    }
}

/* Mobil/tablet liste görünümü: ürün adı, fiyat, adet ve buton ortalı */
@media (max-width: 991.98px) {
    #view-content .product-info .product-name {
        text-align: center;
    }

    #view-content .product-info .product-price.d-flex,
    #view-content .quantity-vitrin,
    #view-content .vitrin-addToCart {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #view-content .product-info .product-price .product-price {
        align-items: center;
    }

    /* Ürün görseli bulunduğu çerçeveyi tam kaplar */
    #view-content .product-image {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        float: none !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--pt-border);
    }

    #view-content .product-image .pri-link,
    #view-content .product-image figure {
        display: block;
        width: 100%;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #view-content .product-image figure img {
        display: block;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        object-fit: cover;
    }

    #view-content .product-info {
        width: 100% !important;
        float: none !important;
    }
}

/* Masaüstü liste görünümü: ürün görseli sol kolonu tamamen kaplar */
@media (min-width: 992px) {
    /* Kart yüksekliği içeriğe göre; temadaki sabit yükseklikler sıfırlandı */
    #view-content.one-content .product-item {
        display: flex;
        align-items: stretch;
        height: auto !important;
        min-height: 0 !important;
    }

    #view-content.one-content .product-info {
        height: auto !important;
        min-height: 0 !important;
    }

    #view-content.one-content .product-image {
        flex: 0 0 32%;
        width: 32% !important;
        height: auto !important;
        min-height: 200px !important;
        padding: 0 !important;
        float: none !important;
        overflow: hidden;
    }

    #view-content.one-content .product-image .pri-link,
    #view-content.one-content .product-image figure {
        display: block;
        width: 100%;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #view-content.one-content .product-image figure img {
        display: block;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        margin: 0 !important;
        object-fit: cover;
        object-position: center;
    }

    #view-content.one-content .product-info {
        flex: 1 1 auto;
        width: auto !important;
        float: none !important;
        padding: 20px 24px !important;
    }
}

/* Ürün görselleri kare dosyalar; banner ortada, üstte ve altta beyaz
   bant var. Görsel kolonu mutlak konumla dolduruluyor: kart yüksekliğini
   görsel değil bilgi alanı belirliyor, "cover" beyaz bantları kırpıyor. */
@media (min-width: 992px) {
    #view-content.one-content .product-image {
        position: relative;
        min-height: 200px !important;
    }

    #view-content.one-content .product-image .pri-link {
        position: absolute;
        inset: 0;
        height: auto !important;
    }

    #view-content.one-content .product-image figure,
    #view-content.one-content .product-image figure img {
        width: 100% !important;
        height: 100% !important;
    }
}

@media (max-width: 991.98px) {
    #view-content .product-image {
        position: relative;
        aspect-ratio: 3 / 2;
        overflow: hidden;
    }

    #view-content .product-image .pri-link {
        position: absolute;
        inset: 0;
    }

    #view-content .product-image figure,
    #view-content .product-image figure img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }
}

/* =====================================================================
   21. ÜRÜN DETAY SAYFASI (store/product.ascx)
   product.ascx Windows-1254 kodlamalı; Türkçe karakterler bozulmasın
   diye dosyaya dokunulmadı, tüm düzenleme CSS ile.
   ===================================================================== */

/* 1) Sol görsel alanı: sağdaki bilgi kartıyla aynı yükseklikte kart.
   Ürün görselleri kare, üst/alt beyaz bantlı; görsel 3:2 banner
   olarak kırpılıp kartın içinde dikey ortalanır. */
@media (min-width: 992px) {
    /* Bootstrap satırı kolonları zaten eşit boyda uzatıyor; içerik
       zinciri flex ile kolonun tamamını dolduruyor (height:100% sabit
       yüksekliği olmayan kolonda çalışmadığı için kaldırıldı). */
    .product-page-left,
    .product-page-left .widget-products,
    .product-page-left .product-detail-tabs,
    .product-page-left #picture {
        display: flex;
        flex-direction: column;
    }

    .product-page-left .widget-products,
    .product-page-left .product-detail-tabs,
    .product-page-left #picture,
    .product-page-left #prd-images {
        flex: 1 1 auto;
    }

    .product-page-left #prd-images {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 360px;
        padding: 24px;
        background: #F9F9F9;
        border-radius: 6px;
    }
}

.product-page-left #prd-images .product-img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center;
    border-radius: var(--pt-radius-sm);
}

/* 2) Küçük görseller (thumbnail) gösterilmiyor */
.product-page-left #picture .xzoom-container,
.product-page-left .prd-images-thumbs {
    display: none !important;
}

/* 3) Adet seçici ve Sepete Ekle: kategori listesiyle aynı görünüm
   [-] [ 1 ] [+]   [ Sepete Ekle ] */
.product-add {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 !important;
}

.product-add > ul,
.product-add > .quantity-button {
    flex: 0 0 auto;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.product-add > ul {
    list-style: none;
}

.product-add .quantity-text {
    display: none !important;
}

.product-add .quantity-piece {
    display: flex !important;
    align-items: stretch;
    width: 160px;
    height: 44px;
    border: 1px solid var(--pt-border) !important;
    border-radius: var(--pt-radius-sm) !important;
    background: #fff;
    overflow: hidden;
}

.product-add .quantity-piece .quantity-control {
    display: contents !important;
}

.product-add .quantity-piece .quantity-minus,
.product-add .quantity-piece .quantity-plus {
    position: static !important;
    flex: 0 0 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: var(--pt-surface) !important;
    color: var(--pt-primary-700) !important;
    cursor: pointer;
    transition: background var(--pt-transition);
}

.product-add .quantity-piece .quantity-minus { order: 0; }
.product-add .quantity-piece .txtQty          { order: 1; }
.product-add .quantity-piece .quantity-plus  { order: 2; }

.product-add .quantity-piece .quantity-minus:hover,
.product-add .quantity-piece .quantity-plus:hover {
    background: var(--pt-primary-tint) !important;
}

/* Yukarı/aşağı ok yerine eksi/artı (Font Awesome solid) */
.product-add .quantity-piece .quantity-minus i,
.product-add .quantity-piece .quantity-plus i {
    display: none;
}

.product-add .quantity-piece .quantity-minus::before,
.product-add .quantity-piece .quantity-plus::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 14px;
}

.product-add .quantity-piece .quantity-minus::before { content: "\f068"; }
.product-add .quantity-piece .quantity-plus::before  { content: "\f067"; }

.product-add .quantity-piece .txtQty {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-left: 1px solid var(--pt-border) !important;
    border-right: 1px solid var(--pt-border) !important;
    border-radius: 0 !important;
    background: #fff !important;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    color: var(--pt-ink);
}

.product-add .add-to-cart-detail,
.product-add .fast-cart-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 200px;
    height: 44px;
    padding: 0 28px !important;
    border: 0 !important;
    border-radius: var(--pt-radius-sm) !important;
    background: var(--pt-primary-700) !important;
    color: #fff !important;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(8, 105, 154, .25);
    transition: background var(--pt-transition), transform var(--pt-transition);
}

.product-add .add-to-cart-detail:hover,
.product-add .fast-cart-button:hover {
    background: var(--pt-primary-800) !important;
    transform: translateY(-1px);
}

.product-add .add-to-cart-detail i,
.product-add .fast-cart-button i {
    color: #fff !important;
    margin: 0 !important;
}

@media (max-width: 575.98px) {
    .product-add {
        justify-content: center;
    }

    .product-add > .quantity-button,
    .product-add .add-to-cart-detail,
    .product-add .fast-cart-button {
        width: 100% !important;
    }
}

/* 4) İndirim oranı: "%17 İNDİRİM" rozet (buton) içinde.
   Temada .price-discount absolute (left:120%) ve içteki div'in kendi
   gri zemini/kenarı vardı; hepsi sıfırlanıp tek rozet yapıldı. */
.price-discount {
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    margin: 0 0 0 14px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    vertical-align: middle;
    left: auto !important;
    top: auto !important;
}

ul.product-price-list > li span.discount,
.price-discount .discount {
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}

ul.product-price-list > li span.discount div,
.price-discount .discount div {
    float: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 6px 14px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--pt-primary-700) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: .3px !important;
    white-space: nowrap;
    box-shadow: none !important;
}

/* 5) "Kategorinin çok satanları" ve "Sizin için seçtiklerimiz"
   ürün alanına yapışıyordu: üst boşluk verildi */
.best-seller-products,
.alternatives {
    margin-top: 40px !important;
    clear: both;
}

/* 6) "Kategorinin Çok Satanları" listesi (product.aspx -> GetBestSellerProducts)
   Satır: [sıra] [görsel + ad + fiyat] [satış oranı çubuğu + trend]
   Çubuğun satır içi stilleri (siyah kenar, turuncu dolgu) !important ile ezildi. */
.best-seller-products {
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    background: #fff;
    overflow: hidden;
    box-shadow: var(--pt-shadow);
}

.best-seller-products .title-type-1 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 !important;
    padding: 14px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--pt-border) !important;
    border-radius: 0 !important;
    background: var(--pt-surface) !important;
    color: var(--pt-ink);
    font-size: 15px !important;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1.4 !important;
}

.best-seller-products .title-type-1 > i {
    width: 32px !important;
    height: 32px;
    line-height: 32px !important;
    margin: 0 !important;
    border-radius: 50%;
    background: var(--pt-primary) !important;
    color: #fff !important;
    text-align: center;
    font-size: 13px;
}

.best-seller-products .title-type-1 .collapse-pd-list {
    margin-left: auto;
}

.best-seller-products-list {
    margin: 0 !important;
    padding: 6px 18px !important;
    list-style: none;
}

.best-seller-products-list .related-product-box {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) 300px;
    align-items: center;
    column-gap: 18px;
    padding: 14px 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--pt-border) !important;
    background: none !important;
    float: none !important;
    width: auto !important;
}

.best-seller-products-list .related-product-box:last-child {
    border-bottom: 0 !important;
}

/* Sıra numarası: yuvarlak rozet, ilk 3 marka renginde */
.best-seller-products-list .order-number {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    border-radius: 50%;
    background: var(--pt-surface) !important;
    color: var(--pt-muted) !important;
    font-size: 14px !important;
    font-weight: 700;
    float: none !important;
}

.best-seller-products-list .related-product-box:nth-child(-n+3) .order-number {
    background: var(--pt-primary-tint) !important;
    color: var(--pt-primary-700) !important;
}

.best-seller-products-list .related-product-content {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    align-items: center;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}

.best-seller-products-list .related-product-images {
    grid-row: 1 / span 2;
    width: 64px !important;
    height: 64px;
    margin: 0 !important;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
    overflow: hidden;
    background: #fff;
    float: none !important;
}

.best-seller-products-list .related-product-images a,
.best-seller-products-list .related-product-images img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

.best-seller-products-list .related-product-name {
    margin: 0 !important;
    float: none !important;
    align-self: end;
}

.best-seller-products-list .related-product-name a {
    color: var(--pt-ink) !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

.best-seller-products-list .related-product-name a:hover {
    color: var(--pt-primary-600) !important;
}

.best-seller-products-list .related-product-pricebox {
    display: flex !important;
    align-items: baseline;
    gap: 10px;
    margin: 2px 0 0 !important;
    float: none !important;
    align-self: start;
}

.best-seller-products-list .old-price {
    margin: 0 !important;
    color: var(--pt-muted) !important;
    font-size: 13px !important;
    text-decoration: line-through;
}

.best-seller-products-list .related-product-price {
    margin: 0 !important;
    color: var(--pt-primary-800) !important;
    font-size: 16px !important;
    font-weight: 700;
}

/* Satış oranı çubuğu */
.best-seller-products-list .related-product-percent {
    display: flex !important;
    align-items: center;
    gap: 10px;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}

.best-seller-products-list .related-product-percent-bar {
    flex: 1 1 auto;
    position: relative;
    height: 22px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #EEF3F7 !important;
    overflow: visible;
}

.best-seller-products-list .related-product-percent-bar span {
    display: flex !important;
    align-items: center;
    min-width: 42px;
    height: 100% !important;
    padding: 0 10px;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #2087b6 0%, #0A78AB 100%) !important;
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    float: none !important;
}

/* Trend ikonu: artış yeşil, düşüş kırmızı, sabit gri */
.best-seller-products-list .related-product-popularity {
    flex: 0 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    float: none !important;
}

.best-seller-products-list .related-product-popularity .natural {
    color: #C3CDD6 !important;
    font-size: 9px;
}

.best-seller-products-list .related-product-popularity .increase {
    color: #1E9E5A !important;
    font-size: 20px;
}

.best-seller-products-list .related-product-popularity .decrease {
    color: #D6334F !important;
    font-size: 20px;
}

@media (max-width: 767.98px) {
    .best-seller-products-list {
        padding: 4px 14px !important;
    }

    .best-seller-products-list .related-product-box {
        grid-template-columns: 32px minmax(0, 1fr);
        row-gap: 10px;
        column-gap: 12px;
    }

    .best-seller-products-list .related-product-percent {
        grid-column: 2;
    }

    .best-seller-products-list .related-product-content {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .best-seller-products-list .related-product-images {
        width: 52px !important;
        height: 52px;
    }
}

/* 7) Sıralama: "Ürün Özellikleri" sekmeleri önce, "Sizin İçin
   Seçtiklerimiz" ve "Kategorinin Çok Satanları" sonra.
   .product-page'in doğrudan çocukları: row, row, .alternatives,
   .best-seller-products, .product-tabs -> flex order ile yer değişimi. */
.product-page {
    display: flex;
    flex-direction: column;
}

.product-page > .product-tabs {
    order: 1;
    margin-top: 40px;
}

.product-page > .alternatives {
    order: 2;
}

.product-page > .best-seller-products {
    order: 3;
    margin-bottom: 40px;
}

/* =====================================================================
   22. PAKETLER SAYFASI - SEKME SEÇİCİ (/b2c-e-ticaret-paketleri)
   Modül 2114 (sekme) + LayoutJson satır sınıfları:
   .pkg-pane.pkg-standart / .pkg-pane.pkg-ultimate
   ===================================================================== */
.pkg-pane.pkg-ultimate:not(.is-active),
.pkg-pane.is-inactive {
    display: none !important;
}

.pkg-switch {
    padding: 36px 0 12px;
    text-align: center;
}

.pkg-switch-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    color: var(--pt-primary-600);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.pkg-switch-eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pt-primary);
}

.pkg-switch-track {
    display: inline-flex;
    gap: 6px;
    padding: 6px;
    border: 1px solid rgba(8, 105, 154, .35);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(8, 105, 154, .10);
}

/* İki satırlı buton: başlık + kısa açıklama. Seçili olan koyu (#08699A). */
.pkg-switch-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 290px;
    padding: 13px 30px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--pt-ink);
    line-height: 1.2;
    cursor: pointer;
    transition: background var(--pt-transition), color var(--pt-transition), box-shadow var(--pt-transition);
}

.pkg-switch-title {
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
}

.pkg-switch-sub {
    font-size: 13px;
    font-weight: 400;
    color: var(--pt-muted);
    white-space: nowrap;
    transition: color var(--pt-transition);
}

.pkg-switch-btn:hover:not(.is-active) {
    background: var(--pt-primary-tint);
}

.pkg-switch-btn.is-active {
    background: #08699A;
    color: #fff;
    box-shadow: 0 6px 18px rgba(8, 105, 154, .35);
}

.pkg-switch-btn.is-active .pkg-switch-sub {
    color: rgba(255, 255, 255, .85);
}

.pkg-switch-btn:focus-visible {
    outline: 3px solid var(--pt-primary);
    outline-offset: 2px;
}

@media (max-width: 767.98px) {
    .pkg-switch-track {
        display: flex;
        width: 100%;
        border-radius: 18px;
    }

    .pkg-switch-btn {
        flex: 1 1 50%;
        min-width: 0;
        padding: 11px 8px;
        border-radius: 14px;
    }

    .pkg-switch-title {
        font-size: 14px;
        white-space: normal;
    }

    .pkg-switch-sub {
        font-size: 11px;
        white-space: normal;
    }
}

/* Font Awesome "regular" (far) yazı tipi sunucuda yok; bu ikonlar boş
   görünüyordu (ör. paket tablosundaki soru işaretleri). Solid ağırlığa
   yönlendirilerek görünür yapıldı. */
.far {
    font-weight: 900 !important;
}

/* =====================================================================
   23. PAKET KARŞILAŞTIRMA TABLOSU (masaüstü: .package-compare)
   Modüller 1768 (Standart) ve 1772 (Ultimate) - HTML'e dokunulmadı.
   Sütun başına farklı renkler (turkuaz/turuncu/gri/kırmızı) yerine
   beyaz kartlar; "En çok tercih edilen" paket #08699A ile öne çıkar.
   Başlık satırları özellik sütunu ile paket sütunlarında aynı
   yükseklikte tutulur ki "Liste / Kampanya / Yenileme" hizası bozulmasın.
   ===================================================================== */

/* Banner başlığı serif (Times) görünüyordu: site yazı tipine alındı */
.inner-banner h1 {
    font-family: inherit !important;
    font-weight: 700 !important;
    letter-spacing: -.5px;
}

/* Sütunlar üstten hizalı; sadece öne çıkan 5. sütun temadaki
   margin-top:-45px ile yukarıda durur */
.package-compare .proticaret-price {
    align-items: flex-start !important;
}

/* --- Başlık kartları: ortak iskelet --- */
.package-compare .package {
    margin: 0 5px !important;
    border-radius: 16px 16px 0 0 !important;
}

.package-compare .package-title {
    background: #fff !important;
    color: var(--pt-ink) !important;
    border: 1px solid var(--pt-border) !important;
    border-bottom: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -2px 16px rgba(16, 42, 67, .05);
}

.package-compare .package-title br {
    display: none;
}

/* Başlık yüksekliği: 48 + 34 + 42 + 26 = 150px içerik + buton alanı */
.package-compare .proticaret-price > li .package-title {
    height: 212px !important;
}

.package-compare .proticaret-price > li:nth-child(5) .package-title {
    height: 257px !important;
}

/* Liste fiyatı (<strike>) temada beyaz yazılıydı; beyaz kartta görünmüyordu */
.package-compare .package-title strike,
.package-compare .package-title s,
.package-compare .package-title del {
    background: none !important;
    color: var(--pt-muted) !important;
    text-decoration: line-through;
}

.package-compare .proticaret-price > li:nth-child(5) .package-title strike,
.package-compare .proticaret-price > li:nth-child(5) .package-title s,
.package-compare .proticaret-price > li:nth-child(5) .package-title del {
    color: rgba(255, 255, 255, .75) !important;
}

.package-compare .package-title h2,
.package-compare .package-title h3,
.package-compare .package-title h4 {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: inherit !important;
    text-transform: none;
}

/* Satır 1: paket adı */
.package-compare .package-title h2.package-name {
    height: 48px;
    line-height: 48px;
    font-size: 19px !important;
    font-weight: 800 !important;
    letter-spacing: .5px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--pt-border) !important;
    border-radius: 16px 16px 0 0 !important;
}

/* Satır 2: liste fiyatı (üstü çizili) */
.package-compare .package-title > h2:not(.package-name) {
    height: 34px;
    line-height: 42px;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--pt-muted) !important;
}

/* Satır 3: kampanya fiyatı */
.package-compare .package-title > h3 {
    height: 42px;
    line-height: 42px;
    font-size: 28px !important;
    font-weight: 800 !important;
    letter-spacing: -.5px;
    color: var(--pt-ink) !important;
}

/* Satır 4: sonraki yıl yenileme */
.package-compare .package-title > h4 {
    height: 26px;
    line-height: 26px;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--pt-muted) !important;
}

.package-compare .package-title > h4 span {
    font-size: 14px !important;
    font-weight: 700;
    color: var(--pt-text);
}

.package-compare .package-title > h4 span::before {
    content: "Yenileme: ";
    font-weight: 500;
    color: var(--pt-muted);
}

/* Başlıktaki "PAKET DETAYI" bağlantısı: yuvarlak buton */
/* Buton artık akış içinde (absolute değil): yenileme satırının
   üstüne binmiyor */
.package-compare a.paket-satin-al {
    position: static !important;
    display: inline-block !important;
    margin: 10px auto 0 !important;
    width: auto !important;
    max-width: 170px;
    padding: 0 22px !important;
    line-height: 34px !important;
    border: 1.5px solid #08699A;
    border-radius: 999px !important;
    background: #fff;
    color: #08699A !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    transition: background var(--pt-transition), color var(--pt-transition);
}

.package-compare a.paket-satin-al:hover {
    background: #08699A;
    color: #fff !important;
    text-decoration: none;
}

/* --- Özellik sütunu başlığı (sol) --- */
.package-compare .proticaret-price > li.features .package-title {
    background: var(--pt-surface) !important;
    border-color: transparent !important;
    box-shadow: none;
}

.package-compare .proticaret-price > li.features .package-title h2.package-name {
    font-size: 15px !important;
    color: var(--pt-ink) !important;
    border-bottom-color: transparent !important;
}

.package-compare .proticaret-price > li.features .package-title > h2:not(.package-name),
.package-compare .proticaret-price > li.features .package-title > h3,
.package-compare .proticaret-price > li.features .package-title > h4 {
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0;
    color: var(--pt-text) !important;
}

.package-compare .proticaret-price > li.features .package-title > h4 span::before {
    content: none;
}

/* --- Öne çıkan paket: 5. sütun (Standart'ta "Exclusive") --- */
.package-compare .proticaret-price > li:nth-child(5) .package-title {
    background: #08699A !important;
    border-color: #08699A !important;
    color: #fff !important;
    box-shadow: 0 -10px 30px rgba(8, 105, 154, .35);
}

.package-compare .proticaret-price > li:nth-child(5) .package-title h2.package-name {
    border-bottom-color: rgba(255, 255, 255, .2) !important;
}

.package-compare .proticaret-price > li:nth-child(5) .package-title > h2:not(.package-name),
.package-compare .proticaret-price > li:nth-child(5) .package-title > h4,
.package-compare .proticaret-price > li:nth-child(5) .package-title > h4 span::before {
    color: rgba(255, 255, 255, .75) !important;
}

.package-compare .proticaret-price > li:nth-child(5) .package-title > h3,
.package-compare .proticaret-price > li:nth-child(5) .package-title > h4 span {
    color: #fff !important;
}

.package-compare .proticaret-price > li:nth-child(5) a.paket-satin-al {
    background: #fff;
    border-color: #fff;
    color: #08699A !important;
}

.package-compare .proticaret-price > li:nth-child(5) a.paket-satin-al:hover {
    background: var(--pt-primary-tint);
}

/* "EN ÇOK TERCİH EDİLEN" rozeti */
/* Rozet sadece öne çıkan sütunda; diğer sütunlardaki gizli yer
   tutucular (varsa) kapatılır */
.package-compare .proticaret-price > li:not(:nth-child(5)) .package-favorite {
    display: none !important;
}

.package-compare .proticaret-price > li:nth-child(5) .package-favorite {
    height: auto !important;
    line-height: 1.4 !important;
    display: inline-block !important;
    margin: 14px 0 0 !important;
    padding: 5px 14px !important;
    border-radius: 999px !important;
    background: #F5B82E !important;
    color: #3A2A00 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1px;
    line-height: 1.4;
}

.package-compare .package-favorite::before {
    content: "\f005  " !important;
    position: static !important;
    font-size: 10px !important;
    color: inherit !important;
}

/* Öne çıkan sütunun özellik hücreleri: hafif mavi zemin */
.package-compare .proticaret-price > li:nth-child(5) ul li {
    background: #EEF7FC !important;
}

/* --- Tablo gövdesi --- */
.package-compare ul.proticaret-price ul li {
    background: #fff;
    border-top: 0 !important;
    border-bottom: 1px solid #EDF1F5 !important;
    color: var(--pt-text);
}

.package-compare ul.proticaret-price ul li:nth-of-type(even) {
    background: #FAFBFD;
}

.package-compare .features ul span,
.package-compare .equals ul span {
    background: var(--pt-surface) !important;
    color: var(--pt-ink);
    border-top: 0 !important;
    border-bottom: 1px solid var(--pt-border) !important;
    font-weight: 700;
}

.package-compare .features ul span:before {
    border-radius: 6px 0 0 6px;
    background: var(--pt-primary-tint) !important;
    color: var(--pt-primary-700) !important;
    font-weight: 700;
}

.package-compare li i.fas.fa-check-circle {
    color: #1E9E5A !important;
    font-size: 19px !important;
}

.package-compare li i.fas.fa-times-circle {
    color: #C9D3DC !important;
    font-size: 19px !important;
}

.package-compare .icon-question {
    border: 0;
    background: none;
    color: var(--pt-primary);
    padding: 0 0 0 4px;
}

/* --- Alt "PAKET DETAYI" butonları: tek renk, öne çıkan sütunda koyu --- */
.package-compare .addtocart-button a,
.package-compare .addtocart-button2 a,
.package-compare .addtocart-button3 a,
.package-compare .addtocart-button4 a {
    display: block;
    padding: 16px !important;
    border: 1px solid var(--pt-border);
    border-top: 0;
    border-radius: 0 0 16px 16px !important;
    background: #fff !important;
    color: #08699A !important;
    font-weight: 700;
    letter-spacing: .5px;
    text-decoration: none;
    transition: background var(--pt-transition), color var(--pt-transition);
}

.package-compare .addtocart-button a:hover,
.package-compare .addtocart-button2 a:hover,
.package-compare .addtocart-button3 a:hover,
.package-compare .addtocart-button4 a:hover,
.package-compare .proticaret-price > li:nth-child(5) [class^="addtocart-button"] a {
    background: #08699A !important;
    border-color: #08699A;
    color: #fff !important;
}

/* --- Tablo gövdesi, kart görünümüyle uyumlu (v29) ---
   Her paket sütunu (.package) baştan sona tek bir kart: beyaz zemin,
   ince kenarlık; alttaki "Paket Detayı" butonu kartın alt kapağı. */
.package-compare .proticaret-price > li:not(.features) > .package {
    background: #fff;
    border: 1px solid var(--pt-border);
    border-bottom: 0;
    border-radius: 16px 16px 0 0 !important;
    overflow: visible;
}

.package-compare .proticaret-price > li:not(.features) > .package > .package-title {
    border: 0 !important;
    box-shadow: none;
}

.package-compare .proticaret-price > li:nth-child(5) > .package {
    border-color: #08699A;
    box-shadow: 0 12px 34px rgba(8, 105, 154, .18);
}

/* Hücreler kartın zeminini kullanır */
.package-compare .proticaret-price > li:not(.features) ul li {
    background: transparent !important;
    border-bottom: 1px solid #EEF2F6 !important;
}

.package-compare .proticaret-price > li:not(.features) ul li:nth-of-type(even) {
    background: rgba(244, 248, 251, .6) !important;
}

.package-compare .proticaret-price > li:nth-child(5) ul li {
    background: #F2F9FD !important;
}

/* Kart ile tablo arasındaki boş gri bant: ilk grup başlığı paket
   sütunlarında kartın devamı gibi görünür */
.package-compare .proticaret-price > li:not(.features) ul.feature-group-1 > span {
    background: #fff !important;
    border-bottom: 1px solid #EEF2F6 !important;
}

.package-compare .proticaret-price > li:nth-child(5) ul.feature-group-1 > span {
    background: #08699A !important;
    border-bottom-color: #08699A !important;
}

/* Sonraki grup başlıkları: sol sütunla aynı açık bant */
.package-compare .proticaret-price > li:not(.features) ul:not(.feature-group-1) > span {
    background: #F4F8FB !important;
}

/* Sol sütun (özellik adları) */
.package-compare .proticaret-price > li.features ul li {
    padding-left: 16px !important;
    background: #fff !important;
    color: var(--pt-text) !important;
    font-size: 14px !important;
    border-bottom: 1px solid #EEF2F6 !important;
}

.package-compare .proticaret-price > li.features ul li:nth-of-type(even) {
    background: rgba(244, 248, 251, .6) !important;
}

.package-compare .proticaret-price > li.features ul > span {
    padding-left: 16px !important;
    border-radius: 10px 0 0 10px;
    background: #F4F8FB !important;
    font-size: 15px;
}

/* Alt buton kartın kapağı: kenarlıklar sütunla birleşik */
.package-compare [class^="addtocart-button"] {
    padding: 0 5px !important;
}

.package-compare [class^="addtocart-button"] a {
    margin-top: 0 !important;
}

.package-compare .proticaret-price > li:nth-child(5) [class^="addtocart-button"] a {
    border-color: #08699A !important;
}

/* =====================================================================
   24. "SİZİ ARAYALIM" AÇILIR FORMU (portal/dynamicFormFixed.ascx)
   Sayfa açıldıktan 10 sn sonra üstte beliren form. Koyu, yarı saydam
   alanlı modern kart; site renkleri (#0B4B7A -> #08699A), küçük buton.
   Modülün kendi <style> bloğu sayfada sonra geldiği için "body" ön eki.
   ===================================================================== */
/* Masaüstünde logo ve menünün altında açılır (üst bar + header ~170px) */
@media (min-width: 992px) {
    body :is(.dynamic-form, .dynamic-form2).form-fixed {
        top: 180px;
    }
}

body :is(.dynamic-form, .dynamic-form2).form-fixed {
    width: calc(100% - 32px);
    max-width: 1080px;
    margin: 0 !important;
    padding: 26px 30px 22px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 20px;
    background: linear-gradient(135deg, #0B4B7A 0%, #08699A 100%);
    box-shadow: 0 24px 60px rgba(6, 30, 50, .45);
    color: #fff;
}

/* Temada form içeriği beyaz zeminli: koyu kartta beyaz yazılar ve
   alanlar kayboluyordu. İçerideki tüm katmanlar saydam yapıldı. */
body :is(.dynamic-form, .dynamic-form2).form-fixed .static-content,
body :is(.dynamic-form, .dynamic-form2).form-fixed #formdiv,
body :is(.dynamic-form, .dynamic-form2).form-fixed [id$="_formdiv"],
body :is(.dynamic-form, .dynamic-form2).form-fixed ul > li {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body :is(.dynamic-form, .dynamic-form2).form-fixed .static-content {
    padding: 0 !important;
}

body :is(.dynamic-form, .dynamic-form2).form-fixed .fixed-form-title,
body :is(.dynamic-form, .dynamic-form2).form-fixed .fixed-form-desc,
body :is(.dynamic-form, .dynamic-form2).form-fixed label,
body :is(.dynamic-form, .dynamic-form2).form-fixed label span {
    background: transparent !important;
}

/* Yönetici düzenleme (dişli) butonu: küçük, kapat butonunun solunda */
body :is(.dynamic-form, .dynamic-form2).form-fixed .edit-button {
    position: absolute !important;
    top: 12px !important;
    right: 56px !important;
    left: auto !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .12) !important;
    color: #fff !important;
    font-size: 14px !important;
    box-shadow: none !important;
    z-index: 11;
}

body :is(.dynamic-form, .dynamic-form2).form-fixed .fixed-form-title:empty {
    display: none;
}

body :is(.dynamic-form, .dynamic-form2).form-fixed .fixed-form-title {
    margin-bottom: 4px;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
}

body :is(.dynamic-form, .dynamic-form2).form-fixed .fixed-form-desc {
    margin-bottom: 18px;
    color: rgba(255, 255, 255, .88);
    font-size: 17px;
    font-weight: 600;
}

/* Alanlar: tek satırda, eşit genişlik */
body :is(.dynamic-form, .dynamic-form2).form-fixed ul {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin: 0;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 16px;
    background: rgba(255, 255, 255, .06) !important;
    list-style: none;
}

body :is(.dynamic-form, .dynamic-form2).form-fixed ul > li {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    position: relative;
}

body :is(.dynamic-form, .dynamic-form2).form-fixed ul > li:last-child {
    flex: 0 0 auto;
}

/* Doğrulama alanı sabit genişlikte; resim + kod kutusu tek parça */
body :is(.dynamic-form, .dynamic-form2).form-fixed ul > li.captha-2 {
    flex: 0 0 230px;
    float: none !important;
}

body :is(.dynamic-form, .dynamic-form2).form-fixed li.captha-2 .form-control {
    width: 100% !important;
}

/* Doğrulayıcı (*) işaretleri görünmez olsa da yer kaplıyordu ve
   kutuları farklı yüksekliklere itiyordu: akıştan çıkarıldı */
body :is(.dynamic-form, .dynamic-form2).form-fixed ul > li > span {
    position: absolute !important;
    right: 14px;
    bottom: 11px;
    margin: 0 !important;
    color: #FFB4B4 !important;
    font-weight: 700;
}

body :is(.dynamic-form, .dynamic-form2).form-fixed label {
    display: block;
    margin: 0 0 6px 4px;
    color: rgba(255, 255, 255, .75);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
}

body :is(.dynamic-form, .dynamic-form2).form-fixed .form-control {
    height: 42px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, .28) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .12) !important;
    color: #fff !important;
    font-size: 14px;
    box-shadow: none !important;
    transition: border-color var(--pt-transition), background var(--pt-transition);
}

body :is(.dynamic-form, .dynamic-form2).form-fixed .form-control::placeholder {
    color: rgba(255, 255, 255, .6);
}

body :is(.dynamic-form, .dynamic-form2).form-fixed .form-control:focus {
    border-color: #2087b6 !important;
    background: rgba(255, 255, 255, .18) !important;
    outline: none;
}

/* Doğrulama resmi: kutunun sağ ucunda, kutuyla bütün */
body :is(.dynamic-form, .dynamic-form2).form-fixed li.captha-2 .form-control {
    padding-right: 118px;
}

body :is(.dynamic-form, .dynamic-form2).form-fixed .captha-2 img {
    position: absolute !important;
    right: 4px !important;
    bottom: 4px !important;
    top: auto !important;
    width: 108px !important;
    height: 34px !important;
    margin: 0 !important;
    border-radius: 999px;
    object-fit: cover;
}

/* Gönder: küçük, hap şeklinde */
body :is(.dynamic-form, .dynamic-form2).form-fixed .btn.btn-primary:not(.edit-button) {
    height: 42px;
    padding: 0 28px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #2087b6 !important;
    color: #fff !important;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .3px;
    box-shadow: 0 6px 16px rgba(32, 135, 182, .35);
    transition: background var(--pt-transition), transform var(--pt-transition);
}

body :is(.dynamic-form, .dynamic-form2).form-fixed .btn.btn-primary:not(.edit-button):hover {
    background: #7AD5F7 !important;
    transform: translateY(-1px);
    color: #06324D !important;
}

/* Kapat (x) */
body :is(.dynamic-form, .dynamic-form2).form-fixed .form-close-button {
    top: 12px;
    right: 14px;
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff !important;
    font-size: 22px;
    text-decoration: none;
    transition: background var(--pt-transition);
}

body :is(.dynamic-form, .dynamic-form2).form-fixed .form-close-button:hover {
    background: rgba(255, 255, 255, .25);
}

body :is(.dynamic-form, .dynamic-form2).form-fixed .alert {
    border-radius: 12px;
}

@media (max-width: 991.98px) {
    body :is(.dynamic-form, .dynamic-form2).form-fixed {
        padding: 22px 18px 18px;
        max-height: calc(100vh - 32px);
        overflow-y: auto;
    }

    body :is(.dynamic-form, .dynamic-form2).form-fixed ul > li,
    body :is(.dynamic-form, .dynamic-form2).form-fixed ul > li:last-child,
    body :is(.dynamic-form, .dynamic-form2).form-fixed ul > li.captha-2 {
        flex: 1 1 100%;
    }

    body :is(.dynamic-form, .dynamic-form2).form-fixed .btn.btn-primary:not(.edit-button) {
        width: 100%;
    }

    body :is(.dynamic-form, .dynamic-form2).form-fixed li:last-child > label {
        display: none;
    }

    body :is(.dynamic-form, .dynamic-form2).form-fixed .fixed-form-desc {
        padding: 0 30px;
        font-size: 15px;
    }
}

/* =====================================================================
   25. PAKET SEKME BAĞLANTILARI + ULTIMATE SAYFASINDA "ULTIMATE ++" VURGUSU
   Sekmeler artık iki ayrı sayfaya bağlantı (<a>); aktif sayfa JS ile
   .is-active alır. Ultimate tablosu modül kimliğiyle hedeflenir (#html-1772);
   satır kapsayıcısı bu satırda çizilmediği için satır sınıfı kullanılamadı.
   ===================================================================== */
a.pkg-switch-btn,
a.pkg-switch-btn:hover,
a.pkg-switch-btn:focus {
    text-decoration: none !important;
}

a.pkg-switch-btn:not(.is-active) .pkg-switch-title {
    color: var(--pt-ink);
}

a.pkg-switch-btn.is-active .pkg-switch-title {
    color: #fff;
}

/* Ultimate ++ (4. sütun): diğerlerinin üstünde,
koyu ve rozetli */
/* margin-top bu tabloda etki etmedi; kart (ve tüm sütun) göreli
   konumla 45px yukarı taşınır, satır hizası korunur */
#html-1772 .package-compare .proticaret-price > li:nth-child(4),
#html-1862 .package-compare .proticaret-price > li:nth-child(2),
#html-2187 .package-compare .proticaret-price > li:nth-child(3) {
    position: relative !important;
    top: -45px !important;
    margin-top: 0 !important;
    z-index: 2;
}

#html-1772 .package-compare .proticaret-price > li:nth-child(4) .package-title,
#html-1862 .package-compare .proticaret-price > li:nth-child(2) .package-title,
#html-2187 .package-compare .proticaret-price > li:nth-child(3) .package-title {
    height: 257px !important;
}

#html-1772 .package-compare .proticaret-price > li:nth-child(4) .package-title::before,
#html-1862 .package-compare .proticaret-price > li:nth-child(2) .package-title::before,
#html-2187 .package-compare .proticaret-price > li:nth-child(3) .package-title::before {
    content: "\2605  EN ÇOK TERCİH EDİLEN";
    display: inline-block;
    margin: 14px 0 7px;
    padding: 5px 14px;
    border-radius: 999px;
    background: #F5B82E;
    color: #3A2A00;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1.4;
}

#html-1772 .package-compare .proticaret-price > li:nth-child(4) .package-title,
#html-1862 .package-compare .proticaret-price > li:nth-child(2) .package-title,
#html-2187 .package-compare .proticaret-price > li:nth-child(3) .package-title {
    height: 257px !important;
}

#html-1772 .package-compare .proticaret-price > li:nth-child(4) .package-title strike,
#html-1772 .package-compare .proticaret-price > li:nth-child(4) .package-title s,
#html-1772 .package-compare .proticaret-price > li:nth-child(4) .package-title del,
#html-1862 .package-compare .proticaret-price > li:nth-child(2) .package-title strike,
#html-2187 .package-compare .proticaret-price > li:nth-child(3) .package-title strike,
#html-1862 .package-compare .proticaret-price > li:nth-child(2) .package-title s,
#html-2187 .package-compare .proticaret-price > li:nth-child(3) .package-title s,
#html-1862 .package-compare .proticaret-price > li:nth-child(2) .package-title del,
#html-2187 .package-compare .proticaret-price > li:nth-child(3) .package-title del {
    color: rgba(255, 255, 255, .75) !important;
}

#html-1772 .package-compare .proticaret-price > li:nth-child(4) .package-title,
#html-1862 .package-compare .proticaret-price > li:nth-child(2) .package-title,
#html-2187 .package-compare .proticaret-price > li:nth-child(3) .package-title {
    background: #08699A !important;
    border-color: #08699A !important;
    color: #fff !important;
    box-shadow: 0 -10px 30px rgba(8, 105, 154, .35);
}

#html-1772 .package-compare .proticaret-price > li:nth-child(4) .package-title h2.package-name,
#html-1862 .package-compare .proticaret-price > li:nth-child(2) .package-title h2.package-name,
#html-2187 .package-compare .proticaret-price > li:nth-child(3) .package-title h2.package-name {
    border-bottom-color: rgba(255, 255, 255, .2) !important;
}

#html-1772 .package-compare .proticaret-price > li:nth-child(4) .package-title > h2:not(.package-name),
#html-1772 .package-compare .proticaret-price > li:nth-child(4) .package-title > h4,
#html-1772 .package-compare .proticaret-price > li:nth-child(4) .package-title > h4 span::before,
#html-1862 .package-compare .proticaret-price > li:nth-child(2) .package-title > h2:not(.package-name),
#html-2187 .package-compare .proticaret-price > li:nth-child(3) .package-title > h2:not(.package-name),
#html-1862 .package-compare .proticaret-price > li:nth-child(2) .package-title > h4,
#html-2187 .package-compare .proticaret-price > li:nth-child(3) .package-title > h4,
#html-1862 .package-compare .proticaret-price > li:nth-child(2) .package-title > h4 span::before,
#html-2187 .package-compare .proticaret-price > li:nth-child(3) .package-title > h4 span::before {
    color: rgba(255, 255, 255, .75) !important;
}

#html-1772 .package-compare .proticaret-price > li:nth-child(4) .package-title > h3,
#html-1772 .package-compare .proticaret-price > li:nth-child(4) .package-title > h4 span,
#html-1862 .package-compare .proticaret-price > li:nth-child(2) .package-title > h3,
#html-2187 .package-compare .proticaret-price > li:nth-child(3) .package-title > h3,
#html-1862 .package-compare .proticaret-price > li:nth-child(2) .package-title > h4 span,
#html-2187 .package-compare .proticaret-price > li:nth-child(3) .package-title > h4 span {
    color: #fff !important;
}

#html-1772 .package-compare .proticaret-price > li:nth-child(4) a.paket-satin-al,
#html-1862 .package-compare .proticaret-price > li:nth-child(2) a.paket-satin-al,
#html-2187 .package-compare .proticaret-price > li:nth-child(3) a.paket-satin-al {
    background: #fff;
    border-color: #fff;
    color: #08699A !important;
}

#html-1772 .package-compare .proticaret-price > li:nth-child(4) a.paket-satin-al:hover,
#html-1862 .package-compare .proticaret-price > li:nth-child(2) a.paket-satin-al:hover,
#html-2187 .package-compare .proticaret-price > li:nth-child(3) a.paket-satin-al:hover {
    background: var(--pt-primary-tint);
}

#html-1772 .package-compare .proticaret-price > li:nth-child(4) ul li,
#html-1862 .package-compare .proticaret-price > li:nth-child(2) ul li,
#html-2187 .package-compare .proticaret-price > li:nth-child(3) ul li {
    background: #EEF7FC !important;
}

#html-1772 .package-compare .proticaret-price > li:nth-child(4) [class^="addtocart-button"] a,
#html-1862 .package-compare .proticaret-price > li:nth-child(2) [class^="addtocart-button"] a,
#html-2187 .package-compare .proticaret-price > li:nth-child(3) [class^="addtocart-button"] a {
    background: #08699A !important;
    border-color: #08699A;
    color: #fff !important;
}

#html-1772 .package-compare .proticaret-price > li:nth-child(4) > .package,
#html-1862 .package-compare .proticaret-price > li:nth-child(2) > .package,
#html-2187 .package-compare .proticaret-price > li:nth-child(3) > .package {
    border-color: #08699A;
    box-shadow: 0 12px 34px rgba(8, 105, 154, .18);
}

#html-1772 .package-compare .proticaret-price > li:nth-child(4) ul li,
#html-1862 .package-compare .proticaret-price > li:nth-child(2) ul li,
#html-2187 .package-compare .proticaret-price > li:nth-child(3) ul li {
    background: #F2F9FD !important;
}

#html-1772 .package-compare .proticaret-price > li:nth-child(4) ul.feature-group-1 > span,
#html-1862 .package-compare .proticaret-price > li:nth-child(2) ul.feature-group-1 > span,
#html-2187 .package-compare .proticaret-price > li:nth-child(3) ul.feature-group-1 > span {
    background: #08699A !important;
    border-bottom-color: #08699A !important;
}

#html-1772 .package-compare .proticaret-price > li:nth-child(4) [class^="addtocart-button"] a,
#html-1862 .package-compare .proticaret-price > li:nth-child(2) [class^="addtocart-button"] a,
#html-2187 .package-compare .proticaret-price > li:nth-child(3) [class^="addtocart-button"] a {
    border-color: #08699A !important;
}

/* Grup aç/kapa düğmesi (+/-): ikon durumu class yerine grubun gerçekten
   açık/kapalı olmasına göre belirlenir; düğme her durumda görünür kalır */
.package-compare .features ul > span {
    cursor: pointer;
    user-select: none;
}

.package-compare .features ul > span::before {
    content: "+" !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 28px !important;
    height: 28px !important;
    top: 50% !important;
    left: -34px !important;
    transform: translateY(-50%);
    border-radius: 8px !important;
    background: #08699A !important;
    color: #fff !important;
    font-size: 18px;
    font-weight: 700;
    line-height: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 3;
}

/* Varsayılan kapalı (+). Açık (−) yalnızca: tıklanıp açılan grup
   (jQuery inline display:block yazar) veya varsayılan açık gelen 1. grup */
.package-compare .features ul > span:has(+ .feature-opener[style*="block"])::before,
.package-compare .features ul.feature-group-1 > span:has(+ .feature-opener:not([style*="none"]))::before {
    content: "\2212" !important;
    background: var(--pt-primary-tint) !important;
    color: var(--pt-primary-700) !important;
}

/* =====================================================================
   26. PAKETLER - MOBİL PAKET LİSTESİ (modüller 1893 / 1894)
   Masaüstü tablo mobilde gizli; yerine .table-body-row kartları.
   Her pakete ayrı renkli başlık yerine beyaz kart; öne çıkan paket
   (Standart: Exclusive, Ultimate: Ultimate ++) #08699A + rozet.
   ===================================================================== */
.table-body-section .table-body-row {
    margin: 0 0 20px !important;
    padding: 0 !important;
    border: 1px solid var(--pt-border) !important;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--pt-shadow);
}

.table-body-section .table-body-row > .row {
    margin: 0 !important;
}

.table-body-section .table-header {
    padding: 22px 20px 16px !important;
    background: #fff !important;
    border-bottom: 1px solid var(--pt-border);
    text-align: center;
}

/* "Raleway" yazı tipi yüklü değildi; başlık serif (Times) görünüyordu */
.table-body-section .table-title {
    font-family: inherit !important;
    color: var(--pt-ink) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.table-body-section .table-subtitle {
    margin-top: 4px;
    font-family: inherit !important;
    color: var(--pt-muted) !important;
    font-size: 13px !important;
    letter-spacing: .3px !important;
}

.table-body-section .table-body {
    padding: 14px 20px !important;
    background: #fff !important;
}

.table-body-section .table-detail li {
    padding: 8px 0 !important;
    border-bottom: 1px solid #EEF2F6;
    color: var(--pt-text);
    font-size: 14px;
    line-height: 1.45;
}

.table-body-section .table-detail li:last-child {
    border-bottom: 0;
}

.table-body-section .table-footer {
    padding: 18px 20px 22px !important;
    background: #F7FAFC !important;
    border-top: 1px solid var(--pt-border);
    text-align: center;
}

.table-body-section .table-prices {
    color: var(--pt-ink) !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    letter-spacing: -.5px;
}

.table-body-section .package-price-lease,
.table-body-section .package-price-lease span {
    margin: 2px 0 0 !important;
    color: var(--pt-muted) !important;
    font-size: 13px !important;
    font-weight: 600;
}

.table-body-section .table-prices-order {
    margin-top: 14px !important;
    padding: 0 !important;
    background: none !important;
}

.table-body-section .table-prices-order a {
    display: inline-block;
    padding: 10px 30px;
    border: 1.5px solid #08699A;
    border-radius: 999px;
    background: #fff;
    color: #08699A !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    text-decoration: none;
}

/* Öne çıkan paket */
#html-1893 .table-body-section .table-package-4,
#html-1894 .table-body-section .table-package-5,
#html-2115 .table-body-section .table-package-3,
#html-2186 .table-body-section .table-body-row:nth-child(2) {
    border-color: #08699A !important;
    box-shadow: 0 12px 30px rgba(8, 105, 154, .22);
}

#html-1893 .table-package-4 .table-header,
#html-1894 .table-package-5 .table-header,
#html-2115 .table-package-3 .table-header,
#html-2186 .table-body-row:nth-child(2) .table-header {
    background: #08699A !important;
    border-bottom-color: rgba(255, 255, 255, .2);
}

#html-1893 .table-package-4 .table-header::before,
#html-1894 .table-package-5 .table-header::before,
#html-2115 .table-package-3 .table-header::before,
#html-2186 .table-body-row:nth-child(2) .table-header::before {
    content: "\2605  EN ÇOK TERCİH EDİLEN";
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 14px;
    border-radius: 999px;
    background: #F5B82E;
    color: #3A2A00;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

#html-1893 .table-package-4 .table-title,
#html-1894 .table-package-5 .table-title,
#html-2115 .table-package-3 .table-title,
#html-2186 .table-body-row:nth-child(2) .table-title {
    color: #fff !important;
}

#html-1893 .table-package-4 .table-subtitle,
#html-1894 .table-package-5 .table-subtitle,
#html-2115 .table-package-3 .table-subtitle,
#html-2186 .table-body-row:nth-child(2) .table-subtitle {
    color: rgba(255, 255, 255, .8) !important;
}

#html-1893 .table-package-4 .table-footer,
#html-1894 .table-package-5 .table-footer,
#html-2115 .table-package-3 .table-footer,
#html-2186 .table-body-row:nth-child(2) .table-footer {
    background: #EEF7FC !important;
}

#html-1893 .table-package-4 .table-prices-order a,
#html-1894 .table-package-5 .table-prices-order a,
#html-2115 .table-package-3 .table-prices-order a,
#html-2186 .table-body-row:nth-child(2) .table-prices-order a {
    background: #08699A;
    color: #fff !important;
}

/* Mobilde sekme çubuğunun üstündeki fazla boşluk */
@media (max-width: 767.98px) {
    .pkg-switch {
        padding: 20px 0 6px;
    }

    .pkg-switch-eyebrow {
        margin-bottom: 12px;
    }
}

/* =====================================================================
   27. İÇ SAYFA BANNER'I (.inner-banner) - site renklerine uyum
   Temadaki mavi -> turkuaz (#246BAD -> #00C8C8) örtü, sekme butonu ve
   ana renk #08699A ile uyumlu koyu mavi geçişe çevrildi. Arka plan
   görseli korunur; sadece üstündeki ::after örtüsü değişir.
   ===================================================================== */
.inner-banner::after {
    background: linear-gradient(135deg, rgba(11, 75, 122, .96) 0%, rgba(8, 105, 154, .93) 55%, rgba(10, 120, 171, .90) 100%) !important;
}

/* Hareket hassasiyeti olan kullanıcılar için animasyonları kapat */
@media (prefers-reduced-motion: reduce) {
    .button,
    .pr-fancy-box,
    .proticaret-first-section .icon-box,
    main .blog-slider-module .blog-item,
    main .blog-slider-module .blog-image img {
        transition: none;
        transform: none !important;
    }
}


/* =====================================================================
   28. FİYAT SORUNUZ KUTUSU + BİLGİ İSTE POPUP (28.09.2026)
   Stok 0 ve "Stokta Yoksa Sat" kapalıysa (veya fiyat 0 ise) fiyat yerine
   gösterilir. Kategori listesi: site.js, ürün detayı: store/product.ascx.
   Tıklama: ThemeMaster.master içindeki [data-askprice-src] betiği.
   ===================================================================== */
.ask-price-box {
    width: 100%;
    max-width: 380px;
    margin: 12px 0 4px;
}

.ask-price-box .ask-price-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid #BFE3F5;
    border-radius: 12px;
    background: linear-gradient(135deg, #F3FAFE 0%, #E3F3FB 100%);
    color: #0B4B7A !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.ask-price-box .ask-price-btn:hover,
.ask-price-box .ask-price-btn:focus-visible {
    border-color: #08699A;
    box-shadow: 0 8px 22px rgba(8, 105, 154, .18);
    transform: translateY(-1px);
    outline: none;
}

.ask-price-box .ask-price-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #08699A;
    color: #fff;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(8, 105, 154, .30);
}

.ask-price-box .ask-price-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.25;
}

.ask-price-box .ask-price-text b {
    color: #08699A;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .2px;
}

.ask-price-box .ask-price-text small {
    margin-top: 3px;
    color: #4E6B80;
    font-size: 12.5px;
}

.ask-price-box .ask-price-arrow {
    color: #08699A;
    font-size: 13px;
    transition: transform .2s ease;
}

.ask-price-box .ask-price-btn:hover .ask-price-arrow {
    transform: translateX(3px);
}

.ask-price-box--detail {
    margin: 16px 0 8px;
}

@media (max-width: 767.98px) {
    #view-content .ask-price-box {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Fancybox penceresi (yalnızca Fiyat Sorunuz popup'ı) */
.askprice-slide .fancybox-content {
    width: 640px !important;
    max-width: calc(100vw - 24px) !important;
    padding: 0 !important;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 30px 80px rgba(6, 40, 66, .35);
}

.askprice-slide .fancybox-close-small {
    top: 10px !important;
    right: 10px !important;
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff !important;
    opacity: 1;
    transition: background .2s ease;
}

.askprice-slide .fancybox-close-small:hover {
    background: rgba(255, 255, 255, .28);
}

/* Bilgi İste sayfası (iframe içi: /store/requestproductinfo) */
body:has(.requestproductinfo-popup) {
    background: #fff !important;
}

.requestproductinfo-popup {
    margin: 0;
    padding: 0;
    background: #fff;
}

.requestproductinfo-popup .title-type-2 {
    margin: 0;
    padding: 22px 60px 22px 26px;
    border: 0;
    background: linear-gradient(135deg, rgba(11, 75, 122, .98) 0%, #08699A 60%, #0A78AB 100%);
}

.requestproductinfo-popup .title-type-2 span {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font-family: inherit;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
    text-transform: none;
}

.requestproductinfo-popup .title-type-2::after {
    content: "Ürünle ilgili sorunuzu iletin, ekibimiz en kısa sürede size dönüş yapsın.";
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
    line-height: 1.45;
}

.requestproductinfo-popup .form-popup {
    float: none;
    width: 100%;
    max-width: none;
    padding: 22px 26px 24px;
    background: #fff;
}

/* Alanlar tek ızgarada: Ad / E-posta, Cep / Telefon, Not, Doğrulama / Gönder */
.requestproductinfo-popup .form-popup > .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "name    email"
        "gsm     phone"
        "note    note"
        "captcha submit";
    column-gap: 16px;
    margin: 0;
}

.requestproductinfo-popup .form-popup > .row > div,
.requestproductinfo-popup .form-popup > .row ul {
    display: contents;
}

.requestproductinfo-popup .form-popup > .row > div:first-child li:nth-child(1) { grid-area: name; }
.requestproductinfo-popup .form-popup > .row > div:first-child li:nth-child(2) { grid-area: note; }
.requestproductinfo-popup .form-popup > .row > div:first-child li:nth-child(3) { grid-area: email; }
.requestproductinfo-popup .form-popup > .row > div:last-child li:nth-child(1) { grid-area: gsm; }
.requestproductinfo-popup .form-popup > .row > div:last-child li:nth-child(2) { grid-area: phone; }
.requestproductinfo-popup .form-popup > .row > div:last-child li:nth-child(3) { display: none; }

.requestproductinfo-popup .form-popup > .row > div:last-child li:nth-child(4) {
    grid-area: captcha;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.requestproductinfo-popup .form-group {
    position: relative;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.requestproductinfo-popup .form-group > label {
    display: block;
    margin: 0 0 6px;
    color: #23405A;
    font-size: 12.5px;
    font-weight: 700;
}

.requestproductinfo-popup .form-control {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #D5E3ED;
    border-radius: 10px;
    background: #F7FBFE;
    color: #1E3345;
    font-size: 14px;
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.requestproductinfo-popup textarea.form-control {
    height: 104px;
    padding: 12px 14px;
    resize: vertical;
}

.requestproductinfo-popup .form-control:focus {
    border-color: #2087b6;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(32, 135, 182, .22);
    outline: none;
}

/* Resim doğrulama: kod resmi + giriş kutusu yan yana */
/* Kod resmi temada kutunun sağ içine konumlanıyor; o yerleşim korunur */
.requestproductinfo-popup .captha img {
    flex: 0 0 auto;
    z-index: 1;
    width: auto !important;
    height: 44px !important;
    padding: 6px 8px;
    border: 1px solid #D5E3ED;
    border-radius: 0 10px 10px 0;
    background: #fff;
    box-sizing: border-box;
}

.requestproductinfo-popup .captha .form-control {
    flex: 1 1 120px;
    width: auto;
    min-width: 0;
    padding-right: 132px;
}

.requestproductinfo-popup .captha .alert-error {
    flex-basis: 100%;
    color: #D64545;
    font-size: 12px;
}

/* Gönder */
.requestproductinfo-popup .form-popup input[type="submit"].btn {
    grid-area: submit;
    align-self: start;
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: #08699A !important;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .3px;
    box-shadow: 0 8px 18px rgba(8, 105, 154, .25);
    transition: background .2s ease, transform .2s ease;
}

.requestproductinfo-popup .form-popup input[type="submit"].btn:hover {
    background: #0B5A85 !important;
    transform: translateY(-1px);
}

/* Doğrulama uyarı ikonları kutunun içinde, sağda */
.requestproductinfo-popup .form-group > span:not(.alert-error) {
    position: absolute;
    top: 38px;
    right: 12px;
    color: #D64545;
    font-size: 16px;
    pointer-events: none;
}

/* Gönderim sonrası mesaj */
.requestproductinfo-popup [id$="pnlMsg"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 8px 0 4px;
    text-align: center;
}

.requestproductinfo-popup [id$="pnlMsg"] .alert {
    margin: 0;
    padding: 16px 18px;
    border: 1px solid #BFE3F5;
    border-radius: 12px;
    background: #EEF7FC;
    color: #0B4B7A;
    font-size: 14px;
    font-weight: 600;
}

.requestproductinfo-popup [id$="pnlMsg"] .btn {
    min-width: 140px;
    height: 42px;
    border: 0;
    border-radius: 10px;
    background: #08699A;
    color: #fff;
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .requestproductinfo-popup .title-type-2 {
        padding: 18px 52px 18px 18px;
    }

    .requestproductinfo-popup .form-popup {
        padding: 18px 16px 20px;
    }

    .requestproductinfo-popup .form-popup > .row {
        grid-template-columns: 1fr;
        grid-template-areas: "name" "email" "gsm" "phone" "note" "captcha" "submit";
    }
}


/* =====================================================================
   29. KATEGORİ FİLTRESİ: ARALIK ÇUBUKLARI (Ürün Puanı / Fiyat)
   Eski ion.rangeSlider teması resim sprite'ı kullanıyordu; mavi çubuk,
   gri hat ve tutamaçlar farklı yükseklikte kalıyordu. Tamamı CSS ile
   aynı eksene hizalanır. (Tutamaç 22px: eklenti konumu bu genişliğe göre
   hesapladığı için değiştirilmez.)
   ===================================================================== */
.rangeSliderContainer .irs {
    height: 44px;
}

/* İç .irs satır içi akışta 12px aşağı kayıyordu; hat (line) ile mavi çubuk
   (bar) aynı kutuya göre konumlansın diye iç kutu dış kutuya sabitlenir */
.rangeSliderContainer .irs[class*="js-irs-"] {
    display: block;
}

.rangeSliderContainer .irs[class*="js-irs-"] > .irs {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    display: block;
}

.rangeSliderContainer .irs-line {
    top: 26px !important;
    height: 6px !important;
    border-radius: 3px;
    background: #E3EEF5 !important;
    overflow: hidden;
}

.rangeSliderContainer .irs-line-left,
.rangeSliderContainer .irs-line-mid,
.rangeSliderContainer .irs-line-right {
    height: 6px !important;
    background: none !important;
}

.rangeSliderContainer .irs-bar {
    top: 26px !important;
    height: 6px !important;
    border: 0 !important;
    border-radius: 3px;
    background: #08699A !important;
}

.rangeSliderContainer .irs-bar-edge {
    display: none !important;
}

.rangeSliderContainer .irs-slider {
    top: 18px !important;
    width: 22px !important;
    height: 22px !important;
    border: 3px solid #08699A !important;
    border-radius: 50%;
    background: #fff !important;
    box-shadow: 0 2px 6px rgba(8, 105, 154, .30);
    box-sizing: border-box;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.rangeSliderContainer .irs-slider:hover,
.rangeSliderContainer .irs-slider.state_hover {
    transform: scale(1.12);
    box-shadow: 0 3px 10px rgba(8, 105, 154, .40);
}

.rangeSliderContainer .irs-from,
.rangeSliderContainer .irs-to,
.rangeSliderContainer .irs-single {
    top: 0 !important;
    padding: 1px 7px !important;
    border-radius: 5px !important;
    background: #08699A !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700;
    line-height: 1.4 !important;
}

.rangeSliderContainer .irs-min,
.rangeSliderContainer .irs-max {
    top: 0 !important;
    padding: 1px 6px !important;
    border-radius: 5px !important;
    background: #F1F5F8 !important;
    color: #6B7F8E !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
}


/* =====================================================================
   30. ÜRÜN DETAYI: Code14 gizli, Code15 (adres) buton (28.09.2026)
   Code14 kategori listesinde kısa açıklama olarak kullanılmaya devam eder.
   Code15 butonu store/product.ascx'te üretilir (değer http/https ise).
   ===================================================================== */
.product-page .description.code14 {
    display: none !important;
}

.product-page .description.code15-link {
    padding: 16px 0 12px !important;
    background: transparent !important;
}

.product-page .code15-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 22px;
    border-radius: 10px;
    background: #08699A;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .2px;
    text-decoration: none !important;
    box-shadow: 0 8px 18px rgba(8, 105, 154, .25);
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.product-page .code15-btn:hover,
.product-page .code15-btn:focus-visible {
    background: #0B5A85;
    box-shadow: 0 10px 22px rgba(8, 105, 154, .32);
    transform: translateY(-1px);
    outline: none;
}

.product-page .code15-btn i {
    font-size: 14px;
}

@media (max-width: 767.98px) {
    .product-page .code15-btn {
        width: 100%;
        justify-content: center;
    }
}


/* =====================================================================
   31. ÜST BAR: BAYİ GİRİŞİ + SEPET (28.09.2026, header.ascx)
   Sıra: Bayi Girişi | Üye Girişi | Sepet (en sağda)
   ===================================================================== */
.topbar .headder-middle-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
    min-height: 40px;
}

.topbar .headder-middle-right > * {
    float: none !important;
}

.topbar .headder-middle-right .partner-login { order: 1; }
.topbar .headder-middle-right .account-status,
.topbar .headder-middle-right > .user-menu { order: 2; }
.topbar .headder-middle-right .my-cart { order: 3; }

/* Bayi Girişi: Üye Girişi ile aynı görünüm */
.topbar .partner-login a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    color: #565657;
    font-size: 16px;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease;
}

.topbar .partner-login a i {
    color: #777A7C;
    font-size: 18px;
    transition: color .2s ease;
}

.topbar .partner-login a:hover,
.topbar .partner-login a:hover i,
.topbar .user-menu button:hover,
.topbar .user-menu button:hover i {
    color: #08699A;
}

/* Sepet butonu */
.topbar .my-cart {
    position: relative;
}

.topbar .my-cart > .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #08699A;
    color: #fff;
    box-shadow: none;
    transition: background .2s ease;
}

.topbar .my-cart > .btn::after {
    display: none;
}

.topbar .my-cart > .btn:hover,
.topbar .my-cart.show > .btn {
    background: #0B5A85;
}

.topbar .my-cart > .btn i {
    font-size: 15px;
}

.topbar .my-cart .cart-badge {
    position: absolute;
    top: -4px;
    right: -8px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border: 2px solid #F6F6F6;
    border-radius: 999px;
    background: #F5B82E;
    color: #3A2A00;
    font-size: 11px;
    font-weight: 800;
    line-height: 15px;
    text-align: center;
}

.topbar .my-cart .cart-badge.is-empty {
    background: #C5D3DD;
    color: #fff;
}

/* Sepet açılır penceresi */
.topbar .my-cart .dropdown-menu {
    width: 340px;
    max-width: calc(100vw - 24px);
    margin-top: 10px;
    padding: 0;
    border: 1px solid #E3EEF5;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(6, 40, 66, .18);
    overflow: hidden;
    z-index: 1060;
}

.topbar .my-cart .crt-popup {
    position: static !important;
    display: block !important;
    max-height: 420px;
    overflow-y: auto;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.topbar .my-cart .crt-popup .translateSquare {
    display: none;
}

.topbar .my-cart .crt-popup .cart-title {
    padding: 12px 16px;
    background: #08699A;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.topbar .my-cart .crt-popup .cart-product-item ul {
    margin: 0;
    padding: 12px;
    list-style: none;
}

.topbar .my-cart .crt-popup .btn-danger {
    border: 1px solid #F3D3D3;
    border-radius: 8px;
    background: #FDF3F3;
    color: #B03A3A;
    font-size: 14px;
}

/* Mobil: tema bu alanı ekranın altına sabit bir çubuk yapıyor
   (Üye Girişi: yuvarlak ikon + altında küçük yazı). Bayi ve Sepet aynı
   görünüme getirilir; sıra soldan sağa Bayi | Üye | Sepet. */
@media (max-width: 991.98px) {
    .topbar .headder-middle-right {
        flex-direction: row !important;
        justify-content: space-around !important;
        gap: 0;
    }

    .topbar .partner-login a,
    .topbar .my-cart > .btn {
        flex-direction: column;
        gap: 2px;
        width: auto;
        height: auto;
        padding: 0;
        background: transparent !important;
        color: #000;
    }

    .topbar .partner-login a i,
    .topbar .my-cart > .btn i {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #5A9CD6;
        color: #fff;
        font-size: 15px;
        line-height: 32px;
        text-align: center;
    }

    .topbar .partner-login a span,
    .topbar .my-cart .my-cart-label {
        color: #000;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.3;
    }

    .topbar .my-cart .cart-badge {
        top: -5px;
        right: -6px;
        border-color: #fff;
    }

    /* Alt çubuktan yukarı doğru açılır */
    .topbar .my-cart .dropdown-menu {
        position: fixed !important;
        top: auto !important;
        right: 12px !important;
        bottom: 72px !important;
        left: 12px !important;
        width: auto;
        max-width: none;
        margin: 0;
        transform: none !important;
    }
}


/* =====================================================================
   32. IFRAME POPUP'LARI İÇERİĞE GÖRE YÜKSEKLİK (28.09.2026)
   Tema paketi tüm iframe popup'larını "height: 600px !important" ile
   sabitliyordu (Sepete eklendi, Bilgi İste vb. altı boş kalıyordu).
   ThemeMaster.master'daki betik iframe içeriğini ölçüp --pc-frame-h
   değişkenine yazar ve .pc-fit-frame sınıfını ekler. Ürün hızlı görünüm
   (quickView) bu kuraldan hariç tutulur.
   ===================================================================== */
.fancybox-slide--iframe .fancybox-content.pc-fit-frame {
    height: var(--pc-frame-h, 600px) !important;
    max-height: calc(100vh - 40px);
}


/* =====================================================================
   33. SEPET SAYFASI: MİKTAR KUTUSU + SATIŞ BİRİMİ (28.09.2026, /store/cart)
   Birim adı (Adet / Paket / Koli; ürünün satış birimi) cart.aspx'te zaten
   basılıyordu ama tema gizliyordu. Tek kutu: [miktar | birim | ▲▼]
   ===================================================================== */
.dgCart .product-quantity {
    vertical-align: middle !important;
}

.dgCart .product-quantity .quantity-content {
    display: inline-flex;
    align-items: stretch;
    height: 42px;
    border: 1px solid #D5E3ED;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    vertical-align: middle;
}

.dgCart .product-quantity .cartQuantity {
    order: 1;
    width: 54px;
    height: auto !important;
    margin: 0 !important;
    padding: 0 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #1E3345;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    box-shadow: none !important;
}

.dgCart .product-quantity .cartQuantity:focus {
    outline: none;
    background: #F7FBFE !important;
}

.dgCart .product-quantity .unitName {
    order: 2;
    display: inline-flex !important;
    align-items: center;
    padding: 0 12px;
    border-left: 1px solid #E3EEF5;
    background: #EEF7FC;
    color: #0B4B7A;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.dgCart .product-quantity .quantity-changer {
    order: 3;
    position: static !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column;
    width: 30px !important;
    height: auto !important;
    margin: 0 !important;
    border-left: 1px solid #E3EEF5;
}

.dgCart .product-quantity .quantity-changer a {
    flex: 1 1 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: auto !important;
    background: #F5F9FC;
    color: #08699A !important;
    font-size: 14px;
    line-height: 1;
    text-decoration: none !important;
    transition: background .15s ease;
}

.dgCart .product-quantity .quantity-changer a + a {
    border-top: 1px solid #E3EEF5;
}

.dgCart .product-quantity .quantity-changer a:hover {
    background: #E1F0F9;
}

.dgCart .product-quantity .quantity-changer a i {
    margin: 0;
}


/* =====================================================================
   34. ÜST BAR SOL: TELEFON + E-POSTA (28.09.2026, header.ascx)
   Telefon tel:, e-posta mailto: bağlantısı; ikisi aynı hizada.
   ===================================================================== */
.topbar .topbar-left {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 28px;
    min-height: 40px;
}

.topbar .topbar-left a.information-content {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    color: #565657;
    text-decoration: none;
    transition: color .2s ease;
}

.topbar .topbar-left a.information-content i {
    float: none;
    margin: 0;
    line-height: 1;
    color: #2087b6;
}

.topbar .topbar-left a.information-content span {
    color: inherit;
    line-height: 1.2;
}

.topbar .topbar-left a.information-content:hover {
    color: #08699A;
}

@media (max-width: 991.98px) {
    .topbar .topbar-left {
        justify-content: center;
        gap: 0 18px;
    }

    .topbar .topbar-left a.information-content {
        min-height: 34px;
        font-size: 15px;
    }

    .topbar .topbar-left a.information-content i {
        font-size: 15px;
    }
}


/* =====================================================================
   35. MİNİ SEPET (28.09.2026)
   header.ascx'teki pcMiniCartBuild() cartnew.ashx çıktısını bu yapıya
   çevirir: başlık, ürün listesi (resim, ad, miktar -/+, fiyat, sil),
   toplam ve iki buton.
   ===================================================================== */
.topbar .my-cart .dropdown-menu {
    width: 380px;
}

.topbar .my-cart .crt-popup {
    max-height: none;
    overflow: visible;
}

.mini-cart {
    background: #fff;
    color: #1E3345;
    text-align: left;
}

.mini-cart .mc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #08699A;
    color: #fff;
}

.mini-cart .mc-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
}

.mini-cart .mc-sub {
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    font-size: 12px;
    font-weight: 600;
}

.mini-cart .mc-list {
    max-height: 330px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.mini-cart .mc-item {
    position: relative;
    display: grid;
    grid-template-columns: 64px 1fr 30px;
    align-items: center;
    gap: 12px;
    padding: 12px 14px 12px 18px;
    border-bottom: 1px solid #EEF3F7;
    transition: opacity .2s ease;
}

.mini-cart .mc-item:last-child {
    border-bottom: 0;
}

.mini-cart .mc-item.is-busy {
    opacity: .5;
    pointer-events: none;
}

.mini-cart .mc-img {
    display: block;
    width: 64px;
    height: 64px;
    border: 1px solid #E3EEF5;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.mini-cart .mc-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mini-cart .mc-info {
    min-width: 0;
}

.mini-cart .mc-name {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #1E3345 !important;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none !important;
}

.mini-cart .mc-name:hover {
    color: #08699A !important;
}

.mini-cart .mc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.mini-cart .mc-qty {
    display: inline-flex;
    align-items: stretch;
    height: 30px;
    border: 1px solid #D5E3ED;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.mini-cart .mc-qty button {
    width: 28px;
    padding: 0;
    border: 0;
    background: #F5F9FC;
    color: #08699A;
    font-size: 11px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.mini-cart .mc-qty button:hover {
    background: #E1F0F9;
}

.mini-cart .mc-qty .mc-minus .fa-trash-alt {
    color: #C0504D;
}

.mini-cart .mc-val {
    min-width: 30px;
    padding: 0 4px;
    border-left: 1px solid #E3EEF5;
    border-right: 1px solid #E3EEF5;
    font-size: 13px;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
}

.mini-cart .mc-unit {
    color: #6B7F8E;
    font-size: 11.5px;
}

.mini-cart .mc-price {
    margin-left: auto;
    color: #08699A;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.mini-cart .mc-remove {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #9AAAB6;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.mini-cart .mc-remove:hover {
    background: #FDECEC;
    color: #D64545;
}

.mini-cart .mc-foot {
    padding: 14px 18px 16px;
    border-top: 1px solid #E3EEF5;
    background: #F7FBFE;
}

.mini-cart .mc-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
    color: #4E6B80;
    font-size: 14px;
}

.mini-cart .mc-total b {
    color: #0B4B7A;
    font-size: 18px;
    font-weight: 800;
}

.mini-cart .mc-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.mini-cart .mc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #08699A;
    border-radius: 10px;
    background: #08699A;
    color: #fff !important;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .2s ease, border-color .2s ease;
}

.mini-cart .mc-btn:hover {
    border-color: #0B5A85;
    background: #0B5A85;
}

.mini-cart .mc-btn-light {
    border-color: #BFE3F5;
    background: #fff;
    color: #08699A !important;
}

.mini-cart .mc-btn-light:hover {
    border-color: #08699A;
    background: #EEF7FC;
}

.mini-cart .mc-empty {
    padding: 28px 20px 24px;
    text-align: center;
}

.mini-cart .mc-empty i {
    color: #BFD6E4;
    font-size: 36px;
}

.mini-cart .mc-empty p {
    margin: 12px 0 16px;
    color: #4E6B80;
    font-size: 14px;
}

@media (max-width: 991.98px) {
    .topbar .my-cart .dropdown-menu {
        width: auto;
    }

    .mini-cart .mc-list {
        max-height: 45vh;
    }
}


/* =====================================================================
   36. SAYFALAMA (kategori listesi, #pagecountdiv) (28.09.2026)
   Sayfa butonları ile "Toplam ... ürün bulundu" yazısı arasına boşluk;
   butonlar kutulu ve ortalı.
   ===================================================================== */
#pagecountdiv.pagination {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 28px 0 8px !important;
}

#pagecountdiv ul.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0 !important;
    padding: 0;
    list-style: none;
}

#pagecountdiv ul.pagination li > span,
#pagecountdiv ul.pagination li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #D5E3ED;
    border-radius: 8px;
    background: #fff;
    color: #08699A;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

#pagecountdiv ul.pagination li > span:not(.pasive):not(.select):hover,
#pagecountdiv ul.pagination li > a:hover {
    border-color: #08699A;
    background: #EEF7FC;
}

#pagecountdiv ul.pagination li > span.select {
    border-color: #08699A;
    background: #08699A;
    color: #fff;
    cursor: default;
}

#pagecountdiv ul.pagination li > span.pasive {
    background: #F5F8FA;
    color: #A9B8C3;
    cursor: default;
}

#pagecountdiv .quantity {
    color: #4E6B80;
    font-size: 14px;
    text-align: center;
}

#pagecountdiv .quantity b {
    color: #0B4B7A;
}


/* =====================================================================
   37. ÜST MENÜ: HOVER RENGİ (28.09.2026)
   Ana menü ve açılır alt menü bağlantıları üzerine gelince site mavisi.
   ===================================================================== */
#menu-topbar .navbar-nav > .nav-item > .nav-link:hover,
#menu-topbar .navbar-nav > .nav-item > .nav-link:focus-visible,
#menu-topbar .navbar-nav > .nav-item.show > .nav-link {
    color: #08699A !important;
}

#menu-topbar .dropdown-menu .nav-link:hover,
#menu-topbar .dropdown-menu .nav-link:focus-visible {
    color: #08699A !important;
}


/* =====================================================================
   38. HESABIM MENÜSÜ BAŞLIĞI (28.09.2026, portal/AccountSidebar.ascx)
   Başlık ortalı; Raleway sunucuda olmadığı için serif görünüyordu.
   ===================================================================== */
.account-menu .categories-title {
    width: 100%;
    font-family: inherit !important;
    text-align: center;
}

.account-menu .account-title.desktop {
    display: block;
    width: 100%;
    font-family: inherit !important;
    font-weight: 700;
    text-align: center;
}


/* =====================================================================
   39. BLOG YAZI SAYFALARI (28.09.2026)
   Tüm blog yazıları aynı yapıyı kullanıyor (HTML modülleri):
   .inner-banner (başlık) | article.blog-single-content (yazı) |
   .blog-vertical (Popüler Yazılar). Kurallar modül numarasına değil
   bu sınıflara bağlı; yeni yazılar da otomatik aynı görünür.
   ===================================================================== */

/* Başlık bandı mobilde gizleniyordu (satır "d-none d-lg-block");
   sayfanın H1 başlığı mobilde de görünsün */
section > .d-none.d-lg-block:has(.inner-banner) {
    display: block !important;
}

.inner-banner .contents h1 {
    font-size: clamp(26px, 3.4vw, 44px) !important;
    line-height: 1.2 !important;
}

/* --- Yazı gövdesi --- */
article.blog-single-content {
    color: #3A4A57;
    font-family: inherit;
}

article.blog-single-content h2,
article.blog-single-content h3,
article.blog-single-content p,
article.blog-single-content li,
article.blog-single-content a {
    font-family: inherit !important;
}

article.blog-single-content [id] {
    scroll-margin-top: 110px;
}

/* Tarih / yazar / okuma süresi: yuvarlak etiketler */
article.blog-single-content .single-blog-item > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 8px 10px 0;
    padding: 6px 14px !important;
    border-radius: 999px;
    background: #F1F7FB;
    color: #4E6B80;
    font-size: 13.5px;
    line-height: 1.4;
}

article.blog-single-content .single-blog-item > span i {
    color: #08699A;
    font-size: 13px;
}

/* Görseller */
article.blog-single-content figure.blog-single-image {
    margin: 22px 0 !important;
}

article.blog-single-content figure.blog-single-image img,
article.blog-single-content .article-body img {
    display: block;
    max-width: 100%;
    height: auto !important;
    margin: 0 auto;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(6, 40, 66, .10);
}

article.blog-single-content .article-body > section > img {
    margin: 22px auto;
}

/* Paragraflar: iki yana yaslama mobilde boşluk yaratıyordu */
article.blog-single-content .article-body p {
    margin: 0 0 18px !important;
    color: #3A4A57 !important;
    font-size: 17px !important;
    line-height: 1.8 !important;
    text-align: left !important;
}

article.blog-single-content .article-body strong {
    color: #1E3345 !important;
    font-weight: 700 !important;
}

/* Başlıklar */
article.blog-single-content .article-body h2 {
    position: relative;
    margin: 46px 0 18px !important;
    padding-left: 18px !important;
    color: #0B2F4A !important;
    font-size: 27px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
}

article.blog-single-content .article-body h2::before {
    top: 4px !important;
    bottom: 4px;
    width: 5px !important;
    height: auto !important;
    border-radius: 3px;
    background: #08699A !important;
}

article.blog-single-content .article-body h3 {
    margin: 30px 0 12px !important;
    color: #08699A !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

/* Metin içi bağlantılar */
article.blog-single-content a.a-link-btn {
    padding: 0 2px;
    border-bottom: 1px solid rgba(8, 105, 154, .35);
    color: #08699A !important;
    font-weight: 600 !important;
    line-height: inherit !important;
    text-decoration: none !important;
    transition: background .15s ease, border-color .15s ease;
}

article.blog-single-content a.a-link-btn:hover {
    border-bottom-color: #08699A;
    background: #EEF7FC;
}

/* İçindekiler kutusu */
article.blog-single-content ul.article-content {
    margin: 26px 0 34px !important;
    padding: 22px 26px 16px !important;
    border: 1px solid #DCEBF4;
    border-left: 5px solid #08699A;
    border-radius: 14px !important;
    background: #F4F9FC !important;
    list-style: none;
    counter-reset: toc;
}

article.blog-single-content ul.article-content h2 {
    margin: 0 0 10px !important;
    padding: 0 !important;
    color: #08699A !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px;
}

article.blog-single-content ul.article-content h2::before {
    display: none !important;
}

article.blog-single-content ul.article-content li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed #D5E3ED;
    line-height: 1.5 !important;
    counter-increment: toc;
}

article.blog-single-content ul.article-content li:last-child {
    border-bottom: 0;
}

article.blog-single-content ul.article-content li::before {
    content: counter(toc);
    flex: 0 0 24px;
    height: 24px;
    border-radius: 50%;
    background: #08699A;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
}

article.blog-single-content ul.article-content a {
    color: #1E3345 !important;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5 !important;
    text-decoration: none !important;
}

article.blog-single-content ul.article-content a:hover {
    color: #08699A !important;
}

/* Sık sorulanlar */
article.blog-single-content .blog-sss {
    margin-top: 40px;
    padding: 8px 26px 12px;
    border: 1px solid #E3EEF5;
    border-radius: 16px;
    background: #FAFCFE;
}

article.blog-single-content .blog-sss h3 {
    position: relative;
    margin: 24px 0 8px !important;
    padding-left: 34px;
    color: #0B2F4A !important;
    font-size: 18px !important;
}

article.blog-single-content .blog-sss h3::before {
    content: "?";
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #08699A;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 24px;
    text-align: center;
}

article.blog-single-content .blog-sss h3 + p {
    padding-left: 34px;
}

/* --- Popüler Yazılar (sağ sütun) ---
   60'a yakın yazı listeleniyordu (sütun ~13.000px). Liste kendi içinde
   kayar ve sayfa kaydırılırken sağda sabit kalır. Tema main etiketine
   overflow:hidden verdiği için sabitleme çalışmıyordu; blog sayfalarında
   aynı kırpmayı yapan overflow:clip kullanılır. */
main:has(.blog-vertical) {
    overflow: clip !important;
}

section[class*="col-"] > .module:has(.blog-vertical) {
    position: sticky;
    top: 20px;
}

.blog-vertical {
    max-height: calc(100vh - 40px);
    padding-right: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #C5D3DD transparent;
}

.blog-vertical .blog-title {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 0 0 10px;
    background: #fff;
    color: #0B2F4A;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.blog-vertical .blog-title i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px !important;
    margin: 0 !important;
    border-radius: 10px;
    background: #08699A !important;
    color: #fff !important;
    font-size: 15px;
}

.blog-vertical .vertical-blog-item {
    margin: 0 0 12px !important;
    padding: 14px 16px !important;
    border: 1px solid #E3EEF5;
    border-radius: 12px !important;
    background: #fff !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.blog-vertical .vertical-blog-item:hover {
    border-color: #BFE3F5;
    box-shadow: 0 8px 20px rgba(8, 105, 154, .10);
}

.blog-vertical .vertical-blog-title {
    margin: 0 0 6px !important;
}

.blog-vertical .vertical-blog-title a {
    color: #1E3345 !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
}

.blog-vertical .vertical-blog-item:hover .vertical-blog-title a {
    color: #08699A !important;
}

.blog-vertical .vertical-blog-content {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin: 0 !important;
    color: #5B6F7E !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
}

/* --- Mobil --- */
@media (max-width: 767.98px) {
    .inner-banner .contents {
        padding: 26px 0 !important;
    }

    .inner-banner .contents p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    article.blog-single-content .article-body p {
        font-size: 16px !important;
        line-height: 1.75 !important;
    }

    article.blog-single-content .article-body h2 {
        margin-top: 34px !important;
        font-size: 22px !important;
    }

    article.blog-single-content .article-body h3 {
        font-size: 19px !important;
    }

    article.blog-single-content ul.article-content {
        padding: 18px 16px 12px !important;
    }

    article.blog-single-content .blog-sss {
        padding: 4px 16px 8px;
    }
}

/* Tablet ve mobil: yazı ve Popüler Yazılar alt alta, tam genişlik */
@media (max-width: 991.98px) {
    .row:has(> section > .module .blog-vertical) > section[class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    section[class*="col-"] > .module:has(.blog-vertical) {
        position: static;
    }

    .blog-vertical {
        max-height: 540px;
        margin-top: 30px;
    }
}


/* =====================================================================
   40. "PAKETLERE DAHİL STANDART ÖZELLİK" KUTUSU (28.09.2026)
   Fiyatı 0 olan ürünlerde fiyat yerine gösterilir (tıklanmaz).
   "Fiyat Sorunuz" kutusuyla aynı kalıpta, yeşil tonlarda.
   Kategori/arama: site.js | Ürün detayı: store/product.ascx |
   Ürün slider modülleri: ProductSlider(Counter)Module.ascx
   Fiyatı olup stokta olmayan ürünlerde "Fiyat Sorunuz" kutusu kalır.
   ===================================================================== */
.included-feature-box {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 380px;
    margin: 12px 0 4px;
    padding: 12px 16px;
    border: 1px solid #BFE6CF;
    border-radius: 12px;
    background: linear-gradient(135deg, #F2FBF6 0%, #E2F5EA 100%);
    color: #17613D;
    text-align: left;
    cursor: default;
}

.included-feature-box .if-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #1E8E5A;
    color: #fff;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(30, 142, 90, .30);
}

.included-feature-box .if-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: #17613D;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .1px;
}

.included-feature-box .if-text::after {
    content: "E-ticaret paketlerinde hazır olarak gelir";
    margin-top: 3px;
    color: #4A7A60;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
}

.included-feature-box--detail {
    margin: 16px 0 8px;
}

.included-feature-box--slider {
    margin: 8px auto 4px;
    padding: 10px 12px;
}

.included-feature-box--slider .if-icon {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
    font-size: 13px;
}

.included-feature-box--slider .if-text {
    font-size: 14px;
}

@media (max-width: 767.98px) {
    #view-content .included-feature-box {
        margin-left: auto;
        margin-right: auto;
    }
}

/* =====================================================================
   41. FOOTER - koyu marka teması (28.09.2026)
   Üstte e-bülten kartı, solda marka/iletişim/sosyal, sağda 4 menü sütunu,
   altta telif çubuğu. Menü içeriği admin > Menü (footer / social) ile yönetilir.
   ===================================================================== */
#aspnetForm > footer {
    --ft-bg: #052739;
    --ft-bg2: #07405F;
    --ft-line: rgba(255, 255, 255, .09);
    --ft-text: rgba(255, 255, 255, .70);
    --ft-accent: #2087b6;
    --ft-accent-light: #7CC8EC;
    background: radial-gradient(1100px 380px at 85% -10%, rgba(32, 135, 182, .28), transparent 70%),
                linear-gradient(180deg, var(--ft-bg2) 0%, var(--ft-bg) 100%) !important;
    color: var(--ft-text) !important;
    padding-top: 56px !important;
    position: relative;
}

#aspnetForm > footer a { text-decoration: none !important; }

/* --- E-bülten kartı --- */
#aspnetForm > footer .footer-top {
    padding-bottom: 44px;
    margin-bottom: 48px;
    border-bottom: 1px solid var(--ft-line);
}

#aspnetForm > footer #newsletter-content.nl-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    margin: 0;
    padding: 26px 30px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .11);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}

#aspnetForm > footer .nl-text { display: flex; align-items: center; gap: 18px; min-width: 0; }

#aspnetForm > footer .nl-icon {
    flex: 0 0 54px;
    height: 54px;
    border-radius: 16px;
    background: linear-gradient(135deg, #2087b6, #08699A);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    box-shadow: 0 10px 22px rgba(32, 135, 182, .40);
}

#aspnetForm > footer #newsletter-content h3 {
    color: #fff !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    margin: 0 0 4px !important;
    letter-spacing: .2px;
    line-height: 1.25;
}

#aspnetForm > footer #newsletter-content p { margin: 0; font-size: 14px; color: var(--ft-text); }

#aspnetForm > footer .news-inputs {
    position: relative;
    display: flex;
    flex: 0 1 470px;
    background: #fff;
    border-radius: 999px;
    padding: 5px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}

#aspnetForm > footer .newsletter-input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    height: 46px !important;
    line-height: 46px !important;
    border: 0 !important;
    background: transparent !important;
    text-indent: 0 !important;
    padding: 0 20px !important;
    font-size: 15px;
    color: #0f2433 !important;
    outline: none !important;
    box-shadow: none !important;
}

#aspnetForm > footer .add-button {
    position: static !important;
    flex: 0 0 auto;
    width: auto !important;
    height: 46px !important;
    padding: 0 28px !important;
    border-radius: 999px !important;
    background: var(--ft-accent) !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .6px;
    transition: background .2s ease;
}

#aspnetForm > footer .add-button:hover,
#aspnetForm > footer .add-button:focus { background: #08699A !important; }

#aspnetForm > footer #info.alert { border-radius: 12px; margin: 0 0 14px; }

/* --- Marka / iletişim sütunu --- */
#aspnetForm > footer .footer-main { padding-bottom: 40px; }

#aspnetForm > footer .footer-logo { display: inline-block; }

#aspnetForm > footer .footer-logo img {
    height: 36px;
    width: auto;
    filter: brightness(0) invert(1);
}

#aspnetForm > footer .footer-about {
    margin: 18px 0 22px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--ft-text);
    max-width: 290px;
}

#aspnetForm > footer .footer-contact {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: grid;
    gap: 12px;
}

#aspnetForm > footer .footer-contact a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
}

#aspnetForm > footer .footer-contact i {
    flex: 0 0 36px;
    height: 36px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .08);
    color: var(--ft-accent-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: background .2s ease, color .2s ease;
}

#aspnetForm > footer .footer-contact a:hover i { background: var(--ft-accent); color: #fff; }

#aspnetForm > footer .footer-contact small {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    line-height: 1.2;
}

/* --- Sosyal medya --- */
#aspnetForm > footer .footer-social {
    display: flex !important;
    align-items: center;
    gap: 10px;
    height: auto !important;
    margin: 0 !important;
}

#aspnetForm > footer .footer-social .nav-social-menu { margin: 0 !important; padding: 0 !important; }

#aspnetForm > footer .footer-social .navbar-nav {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    width: auto;
}

#aspnetForm > footer .footer-social li a {
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(255, 255, 255, .12);
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, transform .2s ease, border-color .2s ease;
}

#aspnetForm > footer .footer-social li a i { color: #fff !important; line-height: 1 !important; font-size: 15px; }

#aspnetForm > footer .footer-social li a:hover {
    background: var(--ft-accent) !important;
    border-color: var(--ft-accent);
    transform: translateY(-2px);
}

/* --- Menü sütunları --- */
#aspnetForm > footer .nav-footer-menu,
#aspnetForm > footer #nav-menu-footer { padding: 0 !important; }

#aspnetForm > footer #menu-footer > ul > li > a {
    position: relative;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0 0 12px !important;
    line-height: 1.4 !important;
}

#aspnetForm > footer #menu-footer > ul > li > a::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 3px;
    border-radius: 3px;
    background: var(--ft-accent);
}

#aspnetForm > footer #menu-footer > ul > li > ul { background: transparent !important; box-shadow: none !important; min-width: 0 !important; }

#aspnetForm > footer #menu-footer > ul > li > ul > li > a {
    display: inline-flex !important;
    align-items: center;
    color: var(--ft-text) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    padding: 6px 0 !important;
    background: transparent !important;
    transition: color .2s ease !important;
}

#aspnetForm > footer #menu-footer > ul > li > ul > li > a::before {
    content: "";
    flex: 0 0 auto;
    width: 0;
    height: 2px;
    margin-right: 0;
    border-radius: 2px;
    background: var(--ft-accent-light);
    transition: width .2s ease, margin .2s ease;
}

#aspnetForm > footer #menu-footer > ul > li > ul > li > a:hover { color: #fff !important; }

#aspnetForm > footer #menu-footer > ul > li > ul > li > a:hover::before { width: 10px; margin-right: 8px; }

#aspnetForm > footer #menu-footer i:empty { display: none; }

#aspnetForm > footer .edit-button { position: relative; z-index: 2; }

@media (min-width: 992px) {
    #aspnetForm > footer #menu-footer > ul {
        display: grid !important;
        grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
        gap: 28px;
        width: 100%;
    }

    #aspnetForm > footer #menu-footer > ul > li { width: auto !important; float: none !important; }

    #aspnetForm > footer #menu-footer > ul > li > ul { float: none !important; margin: 16px 0 0 !important; }
}

/* --- Alt telif çubuğu --- */
#aspnetForm > footer .footerBottom {
    background: rgba(0, 0, 0, .25) !important;
    border-top: 1px solid var(--ft-line);
    padding: 18px 0;
    color: rgba(255, 255, 255, .6);
}

#aspnetForm > footer .footerBottom .row { align-items: center; }

#aspnetForm > footer .Copyright { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .6); }

#aspnetForm > footer .footer-cards {
    display: flex !important;
    justify-content: center;
    gap: 10px;
    font-size: 28px;
    color: rgba(255, 255, 255, .75);
}

#aspnetForm > footer .footer_ref a { color: rgba(255, 255, 255, .6) !important; font-size: 13px !important; }

#aspnetForm > footer .footer_ref a:hover { color: #fff !important; }

/* --- Tablet / mobil --- */
@media (max-width: 991.98px) {
    #aspnetForm > footer { padding-top: 36px !important; }

    #aspnetForm > footer .footer-top { padding-bottom: 32px; margin-bottom: 32px; }

    #aspnetForm > footer #newsletter-content.nl-card {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        padding: 22px;
    }

    #aspnetForm > footer .news-inputs { flex: 1 1 auto; }

    #aspnetForm > footer .footer-brand { margin-bottom: 28px; }

    #aspnetForm > footer .footer-about { max-width: none; }

    #aspnetForm > footer #menu-footer > ul > li {
        background: rgba(255, 255, 255, .05) !important;
        border: 1px solid var(--ft-line);
        border-radius: 12px;
        margin-bottom: 10px !important;
        overflow: hidden;
    }

    #aspnetForm > footer #menu-footer > ul > li > a { display: block; padding: 14px 16px !important; }

    #aspnetForm > footer #menu-footer > ul > li > a::before { display: none; }

    #aspnetForm > footer #menu-footer > ul > li > a::after {
        background: rgba(255, 255, 255, .1) !important;
        color: #fff;
        border-radius: 6px !important;
    }

    #aspnetForm > footer #menu-footer > ul > li > ul {
        border: 0 !important;
        border-top: 1px solid var(--ft-line) !important;
        padding: 8px 16px 12px !important;
        margin: 0 !important;
    }

    #aspnetForm > footer .footerBottom { padding: 18px 0 84px; text-align: center; }

    #aspnetForm > footer .footerBottom .row > div + div { margin-top: 10px; }

    #aspnetForm > footer .footer_ref { text-align: center; }
}

@media (max-width: 575.98px) {
    #aspnetForm > footer .nl-text { align-items: flex-start; }

    #aspnetForm > footer .nl-icon { flex-basis: 46px; height: 46px; font-size: 18px; border-radius: 13px; }

    #aspnetForm > footer #newsletter-content h3 { font-size: 18px !important; }

    #aspnetForm > footer .add-button { padding: 0 18px !important; }
}

/* =====================================================================
   42. İÇERİK İÇİ NOT KUTUSU (<footer> etiketi, ör. blog/ürün "Not:" alanı)
   Tema "footer" etiketine gri zemin + 55px üst boşluk veriyor, Bootstrap
   pt-4 de sadece üstten boşluk bırakıyordu; yazı kenarlara yapışıyordu.
   ===================================================================== */
#aspnetForm main footer {
    background: #F4F8FB !important;
    border: 1px solid #DCE8F0 !important;
    border-left: 4px solid #2087b6 !important;
    border-radius: 10px;
    padding: 18px 22px !important;
    margin: 28px 0 8px;
    color: #4B5B68 !important;
    font-size: 15px;
    line-height: 1.7;
}

#aspnetForm main footer p { margin: 0; }

#aspnetForm main footer p + p { margin-top: 8px; }

#aspnetForm main footer strong { color: #08699A; }

@media (max-width: 575.98px) {
    #aspnetForm main footer { padding: 14px 16px !important; font-size: 14px; }
}

/* =====================================================================
   43. ÜRÜN DETAYI - SSS KARTLARI ve ÖNEMLİ NOT KUTUSU
   Ürün açıklaması şablonu (article.product-overview) kullanan TÜM ürünlerde
   geçerlidir: .faq-section .card ve section.border.bg-light ("ÖNEMLİ NOT").
   Görünüm bölüm 42'deki içerik içi not kutusuyla aynıdır.
   ===================================================================== */
#aspnetForm .product-overview .faq-section .card {
    background: #fff !important;
    border: 1px solid #DCE8F0 !important;
    border-left: 4px solid #2087b6 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    overflow: hidden;
    margin-bottom: 14px !important;
}

#aspnetForm .product-overview .faq-section .card-header {
    background: #F4F8FB !important;
    border-bottom: 1px solid #DCE8F0 !important;
    padding: 14px 22px !important;
}

#aspnetForm .product-overview .faq-section .card-header h3,
#aspnetForm .product-overview .faq-section .card-header h4,
#aspnetForm .product-overview .faq-section .card-header h5 {
    font-size: 16px !important;
    font-weight: 600;
    color: #0F3B55;
    line-height: 1.5;
    margin: 0 !important;
}

#aspnetForm .product-overview .faq-section .card-body {
    padding: 16px 22px !important;
    color: #4B5B68;
    font-size: 15px;
    line-height: 1.7;
}

#aspnetForm .product-overview .faq-section .card-body p { margin: 0; }

#aspnetForm .product-overview .faq-section .card-body p + p { margin-top: 8px; }

#aspnetForm .product-overview .faq-section strong,
#aspnetForm .product-overview > section.border.bg-light strong { color: #08699A; }

#aspnetForm .product-overview > section.border.bg-light {
    background: #F4F8FB !important;
    border: 1px solid #DCE8F0 !important;
    border-left: 4px solid #2087b6 !important;
    border-radius: 10px;
    padding: 18px 22px !important;
    color: #4B5B68;
    font-size: 15px;
    line-height: 1.7;
}

#aspnetForm .product-overview > section.border.bg-light h4 {
    font-size: 17px;
    font-weight: 700;
    color: #0F3B55;
    margin: 0 0 8px;
}

#aspnetForm .product-overview > section.border.bg-light p { margin: 0; }

@media (max-width: 575.98px) {
    #aspnetForm .product-overview .faq-section .card-header { padding: 12px 16px !important; }
    #aspnetForm .product-overview .faq-section .card-body,
    #aspnetForm .product-overview > section.border.bg-light { padding: 14px 16px !important; font-size: 14px; }
}

/* =====================================================================
   44. SAYFA BANNER'I (.inner-banner) TAM GENİŞLİK
   Paket sayfalarında satırın container-fluid'ine "px-lg-0" verilmiş,
   diğer sayfalarda verilmemiş; banner kenarlardan 15px boşluk bırakıyordu.
   Banner içeren tam genişlik satırın iç boşlukları sıfırlanır (tüm ekranlar).
   ===================================================================== */
.wrapper > .container-fluid:has(.inner-banner) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.wrapper > .container-fluid:has(.inner-banner) > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.wrapper > .container-fluid:has(.inner-banner) > .row > section[class*="col-"]:has(.inner-banner) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}