/* Gerçek betenozul.com sitesinden alınan "Aller" fontu (Font Squirrel webfont kiti) */
@font-face {
    font-family: 'aller_lightregular';
    src: url('/fonts/aller/aller_lt-webfont.woff') format('woff'),
         url('/fonts/aller/aller_lt-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'allerregular';
    src: url('/fonts/aller/aller_rg-webfont.woff') format('woff'),
         url('/fonts/aller/aller_rg-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'allerbold';
    src: url('/fonts/aller/aller_bd-webfont.woff') format('woff'),
         url('/fonts/aller/aller_bd-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html, body {
    font-family: var(--font-body, 'aller_lightregular', 'Helvetica Neue', Helvetica, Arial, sans-serif);
}

.mutlu-public-root h1, .mutlu-public-root h2, .mutlu-public-root h3,
.mutlu-public-root h4, .mutlu-public-root h5, .mutlu-public-root h6,
.mutlu-public-root .mud-typography-h1, .mutlu-public-root .mud-typography-h2,
.mutlu-public-root .mud-typography-h3, .mutlu-public-root .mud-typography-h4,
.mutlu-public-root .mud-typography-h5, .mutlu-public-root .mud-typography-h6 {
    font-family: var(--font-heading, inherit);
}

.bete-header-sticky {
    position: sticky;
    top: 0;
    z-index: 1100;
    box-shadow: var(--shadow-soft, 0 2px 8px rgba(0,0,0,.10));
}

/* Bölüm/kart giriş animasyonu — bkz. wwwroot/js/scrollReveal.js. Varsayılan durum gizli,
   JS ilk kesişimde .mutlu-revealed ekleyip görünür hale getiriyor; JS hiç çalışmazsa
   (script engellenmiş vb.) içerik erişilemez kalmasın diye no-js durumunda da CSS'siz
   fallback gerekmiyor çünkü script App.razor'da her sayfada kayıtlı. */
[data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-reveal].mutlu-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Ortak kart görünümü — Home.razor EntryList ve WidgetAreaSlot EntryList aynı sınıfı
   paylaşır (bkz. plan, "tek bir .mutlu-card sınıfına fabrikala"). */
.mutlu-card {
    border-radius: var(--radius-base, 8px);
    box-shadow: var(--shadow-soft, 0 2px 8px rgba(0,0,0,.10));
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: #fff;
}

.mutlu-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-elevated, 0 10px 24px rgba(0,0,0,.16));
}

/* object-fit:cover + sabit oran, kare olmayan ürün fotoğraflarını (çoğu bu sitede
   dikdörtgen/kare olmayan, düz gri fonlu çekimler) kırpıp çirkin şekilde yakınlaştırıyordu
   (bkz. kullanıcı geri bildirimi: anasayfa kartları "Tüm Ürünler" listesine göre çok çirkin).
   ContentTypeIndex.razor'daki kanıtlanmış, kırpmayan yaklaşımla aynı: sabit yükseklik +
   contain + açık gri fon, görsel kendi oranında tam gösteriliyor. */
/* 180px -> 240px: kullanıcı geri bildirimi — kartlar küçük/sıkışık duruyordu, çerçeveli
   kutunun "dar" hissettirmesinin asıl sebebi kutu genişliği değil buymuş. */
.mutlu-card-image {
    width: 100%;
    height: 240px;
    object-fit: contain;
    background: #fafafa;
    display: block;
}

.mutlu-card-title {
    font-family: var(--font-heading, inherit);
}

/* Kategori/sayfa üst başlığı (ör. "Kâğıt Sektörü") — bkz. kullanıcı geri bildirimi: bölüm
   başlığı gibi bunun da boyutu/rengi admin panelinden ayarlanabilmeli. */
.mutlu-page-title {
    font-family: var(--font-heading, inherit);
    font-size: var(--page-title-size, 2.25rem);
    color: var(--page-title-color, inherit);
}

/* Kategori/ürün grubu gibi bölüm başlıkları (ör. "Fan Perde Şeklinde") — bkz. kullanıcı
   geri bildirimi: boyutu admin panelinden (Küçük/Orta/Büyük) seçilebilmeli. Boyutun kendisi
   --section-heading-size değişkeninden (bkz. BeteTheme.BuildDesignCss) geliyor, burada sadece
   font ailesi/kalınlığı sabitleniyor. !important gerekmiyor — MudText'in Typo="h5" sınıfının
   varsayılan boyutunu normal CSS özgüllüğüyle geçersiz kılmak için sınıf, elementin kendi
   üzerinde (Class="mutlu-section-heading") kullanılıyor. */
.mutlu-section-heading {
    font-family: var(--font-heading, inherit);
    font-size: var(--section-heading-size, 1.5rem);
    color: var(--section-heading-color, inherit);
    font-weight: 600;
    line-height: 1.3;
}

/* SiteTheme.BoxedContent — ana içerik alanının etrafına ince çerçeve/gölge (bkz. kullanıcı
   geri bildirimi: "ortalanmış çerçeveli içerik" düzeni). PublicLayout, header/footer ile body
   arasındaki tek sarmalayıcı div'e bu sınıfı ekliyor — hem Home hem iç sayfalar kapsanmış olur. */
/* Uzun, yuvarlak köşeli/çerçeveli arama kutusu (bkz. kullanıcı geri bildirimi: "search bar
   uzun çerçeveli olsun") — MudBlazor'un Outlined varyantının görünür kenarlığını (fieldset)
   hedefliyor, iç input elemanına dokunmuyor. */
.mutlu-search-pill .mud-input-outlined-border {
    border-radius: 999px !important;
    border-color: #d0d0d0 !important;
}

/* 1400px -> 1200px -> 1320px: önceki iki deneme birbirine zıt geri bildirim aldı (1400px
   "boş kalıyor", 1200px "çok dar") — rastgele ayarlamak yerine Bootstrap'ın kendi "xl"
   konteyner genişliğine (1320px) sabitlendi; bu, gerçek sitelerde yaygın kullanılan,
   kanıtlanmış "standart" bir boxed-layout ölçüsü, gelecekte tekrar rastgele değiştirilmemeli. */
/* width:100% BURADA KRİTİK — kutu bir flex sütununun (mutlu-public-root) doğrudan çocuğu ve
   overflow:hidden taşıyor; width belirtilmeden sadece max-width ile bırakılırsa tarayıcı
   genişliği "içeriğe sığacak kadar" (shrink-to-fit) hesaplıyor, stretch yerine — bu yüzden az
   ürünlü bir kategori sayfasında kutu 941px'e, çok ürünlü bir sayfada 1320px'e küçülüp
   büyüyordu (bkz. kullanıcı geri bildirimi: aynı sitede iki farklı kutu genişliği görülüyordu).
   width:100% + max-width birlikte, kutuyu HER ZAMAN mevcut alanı dolduracak şekilde (max-width'e
   kadar) zorluyor, içerik miktarından bağımsız. */
.mutlu-boxed-content {
    width: 100%;
    max-width: 1320px;
    margin: 24px auto;
    border: 1px solid #e0e0e0;
    border-radius: var(--radius-base, 8px);
    box-shadow: var(--shadow-soft, 0 2px 8px rgba(0,0,0,.10));
    overflow: hidden;
}

.mutlu-accordion .mud-expand-panel {
    border-radius: var(--radius-base, 8px) !important;
    box-shadow: var(--shadow-soft, 0 2px 8px rgba(0,0,0,.10)) !important;
    margin-bottom: 8px;
    overflow: hidden;
}

.mutlu-accordion .mud-expand-panel:last-child {
    margin-bottom: 0;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

/* MudBlazor'un genel CSS sıfırlaması ul/ol/li için padding/margin'i 0 yapıyor; bu,
   list-style-position:outside ile birleşince zengin metin içeriğindeki (ürün
   açıklamaları, sayfa içerikleri) madde işaretlerinin kutunun sol kenarının dışına
   taşmasına neden oluyor. Yönetim panelindeki editörle aynı düzeltme burada de public
   tarafta uygulanıyor (bkz. RichTextEditor.razor .rte-content kuralları). */
.rich-content ul, .rich-content ol,
.cms-page-content ul, .cms-page-content ol {
    padding-left: 24px;
    margin: 8px 0;
}

.rich-content li, .cms-page-content li {
    margin-bottom: 4px;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* "Sayılarla Biz" (HomeSectionKind.Stats) bandı — bkz. Home.razor. Arkaplan rengi
   marka rengine göre değiştiği için (SiteSetting.PrimaryColor) inline style ile
   uygulanıyor, burada sadece marka-bağımsız yerleşim/animasyon kuralları var. */
.bete-stats-band {
    padding: 48px 16px;
}

.bete-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px;
    text-align: center;
}

.bete-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
}

.bete-stat-icon {
    font-size: 2.4rem !important;
    width: 1em;
    height: 1em;
    opacity: 0.9;
}

.bete-stat-value {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
    line-height: 1.1;
}

.bete-stat-label {
    font-size: 0.95rem;
    opacity: 0.92;
    max-width: 220px;
}

/* "Neden Biz?" (HomeSectionKind.Features) kartları — Stats bandının aksine renkli arkaplan
   yerine düz beyaz zemin üzerinde, ikonu vurgulamak için dairesel bir marka-rengi rozet
   kullanılıyor (bkz. Home.razor). Marka rengi MudTheme.Primary'den CSS değişkeni olarak
   geliyor (App.razor/MudThemeProvider tarafından otomatik uygulanır). */
.bete-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 32px;
}

