/* Blazor — etkileşimli, uygulama hissinde premium tema: yüzen başlık, sekmeli arama, çipler, görünüm değiştirici */
:root {
    --t-zemin: #fbfaff;
    --t-yuzey: #f3efff;
    --t-metin: #1b1530;
    --t-soluk: #6a6285;
    --t-cizgi: #e6defa;
    --t-vurgu: #6d28d9;
    --t-vurgu-koyu: #5b21b6;
    --t-ust-zemin: transparent;
    --t-alt-zemin: #1e1535;
    --t-alt-metin: #cfc6ea;
    --t-kose: 18px;
    --t-kose-kucuk: 12px;
    --t-yazi: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
    --t-baslik-agirlik: 800;
    --t-golge: 0 18px 40px -18px color-mix(in srgb, var(--t-vurgu) 45%, transparent);
    --blazor-gradyan: linear-gradient(135deg, var(--t-vurgu), #db2777);
}

/* Yüzen kapsül başlık */
.blazor-ust { border-bottom: 0; padding-top: 12px; }
.blazor-ust__kapsul { min-height: 64px; padding-inline: 1.25rem .75rem; background: rgba(255, 255, 255, .86); border: 1px solid var(--t-cizgi); border-radius: 999px; box-shadow: 0 10px 30px -18px rgba(27, 21, 48, .5); backdrop-filter: blur(12px); }
.blazor-logo-nokta { width: 14px; height: 14px; margin-inline-end: .55rem; border-radius: 50%; background: var(--blazor-gradyan); }
.blazor-ust .t-menu a { padding: .45rem .9rem; border: 0; border-radius: 999px; }
.blazor-ust .t-menu ul { gap: .25rem; }
.blazor-ust .t-menu a:hover, .blazor-ust .t-menu a[aria-current] { background: var(--t-yuzey); color: var(--t-vurgu); }
.blazor-ust .t-dugme { border-radius: 999px; }

/* Kahraman ve sekmeli arama */
.blazor-kahraman { margin-top: -76px; padding-top: 120px; padding-bottom: 72px; background: radial-gradient(circle at 10% 10%, #efe7ff, transparent 45%), radial-gradient(circle at 90% 0%, #ffe4f1, transparent 40%), var(--t-zemin); }
.blazor-kahraman__ic { display: grid; gap: 2rem; }
.blazor-kahraman h1 { max-width: 18ch; font-size: clamp(2.2rem, 5vw, 3.8rem); letter-spacing: -.02em; background: var(--blazor-gradyan); -webkit-background-clip: text; background-clip: text; color: transparent; }
.blazor-kahraman p { max-width: 38em; font-size: 1.1rem; color: var(--t-soluk); }
.blazor-arama { padding: 1rem; background: #fff; border: 1px solid var(--t-cizgi); border-radius: 24px; box-shadow: var(--t-golge); }
.blazor-sekmeler { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; padding: 0; border: 0; }
.blazor-sekmeler label { position: relative; }
.blazor-sekmeler input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.blazor-sekmeler span { display: inline-block; margin: 0; padding: .5rem 1rem; border-radius: 999px; background: var(--t-yuzey); color: var(--t-metin); font-weight: 600; font-size: .9rem; cursor: pointer; }
.blazor-sekmeler input:checked + span { background: var(--blazor-gradyan); color: #fff; }
.blazor-sekmeler input:focus-visible + span { outline: 2px solid var(--t-vurgu); outline-offset: 2px; }
.blazor-sekmeler--dikey legend { margin-bottom: .4rem; }
.blazor-arama__alanlar { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: .75rem; align-items: end; }
.blazor-arama .t-dugme { min-width: 120px; }

/* Kategori çipleri: yatay kaydırılabilir */
.blazor-cipler { margin-top: -28px; position: relative; }
.blazor-cipler ul { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: thin; }
.blazor-cipler a { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; padding: .55rem 1rem; background: #fff; border: 1px solid var(--t-cizgi); border-radius: 999px; color: var(--t-metin); text-decoration: none; font-weight: 600; }
.blazor-cipler a:hover { border-color: var(--t-vurgu); color: var(--t-vurgu); }
.blazor-cipler a span { padding: .05rem .5rem; border-radius: 999px; background: var(--t-yuzey); color: var(--t-vurgu); font-size: .8rem; }

/* Kart */
.t-ilan { position: relative; }
.blazor-ilan { border-radius: var(--t-kose); box-shadow: 0 1px 0 var(--t-cizgi); }
.blazor-ilan:hover { box-shadow: var(--t-golge); transform: translateY(-4px); }
.blazor-ilan .t-ilan__gorsel { margin: .5rem .5rem 0; border-radius: 14px; overflow: hidden; }
.blazor-ilan .t-etiket { background: rgba(27, 21, 48, .75); backdrop-filter: blur(4px); }
.blazor-ilan .t-ilan__govde { flex: 1; }
.blazor-cipler-kucuk { display: flex; flex-wrap: wrap; gap: .3rem; }
.blazor-cipler-kucuk li { padding: .15rem .55rem; border-radius: 999px; background: var(--t-yuzey); color: var(--t-soluk); font-size: .8rem; }
.blazor-ilan__fiyat { justify-self: start; margin: .4rem 0 0; padding: .35rem .8rem; border-radius: 10px; background: var(--blazor-gradyan); color: #fff; font-weight: 800; }

/* Liste sayfası */
.blazor-liste-ust { padding-block: 2rem 1rem; }
.blazor-liste-ust p { color: var(--t-soluk); margin: 0; }
.blazor-etkin { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.blazor-etkin a { display: inline-flex; gap: .4rem; align-items: center; padding: .4rem .8rem; border-radius: 999px; background: var(--t-vurgu); color: #fff; text-decoration: none; font-size: .88rem; font-weight: 600; }
.blazor-etkin a span { opacity: .8; }
.blazor-etkin a.blazor-etkin__temizle { background: transparent; color: var(--t-vurgu); }
.blazor-liste { padding-top: 1rem; }
.blazor-liste .t-filtre form { background: #fff; border-radius: 20px; box-shadow: 0 10px 30px -22px rgba(27, 21, 48, .5); }
.blazor-gorunum { display: inline-flex; margin-bottom: 1rem; padding: 4px; background: var(--t-yuzey); border-radius: 999px; }
.blazor-gorunum button { border: 0; background: transparent; padding: .45rem 1rem; border-radius: 999px; font: 600 .88rem var(--t-yazi); color: var(--t-soluk); cursor: pointer; }
.blazor-gorunum button[aria-pressed=true] { background: #fff; color: var(--t-vurgu); box-shadow: 0 2px 6px rgba(27, 21, 48, .12); }
.blazor-liste-gorunum { grid-template-columns: 1fr; }
.blazor-liste-gorunum .blazor-ilan { flex-direction: row; }
.blazor-liste-gorunum .blazor-ilan .t-ilan__gorsel { flex: 0 0 min(280px, 38%); aspect-ratio: auto; margin: .5rem; }

/* Çağrı ve alt bilgi */
.blazor-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; padding: clamp(24px, 5vw, 48px); border-radius: 28px; background: var(--blazor-gradyan); color: #fff; }
.blazor-cta p { margin: 0; opacity: .9; }
.blazor-cta .t-dugme { background: #fff; color: var(--t-vurgu); border-radius: 999px; }
.blazor-alt { border-radius: 36px 36px 0 0; margin-top: 2rem; }
.blazor-alt__dugmeler { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.blazor-alt .t-dugme { border-radius: 999px; }
.blazor-alt .t-dugme--cizgi { color: #fff; }

/* Genel */
.t-dugme { border-radius: 12px; }
.t-dugme--vurgu { background: var(--blazor-gradyan); }
.t-dugme--vurgu:hover { background: var(--t-vurgu-koyu); }
.t-sayfa-ust { background: transparent; }
.t-galeri__buyuk { border-radius: 24px; }
.t-temsilci, .t-kutu { border-radius: 20px; box-shadow: 0 10px 30px -24px rgba(27, 21, 48, .5); }

@media (max-width: 960px) {
    .blazor-ust__kapsul { border-radius: 22px; }
    .blazor-ust .t-menu { top: calc(100% + 8px); border-radius: 18px; border: 1px solid var(--t-cizgi); background: #fff; }
    .blazor-arama__alanlar { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .blazor-liste-gorunum .blazor-ilan { flex-direction: column; }
    .blazor-liste-gorunum .blazor-ilan .t-ilan__gorsel { flex-basis: auto; aspect-ratio: 4 / 3; }
}