/* ========================================================================
SPOR VITRINI — spor giyim ve ekipman magazasi
=======================================================================
BU DOSYA TEMEL TEMAYI EZER, KOPYALAMAZ
=======================================================================
`ShopThemeResolver::stilAdresleri` once temel temanin stilini, sonra
bunu ile yukler. Bu yuzden burada YALNIZCA farklilasan kurallar
var; kalan her sey temelden duser. Temelde duzeltilen bir kusur
(diyelim sepet satirinin hizalamasi) buraya kendiliginden gecer.
`@import` KULLANILMAZ: temel dosya zaten ayri bir ile geliyor.
Import'la ikinci kez cagirmak hem ayni dosyayi iki kez indirtir hem de
seri indirme yapar; ayrica ic yol ("_magaza" oneki) ziyaretciye gorunen
adreste olmadigi icin daha once 404 verip sayfayi tamamen stilsiz
birakmisti.
=======================================================================
KIMLIK: SIYAH ZEMIN + TEK CANLI VURGU (VOLT)
=======================================================================
Spor magazasinin dili yuksek kontrast, kalin ve iri tipografi, capraz
hatlardir. Bu tema siyahi ZEMIN, volt yesilini TEK vurgu olarak
kullanir; ikinci bir canli renk eklenmedi cunku iki canli renk
birbirinin dikkatini yer ve "hangisi eylem dugmesi" sorusu belirsizlesir.
=======================================================================
VOLT UZERINE ASLA BEYAZ METIN YAZILMAZ
=======================================================================
Olculdu: #FFFFFF / #C8FF1E = 1.18:1 — okunmaz. Volt zeminin uzerinde
HER ZAMAN --koyu metin durur (#0E0E12 / #C8FF1E = 16.31:1). Ayni sebeple
volt, beyaz zemin uzerinde METIN RENGI OLARAK KULLANILMAZ (1.18:1);
acik zeminde yazi gerektiginde --vurgu-koyu kullanilir (6.79:1).
Capraz/dinamik ogeler `clip-path` ve gradyan ile cizildi; hicbiri
kutusunun disina tasmaz, bu yuzden yatay kaydirma olusmaz. Tasma
ihtimali olan tek yer vitrin ve o da `overflow: hidden` ile kirpilir.
======================================================================== */
:root {
/*
--ana SISTEM RENGIDIR: temel tema onu baglanti, hata metni, odak
halkasi ve rozet icin kullaniyor. Bu yuzden volt DEGIL, koyu bir
renk secildi. Volt --ana olsaydi sepet/kasa gibi bu temanin
tasimadigi sayfalarda baglantilar ve hata metinleri beyaz zeminde
1.2:1 ile okunamaz hale gelirdi.
*/
--ana: #15151a;
--ana-koyu: #000000;
--ana-acik: #9a9aa6;
/* Volt: temanin tek canli rengi. Zemin olarak kullanilir, metin olarak degil. */
--vurgu: #c8ff1e;
/* Acik zeminde YAZI icin volt'un koyu karsiligi (beyaz uzerinde 6.79:1). */
--vurgu-koyu: #4c6300;
--vurgu-acik: #eaffa8;
--zemin: #ffffff;
--zemin-2: #f0f1f3;
--metin: #0e0e12;
--metin-2: #55555f;
--cizgi: #dcdde1;
--koyu: #0e0e12;
/* Kose yumusatma YOK: keskin kenar, ekipman vitrinine sertlik verir. */
--yumusak: 0px;
--kap: 1240px;
}
/* ========================================================================
1. TIPOGRAFI — KALIN VE IRI
========================================================================
Yazi tipi yine SISTEM YIGINI. Harici bir spor yazi tipi indirilseydi
ziyaretcinin adresi ucuncu bir tarafa giderdi; agirlik ve harf araligi
ile karakter kazandirmak yeterli.
DIKKAT: `text-transform: uppercase` Turkce'de dogru sonucu ancak
varsa verir (i -> I degil, i -> I noktali). Temel
sablon lang="tr" tasidigi icin buyuk harf donusumu guvenli; buyuk
harfe cevrilen metinler yine de kisa tutuldu.
======================================================================== */
/*
Buyuk harf donusumu YALNIZCA temanin kendi yazdigi basliklara
uygulanir. `h1, h2, h3` topluca buyuk harfe cevrilseydi urun adi da
(urun sayfasinda h1, kartta h3) bozulurdu: saticinin yazdigi ad
urunun kimligidir, tema onu yeniden bicimlendiremez.
*/
.bolum h2 {
font-size: clamp(1.5rem, 3.6vw, 2.2rem);
font-weight: 900;
line-height: 1.1;
text-transform: uppercase;
letter-spacing: -.01em;
}
.marka {
font-weight: 900;
font-size: 1.15rem;
letter-spacing: .14em;
text-transform: uppercase;
}
/*
Govde baglantisi uzerine gelince volt fon: renk degisimi tek basina
isaret olmasin diye alt cizgi de KORUNUR. Yalnizca sinifsiz metin
baglantilarini hedefler; dugmeler ve menu kendi kurallarini kullanir.
*/
main a:not([class]):hover {
background: var(--vurgu);
color: var(--koyu);
}
/* ========================================================================
2. UST SERIT VE BASLIK
========================================================================
Temanin imzasi HER SAYFADA gorunsun diye ust serit volt, baslik siyah
yapildi. Bu iki oge `partials/header` icinde ve tema o sablonu
tasimiyor — degisiklik yalnizca renk katmaninda, yani sablon
kopyalamadan.
======================================================================== */
.serit {
background: var(--vurgu);
/* Volt uzerinde koyu metin: 16.31:1. Beyaz olsaydi 1.18:1 olurdu. */
color: var(--koyu);
font-weight: 700;
letter-spacing: .04em;
/* Serit magaza ADINI tasiyor; buyuk harfe cevrilmiyor cunku marka
adinin yazimi saticiya aittir. */
}
.ust {
background: var(--koyu);
border-bottom: 1px solid color-mix(in srgb, #fff 18%, transparent);
}
.ust .marka, .ust .marka:hover { color: #fff; }
.ust .menu a { color: #fff; }
.ust .menu a:hover { color: var(--vurgu); }
.ray-dugme { color: #fff; }
.ray-dugme:hover {
background: color-mix(in srgb, #fff 14%, transparent);
color: var(--vurgu);
}
/* Sepet rozeti volt: siyah baslik uzerinde en gorunur nokta. */
.rozet {
background: var(--vurgu);
color: var(--koyu);
border-radius: 0;
font-weight: 900;
}
/*
ODAK HALKASI KOYU ALANDA RENK DEGISTIRIR.
Temel tema halkayi --ana (neredeyse siyah) ciziyor; siyah zeminde
bu halka gorunmez olurdu. Halka KALDIRILMIYOR, yalnizca zeminine
gore renklendiriliyor: volt / siyah = 15.41:1.
*/
.serit :focus-visible,
.ust :focus-visible,
.koyu-alan :focus-visible {
outline-color: var(--vurgu);
}
/* ========================================================================
3. DUGMELER
========================================================================
Ana dugme VOLT zemin + SIYAH metin (16.31:1). Volt'un beyaz sayfa
uzerindeki kendi kontrasti dusuk oldugu icin (1.18:1) dugmenin
2 piksel SIYAH cercevesi korunur — WCAG 1.4.11 uyarinca denetimin
siniri boylece 18:1 ile ayirt edilir.
======================================================================== */
.dugme {
background: var(--vurgu);
border-color: var(--koyu);
color: var(--koyu);
border-radius: 0;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .06em;
font-size: .95rem;
/* 48 piksel temelden geliyor; dokunma hedefi korunur. */
}
/* Uzerine gelince renkler TERS DONER - spor dilinde tanidik bir hareket. */
.dugme:hover {
background: var(--koyu);
border-color: var(--koyu);
color: var(--vurgu);
}
.dugme-ikincil {
background: transparent;
color: var(--metin);
border-color: var(--metin);
}
.dugme-ikincil:hover {
background: var(--metin);
color: #fff;
border-color: var(--metin);
}
/* ========================================================================
4. KOYU ALANLAR
========================================================================
Vitrin ve surec bolumu siyah zemine oturuyor. Temel temanin ikincil
metin rengi (--metin-2) acik zemin icin secilmis koyu bir gri; siyah
uzerinde 1.4:1 ile okunmaz. Koyu alanda ikincil metin --koyu ile
karistirilmis beyazdir: olculen deger 10.15:1.
======================================================================== */
.koyu-alan {
background: var(--koyu);
color: #fff;
}
.koyu-alan .slogan,
.koyu-alan p { color: color-mix(in srgb, #fff 72%, var(--koyu)); }
.koyu-alan h1, .koyu-alan h2, .koyu-alan h3 { color: #fff; }
.koyu-alan a { color: #fff; }
.koyu-alan .ust-etiket { color: var(--vurgu); }
/*
KOYU ALANDA DUGME METNI YINE KOYU KALIR.
Ustteki `.koyu-alan a` kurali daha ozgul oldugu icin ana dugmenin
yazisini beyaza cevirirdi ve volt zemin uzerinde beyaz metin
1.18:1 ile okunmaz olurdu. Bu kural onu geri alir: 16.31:1.
*/
.koyu-alan .dugme { color: var(--koyu); }
.koyu-alan .dugme:hover { color: var(--vurgu); }
.koyu-alan .dugme-ikincil {
color: #fff;
border-color: color-mix(in srgb, #fff 45%, transparent);
background: transparent;
}
.koyu-alan .dugme-ikincil:hover {
background: #fff;
color: var(--koyu);
border-color: #fff;
}
/* ========================================================================
5. VITRIN
======================================================================== */
.vitrin {
background: var(--koyu);
padding-block: 0;
/* `overflow: hidden` temelden geliyor: asagidaki capraz ogeler
kutunun disina tasarsa bile YATAY KAYDIRMA olusturamaz. */
}
/* Ince capraz cizgiler: fotograf yerine gecen desen, ekran okuyucuya
gorunmez cunku bir sozde ogedir (icerikte karsiligi yok). */
.vitrin::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: repeating-linear-gradient(115deg,
color-mix(in srgb, var(--vurgu) 16%, transparent) 0 2px,
transparent 2px 24px);
}
/* Vitrinin alt kenarini kesen volt kama - bolumler arasi sert gecis. */
.vitrin::after {
content: '';
position: absolute;
inset-block-end: -1px;
inset-inline: 0;
height: 3rem;
background: var(--vurgu);
clip-path: polygon(0 100%, 100% 0, 100% 100%);
pointer-events: none;
}
.vitrin-duzen {
position: relative;
z-index: 1;
display: grid;
align-items: center;
gap: 2.5rem;
padding-block: 4rem 6rem;
}
@media (min-width: 64rem) {
.vitrin-duzen { grid-template-columns: 1.1fr .9fr; padding-block: 5.5rem 7rem; }
}
.vitrin .ust-etiket {
display: inline-block;
margin-bottom: 1rem;
padding: .35rem .8rem;
background: var(--vurgu);
color: var(--koyu);
letter-spacing: .22em;
font-weight: 900;
}
.vitrin h1 {
margin: 0;
font-size: clamp(2.4rem, 8vw, 4.6rem);
font-weight: 900;
line-height: .98;
letter-spacing: -.035em;
}
/*
EGIK VURGU. Kelimenin ARDINDAKI leke egilir, kelimenin kendisi
egilmez: egik harfler sistem yazi tipinde okunurlugu dusururdu.
Leke sozde ogede durdugu icin ekran okuyucu fazladan bir sey duymaz.
*/
.egik-vurgu {
position: relative;
z-index: 0;
padding-inline: .12em;
/* Volt lekenin uzerindeki metin koyu olmak ZORUNDA: 16.31:1. */
color: var(--koyu);
white-space: nowrap;
}
.egik-vurgu::before {
content: '';
position: absolute;
inset: .04em -.06em .06em -.06em;
z-index: -1;
background: var(--vurgu);
transform: skewX(-9deg);
}
.vitrin .slogan { max-width: 34rem; font-size: 1.08rem; }
.vitrin-dugmeler {
display: flex;
flex-wrap: wrap;
gap: .75rem;
margin-top: 2.25rem;
}
/*
FOTOGRAF YERINE DESENLI PANEL. Vitrine stok fotograf konmaz -
musterinin satmadigi bir urunu vitrine cikarmak olurdu. Panel
sablonda `aria-hidden`; icindeki SVG de oyle.
*/
.vitrin-panel {
position: relative;
aspect-ratio: 5 / 4;
overflow: hidden;
border: 2px solid var(--vurgu);
/* Sag ust ve sol alt koseler kesilir: durgun dikdortgen yerine
hareketli bir kutu. clip-path KIRPAR, tasirmaz. */
clip-path: polygon(0 0, calc(100% - 2.5rem) 0, 100% 2.5rem, 100% 100%, 2.5rem 100%, 0 calc(100% - 2.5rem));
background:
repeating-linear-gradient(115deg,
color-mix(in srgb, var(--vurgu) 12%, transparent) 0 3px,
transparent 3px 18px),
var(--koyu);
}
.vitrin-panel svg {
position: absolute;
inset: 14%;
width: 72%;
height: 72%;
color: var(--vurgu);
}
/* ========================================================================
6. BOLUM BASLIKLARI
======================================================================== */
.bolum-basi h2 { position: relative; padding-top: 1rem; }
/* Basligin ustunde kisa volt cubugu: bolum sinirini renk degil BICIM
isaretler, bu yuzden renk koru kullanicida da gorunur kalir. */
.bolum-basi h2::before {
content: '';
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
width: 3.5rem;
height: 6px;
background: var(--vurgu);
}
.bolum-basi a {
font-weight: 800;
text-transform: uppercase;
letter-spacing: .08em;
font-size: .85rem;
/* Dokunma hedefi: temel temada bu baglantiya olcu verilmemis. */
display: inline-flex;
align-items: center;
min-height: 44px;
}
/* ========================================================================
7. SPOR DALLARI SERIDI (temaya ozel bolum)
======================================================================== */
.dal-izgara {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.dal-kart {
position: relative;
display: flex;
align-items: flex-end;
/* Dokunma hedefinin cok ustunde; kart parmakla rahat isabet eder. */
min-height: 8.5rem;
overflow: hidden;
padding: 1.25rem;
background: var(--koyu);
color: #fff;
text-decoration: none;
font-weight: 900;
font-size: 1.05rem;
letter-spacing: .06em;
text-transform: uppercase;
transition: background-color .2s ease, color .2s ease;
}
/* Sag alt kosede volt ucgen: capraz dil, tasma riski olmadan. */
.dal-kart::after {
content: '';
position: absolute;
inset-block-end: 0;
inset-inline-end: 0;
width: 2rem;
height: 2rem;
background: var(--vurgu);
clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.dal-kart:hover {
background: var(--vurgu);
color: var(--koyu);
}
.dal-kart:hover::after { background: var(--koyu); }
/* ========================================================================
8. URUN KARTI
========================================================================
Tema `partials/urun-kart.blade.php`'yi EZMEZ: karta eklenecek yeni bir
bilgi yok, yalnizca gorunumu degisiyor. Sablonu kopyalasaydik temelde
yapilan bir duzeltme (ornegin tukenmis urun etiketi) bu temada
eksik kalirdi.
======================================================================== */
.urun-kart {
border-width: 2px;
border-color: var(--cizgi);
border-radius: 0;
}
.urun-kart:hover { border-color: var(--koyu); box-shadow: none; }
/* Kartin ustunde uzerine gelince beliren volt cizgi. */
.urun-kart::before {
content: '';
position: absolute;
inset-block-start: 0;
inset-inline: 0;
height: 5px;
background: var(--vurgu);
transform: scaleX(0);
transform-origin: left center;
transition: transform .25s ease;
z-index: 1;
}
.urun-kart:hover::before { transform: scaleX(1); }
.urun-gorsel { aspect-ratio: 1 / 1; }
/* Urun adi KALIN ama buyuk harfe cevrilmiyor - bkz. tipografi notu. */
.urun-ad { font-weight: 800; font-size: .95rem; }
.urun-fiyat {
padding-inline-start: .7rem;
/* Volt cubuk yalnizca SUS: fiyat bilgisini metnin kendisi tasiyor. */
border-inline-start: 5px solid var(--vurgu);
font-size: 1.15rem;
font-weight: 900;
}
.urun-etiket {
border-radius: 0;
text-transform: uppercase;
letter-spacing: .08em;
}
/* ========================================================================
9. SUREC BOLUMU (temaya ozel, koyu serit)
======================================================================== */
.adimlar {
list-style: none;
display: grid;
gap: 1.5rem;
margin: 0;
padding: 0;
}
@media (min-width: 48rem) { .adimlar { grid-template-columns: repeat(3, 1fr); } }
.adim {
padding-top: 1.25rem;
border-top: 3px solid color-mix(in srgb, #fff 25%, transparent);
}
.adim:first-child { border-top-color: var(--vurgu); }
/*
Adim numarasi sablonda `aria-hidden`: sira zaten ile
bildiriliyor, numarayi bir de sesli okutmak tekrar olurdu.
*/
.adim-no {
display: block;
margin-bottom: .5rem;
font-size: 2.2rem;
font-weight: 900;
line-height: 1;
color: var(--vurgu);
}
.adim h3 { margin: 0 0 .4rem; font-size: 1rem; letter-spacing: .06em; }
.adim p { margin: 0; font-size: .95rem; }
/* ========================================================================
10. ALT BILGI
======================================================================== */
.alt {
/* Ustundeki koyu serit ile arada bosluk kalmasin: iki blok birbirine
dayanip tek bir kapanis olusturur. */
margin-top: 0;
border-top: 5px solid var(--vurgu);
background: var(--zemin-2);
}
.alt h2 { font-weight: 900; letter-spacing: .12em; }
.alt li a { font-weight: 600; }
.alt li a:hover { color: var(--vurgu-koyu); }
/* ========================================================================
11. HAREKET TERCIHI
========================================================================
Temel tema gecis SURELERINI sifirliyor ama `transform` degerinin
kendisi yine de uygulanirdi. Hareketi azaltmayi secen ziyaretcide
gorselin buyumesi ve kartin volt cizgisinin acilmasi kapatilir; bilgi
kaybi yok cunku ikisi de yalnizca sustur. Ust cizgi bu durumda hic
cizilmez, kayarak degil.
======================================================================== */
@media (prefers-reduced-motion: reduce) {
.urun-kart:hover .urun-gorsel img { transform: none; }
.urun-kart:hover::before { transform: scaleX(0); }
}