/* 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);
}
/* Prerender -> interaktif devre gecisinde ana icerik bir an icin tamamen bosaliyor
(bkz. kullanici ekran kaydi: "tik tik" - dolu -> beyaz -> dolu, ~300-400ms).
Bu, Blazor Server'in devre kurulurken kok bilesen agacini yeniden olusturmasindan
kaynaklaniyor, prerender kapatilinca daha da kotu oluyordu (bkz. App.razor notu).
Sert kesimi (ani beyazlama) yerine yumusak bir soneme/donme yapmasi icin
flashGuard.js tarafindan tetiklenen sinif - gercek bosluk suresini kisaltmiyor
ama goze "bozuk" degil "yukleniyor" gibi gelmesini sagliyor. */
.mutlu-swap-fade {
opacity: 0.15;
transition: opacity .18s ease-out;
}
body:not(.mutlu-swap-fade) {
transition: opacity .22s ease-in;
}
.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));
transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* Hero (HomeSectionKind.Hero) sayfanın ilk bandıysa, header sayfa en üstteyken görsel üzerine
şeffaf biner; aşağı kaydırıldığında normal katı arkaplanına döner — bkz. wwwroot/js/heroHeader.js
(sınıfları ekleyip kaldıran mantık orada, burada sadece görünüm). "on-hero ama henüz scrolled
değil" durumunda header akıştan çıkarılır (position:fixed) ki Hero, header'ın normalde kapladığı
boşluğu doldurup sayfanın en tepesinden başlasın. */
.mutlu-header-on-hero:not(.mutlu-header-scrolled) {
position: fixed;
/* Sliding Top paneli açıksa/kapalıysa gerçek yüksekliği kadar aşağı itilir — bkz.
wwwroot/js/heroHeader.js ResizeObserver notu. Panel yoksa (--mutlu-slidingtop-h hiç
ayarlanmadıysa) 0'a düşer, bugüne kadarki davranış aynen korunur. */
top: var(--mutlu-slidingtop-h, 0px);
left: 0;
right: 0;
background: transparent !important;
box-shadow: none;
border-bottom-color: transparent !important;
}
.mutlu-header-on-hero:not(.mutlu-header-scrolled) a:not(.mutlu-hero-button),
.mutlu-header-on-hero:not(.mutlu-header-scrolled) .mud-nav-link,
.mutlu-header-on-hero:not(.mutlu-header-scrolled) .mud-icon-root {
color: #ffffff !important;
}
/* Bölüm/kart giriş animasyonu (fade+slide-up) KALDIRILDI — bkz. kullanıcı geri bildirimi:
"sitede tıkladığımda ekran tazelendiğinde bir effect çalışıyor... onu kaldıralım" — her
sayfa geçişinde [data-reveal] öğelerinin görünmez başlayıp animasyonla belirmesi rahatsız
ediciydi. [data-reveal] işaretli öğeler artık normal şekilde, hiç gizlenmeden gösteriliyor
(bkz. wwwroot/js/scrollReveal.js — gözlemci artık hiçbir şey yapmıyor).
/* 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: var(--mutlu-card-bg, #fff);
border: var(--mutlu-image-frame-border, none);
position: relative;
}
.mutlu-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-elevated, 0 10px 24px rgba(0,0,0,.16));
}
/* Muffin Options › Colors > Content > Image Frame | Mask color — hover'da kart üzerine ince bir
renkli katman biner (BeTheme'in "predefined opacity 0.4" davranışıyla aynı). Değişken boşsa
hiçbir şey render edilmez (background:none = etkisiz). */
.mutlu-card::after {
content: "";
position: absolute;
inset: 0;
background: var(--mutlu-image-frame-mask, none);
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
}
.mutlu-card:hover::after {
opacity: 0.4;
}
/* 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ş. */
/* contain -> scale-down: eski siteden gelen bazı ürün görselleri gerçekten çok küçük
(ör. 80x227px) — "contain", kutuyu doldurmak için bunları da ZORLA büyütüyordu, bu da
bulanık/"iri, orijinal değil gibi" bir görünüme yol açıyordu (kullanıcı geri bildirimi).
"scale-down" aynı contain mantığıyla büyük görselleri sığdırır ama KÜÇÜK görselleri asla
büyütmez — kendi doğal boyutunda, kutunun ortasında (etrafında fon rengiyle) gösterilir. */
.mutlu-card-image {
width: 100%;
height: 240px;
object-fit: scale-down;
background: #fafafa;
display: block;
}
/* HomeSection.EntryDateStyle — bkz. Home.razor EntryList kart notu (kullanıcı isteği: "resim
ortasında tarih belirtilmeli, bu haber çünkü", sonra "başka tarih gösterme seçenekleri de
olsun"). Sarmalayıcı position:relative, rozet position:absolute ile görselin üzerine
(CenterOnImage=tam orta, CornerBadge=sol üst köşe) okunabilir koyu-yarı-saydam bir fon
üzerinde beyaz metinle bindiriliyor. */
.mutlu-card-image-wrap {
position: relative;
}
.mutlu-card-date-badge {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
padding: 6px 14px;
border-radius: var(--radius-base, 8px);
font-size: 0.85rem;
white-space: nowrap;
}
/* CornerBadge — merkezdeki dönüşümü (translate/top/left:50%) iptal edip köşeye sabitliyor. */
.mutlu-card-date-badge-corner {
top: 10px;
left: 10px;
transform: none;
padding: 4px 10px;
font-size: 0.75rem;
}
/* AboveTitle — görsele hiç dokunmadan, başlığın hemen üstünde soluk/düz bir metin satırı. */
.mutlu-card-date-text {
display: block;
opacity: 0.65;
}
.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-grid-width: Muffin Options › Global > General > Grid width (px). Boşsa aşağıdaki
1320px (Bootstrap "xl") korunur — bkz. aşağıdaki tarihçe notu. */
.mutlu-boxed-content {
width: 100%;
max-width: var(--mutlu-grid-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;
}
/* Zengin metin editöründeki H2/H3 düğmeleri tarayıcının varsayılan (çok küçük) başlık
boyutunu üretiyordu — sitenin gerçek başlıklarının (MudText Typo.h4 vb.) yanında
ezik kalıyordu (kullanıcı geri bildirimi: "H2 yaptım ama maalesef küçük"). Sitenin kendi
başlık ölçeğiyle aynı hizaya getirildi. */
.rich-content h2, .cms-page-content h2 {
font-size: 1.75rem;
line-height: 1.3;
margin: 0 0 8px;
}
.rich-content h3, .cms-page-content h3 {
font-size: 1.375rem;
line-height: 1.3;
margin: 0 0 8px;
}
.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;
}
/* Hero bandı (HomeSectionKind.Hero) — tam genişlik arkaplan görseli üzerine bindirilmiş
başlık/alt metin/buton, anasayfanın ilk bandı olarak kullanılması amaçlanır (bkz. Home.razor
HeroBackgroundStyle, SortOrder ile konumlandırma notu). Karartma katmanı (overlay) metnin
her görselde okunaklı kalmasını sağlar. */
.mutlu-hero {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 480px;
display: flex;
align-items: center;
}
.mutlu-hero-overlay {
width: 100%;
background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.55) 100%);
padding: 64px 0;
}
/* Görsel olmayan (düz renk) Hero'larda (bkz. HeroBackgroundStyle fallback) karartma katmanı
gerekmez — üstteki koyu gradyan zaten koyu bir marka rengiyle birleşince çamurlaşıyordu
(bkz. BeBuilder CTA bandı karşılaştırması). Fotoğraflı Hero'larda hiçbir değişiklik yok. */
.mutlu-hero-overlay-flat {
background: none;
}
.mutlu-hero-content {
max-width: 640px;
color: #ffffff;
}
.mutlu-hero-headline {
color: #ffffff;
font-weight: 700;
margin-bottom: 16px;
/* Typo.h2'nin sabit boyutu (MudBlazor varsayılanı ~40px+) dar ekranlarda başlığı 4 satıra
bölüp Hero'yu gereksiz uzatıyordu (bkz. kullanıcı geri bildirimi: mobil ince ayar).
clamp() ile ekran genişliğine göre kademesiz ölçeklenir, ayrı bir mobil override'a
gerek kalmaz. */
font-size: clamp(1.75rem, 5vw + 1rem, 3rem);
line-height: 1.15;
}
.mutlu-hero-subtitle {
color: rgba(255,255,255,.9);
margin-bottom: 24px;
font-size: clamp(1rem, 1vw + 0.85rem, 1.25rem);
}
@media (max-width: 767px) {
.mutlu-hero {
min-height: 360px;
}
.mutlu-hero-overlay {
padding: 40px 0;
}
}
/* Hero+Bio birleşik ("split") kompozisyonu — bir Hero'nun HEMEN ardından bir Bio bölümü
geldiğinde otomatik olarak devreye girer (bkz. Home.razor _skipIndex mantığı). Tam genişlik
arkaplan görseli yerine: solda metin, sağda büyük fotoğraf, fotoğrafın alt-sol köşesine
bindirilmiş yarı-saydam bilgi kartı — gerçek Doctor2 demosuyla karşılaştırmalı doğrulandı. */
.mutlu-hero-split {
background: var(--mutlu-hero-split-bg, #728087) var(--mutlu-hero-split-decoration, none) no-repeat right center;
background-size: auto 90%;
min-height: 0;
display: flex;
flex-direction: column;
/* Bkz. kullanıcı geri bildirimi: "header'ın neresinde olduğunu ben seçemiyorum...
ya sabit ortala... veya bir seçenekle kullanıcı konumu belirlesin" — varsayılan
ortalanmış (HomeSection.HeroTextPosition=Middle); band HeroHeight=Tall gibi
içerikten uzunsa metin+buton artık üstte sıkışıp altında boşluk bırakmıyor. */
justify-content: center;
overflow: hidden;
}
.mutlu-hero-text-pos-top {
justify-content: flex-start;
}
.mutlu-hero-text-pos-bottom {
justify-content: flex-end;
}
.mutlu-hero-split-inner {
display: flex;
align-items: flex-end;
gap: 40px;
flex-wrap: wrap;
padding-top: 56px;
}
.mutlu-hero-split-text {
flex: 1 1 420px;
padding-bottom: 56px;
}
.mutlu-hero-headline-dark, .mutlu-hero-subtitle-dark {
color: #ffffff;
}
.mutlu-hero-split-photo-wrap {
position: relative;
flex: 1 1 420px;
max-width: 560px;
align-self: flex-end;
}
.mutlu-hero-split-photo {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}
.mutlu-hero-bio-card {
position: absolute;
left: 0;
bottom: 48px;
max-width: 320px;
background: rgba(114, 128, 135, .72);
backdrop-filter: blur(6px);
color: #ffffff;
padding: 20px 24px;
border-radius: 4px;
}
.mutlu-hero-bio-card .mutlu-bio-name {
color: #ffffff;
}
@media (max-width: 900px) {
.mutlu-hero-split-inner {
flex-direction: column-reverse;
padding-top: 32px;
}
.mutlu-hero-split-photo-wrap {
max-width: 100%;
}
.mutlu-hero-split-text {
padding-bottom: 32px;
}
.mutlu-hero-bio-card {
position: static;
max-width: 100%;
margin-top: 16px;
}
}
/* Split-hero: fotoğraf solda mı sağda mı (bkz. HomeSection.ImagePosition — Steps kalıbıyla AYNI
alan, yeniden kullanılıyor) — varsayılan (Right) bugüne kadarki tek düzenle birebir aynı. */
.mutlu-hero-split-imgleft:not(.mutlu-hero-split-bleed) .mutlu-hero-split-inner {
flex-direction: row-reverse;
}
/* Split-hero: fotoğraf kenardan taşsın (bleed) — bkz. HomeSection.HeroSplitPhotoBleed, Home.razor,
kullanıcı isteği: "referanstaki gibi fotoğraf kenara yaslanıp taşsın". Kapalıyken (varsayılan)
yukarıdaki kutulanmış/inset .mutlu-hero-split-photo-wrap davranışı hiç değişmez — bu kurallar
sadece .mutlu-hero-split-bleed sınıfı eklendiğinde devreye girer. */
.mutlu-hero-split-bleed {
position: relative;
/* CTA butonu (.mutlu-hero-button) bu bandın alt kenarına yaslı (bottom:0) — bir sonraki
bant üzerine binen bir kart olarak eklenirse (bkz. HomeSection.OverlapPreviousSection)
aralarında görsel bir boşluk kalsın diye küçük bir alt boşluk. */
padding-bottom: 48px;
}
.mutlu-hero-split-bleed-photo {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 55%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.mutlu-hero-split-bleed.mutlu-hero-split-imgleft .mutlu-hero-split-bleed-photo {
right: auto;
left: 0;
}
.mutlu-hero-split-bleed .mutlu-hero-split-inner {
position: relative;
z-index: 1;
justify-content: flex-start;
}
.mutlu-hero-split-bleed.mutlu-hero-split-imgleft .mutlu-hero-split-inner {
justify-content: flex-end;
}
.mutlu-hero-split-bleed .mutlu-hero-split-text {
max-width: 45%;
}
/* DÜZELTME: kart fotoğrafın anchor kenarını TAKİP ETMELİYDİ (fotoğraf hangi kenara yaslanıyorsa
kart da o kenara) — eskiden tam TERSİ yazılmıştı (fotoğraf sağdayken kart solda, yani METİN
sütununun üzerine biniyordu). Bkz. kullanıcı geri bildirimi: "sol tarafı yazsa metin niye
orada... ben oraya bir şey yazıyorum, sol tarafa yaslanıyorum". */
.mutlu-hero-split-bleed .mutlu-hero-bio-card {
position: absolute;
bottom: 32px;
left: auto; /* temel .mutlu-hero-bio-card kuralındaki left:0'ı iptal eder — ikisi birden
set edilince tarayıcı sessizce left'i kazanıyordu, right hiç etkisiz kalıyordu */
/* right:0 (tam kenara yaslı) yuvarlak köşeleri kırpılmış/kesik gösteriyordu, sayfanın
gerçek kenarına "taşmış" gibi duruyordu (bkz. kullanıcı geri bildirimi: "bu kartın
durduğu yer kötü"). Küçük bir boşluk bırakınca kart artık kasıtlı yerleştirilmiş bir
kart gibi duruyor, ekranın kenarında kesik gibi durmuyor. */
right: 32px;
}
.mutlu-hero-split-bleed.mutlu-hero-split-imgleft .mutlu-hero-bio-card {
right: auto;
left: 32px;
}
/* Split-hero (bleed): CTA butonu dolgun, büyük harfli bir buton olarak metin+alt metnin
HEMEN altında akışta durur (bkz. kullanıcı geri bildirimi: "başlık yani metinler ve buton
header'ın neresinde olduğunu ben seçemiyorum... metinler ve buton" — ESKİDEN butonu bandın
alt kenarına sabit bindiren position:absolute vardı, metin ortalanınca/taşınınca buton
metinden kopup ekranın altında asılı kalıyordu; artık metinle birlikte TEK blok olarak
hareket ediyor, .mutlu-hero-split'in justify-content'ine göre konumlanıyor). Köşe
yuvarlaklığı .mutlu-hero-btn-* sınıflarından (HomeSection.HeroButtonStyle) geliyor. */
.mutlu-hero-split-bleed .mutlu-hero-button {
padding: 18px 40px !important;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .03em;
}
@media (max-width: 900px) {
.mutlu-hero-split-bleed-photo {
position: static;
width: 100%;
height: 220px;
display: block;
}
.mutlu-hero-split-bleed .mutlu-hero-split-inner {
flex-direction: column-reverse;
justify-content: flex-start;
padding-top: 32px;
}
.mutlu-hero-split-bleed .mutlu-hero-split-text {
max-width: 100%;
padding-bottom: 32px;
}
.mutlu-hero-split-bleed .mutlu-hero-bio-card {
position: static;
max-width: 100%;
margin-top: 16px;
}
}
/* Görselsiz Hero + HeroLayout=BoxedCta — BeBuilder referansındaki sayfa sonu CTA'sı: ortalanmış,
ince marka rengi kenarlıklı, beyaz zeminli küçük bir kutu (bkz. Home.razor, kullanıcı isteği:
"son CTA'yı şablondaki gibi turuncu çerçeveli kutuya çevir"). mutlu-hero* sınıflarından
BAĞIMSIZ, tam genişlik bandı hiçbir şekilde etkilemez. */
.mutlu-hero-boxed {
text-align: center;
padding: 56px 40px;
border: 2px solid var(--mud-palette-primary, #FFBA00);
border-radius: var(--radius-base, 8px);
}
.mutlu-hero-boxed-headline {
font-weight: 700;
margin-bottom: 12px;
}
.mutlu-hero-boxed-subtitle {
color: var(--mud-palette-text-secondary, rgba(0,0,0,.6));
margin-bottom: 24px;
}
.mutlu-hero-boxed-button {
background: var(--mud-palette-secondary, #172740) !important;
color: #ffffff !important;
}
@media (max-width: 767px) {
.mutlu-hero-boxed {
padding: 32px 20px;
}
}
/* Hero görünüm ayarları (HeroHeight/HeroTextSize/HeroButtonStyle) — bkz. kullanıcı isteği:
"header yüksekliği, metinleri büyüklüğü seçilebilmeli... button... köşeli çirkin durmuş,
ayara bağlanmalı". FullBleed VE SplitPhoto'da kullanılır (BoxedCta'da gösterilmez, kendi
sabit boyutu var). Standart seçenek için hiç sınıf eklenmiyor (bkz. Home.razor
HeroHeightClass/HeroTextSizeClass) — bugüne kadarki tek görünüm birebir korunur, sadece
admin panelinden Kompakt/Geniş veya Küçük/Büyük seçilen bölümler etkilenir. Aşağıdaki
kurallar .mutlu-hero/.mutlu-hero-split'ten SONRA geldiği için (aynı özgüllükte, kaynak
sırasına göre) her ikisinin de min-height'ını geçersiz kılar. */
.mutlu-hero-h-compact {
min-height: 320px;
}
.mutlu-hero-h-tall {
min-height: 640px;
}
@media (max-width: 767px) {
.mutlu-hero-h-compact {
min-height: 260px;
}
.mutlu-hero-h-tall {
min-height: 460px;
}
}
.mutlu-hero-text-compact .mutlu-hero-headline {
font-size: clamp(1.4rem, 4vw + .75rem, 2.25rem);
}
.mutlu-hero-text-compact .mutlu-hero-subtitle {
font-size: clamp(.875rem, .85vw + .75rem, 1.05rem);
}
.mutlu-hero-text-large .mutlu-hero-headline {
font-size: clamp(2.25rem, 6vw + 1.25rem, 3.75rem);
}
.mutlu-hero-text-large .mutlu-hero-subtitle {
font-size: clamp(1.125rem, 1.15vw + .95rem, 1.4rem);
}
/* Buton köşe stili — split-bleed'deki eski sabit "köşeli" görünümün yerini alıyor (yukarıdaki
.mutlu-hero-split-bleed .mutlu-hero-button notuna bkz.); FullBleed/kutulanmış split'te de
AYNI sınıflar kullanılıyor ki tek bir ayar tüm Hero düzenlerinde tutarlı çalışsın. Rounded
varsayılan MudBlazor'un kendi (~4px) yuvarlaklığına yakın olduğundan görsel değişiklik
yaratmaz; sadece split-bleed'in daha önce sabit 0 olan köşesi artık bu ayarı takip eder. */
.mutlu-hero-btn-rounded {
border-radius: var(--radius-base, 8px) !important;
}
.mutlu-hero-btn-square {
border-radius: 0 !important;
}
.mutlu-hero-btn-pill {
border-radius: 999px !important;
}
/* "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;
}
/* WidgetKind.Modal — sayfa açılışında kendiliğinden açılan, kapatılabilir popup (bkz.
WidgetAreaSlot.razor, WidgetArea.Modal XML notu). */
.mutlu-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .6);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
padding: 16px;
}
.mutlu-modal-card {
position: relative;
background: #fff;
border-radius: var(--radius-base, 8px);
padding: 32px;
max-width: 560px;
width: 100%;
max-height: 85vh;
overflow-y: auto;
}
.mutlu-modal-close {
position: absolute !important;
top: 8px;
right: 8px;
}
.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;
}
/* HomeSectionKind.ProgressBars ("İlerleme Çubukları") — bkz. Home.razor, progressBars.js.
Çubuk dolumu görsel olarak marka rengini (--mud-palette-primary) kullanır, iki sütuna kadar
yan yana serilir (geniş ekranda), dar ekranda tek sütuna düşer. */
.mutlu-progress-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 28px 48px;
}
.mutlu-progress-label-row {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 8px;
}
.mutlu-progress-label {
font-weight: 600;
}
.mutlu-progress-percent-label {
color: var(--mud-palette-primary, #00A7D4);
font-weight: 700;
}
.mutlu-progress-track {
width: 100%;
height: 10px;
border-radius: 999px;
background: var(--mud-palette-background-grey, #ebedf0);
overflow: hidden;
}
.mutlu-progress-fill {
height: 100%;
width: 0;
border-radius: 999px;
background: var(--mud-palette-primary, #00A7D4);
transition: width 1.1s cubic-bezier(.22,.9,.34,1);
}
/* HomeSection.OverlapPreviousSection — bandı bir önceki bandın (genelde Hero) alt kenarına
yarı-bindiren "öne çıkan kart" görünümü (bkz. kullanıcı isteği: "dikkat çekecek bir blok...
header'da kullanacağım"). Negatif üst boşluk kartı yukarı çeker, position:relative+z-index
normal akıştaki bir sonraki içeriğin altında KALMAMASINI garanti eder. */
.mutlu-overlap-container {
position: relative;
z-index: 2;
margin-top: -40px;
margin-bottom: 32px;
}
.mutlu-overlap-card {
background: var(--mud-palette-surface, #ffffff);
border-radius: var(--radius-base, 8px);
box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
padding: 32px 40px;
}
@media (max-width: 767px) {
.mutlu-overlap-container {
margin-top: -40px;
}
.mutlu-overlap-card {
padding: 24px 20px;
}
}
.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;
}
/* Kind=Features kartlarında ikon yerine fotoğraf (bkz. HomeSectionFeature.PhotoMediaId) —
örn. ekip üyesi kartları. İkon rozetiyle AYNI 64px çapı korunur ki iki türü karışık
kullanan bir bölümde satır hizası bozulmasın. */
.bete-feature-photo {
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto;
display: block;
border: 3px solid var(--mud-palette-primary, #00A7D4);
}
/* Doktor/uzman tanıtım bandı (HomeSectionKind.Bio) — tam genişlik Hero'nun aksine, küçük bir
fotoğraf + isim + kısa metinden oluşan yan yana bant (bkz. Home.razor Bio dalı). */
.mutlu-entrylist-intro-image {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius-large, 14px);
}
.mutlu-bio-strip {
display: flex;
align-items: center;
gap: 32px;
flex-wrap: wrap;
}
.mutlu-bio-photo {
width: 160px;
height: 160px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.mutlu-bio-text {
flex: 1 1 280px;
}
.mutlu-bio-name {
color: var(--font-heading-color, inherit);
font-weight: 700;
margin-bottom: 8px;
}
/* Süreç adımları (HomeSectionKind.Steps) — solda dikey liste (numara rozeti + başlık/açıklama),
sağda büyük fotoğraf (bkz. Home.razor Steps dalı, gerçek Doctor2 "How a Visit Works" bandı ile
birebir aynı düzen: küçük yuvarlak "01" rozeti, kart değil satır). */
.mutlu-steps-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.mutlu-step-row {
display: flex;
align-items: flex-start;
gap: 16px;
}
.mutlu-step-number {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--mud-palette-primary, #00A7D4);
color: #fff;
font-family: var(--font-heading, inherit);
font-size: 0.95rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.mutlu-steps-image {
width: 100%;
height: auto;
border-radius: var(--radius-base, 8px);
display: block;
}
/* 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;
}
/* Kind=Gallery (bkz. ContentDetailTemplate.Gallery) — kapak + galeriye bağlı TÜM görsellerin
eşit boyutlu kartlar halinde ızgarası. Ürün/duyuru şablonundaki (cep-hero-image/cep-gallery-strip)
"büyük görsel + küçük şerit" ayrımı YOK — kullanıcı isteği: "galeride sadece görseller
gösterilmeli", tüm görseller aynı ağırlıkta. */
.cep-gallery-only-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
}
.cep-gallery-only-cell {
display: flex;
flex-direction: column;
gap: 6px;
}
/* Görselin kendi başlığı (bkz. MediaItem.Title) — kullanıcı isteği: "her görsele açıklama
metni girilmesi ve ekrana yansıtılması". Boş bırakılan görsellerde bu satır hiç basılmaz. */
.cep-gallery-only-caption {
text-align: center;
}
.cep-gallery-only-item {
display: block;
aspect-ratio: 1 / 1;
background: #fafafa;
border: 1px solid #eee;
border-radius: var(--radius-base, 8px);
overflow: hidden;
}
.cep-gallery-only-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.2s ease;
}
.cep-gallery-only-item:hover img {
transform: scale(1.04);
}
.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%;
}
}
/* Kind=Article/Event/Job (bkz. ContentDetailTemplate) için — Standard'daki dar yan-görsel
yerine tam genişlik kapak görseli. Üç görüntüleme modu (bkz. ContentType.CoverImageMode,
admin panelinden /admin/content-types'tan seçilir — kullanıcı isteği: "yüzlerce haberde
[kırpma] sorunları var, kalıcı bir çözüm oluşturalım... isteğe bağlı bir ayara bağlasak"):
Crop (varsayılan, ek sınıf YOK) = bugüne kadarki orijinal davranış, sabit 480px + ortadan
kırpma. Natural (.cep-article-cover-natural) = hiç kırpma yok ama "resimler çok iri oluyor"
geri bildirimi sonrası ikinci bir seçenek eklendi: Bounded (.cep-article-cover-bounded) =
makul bir tavan (550px) + object-fit:contain — kırpma YİNE yok, ama Natural gibi aşırı
uzayamıyor; uzun/portre görsellerde yanlarda düz (blursuz) bir dolgu rengi (#fafafa, kart
görsellerinde zaten kullanılan aynı nötr ton) oluşuyor. */
.cep-article-cover {
width: 100%;
max-height: 480px;
object-fit: cover;
border-radius: var(--radius-base, 8px);
margin-bottom: 16px;
display: block;
}
.cep-article-cover.cep-article-cover-natural {
max-height: none;
height: auto;
object-fit: unset;
}
.cep-article-cover.cep-article-cover-bounded {
max-height: 550px;
object-fit: contain;
background: #fafafa;
}
/* Kapak görselini büyütme (lightbox) tetikleyicisine saran — bkz. kullanıcı isteği:
"üstüne tıklandığında büyük resim orjinal resim gözüksün". `.cep-hero-image`/`.cep-gallery-
thumb` ile AYNI "kutu 'da, boyutlandırma ![]()
'da" deseni; border-radius burada da
tanımlanıyor ki `.cep-lightbox-trigger`'ın hover karartma katmanı (`border-radius:inherit`)
görselin köşeleriyle eşleşsin. */
.cep-article-cover-link {
display: block;
border-radius: var(--radius-base, 8px);
}
/* Kind=Article — yazar/tarih gibi meta bilgisi bir kart yerine sade, ayraçlı tek satır. */
.cep-article-meta {
display: flex;
flex-wrap: wrap;
gap: 6px 20px;
color: #757575;
font-size: 0.85rem;
margin-bottom: 20px;
}
/* Kind=Profile — kişi fotoğrafı, ürün görseli gibi kutu içinde değil doğal oranında/köşeli. */
.cep-profile-photo {
width: 100%;
border-radius: var(--radius-base, 8px);
display: block;
}
/* Kind=Event/Job — tarih/konum/departman gibi öne çıkan bilgi + CTA butonu kutusu. cep-spec-card
ile AYNI görünüm, sadece hafif bir vurgu arkaplanı (kullanıcının dikkatini çeken ilk kutu). */
.cep-callout-card {
border: 1px solid #e8e8e8;
border-radius: var(--radius-base, 8px);
background: #fafafa;
padding: 16px;
}
.cep-callout-card .cep-spec-row {
background: transparent;
padding: 6px 0;
border-bottom: none;
}
/* 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;
}
/* ── Mega menü (bkz. MenuItem.IsMegaMenu, PublicLayout.razor) ────────────────────────────
Üst seviye bir menü öğesi "mega menü" işaretliyse, alt öğeleri kademeli dar dropdown
yerine tek geniş panelde sütunlar halinde açılır. Sütun sayısı öğe sayısından türetilip
inline --mutlu-mega-cols ile veriliyor (en fazla 5). Mega menü sadece masaüstü navda
(d-none d-md-flex) render ediliyor; mobilde hamburger çekmecesindeki normal MudNavGroup
davranışı korunur.
Ölçüler satın alınan BeTheme kaynağından birebir alındı
(betheme/css/be.css + responsive-off.css, .mfn-megamenu / .mm-vertical blokları):
• panel width:98%, padding:20px 0
• sütun padding:0 15px, ayraç border-right:1px solid rgba(0,0,0,.05)
• link padding:9px 15px, line-height:120%
• sütun başlığı varsayılan stilde text-transform:uppercase + font-weight:400,
"Vertical lines" (BeTheme'de .mm-vertical) stilinde font-weight:700
Tek sapma: BeTheme sütunlara border-RIGHT verip sonuncuyu sıfırlıyor; burada aynı görsel
sonuç ilk sütun hariç border-LEFT ile elde ediliyor (CSS'te daha kısa, sonuç aynı). */
/* Görsel iyileştirme turu (bkz. kullanıcı ekran görüntüsü + geri bildirimi: "beyaz zeminde
text şeklinde olmuş... sen olsan ne yapardın böyle mi bırakırdın") — panel düz beyaz bir
dikdörtgen, sütunlar arasında (Default stilde) HİÇBİR ayraç yok, başlık ile linkler neredeyse
aynı ağırlık/renkte, hover sadece renk değiştiriyordu (hiçbir "buraya tıklanabilir" hissi
yoktu). Panelin KENDİSİNE gölge/köşe yuvarlama, üstüne ince marka-renkli bir şerit, sütun
başlıklarına marka rengiyle alt çizgi + daha fazla nefes payı, linklere hover'da yuvarlak
hafif dolgu (pill) eklendi — Muffin Options › Menu › Mega Menu › Style admin anahtarının
(Default/Vertical lines) ANLAMI korunuyor, sadece HER İKİ moddaki temel görünüm zenginleşti. */
.mutlu-mega-popover .mud-list {
padding: 0;
}
/* mutlu-mega-popover sınıfı MudBlazor'un kendi .mud-popover/.mud-paper elemanının ÜZERİNDE
(PopoverClass ile), ayrı bir sarmalayıcı YOK — bu yüzden alt seçici değil doğrudan bu sınıf
hedefleniyor (bkz. gerçek DOM: DIV.mud-popover.mud-paper.mud-elevation-8.mutlu-mega-popover). */
.mutlu-mega-popover {
border-radius: var(--radius-base, 8px) !important;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
overflow: hidden;
}
.mutlu-mega-panel {
display: grid;
grid-template-columns: repeat(var(--mutlu-mega-cols, 4), minmax(180px, 1fr));
column-gap: 8px;
padding: 28px 24px;
/* BeTheme'de panel kapsayıcının %98'i; burada popover içerik genişliğine göre açıldığından
eşdeğeri "ekranın 98'i kadar, ama en çok 1240px" (BeTheme'in grid genişliği). */
max-width: min(98vw, 1240px);
/* Marka renginde ince bir üst şerit — panelin "sadece beyaz bir kutu" hissini kırıyor,
header'daki aktif/hover vurgusuyla (mutlu-menu-active-color) görsel süreklilik kuruyor. */
position: relative;
}
.mutlu-mega-panel::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--mutlu-menu-active-color, var(--mud-palette-primary, #00A7D4));
}
.mutlu-mega-col {
display: flex;
flex-direction: column;
padding: 0 15px;
gap: 2px;
}
/* Default stilde de HAFİF bir ayraç — önceden sütunlar arasında hiçbir çizgi olmadığından
4-5 sütunluk geniş panelde metin bloğu nerede bitip nerede başladığı belirsizdi. */
.mutlu-mega-col + .mutlu-mega-col {
border-left: 1px solid rgba(0, 0, 0, 0.06);
}
/* Muffin Options › Menu › Mega Menu › Style = "Vertical lines" — BeTheme'deki .mm-vertical,
çizgiyi biraz daha belirgin/koyu yapar (Default'taki ince çizgiden farkı budur artık). */
.mutlu-mega-lines .mutlu-mega-col + .mutlu-mega-col {
border-left-color: rgba(0, 0, 0, 0.12);
}
.mutlu-mega-heading {
text-transform: uppercase;
letter-spacing: 0.03em;
font-weight: 400;
font-size: 0.9rem;
padding: 6px 15px 12px;
margin-bottom: 6px;
color: var(--mutlu-menu-active-color, var(--mud-palette-primary, #00A7D4));
text-decoration: none;
font-family: var(--font-heading, inherit);
border-bottom: 2px solid var(--mutlu-menu-active-color, var(--mud-palette-primary, #00A7D4));
display: block;
}
/* .mm-vertical'da BeTheme başlığı kalınlaştırıyor (uppercase kalır). */
.mutlu-mega-lines .mutlu-mega-heading {
font-weight: 700;
}
.mutlu-mega-link {
color: #444;
text-decoration: none;
padding: 8px 15px;
line-height: 130%;
font-size: 0.88rem;
border-radius: 6px;
transition: background-color .15s ease, color .15s ease;
}
.mutlu-mega-heading:hover {
opacity: 0.75;
}
.mutlu-mega-link:hover {
color: var(--mutlu-menu-active-color, var(--mud-palette-primary, #00A7D4));
background: color-mix(in srgb, var(--mutlu-menu-active-color, var(--mud-palette-primary, #00A7D4)) 8%, transparent);
}
.mutlu-mega-active {
color: var(--mutlu-menu-active-color, var(--mud-palette-primary, #00A7D4)) !important;
font-weight: 600;
background: color-mix(in srgb, var(--mutlu-menu-active-color, var(--mud-palette-primary, #00A7D4)) 8%, transparent);
}
.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;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* Görsel başlığı/açıklaması (bkz. MediaItem.Title) — kullanıcı isteği: "görsel üstüne
tıklandığında gelen pencerede de metinler gözükmeli". Boşsa lightbox.js display:none yapar. */
.mlb-caption {
max-width: 92vw;
padding: 10px 16px;
color: #333;
font-size: 0.9rem;
text-align: 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: 80vh;
}
.mlb-img-wrap img {
display: block;
max-width: 92vw;
max-height: 80vh;
object-fit: contain;
}
@media (max-width: 600px) {
.mlb-toolbar {
top: -16px;
right: 0;
}
}
/* Muffin Options › Header & Subheader > Extras > Sliding Top — sayfanın en üstünde açılıp
kapanan panel (bkz. PublicLayout.razor). Kapalıyken gövde yüksekliği 0, sadece tutamak
(ok düğmesi) görünür; açılınca içerik yumuşak bir geçişle iner. Renkleri Colors > Sliding
Top'tan gelir (--mutlu-slidingtop-*). */
.mutlu-sliding-top {
width: 100%;
position: relative;
z-index: 1150;
}
.mutlu-sliding-top-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
padding: 0 24px;
}
.mutlu-sliding-top-open .mutlu-sliding-top-body {
/* 480px + overflow:hidden önceden içeriği (ör. 4 adımlı bir Steps widget'ı + görseli)
sessizce kesiyordu — kullanıcı geri bildirimi: "düzelmedi", panel içinde adımlardan
bir kısmı hiç görünmüyordu. Artık taşan içerik kesilmek yerine kaydırılabiliyor. */
max-height: 70vh;
overflow-y: auto;
padding: 20px 24px;
}
/* Steps/IconFeatures gibi anasayfa bantları için tasarlanmış geniş görseller, dar Sliding
Top panelinde orantısız büyüyüp sayı rozetlerinin/metnin üzerine biniyordu — burada
makul bir üst sınır (300px) ile "banner" değil "eşlik eden görsel" gibi davranır. */
.mutlu-sliding-top .mutlu-steps-image {
max-height: 300px;
object-fit: cover;
}
.mutlu-sliding-top-handle {
display: flex;
padding: 0 24px;
}
/* Sliding Top'un "Icon (CSS sınıfı)" alanı için hazır bir ikon — sitede bir ikon yazı tipi
(Font Awesome vb.) olmadığından, mask-image ile currentColor'a uyan bir SVG çan/duyuru
ikonu tanımlandı (bkz. kullanıcı isteği: "sen karar ver" — Sliding Top tipik olarak
duyuru/slogan şeridi olduğundan çan ikonu seçildi). Panelin metin rengiyle (--mutlu-slidingtop-text
veya --mutlu-slidingtop-heading) otomatik uyumlu olsun diye background yerine mask kullanıldı. */
.mutlu-icon-bell {
display: inline-block;
width: 20px;
height: 20px;
background-color: currentColor;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
/* Muffin Options › Footer > Extras > Back to Top button (Sticky) — bkz. PublicLayout.razor.
Renkleri Colors > Footer > Back to Top'tan gelir (--mutlu-backtotop-*), boşsa marka rengi.
Konum BeTheme kaynağından birebir: #back_to_top.sticky{right:75px;bottom:20px} (be.css).
Yani popup iletişim butonuyla ÜST ÜSTE değil, onun SOLUNDA durur — ikisi aynı hizada,
sağdan 20px ve 75px. Bkz. .mutlu-popup-fab. */
.mutlu-back-to-top {
position: fixed;
right: 75px;
bottom: 20px;
z-index: 1200;
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-elevated, 0 10px 24px rgba(0,0,0,.16));
text-decoration: none;
transition: transform 0.15s ease, opacity 0.15s ease;
opacity: 0.85;
}
.mutlu-back-to-top:hover {
transform: translateY(-2px);
opacity: 1;
}
/* Muffin Options › Footer > Popup Contact Form — sağ alt köşedeki yüzen buton (bkz.
PublicLayout.razor). Konum BeTheme kaynağından birebir: #popup_contact{right:20px;bottom:20px}
(be.css). Back to Top ile aynı hizada ama en sağda; o 75px'te kaldığı için çakışmazlar. */
.mutlu-popup-fab {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 1200;
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: var(--shadow-elevated, 0 10px 24px rgba(0,0,0,.16));
transition: transform 0.15s ease, opacity 0.15s ease;
opacity: 0.9;
}
.mutlu-popup-fab:hover {
transform: translateY(-2px);
opacity: 1;
}
/* Muffin Options › Responsive > Logo Mobile (<768px) — bkz. PublicLayout.razor 'logo'
fragment'ı. Masaüstü logosu varsayılan olarak görünür; mobil logo tanımlıysa 767px altında
yer değiştirir. BeTheme'in kendi "< 768px" eşik değeriyle birebir aynı. */
.mutlu-logo-mobile {
display: none;
}
/* Muffin Options › Global > Logo > Sticky Header Logo — header kaydırılıp katı arkaplana
geçtiğinde (.mutlu-header-scrolled, bkz. heroHeader.js) ayrı bir logo gösterir. Bu class'lar
sadece Sticky Header Logo DOLUYSA basılır (bkz. PublicLayout.razor) — boşken img'lerde hiç
.mutlu-logo-default/.mutlu-logo-sticky class'ı olmadığından bu kural devre dışı kalır,
bugüne kadarki tek-logo davranışı aynen korunur. */
/* !important şart — logo ![]()
'leri LogoImageStyle() ile satır içi "display:block" taşıyor
(bkz. PublicLayout.razor), o her zaman kazanır ve iki logo da kalıcı görünür kalıyordu
(kullanıcı ekran görüntüsü: "iki logo var, bozuk çalışıyor" — üst üste yığılmışlardı). */
.mutlu-logo-sticky {
display: none !important;
}
.mutlu-header-scrolled .mutlu-logo-sticky {
display: inline-block !important;
}
.mutlu-header-scrolled .mutlu-logo-default {
display: none !important;
}
@media (max-width: 767px) {
.mutlu-logo-desktop {
display: none !important;
}
.mutlu-logo-mobile {
display: block !important;
}
/* Muffin Options > Blog, Portfolio & Shop > General > Share Box = "Hide on Mobile" */
.mutlu-hide-mobile {
display: none !important;
}
/* Muffin Options › Responsive > Sticky Header Logo (Mobile) — masaüstündeki default/sticky
logo değişimiyle aynı mantık, sadece bu alan doluyken (bkz. PublicLayout.razor) elemanlar
"-default"/"-sticky" sınıflarını taşır; boşken .mutlu-logo-mobile tek başına kalır ve bu
kurallar hiçbir şeye uygulanmaz. */
.mutlu-logo-mobile-sticky {
display: none !important;
}
.mutlu-header-scrolled .mutlu-logo-mobile-sticky {
display: block !important;
}
.mutlu-header-scrolled .mutlu-logo-mobile-default {
display: none !important;
}
}
/* ── Sayfa Kurgulayıcı (bkz. PageSections.razor, PageSection/PageColumn/PageBlock) ────────
BeTheme'in Muffin Builder bantlarının karşılığı. Bir bant ya sayfa kapsayıcısıyla aynı
genişlikte (.mutlu-ps-boxed) ya da kenardan kenara (.mutlu-ps-full) olur — BeTheme'in
"Full width" section seçeneğiyle aynı ayrım.
Bant arkaplan görselli olabildiği için position:relative; üstüne binen okunabilirlik
perdesi (.mutlu-ps-overlay) mutlak konumlanır ve içerik z-index ile onun üstünde kalır. */
.mutlu-ps-section {
position: relative;
}
.mutlu-ps-overlay {
position: absolute;
inset: 0;
pointer-events: none;
}
.mutlu-ps-inner {
position: relative;
z-index: 1;
/* Asgari yükseklik (MinHeight) ayarlanan bantlarda üst div dikey ortalama için
display:flex olur (bkz. PageSections.razor SectionStyle) — bu durumda flex ÇOCUĞU
olan bu kutu, varsayılan flex davranışıyla (stretch değil, shrink-to-fit) kendi
içeriğine göre daralıp SOLA yaslanıyordu (bkz. kullanıcı geri bildirimi ekran
görüntüsü: banner içindeki görseller sayfanın solunda kalıyordu). width:100% ile
flex bağlamında da her zaman tam genişlik kaplaması garanti ediliyor. */
width: 100%;
}
/* Kutulu bant: BeTheme'in grid genişliği (1240px) ile aynı, ortalanmış. */
.mutlu-ps-boxed {
max-width: 1240px;
margin: 0 auto;
padding: 0 24px;
}
/* Tam genişlik bant, sayfa kapsayıcısının (MudContainer + opsiyonel kenar çubuğu ızgarası)
İÇİNDE render edildiğinden, sadece width:100% ile kenardan kenara gidemez — kapsayıcı kadar
kalır (ilk denemede öyle oldu, ekranda görüldü). Klasik "full-bleed" tekniği: kutuyu görünen
alan genişliğine çıkar ve sol kenarını kapsayıcının ortasından geriye kaydır.
100vw yerine 100% + calc kullanılmıyor çünkü kapsayıcının genişliği değişken; 100vw dikey
kaydırma çubuğunu da içerdiğinden yatay taşmayı önlemek için overflow-x gizleniyor. */
.mutlu-ps-full {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
overflow-x: hidden;
}
/* Sol menü varken (bkz. PublicLayout'taki .mutlu-has-sidebar) ekran genişliğine taşmak menünün
ÜSTÜNE biner — o yüzden bant yalnızca kapsayıcının iç boşluğunu iptal eder ve içerik
sütununu doldurur. Yani "tam genişlik" sol menüsüz sayfalarda gerçekten kenardan kenara,
sol menülü sayfalarda içerik alanının tamamı demektir. */
.mutlu-has-sidebar .mutlu-ps-full {
width: auto;
margin-left: -24px;
margin-right: -24px;
}
/* Tam genişlik bantta da içerik kenara yapışmasın. */
.mutlu-ps-full > .mutlu-ps-inner {
padding: 0 24px;
}
.mutlu-ps-block + .mutlu-ps-block {
margin-top: 16px;
}
/* İkon kutusu — varsayılan (IconTop) dikey, IconLeft'te ikon solda satır olur.
Ölçüler BeTheme'in icon_box'ıyla aynı ailede: ikon ile metin arası 12px. */
.mutlu-ps-iconbox {
display: flex;
flex-direction: column;
gap: 12px;
align-items: inherit;
/* Üst boşluk artık PageBlock.SpacingTop üzerinden admin ekranından ayarlanabilir
(bkz. PageSections.razor .mutlu-ps-block inline style) — burada sabit değer YOK,
aksi halde ikisi üst üste binip çift boşluk oluşurdu. */
}
.mutlu-ps-iconbox-left {
flex-direction: row;
align-items: flex-start;
text-align: left;
}
/* İkonun arkasındaki köşeli, hafif saydam rozet — BeTheme'in görsel arkaplanlı "Why Choose"
bandındaki gibi (bkz. doctor2-why-choose.webp arkaplanlı bant). Rengi ikonla birlikte
değişir (currentColor), her zemin renginde (koyu/açık bant) okunaklı kalsın diye. */
.mutlu-ps-iconbox-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 14px;
background: color-mix(in srgb, currentColor 18%, transparent);
}
.mutlu-ps-iconbox-badge .mud-icon-root {
color: currentColor;
}
/* ── Hotspot bloğu (bkz. PageBlockKind.Hotspot, PageHotspotPoint) ─────────────────────────
Taban görselin üzerine yüzdeyle konumlanmış noktalar; üzerine gelince (veya klavye/dokunmatik
ile odaklanınca) bilgi balonu açılır. JS kullanılmıyor — balon tamamen CSS ile.
Not: BeTheme'in satın alınan paketinde bu elemanın kaynağı yok (doctor2'de kullanılan yeni
builder elemanı bu sürüme dahil değil), bu yüzden ölçüler birebir kopya değil; projenin kendi
gölge/köşe değişkenleriyle uyumlu olacak şekilde seçildi. */
.mutlu-ps-hotspot {
position: relative;
display: inline-block;
line-height: 0;
}
.mutlu-ps-hotspot img {
max-width: 100%;
height: auto;
}
.mutlu-ps-hotspot-point {
position: absolute;
/* left/top yüzde olarak inline veriliyor; translate ile nokta tam o koordinata ortalanır. */
transform: translate(-50%, -50%);
background: none;
border: 0;
padding: 0;
cursor: pointer;
line-height: 0;
}
.mutlu-ps-hotspot-dot {
display: block;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--mud-palette-primary, #00A7D4);
border: 3px solid #fff;
box-shadow: var(--shadow-soft, 0 2px 8px rgba(0,0,0,.10));
}
/* Dikkat çekmek için hafif nabız — hareket hassasiyeti olan kullanıcılarda kapatılır. */
.mutlu-ps-hotspot-dot::after {
content: "";
position: absolute;
inset: -6px;
border-radius: 50%;
border: 2px solid var(--mud-palette-primary, #00A7D4);
opacity: .5;
animation: mutluHotspotPulse 2s ease-out infinite;
}
@keyframes mutluHotspotPulse {
0% { transform: scale(0.8); opacity: .6; }
100% { transform: scale(1.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.mutlu-ps-hotspot-dot::after { animation: none; }
}
.mutlu-ps-hotspot-tip {
position: absolute;
bottom: calc(100% + 12px);
left: 50%;
transform: translateX(-50%);
min-width: 180px;
max-width: 260px;
padding: 10px 12px;
background: #fff;
color: #212121;
border-radius: var(--radius-base, 8px);
box-shadow: var(--shadow-elevated, 0 10px 24px rgba(0,0,0,.16));
text-align: left;
line-height: 1.4;
font-size: 0.85rem;
display: none;
z-index: 2;
}
.mutlu-ps-hotspot-tip strong,
.mutlu-ps-hotspot-tip span,
.mutlu-ps-hotspot-tip a {
display: block;
}
.mutlu-ps-hotspot-tip strong {
margin-bottom: 2px;
}
.mutlu-ps-hotspot-tip a {
margin-top: 6px;
color: var(--mud-palette-primary, #00A7D4);
}
.mutlu-ps-hotspot-point:hover .mutlu-ps-hotspot-tip,
.mutlu-ps-hotspot-point:focus .mutlu-ps-hotspot-tip,
.mutlu-ps-hotspot-point:focus-within .mutlu-ps-hotspot-tip {
display: block;
}
/* Bakım ekranındaki geri sayım (bkz. wwwroot/js/countdown.js, Muffin Options › Pages >
Under Construction). Kutu JS tarafından doldurulur; boşken hiç yer kaplamaz. */
.mutlu-countdown {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.mutlu-countdown-cell {
min-width: 68px;
padding: 12px 8px;
border-radius: var(--radius-base, 8px);
background: rgba(0, 0, 0, 0.04);
}
.mutlu-countdown-value {
display: block;
font-size: 1.6rem;
font-weight: 700;
line-height: 1.1;
font-family: var(--font-heading, inherit);
}
.mutlu-countdown-label {
display: block;
font-size: 0.75rem;
opacity: 0.7;
margin-top: 2px;
}
/* "Kliniğimizi Ziyaret Edin" footer kartı (bkz. Footer widget alanına eklenen Html widget) —
BeTheme'in gerçek Doctor2 sitesindeki "Visit Our Clinic" bandının birebir kopyası: soldan
sağa görsel / başlık+açıklama / telefon+buton+iki mini bilgi kartı, açık pembe yuvarlak
köşeli bir kart içinde. */
.mutlu-clinic-card {
display: grid;
grid-template-columns: minmax(200px, 320px) 1fr 1fr;
gap: 32px;
align-items: center;
background: #f7ede9;
border-radius: 20px;
padding: 32px;
margin: 32px 0;
}
.mutlu-clinic-image img {
width: 100%;
height: auto;
display: block;
}
.mutlu-clinic-eyebrow {
color: var(--mud-palette-primary, #00A7D4);
font-weight: 700;
letter-spacing: 0.08em;
font-size: 0.8rem;
margin-bottom: 8px;
}
.mutlu-clinic-heading {
font-family: var(--font-heading, inherit);
color: var(--font-heading-color, inherit);
font-size: 2.2rem;
line-height: 1.15;
margin: 0 0 12px;
}
.mutlu-clinic-desc {
opacity: 0.8;
margin: 0;
}
.mutlu-clinic-phone {
font-family: var(--font-heading, inherit);
font-size: 1.5rem;
margin-bottom: 16px;
}
.mutlu-clinic-phone a {
color: inherit;
text-decoration: none;
}
.mutlu-clinic-btn {
display: inline-block;
background: var(--mutlu-actionbtn-bg, var(--mud-palette-primary, #00A7D4));
color: #fff;
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.04em;
padding: 12px 22px;
border-radius: var(--radius-base, 8px);
text-decoration: none;
margin-bottom: 24px;
}
.mutlu-clinic-mini-grid {
display: flex;
gap: 24px;
flex-wrap: wrap;
}
.mutlu-clinic-mini {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.875rem;
line-height: 1.5;
}
.mutlu-clinic-mini-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
}
@media (max-width: 960px) {
.mutlu-clinic-card {
grid-template-columns: 1fr;
text-align: center;
}
.mutlu-clinic-mini {
text-align: left;
}
}
/* WidgetKind.ContactInfo — bete-feature-icon-circle ile AYNI ikon rozeti dilini kullanır
(bkz. WidgetAreaSlot.razor) ki sayfadaki diğer ikonlu bloklarla tutarlı görünsün. */
.mutlu-contact-card {
display: flex;
flex-direction: column;
gap: 18px;
background: var(--mud-palette-background-grey, #f5f5f5);
border-radius: var(--radius-base, 8px);
padding: 24px;
}
.mutlu-contact-row {
display: flex;
align-items: flex-start;
gap: 14px;
}
.mutlu-contact-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--mud-palette-primary, #00A7D4);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.mutlu-contact-text {
line-height: 1.5;
padding-top: 6px;
}
/* Yatay seçenek (bkz. Widget.ContactLayout, kullanıcı isteği: "yatay daha mantıklı sayfaya
ortalanmış") — satırlar yan yana, sayfaya ortalanmış; dar ekranlarda kendiliğinden alt alta
düşer (flex-wrap). */
.mutlu-contact-horizontal {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 32px;
}
.mutlu-contact-horizontal .mutlu-contact-row {
flex: 0 1 auto;
}
/* Header'ı hero banner'ın üzerine şeffaf olarak bindirir (bkz. PublicLayout.razor,
BreadcrumbService.HeroOverlay XML notu) — kullanıcı isteği: orijinal Doctor2 sitesindeki gibi
menü, banner'ın ÜSTÜNDE ayrı bir katmanda değil, doğrudan fotoğrafın üzerine düşmeli.
Header'ın kendi arkaplanları (topbar/actionbar/ana bar) inline style ile geldiğinden
!important ile geçersiz kılınıyor; okunabilirlik için üstten aşağı hafif kararan bir gradyan
ve TÜM header metinleri beyaza zorlanıyor (hangi tema rengi seçilirse seçilsin garanti). */
.mutlu-header-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 40;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 65%, rgba(0, 0, 0, 0) 100%);
}
.mutlu-header-overlay > div {
background: transparent !important;
background-image: none !important;
border-bottom: none !important;
box-shadow: none !important;
}
.mutlu-header-overlay,
.mutlu-header-overlay * {
color: #ffffff !important;
}
/* "Açık Stil" (SiteTheme.HeroOverlayLightStyle) — bkz. yukarıdaki .mutlu-header-overlay notu.
Bazı gerçek referans sitelerin hero fotoğrafının üst kısmı zaten açık (gökyüzü vb.) olduğundan
koyu gradyan + zorla beyaz metin GEREKSİZ ve YANLIŞ görünüyordu. Bu sınıf .mutlu-header-
overlay'in ÜZERİNE eklenir (ikisi birlikte), kaynak sırası sayesinde yukarıdaki koyu/beyaz
kuralları ez er. SiteThemeHeaderStyle.BoxedModern İÇİN KULLANILMAZ — o kendi ayrı sınıfını
(bkz. aşağıdaki .mutlu-header-overlay-boxed) kullanır. */
.mutlu-header-overlay-light {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0) 45%);
}
.mutlu-header-overlay-light,
.mutlu-header-overlay-light * {
color: inherit !important;
}
/* SiteThemeHeaderStyle.BoxedModern'in KENDİ overlay biçimi — bkz. PublicLayout.razor'daki
XML notu (kullanıcı: "orada carousel olacak" — gerçek tac-alumni.org'da `.rev_slider` y=0'dan
başlayıp TÜM header yüksekliğini kaplıyor, header sadece kendi ortalanmış beyaz kutusuyla
üzerine biniyor, kutunun SOLUNDAKİ/SAĞINDAKİ şeffaf alanlardan fotoğraf görünüyor). Yukarıdaki
.mutlu-header-overlay'in aksine: (a) koyu gradyan YOK — bar'ların kendi doğal (opak beyaz,
_headerBackgroundStyle) arkaplanı fotoğrafla yeterli kontrastı zaten sağlıyor, (b) `> div`
arkaplanını zorla şeffaf yapan kural YOK — bar'lar (topbar-row + logo/menü/arama barı) KENDİ
gerçek arkaplanlarıyla (biri şeffaf, diğeri #f8f8f8 beyaz) görünmeye devam ediyor, sadece
position ile normal akıştan çıkarılıp bandın üzerine bindiriliyor, (c) metin rengi zorlanmıyor
(zaten opak beyaz kutu üzerinde normal koyu metin okunaklı).
position:fixed (position:absolute DEĞİL) — bkz. kullanıcı isteği: "sayfa aşağı kaydırıldığında
menü/logo/arama kutusu pencere üstünde sabit olmalı". absolute kullanılsaydı wrapper SADECE
kendi ~131px yüksekliğindeki içeriği kadar yer kapladığından (bandın geri kalanı normal akıştaki
carousel'e ait), sayfa kaydırılınca wrapper'ın KENDİSİ de belgeyle birlikte yukarı kayıp
gözden kaybolurdu — içindeki `.bete-header-sticky` çocuğun position:sticky'si de onu
KURTARAMAZDI (sticky, kendi ebeveyninin sınırları içinde "yapışır"; ebeveyn zaten ekrandan
çıkmışsa yapışacak bir yer kalmaz). position:fixed ise wrapper'ı VIEWPORT'a sabitler, sayfa ne
kadar kaydırılırsa kaydırılsın header hep üstte kalır — mevcut Hero (HomeSectionKind.Hero,
bkz. wwwroot/js/heroHeader.js) mekanizmasının JS scroll-listener'ına hiç ihtiyaç duymadan aynı
sonucu (kalıcı sabit header) verir, çünkü BoxedModern zaten baştan kendi opak beyaz kutusuyla
görünür durumda — Hero'daki gibi "önce şeffaf, kaydırılınca katı" geçişine gerek yok. */
.mutlu-header-overlay-boxed {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 40;
}
/* SiteTheme.ButtonRippleEnabled=false — bkz. PublicLayout.razor kök wrapper notu. MudBlazor'un
HER butona (Gönder, +/-, üst menü vb.) varsayılan eklediği ".mud-ripple-effect" (tıklanan
noktadan dışa genişleyip kaybolan dalga) elementini görsel olarak TAMAMEN bastırır — JS hâlâ
elementi oluşturup kaldırıyor ama hiç görünmüyor, buton işlevselliği etkilenmiyor. Kullanıcı
sorusu: "neden tıklayınca parlayıp kayboluyor, ayar mı sorun mu" — MudBlazor'un standart
Material Design tıklama geri bildirimi olduğu açıklandı, istemeyen tenantlar için kapatılabilir
bir ayar hâline getirildi. */
.mutlu-ripple-disabled .mud-ripple-effect {
display: none !important;
}
/* SiteTheme.MenuItemDividerEnabled=true — bkz. kullanıcı isteği: gerçek tac-alumni.org'da
(BeTheme) üst menüdeki her link arasında ince dikey bir çizgi var. TÜM header stillerinin
paylaştığı navLinks fragment'inde `.mutlu-menu-divider` sınıfı koşullu ekleniyor; ilk öğede
çizgi YOK (sol kenarda yalnız/asılı durmasın diye), sonraki her öğenin SOLUNA ince açık gri
bir çizgi ekleniyor. */
.mutlu-menu-divider > a:not(:first-child),
.mutlu-menu-divider > .mud-menu:not(:first-child) {
border-left: 1px solid #e0e0e0;
}
/* Üst menü linklerinin üzerine gelince/aktifken rengi — MuffinColorOption.MenuLinkColor/
MenuActiveLinkColor zaten entity'de ve --mutlu-menu-link-color/--mutlu-menu-link-active-color
CSS değişkenleri olarak ÜRETİLİYORDU (bkz. BeteTheme.cs AddVar çağrıları) ama hiçbir kural
bunları KULLANMIYORDU — admin bu renkleri değiştirse bile hiçbir etkisi olmuyordu (bkz.
kullanıcı karşılaştırması: gerçek tac-alumni.org'da "Dernek" üzerine gelince/dropdown açıkken
metin logonun kırmızısına (#ed1c24) dönüyor). .mud-menu (alt öğeli linkler, MudMenu ile
render edilir) ile düz (MudLink, alt öğesiz linkler) FARKLI DOM yapıları kullandığından
ikisi de ayrı ayrı hedefleniyor; route-aktif durum (.mutlu-topnav-active, bkz. GroupActiveClass)
AYNI rengi kullanıyor. Değişken boşsa (varsayılan, diğer tüm tenantlar) `inherit` ile bugünkü
görünüm birebir korunur. */
.mutlu-header-nav a:hover,
.mutlu-header-nav .mud-menu:hover .mud-button-label,
.mutlu-header-nav a.mutlu-topnav-active,
.mutlu-header-nav .mutlu-topnav-active .mud-button-label {
color: var(--mutlu-menu-link-active-color, inherit) !important;
}
/* Gerçek tac-alumni.org'da hover/aktif öğenin üstünde ince kırmızı bir çizgi de beliriyor
(kullanıcının yüklediği ekran görüntüsünde doğrulandı — BizLetter sayfasındayken üst menüde
BizLetter'ın TAM üzerinde ince kırmızı bir bant var). box-shadow:inset kullanılıyor (gerçek
border-top yerine) — layout'u/yüksekliği ETKİLEMEDEN üst kenara "yapışık" bir çizgi çizer,
aynı renk değişkenini (--mutlu-menu-link-active-color) paylaşıyor. */
.mutlu-header-nav > a,
.mutlu-header-nav > .mud-menu {
box-shadow: inset 0 3px 0 0 transparent;
transition: box-shadow 0.2s ease-in-out;
}
.mutlu-header-nav > a:hover,
.mutlu-header-nav > .mud-menu:hover,
.mutlu-header-nav > a.mutlu-topnav-active,
.mutlu-header-nav > .mud-menu.mutlu-topnav-active {
box-shadow: inset 0 3px 0 0 var(--mutlu-menu-link-active-color, transparent);
}
/* BoxedModern'de üst menü öğelerinin hover/aktif ARKAPLANI — bkz. kullanıcı geri bildirimi:
"menü hover background yüksekliği beyaz kutu yüksekliği ile eşit olsun" + "biraz sağ/sol
kenarlarında padding olsun, çok dar". Varsayılan olarak `.mutlu-header-nav`'ın kendi
align-items:center'ı (bkz. navLinks fragment, TÜM header stilleri paylaşıyor) her öğeyi
KENDİ doğal (kısa) yüksekliğinde dikey ortalıyordu — MudButton'un öntanımlı hover/ripple
arkaplanı bu yüzden beyaz kutunun tamamını değil, sadece metnin dar kutusunu kaplıyordu.
Bu düzeltme SADECE `.mutlu-boxed-modern-bar` içinde (bkz. PublicLayout.razor BoxedModern
dalı) geçerli — diğer header stillerini/tenantları etkilemiyor. Öğeler artık bar'ın TAM
yüksekliğine (align-items:stretch) geriliyor, yatayda biraz nefes payı (padding) ekleniyor,
ve hover/aktifken --mutlu-menu-link-active-color'un %8 opaklıklı bir tonu arkaplan oluyor
(renk boşsa currentColor'a düşer, etkisiz kalmaz ama en azından nötr bir gri tonu verir). */
.mutlu-boxed-modern-bar .mutlu-header-nav {
align-items: stretch !important;
/* navLinks fragment'inin paylaşılan inline stili öğeler arasına gap:20px koyuyordu — bu,
hover kutuları arasında GERÇEK boş alan (arkaplanın hiç uğramadığı bir şerit) demekti
(bkz. kullanıcı: "haberler ile Dernek menü hover'ları arasında boşluk var, birbirine
bitişik olmalı"). gap:0 yapılıp kaybolan görsel boşluk, aşağıdaki öğe padding'ine
taşındı — artık komşu iki öğenin hover kutuları TAM kenarlarında birleşiyor. */
gap: 0 !important;
}
.mutlu-boxed-modern-bar .mutlu-header-nav > a,
.mutlu-boxed-modern-bar .mutlu-header-nav > .mud-menu {
display: flex;
align-items: center;
align-self: stretch !important;
height: auto;
padding-left: 12px;
padding-right: 12px;
/* Bar'ın kendi dikey padding'i (varsayılan 10px, bkz. HeaderPaddingStyle()) nav'ın kendisini
de kısaltıyordu (101px bar - 20px = 81px), yani stretch olsa bile hover kutusu bar'ın TAM
kenarına DEĞİL, iç padding sınırına kadar uzanıyordu (kullanıcı: "tam eşitle" — üstte/altta
hâlâ küçük bir boşluk kalıyordu). Negatif margin + align-self:stretch kombinasyonu, flexbox
stretch hesaplamasında marjı da hesaba katarak kutuyu bar'ın GERÇEK üst/alt kenarına kadar
taşırıyor (metnin kendisi ETKİLENMİYOR, sadece arkaplan/box-shadow'un kapladığı alan). */
margin-top: -10px;
margin-bottom: -10px;
}
.mutlu-boxed-modern-bar .mutlu-header-nav > .mud-menu > button {
height: 100%;
padding-left: 16px;
padding-right: 16px;
}
.mutlu-boxed-modern-bar .mutlu-header-nav > a:hover,
.mutlu-boxed-modern-bar .mutlu-header-nav > .mud-menu:hover,
.mutlu-boxed-modern-bar .mutlu-header-nav > a.mutlu-topnav-active,
.mutlu-boxed-modern-bar .mutlu-header-nav > .mud-menu.mutlu-topnav-active {
background-color: color-mix(in srgb, var(--mutlu-menu-link-active-color, currentColor) 8%, transparent);
}
/* MudButton'un KENDİ öntanımlı hover arkaplanı (Color.Primary'nin düşük opaklıklı tonu, ör.
rgba(32,41,91,.06)) — alt öğeli linkler (MudMenu > button) İÇİN de devreye giriyordu, düz
linklerinde (MudLink, alt öğesiz) YOKTU. Bu yüzden "DERNEK" (MudMenu) hover'ı diğer düz
linklerden FARKLI görünüyordu — İKİ ayrı yarı saydam katman (dıştaki `.mud-menu` kutumuz +
içteki dar `button`un kendi navi tonu) üst üste binip "iki farklı genişlikte çerçeve" izlenimi
veriyordu (bkz. kullanıcı ekran görüntüsü: kırmızı üst çizgi dıştaki kutuyla aynı genişlikte,
içteki pembe/lacivert karışımı dolgu daha DAR). MudButton'un kendi hover'ı burada tamamen
iptal ediliyor, tek/temiz kaynak (yukarıdaki `.mud-menu:hover` kuralımız) görünür kalıyor. */
.mutlu-boxed-modern-bar .mutlu-header-nav > .mud-menu > button:hover {
background-color: transparent !important;
}
/* SiteThemeHeaderStyle.BoxedModern + SiteThemeSearchBoxMode.IconToggle — bkz. PublicLayout.razor
searchBoxSlot XML notu. Gerçek tac-alumni.org'daki `.search_wrapper` ile birebir: header
BARININ (sticky, positioned ancestor) tam genişliğinde, koyu (temanın Primary rengi) bir panel,
ikonun hemen altında. */
.mutlu-search-panel-boxed {
position: absolute;
left: 0;
right: 0;
top: 100%;
z-index: 20;
background: var(--mud-palette-primary, #20295b);
display: flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
box-sizing: border-box;
}
.mutlu-search-panel-input,
.mutlu-search-panel-input * {
color: #ffffff !important;
}
.mutlu-search-panel-input .mud-input-slot::placeholder {
color: rgba(255, 255, 255, 0.7) !important;
}
/* Kutunun alt çizgisi (MudTextField Variant.Text'in kendi ::before/::after'ı) varsayılan olarak
temanın Primary rengini (tac-alumni'de lacivert #20295b) kullanıyordu — panelin arkaplanı DA
aynı lacivert olduğundan çizgi tamamen GÖRÜNMEZ oluyordu (bkz. kullanıcı isteği: "search text
box rengini de logoya göre uyumlu yap"). Logonun kırmızısıyla (aynı --mutlu-menu-link-active-
color değişkeni, bu oturumda hover/üst-çizgi vurgularında zaten kullanılıyor) değiştirildi —
hem görünür hem de markayla tutarlı. Değişken boşsa (diğer tenantlar/BoxedModern kullanmayan
sayfalar) yarı saydam beyaza düşer, panel zaten onlarda kullanılmıyor. */
.mutlu-search-panel-input .mud-input::after {
border-bottom-color: var(--mutlu-menu-link-active-color, rgba(255, 255, 255, 0.7)) !important;
}
.mutlu-search-panel-input .mud-input::before {
border-bottom-color: rgba(255, 255, 255, 0.4) !important;
}
/* Doctor2 orijinalindeki küçük yuvarlatılmış simge rozeti (48px) — ContentListTemplate.IconGrid
(bkz. ContentTypeIndex.razor IconGrid metodu, kullanıcı geri bildirimi: "orginalinde daha
küçük"). Renkli/gerilmiş fotoğraf yerine ikon kendi küçük boyutunda, dolgulu bir kutu
içinde ortalanır. */
.mutlu-icon-card {
padding-top: 24px;
}
/* Yüklenen ikon görselleri genelde kendi renkli/yuvarlatılmış arka planıyla (örn. kalp
ikonlu pembe kare) geliyor — burada AYRICA renkli bir rozet arka planı eklemek iki farklı
rengin üst üste binmesine yol açıyordu (bkz. kullanıcı geri bildirimi: "görselin çevresinde
farklı renk var"). Rozet artık renksiz/şeffaf; görsel kendi rengiyle olduğu gibi gösterilir. */
.mutlu-icon-card-badge {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 24px 16px;
}
.mutlu-icon-card-badge img {
width: 64px;
height: 64px;
object-fit: contain;
border-radius: 16px;
}
/* İçerik Tipleri listesi çok sütunlu olduğu için MainLayout'un genel MaxWidth.Large
kapsayıcısı (diğer tüm admin sayfalarını etkilediği için değiştirilmedi) SADECE bu
sayfada devre dışı bırakılıyor — #content-types-page işaretleyicisini içeren
MudContainer'ın max-width kısıtı kaldırılıp mevcut alanın tamamı kullanılıyor
(kullanıcı isteği: "tam ekran olsun"). */
.mud-container:has(#content-types-page) {
max-width: 100% !important;
}