/*
* Uygulamaya özel bileşenler.
*
* tema.css hazır derlenmiş bir dosya: yalnızca orijinal temanın kullandığı
* sınıfları içerir. Bu projede sonradan yazılan bileşenler (gerçek radyo
* düğmesi gibi) temada olmayan Tailwind sınıflarına ihtiyaç duyuyordu ve
* o sınıflar hiçbir zaman derlenmediği için görünmez kalıyordu.
*
* Burada eksik parçalar temanın kendi değişkenleriyle açıkça yazılır.
* Tailwind derleyicisi yok, olmasına da gerek yok.
*/
/* ---------------------------------------------------------------------------
* Radyo düğmesi
* ---------------------------------------------------------------------------
*
* Orijinal tema Radix UI'ın button[role=radio] yapısını kullanıyordu.
* Burada gerçek bir var: JavaScript kapalıyken de
* çalışır ve form gönderiminde değeri kendiliğinden gider.
*
* Görünüm neden Tailwind ile yazılmadı: peer-checked: yalnızca peer'ın
* **sonraki kardeşlerinde** çalışır. İçteki nokta kardeş değil, kardeşin
* çocuğu — Tailwind'in bu ilişki için bir varyantı yok. Düz CSS'te
* "input:checked + .radyo-kutu .radyo-nokta" tek satır.
*/
.radyo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
}
/* Girdi ekrandan gizlenir ama erişilebilir kalır: ekran okuyucu görür,
klavye odağı alır. display:none olsaydı sekme ile ulaşılamazdı. */
.radyo input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.radyo-kutu {
display: flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
flex-shrink: 0;
border-radius: 9999px;
background: var(--card-inner-1);
box-shadow: inset 0 0 0 1px var(--text-20);
transition: background-color 0.15s, box-shadow 0.15s;
}
.radyo:hover .radyo-kutu {
box-shadow: inset 0 0 0 1px var(--text-40);
}
.radyo-nokta {
width: 1rem;
height: 1rem;
border-radius: 9999px;
border: 1px solid transparent;
background: transparent;
transition: background-color 0.15s, border-color 0.15s;
}
.radyo input:checked + .radyo-kutu {
background: var(--gold-1);
box-shadow: inset 0 0 0 1px var(--alert-yellow);
}
.radyo input:checked + .radyo-kutu .radyo-nokta {
background: #fff;
border-color: var(--gold-2);
}
/* Klavye odağı görünür olmalı: girdi gizli olduğu için tarayıcının
kendi odak halkası hiçbir yerde çizilmezdi. */
.radyo input:focus-visible + .radyo-kutu {
outline: 2px solid var(--alert-yellow);
outline-offset: 2px;
}
.radyo-metin {
color: var(--text-100);
}
/* ---------------------------------------------------------------------------
* İkincil düğme (sponsor "Find")
* ---------------------------------------------------------------------------
*
* hover:border-text-40 ve disabled:text-text-40 de temada yok.
*/
.dugme-ikincil:hover:not(:disabled) {
border-color: var(--text-40);
}
.dugme-ikincil:disabled {
color: var(--text-40);
cursor: not-allowed;
}
/* ---------------------------------------------------------------------------
* Temada bulunmayan yardımcı sınıflar
* ---------------------------------------------------------------------------
*
* tema.css orijinal temanın kullandığı sınıflarla derlenmiş. Panel
* ekranları sonradan yazıldığı için birkaç standart Tailwind yardımcısı
* o derlemeye hiç girmemiş ve sessizce etkisiz kalıyordu — ızgaralar tek
* sütuna düşüyor, kenar çubuğu genişliği uygulanmıyordu.
*
* Değerler Tailwind varsayılanlarıyla aynı, kırılma noktaları temanın
* kendi media sorgularıyla (40rem / 64rem / 90rem) hizalı.
*/
.font-black { font-weight: 900; }
.w-64 { width: 16rem; }
/* Sponsor seçim listesi satırları (index.lexer'daki javascript bloğu) bunu
kullanıyor; temada yalnızca hover:border-text-20 derlenmiş. */
.hover\:border-text-40:hover { border-color: var(--text-40); }
.h-72 { height: 18rem; }
.max-w-6xl { max-width: 72rem; }
.mb-6 { margin-bottom: 1.5rem; }
.ml-3 { margin-left: 0.75rem; }
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
margin-top: 0.125rem;
}
@media (min-width: 40rem) {
.sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
.lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lg\:pl-64 { padding-left: 16rem; }
}
@media (min-width: 90rem) {
.\32xl\:w-171 { width: 42.75rem; }
}
/* ---------------------------------------------------------------------------
* Panel düzeni (theme/dashboard.html)
* ---------------------------------------------------------------------------
*
* Tema shadcn/ui'nin sidebar bileşenini kullanıyor. tema.css o bileşenin
* sınıflarının %91'ini içeriyor; kalan ~20 tanesi katlanma durumuna bağlı
* varyantlar (group-data-[collapsible=...], peer-data-[variant=inset])
* ve derlemeye girmemiş.
*
* Kenar çubuğu burada SABİT genişlikte. Katlanma davranışı taşınmadı:
* shadcn onu bir React context'i + localStorage ile yönetiyor, sunucuda
* çizilen bir sayfada karşılığı ayrı bir tasarım kararı.
*/
:root {
--sidebar-width: 16.25rem;
}
.w-\(--sidebar-width\) { width: var(--sidebar-width); }
/* İçerik alanının yatay boşluğu — temanın dashboard-container'ı. */
.dashboard-container {
padding-left: 0.875rem;
padding-right: 0.875rem;
}
@media (min-width: 64rem) {
.dashboard-container {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
/* peer-data-[variant=inset] karşılıkları: içerik kenar çubuğunun
yanına kayar ve kartlaşır. */
.lg\:peer-data-\[variant\=inset\]\:m-2 { margin: 0.5rem; }
.lg\:peer-data-\[variant\=inset\]\:ml-0 { margin-left: 0; }
.lg\:peer-data-\[variant\=inset\]\:rounded-xl { border-radius: 0.75rem; }
.lg\:peer-data-\[variant\=inset\]\:shadow-sm {
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
}
.has-data-\[variant\=inset\]\:bg-card-fill { background-color: var(--card-fill); }
.group\/sidebar-wrapper { }
.group\/menu-button { }
/* Menü düğmesi: aktif olan vurgulanır. Temada aktif durum yoktu —
panelde hangi sayfada olunduğunu görmek gerekiyor. */
.menu-dugme svg { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.menu-dugme > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-dugme[data-active="true"] {
background: linear-gradient(to right, var(--card-inner-1), var(--card-inner-2));
color: var(--text-100);
border-color: var(--card-stroke);
}
/* Ürün ızgarası: temanın media-grid'i. */
.media-grid {
display: grid;
gap: 0.625rem;
grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
.media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.875rem; }
}
@media (min-width: 1200px) {
.media-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1800px) {
.media-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* ---------------------------------------------------------------------------
* Ana sayfa (theme/home.html)
* ---------------------------------------------------------------------------
*
* Temanın 282 sınıfının %96'sı tema.css'te vardı; eksik 10 tanesi hep
* 2xl: (90rem) varyantı ve o derlemeye girmemiş.
*/
@media (min-width: 90rem) {
.\32xl\:flex-row { flex-direction: row; }
.\32xl\:flex-1 { flex: 1 1 0%; }
.\32xl\:flex-\[2\] { flex: 2; }
.\32xl\:h-97 { height: 24.25rem; }
.\32xl\:h-58\.5 { height: 14.625rem; }
.\32xl\:w-37 { width: 9.25rem; }
.\32xl\:mt-0 { margin-top: 0; }
.\32xl\:-top-11 { top: -2.75rem; }
.\32xl\:right-8 { right: 2rem; }
.\32xl\:self-stretch { align-self: stretch; }
}
/* Satır girişi ve ilerleme çubuğu animasyonları. Temada Tailwind
animate-* sınıflarıyla geliyordu; karşılıkları derlemede yok. */
@keyframes dashboard-row-in {
from { opacity: 0; transform: translateY(0.75rem); }
to { opacity: 1; transform: none; }
}
.animate-dashboard-row {
animation: dashboard-row-in 0.45s ease-out both;
animation-delay: var(--anim-delay, 0ms);
}
@keyframes status-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
.animate-status-pulse { animation: status-pulse 2s ease-in-out infinite; }
.animate-progress-fill { transition: width 0.6s ease-out; }
/* Hareketi azaltmak isteyen kullanıcıda animasyon çalışmaz. */
@media (prefers-reduced-motion: reduce) {
.animate-dashboard-row,
.animate-status-pulse { animation: none; }
}
/* Kopyalandı geri bildirimi: metin CSS ile değişir, JavaScript yalnızca
bir öznitelik koyar. */
.group\/copy-code[data-kopyalandi="1"] span span::after { content: " ✓"; }
/* ---------------------------------------------------------------------------
* Kenar çubuğu katlama
* ---------------------------------------------------------------------------
*
* Durum kökteki [data-collapsible="icon"] ile taşınıyor; sunucu onu çereze
* bakarak yazıyor, JavaScript tıklamada değiştiriyor. Böylece sayfa ilk
* çizimde doğru halde geliyor ve sıçrama olmuyor.
*/
:root { --sidebar-width-icon: 6.25rem; }
/* Katlanmış halde hem çubuk hem yer tutucu daralır. İkisi birlikte
daralmalı: yer tutucu içeriğin nereden başladığını belirliyor, çubuk
ise sabit konumlu. Yalnızca biri daralsaydı içerik menünün altında
kalırdı. */
[data-slot="sidebar"][data-collapsible="icon"] [data-slot="sidebar-container"],
[data-slot="sidebar"][data-collapsible="icon"] [data-slot="sidebar-gap"] {
width: var(--sidebar-width-icon);
}
/* Dar halde iç kutu taşmasın. */
[data-collapsible="icon"] [data-sidebar="sidebar"] {
padding-left: 0.5rem;
padding-right: 0.5rem;
overflow: hidden;
}
/* Logo: geniş halde yazı, dar halde simge. */
.kenar-logo-ikon { display: none; }
[data-collapsible="icon"] .kenar-logo-tam { display: none; }
[data-collapsible="icon"] .kenar-logo-ikon { display: inline-flex; }
/* Menü metni gizlenir ama DOM'da kalır: ekran okuyucu okumaya devam
etmeli, yalnızca görsel olarak kalkıyor. */
[data-collapsible="icon"] .menu-dugme {
justify-content: center;
padding: 0.625rem;
}
[data-collapsible="icon"] .menu-dugme > span:last-child {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
/* Abonelik kartı dar halde sığmaz. */
[data-collapsible="icon"] [data-slot="sidebar-footer"] { display: none; }
/* Ok yönü duruma göre döner. */
.kenar-katla svg { transition: transform 0.2s ease; }
[data-collapsible="icon"] .kenar-katla svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
.kenar-katla svg,
[data-slot="sidebar"] [data-slot="sidebar-container"] { transition: none; }
}
/* ---------------------------------------------------------------------------
* Rütbe tablosu (theme/ranks.html)
* ---------------------------------------------------------------------------
*
* Temanın kimliği üç şeyde: altıgen rozetler, rozetlerin arkasından geçen
* dikey bağlantı çizgisi ve sıcak arka plan gradyanı.
*
* Çizgi her satırın rozet hücresinde bir ::before olarak çiziliyor ve
* rozetin ARKASINDA kalıyor (rozet z-10). Ayrı bir öge olarak konsaydı
* satır yüksekliği değiştiğinde hizası bozulurdu; ::before satırla
* birlikte uzayıp kısalıyor.
*/
.rutbe-satir {
position: relative;
border: 1px solid transparent;
transition: background-color 0.15s, border-color 0.15s;
}
.rutbe-satir:hover {
border-color: var(--card-inner-1);
background: var(--card-inner-1);
}
/* Rozet hücresi çizgiyi taşır. Rozetin tam ortasından geçsin diye sol
konum rozet yarıçapına eşit. */
.rutbe-rozet { position: relative; }
/* Çizgi bir İLERLEME göstergesi: bir sonraki basamağa ne kadar
yaklaşıldığını gösteriyor. İki katman var — soluk izleyici (::before)
ve üstüne binen dolgu (::after). Dolgunun yüksekliği satırın kendi
yüzdesinden geliyor (--rutbe-dolgu). */
.rutbe-rozet::before,
.rutbe-rozet::after {
content: "";
position: absolute;
left: 1.5rem; /* size-13 / 2 - kalınlık/2 */
width: 5px;
border-radius: 999px;
z-index: 0;
}
.rutbe-rozet::before {
top: -1.75rem; /* üstteki satıra kadar uzar (gap-3.5) */
bottom: -1.75rem;
background: var(--card-inner-1);
}
/* Dolgu satırın ortasından AŞAĞI doğru büyür: rozet o basamağı, altındaki
parça bir sonrakine ilerlemeyi temsil ediyor. */
.rutbe-rozet::after {
top: 50%;
height: calc((50% + 1.75rem) * var(--rutbe-oran, 0));
background: linear-gradient(to bottom, var(--gold-1), var(--gold-2));
}
@media (min-width: 64rem) {
.rutbe-rozet::before,
.rutbe-rozet::after { left: 1.875rem; } /* lg:size-16 / 2 - kalınlık/2 */
}
/* İlk ve son satırda çizgi yarıya iner: dışarı taşmasın. */
.rutbe-satir:first-of-type .rutbe-rozet::before { top: 50%; }
.rutbe-satir:last-of-type .rutbe-rozet::before { bottom: 50%; }
/* Ulaşılmış basamaklarda alt parça tamamen dolu. */
.rutbe-satir.rutbe-acik .rutbe-rozet { --rutbe-oran: 1; }
/* Kenar çubuğu ölçüleri temadan: 16.25rem / 6.25rem. */
/* ---------------------------------------------------------------------------
* Üst bar dil menüsü
* ---------------------------------------------------------------------------
*
* / ile: açılıp kapanması tarayıcının işi, JavaScript
* gerekmiyor ve klavyeyle çalışıyor. Tek yapılan varsayılan üçgeni
* kaldırmak.
*/
.dil-menu > summary { list-style: none; }
.dil-menu > summary::-webkit-details-marker { display: none; }
.dil-menu > summary::marker { content: ""; }
.dil-menu[open] > summary { background: var(--card-inner-1); }
/* Menü dışına tıklayınca kapansın diye tam ekran görünmez bir katman. */
.dil-menu[open]::before {
content: "";
position: fixed;
inset: 0;
z-index: 20;
}
/* ---------------------------------------------------------------------------
* Market bölüm kartları
* ---------------------------------------------------------------------------
*
* Her ürün ailesi kendi kartında. Kart yarı saydam: altındaki sayfa
* gradyanı görünmeye devam etsin diye düz bir renk kullanılmadı.
*
* Alt kenardaki solma ::after ile. Sabit yükseklikte bir katman kartın
* altına biniyor ve şeffaftan kart rengine geçiyor; böylece uzun bir
* ızgara sert bir çizgiyle değil, yumuşayarak bitiyor.
*/
.urun-bolum {
background: color-mix(in srgb, var(--card-fill) 72%, transparent);
backdrop-filter: blur(6px);
}
.urun-bolum::after {
content: "";
position: absolute;
inset-inline: 0;
bottom: 0;
height: 5.5rem;
z-index: 5;
pointer-events: none;
background: linear-gradient(
to bottom,
transparent 0%,
color-mix(in srgb, var(--card-fill) 55%, transparent) 55%,
color-mix(in srgb, var(--card-fill) 92%, transparent) 100%
);
}
/* Solmanın altında kalan düğmeler tıklanabilir olmalı; ::after zaten
pointer-events:none ama içerik onun üstünde dursun. */
.urun-bolum > .relative { position: relative; z-index: 10; }
/* Dar ekranda kart kenara yapışıyor (temadaki -mx-3.5 davranışı). */
@media (max-width: 63.99rem) {
.urun-bolum {
margin-left: -0.875rem;
margin-right: -0.875rem;
border-left: 0;
border-right: 0;
}
}
/* Açılır menü — Safari'de yerel