.bete-feature-card {
    text-align: center;
    padding: 16px;
}

.bete-feature-icon-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--mud-palette-primary, #00A7D4);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 1.8rem;
}

/* Referanslar/Müşteri Logoları (HomeSectionKind.Partners) şeridi — Carousel/Gallery'nin
   aksine slayt değil, tüm logoları aynı anda yan yana gösteren sabit bir şerit; gri tonlama
   ile nötrleştirilip hover'da renklenerek dikkat dağıtmadan "referans" hissini veriyor. */
.bete-partners-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.bete-partner-logo {
    max-height: 60px;
    max-width: 160px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: filter 0.2s, opacity 0.2s;
}

.bete-partner-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Video/Tanıtım (HomeSectionKind.Video) — responsive 16:9 iframe sarmalayıcı, klasik
   "padding-top hilesi" (intrinsic ratio box) ile ekran boyutundan bağımsız oran korunuyor. */
.bete-video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.bete-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Genel içerik detay şablonu (ContentEntryPublic.razor) — ürün/duyuru gibi tüm içerik
   tiplerinin ortak "çıplak" görünümünü (ham etiket:değer listesi) daha vitrin hissi veren
   bir düzene çeviriyor: solda öne çıkan görsel + galeri şeridi, sağda temiz bir "özellikler"
   kartı ve zengin metin içeriği (bkz. kullanıcı isteği: "görsel olarak beğenilen bir site"). */
.cep-hero-image {
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: var(--radius-base, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    min-height: 280px;
}

.cep-hero-image img {
    max-width: 100%;
    max-height: 420px;
    object-fit: contain;
}

/* Kahraman görsel ve galeri küçük resimleri artık büyütme (lightbox) tetikleyicisi olduğundan
   (bkz. cep-lightbox-trigger / lightbox.js) üzerine gelince tıklanabilir olduğunu belli eden
   hafif bir karartma + zoom-in imleci ekleniyor. */
.cep-lightbox-trigger {
    position: relative;
    cursor: zoom-in;
}

.cep-lightbox-trigger::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.15s ease;
    border-radius: inherit;
}

.cep-lightbox-trigger:hover::after {
    background: rgba(0, 0, 0, 0.08);
}

.cep-gallery-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cep-gallery-thumb {
    display: block;
    width: 84px;
    height: 84px;
    border-radius: var(--radius-base, 6px);
    overflow: hidden;
    border: 1px solid #e0e0e0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cep-gallery-thumb:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.cep-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cep-spec-card {
    border: 1px solid #e8e8e8;
    border-radius: var(--radius-base, 8px);
    box-shadow: var(--shadow-soft, none);
    overflow: hidden;
}

.cep-spec-row {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 16px;
    gap: 6px 16px;
    border-bottom: 1px solid #f0f0f0;
}

.cep-spec-row:last-child {
    border-bottom: none;
}

.cep-spec-row:nth-child(even) {
    background: #fafafa;
}

.cep-spec-label {
    flex: 0 0 140px;
    color: #757575;
    font-size: 0.85rem;
    font-weight: 600;
}

.cep-spec-value {
    flex: 1;
    min-width: 160px;
}

@media (max-width: 480px) {
    .cep-spec-label {
        flex: 1 1 100%;
    }
}

/* Tüm harita gömmelerinde (anasayfa, sayfa/İletişim, ürün-benzeri içerik detayı) ortak
   çerçeve — daha önce her biri kenarlıksız/köşesiz ayrı ayrı render ediliyordu. */
.mutlu-map-embed {
    border: 1px solid #eee;
    border-radius: var(--radius-base, 8px);
    overflow: hidden;
}

.mutlu-map-embed iframe {
    display: block;
    border: 0;
}

/* Sol kenar menüsünde gerçekten seçili olan kategori/sayfa linkini net, dolu bir renkle
   vurgulamak için (bkz. kullanıcının kendi eski sitesinde gördüğü davranış: aktif kategori
   dolu turkuaz arkaplanla ayrılıyordu). Doğru/yanlış ayrımı PublicLayout.razor'daki
   IsCurrentNavUrl (sorgu dizesi dahil tam eşleşme) tarafından yapılıyor — MudNavLink'in kendi
   "active" sınıfı sorgu dizesini yok saydığından tek başına buna güvenilemiyordu (örn. "Tüm
   Ürünler" ile bir kategori filtresi aynı anda "active" görünüyordu). cep-nav-reset, o hatalı
   otomatik "active" stilini nötrler; cep-nav-active gerçek seçimi vurgular. */
/* Üst menü butonları (Sektöre Göre vb.) header'ın tam yüksekliğini kaplasın — bkz. kullanıcı
   geri bildirimi: "daha görsellik katar diye düşünüyorum". navLinks fragment'ındaki sarmalayıcı
   (.mutlu-header-nav) zaten align-self:stretch ile satırın tam yüksekliğini alıyor; burada
   içindeki her MudMenu/MudLink'in de kendi kapsayıcısını doldurması sağlanıyor, aksi halde
   içerik (metin) kendi doğal boyutunda kalıp ortada küçük bir alan kaplardı. */
.mutlu-header-nav {
    align-self: stretch;
}

.mutlu-header-nav .mud-menu,
.mutlu-header-nav .mud-menu .mud-menu-button-activator,
.mutlu-header-nav .mud-menu .mud-menu-button-activator > button,
.mutlu-header-nav > .mud-link {
    height: 100%;
}

.mutlu-header-nav .mud-menu .mud-menu-button-activator > button,
.mutlu-header-nav > .mud-link {
    display: flex;
    align-items: center;
    border-radius: 0;
}

.mutlu-header-nav .mud-menu .mud-menu-button-activator > button:hover,
.mutlu-header-nav > .mud-link:hover {
    background-color: rgba(0, 0, 0, .04);
}

/* Üst menüde aktif grup vurgusu (ör. "Sektöre Göre") — bkz. kullanıcı geri bildirimi:
   "kategori sol menüde renkli ama üst menüde renkli değil, üst menüde de belirli olsun".
   Üst menü öğeleri zaten Color.Primary (marka rengi) kullandığından sadece renk yetmiyor —
   alt çizgi + kalınlaştırma ile fark edilir bir "seçili" durumu üretiliyor. */
.mutlu-topnav-active > .mud-button-root,
.mutlu-topnav-active.mud-link {
    font-weight: 700 !important;
    border-bottom: 2px solid var(--mud-palette-primary, #00A7D4);
    padding-bottom: 2px;
}

/* Üst menü açılır listesindeki aktif satır (ör. "Kirlilik Kontrol") — bkz. kullanıcı geri
   bildirimi: sadece grup başlığı değil, açılan listedeki gerçek seçim de belirgin olmalı,
   sol menüdeki vurguyla aynı görünüm (bkz. .cep-nav-active). */
.mutlu-dropdown-active {
    background-color: var(--mud-palette-primary, #00A7D4) !important;
}

.mutlu-dropdown-active .mud-list-item-text .mud-typography,
.mutlu-dropdown-active .mud-typography {
    color: #fff !important;
    font-weight: 600 !important;
}

.cep-nav-active .mud-nav-link {
    background-color: var(--mud-palette-primary, #00A7D4) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border-radius: 4px;
}

.cep-nav-reset .mud-nav-link.active {
    background-color: transparent !important;
    color: rgba(0, 0, 0, 0.87) !important;
    font-weight: 400 !important;
}

/* Sol menü genel görsel düzeni — bkz. kullanıcı geri bildirimi: menü ham/stilsiz duruyordu
   (sıkışık, aralıksız, hover/hiyerarşi belirtisi yok). Üst seviye grup başlıkları (Sektöre
   Göre vb.) kalın, alt öğeler (tekil kategoriler) daha ince/küçük punto — göz taramasını
   kolaylaştırıyor. Token'lı (--radius-base) köşe yuvarlaklığı diğer kartlarla tutarlı. */
.mutlu-sidebar-nav .mud-nav-link {
    padding: 8px 12px;
    border-radius: var(--radius-base, 8px);
    margin-bottom: 2px;
    transition: background-color .15s ease;
}

.mutlu-sidebar-nav .mud-nav-link:hover {
    background-color: rgba(0, 0, 0, .04);
}

.mutlu-sidebar-nav > .mud-nav-group > .mud-nav-link {
    font-weight: 600;
    font-size: .95rem;
}

.mutlu-sidebar-nav .mud-nav-group .mud-nav-group .mud-nav-link,
.mutlu-sidebar-nav .mud-nav-link.cep-nav-active .mud-nav-link,
.mutlu-sidebar-nav .mud-nav-group-content .mud-nav-link {
    font-size: .875rem;
    font-weight: 400;
}

/* Görsel büyütme penceresi (lightbox) — bkz. wwwroot/js/lightbox.js. Betenozul.com test
   verisindeki ürün görsellerinin galeri şeridinde çok küçük kalması (bkz. kullanıcı geri
   bildirimi) ve daha önce kullanıcının kendi sitesinde (yapiturkinsaat.com.tr) gösterdiği
   taşınabilir/ok tuşuyla gezinilebilir büyük görsel penceresi örnek alınarak eklendi. */
.mlb-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 3000;
}

.mlb-overlay.mlb-open {
    display: block;
}

.mlb-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 92vw;
    max-height: 92vh;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mlb-toolbar {
    position: absolute;
    top: -18px;
    right: -18px;
    display: flex;
    gap: 4px;
    background: rgba(20, 20, 20, 0.9);
    border-radius: 20px;
    padding: 4px;
    cursor: move;
    user-select: none;
}

.mlb-btn {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

.mlb-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.mlb-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.mlb-btn:disabled:hover {
    background: transparent;
}

.mlb-counter {
    color: #fff;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    padding: 0 6px;
    white-space: nowrap;
}

.mlb-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 92vw;
    max-height: 92vh;
}

.mlb-img-wrap img {
    display: block;
    max-width: 92vw;
    max-height: 92vh;
    object-fit: contain;
}

@media (max-width: 600px) {
    .mlb-toolbar {
        top: -16px;
        right: 0;
    }
}