/* ========================================================================= Temaya .NET tarafında eklenen kurallar. style.css statik temadan BİRE BİR kopyalanıyor ve elle düzenlenmiyor: tasarım güncellenirse dosya yeniden kopyalanabilsin diye. Statik temada karşılığı olmayan parçaların stili burada duruyor. ========================================================================= */ /* Çeviri düşümü notu (K22): sayfa istenen dilde çevrilmemiş, içerik varsayılan dilden geliyor. Uyarı değil bilgi — bu yüzden turuncu değil nötr zemin. */ .ceviri-notu { margin: 1.5rem 0 0; padding: .75rem 1rem; background: var(--sheet); border-left: 3px solid var(--steel-light); color: var(--steel); font-size: var(--fs-sm); } /* Hedefi silinmiş ya da yayından kaldırılmış menü öğesi. Tıklanamaz ama görünür kalıyor: kırık bağlantı ziyaretçiyi, sessiz kaybolma yöneticiyi yanıltır (bkz. MenuService.AdresCozAsync). */ .nav__link--pasif, .drawer__link--pasif { color: var(--steel-light); cursor: default; } /* Arama sonuç sayfası. Tema bu sayfayı içermiyordu; ürün ve içerik listeleri temanın kendi ızgaralarını kullanıyor, buradaki kurallar yalnızca iki listeyi ayıran başlıklar için. */ .arama-bolum + .arama-bolum { margin-top: var(--section); } .arama-bolum__baslik { display: flex; align-items: baseline; gap: .6rem; margin-bottom: 1.5rem; } .arama-bolum__baslik .adet { color: var(--steel); font-size: var(--fs-sm); font-weight: 400; } .arama-kaynak { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--steel); margin: 0 0 .2rem; } /* Sayfalayıcı. Temada liste sayfaları tek sayfaydı (hepsi JS ile çiziliyordu), bu yüzden sayfalayıcı stili yok. */ .sayfalar { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: 2.5rem; } .sayfalar a { min-width: 42px; height: 42px; padding: 0 .6rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--r-sm); font-weight: 600; font-size: var(--fs-sm); } .sayfalar a:hover { border-color: var(--graphite); } .sayfalar a.is-active { background: var(--graphite); border-color: var(--graphite); color: var(--white); } /* Çok satırlı ayar alanları (adres, çalışma saatleri): panelde girilen satır sonları korunuyor. */ .coksatir { white-space: pre-line; } /* Fiyat girilmemiş ürün: rakam uydurmak yerine "fiyat sorunuz" (K17). */ .fiyat-yok { color: var(--steel); font-style: italic; font-size: var(--fs-sm); } /* Faz 0 tanı sayfası. Geçici: gerçek anasayfa tema taşımanın ikinci adımında geliyor. Temada karşılığı olmayan tek sayfa bu. */ .note { padding: 1rem 1.2rem; background: var(--orange-tint); border-left: 3px solid var(--orange); margin-bottom: 2rem; font-size: var(--fs-sm); } [data-sayfa="tani"] table { width: 100%; border-collapse: collapse; margin-bottom: 2.5rem; } [data-sayfa="tani"] th, [data-sayfa="tani"] td { border: 1px solid var(--line); padding: .55rem .8rem; text-align: left; vertical-align: top; } [data-sayfa="tani"] h2 { font-size: var(--fs-lg); margin: 2rem 0 1rem; } [data-sayfa="tani"] .ok { color: var(--ok); font-weight: 700; } [data-sayfa="tani"] .err { color: var(--danger); font-weight: 700; } /* Mega menü — ızgara düzeni (MenuLayout.Grid). Temanın .mega__inner'ı üç sabit kolon: iki bağlantı listesi + koyu tanıtım kutusu. Tanıtım kutusunun metnini tutacak alan şemada yok, o yüzden burada yalnızca bağlantı kolonları var ve kolon sayısı öğe sayısına göre kendiliğinden ayarlanıyor — sabit üç kolonda üçüncüsü boş kalır ve iki liste sola sıkışırdı. */ .mega__inner--izgara { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* ========================================================================= Mega menü düzenleri — ek.css'e eklenecek kurallar. ek.css paylaşılan bir dosya (KURALLAR §1), o yüzden buradalar. Kopyalarken ek.css'teki ".mega__inner--izgara" kuralının HEMEN ALTINA koyun: o kural da mega menüye ait ve ikisi birlikte okunuyor. style.css'e dokunulmadı; aşağıdaki kuralların tamamı temanın kendi sınıflarının üzerine binen, temada karşılığı OLMAYAN parçalar için. ========================================================================= */ /* Mega menüdeki öne çıkan görsel (menu_items.image_media_id). Temanın .media sınıfı en/boy oranını KENDİ vermiyor; her kullanan yer kendi oranını tanımlıyor (.pcard .media 4/3, .ncard .media 16/10…). Mega menü paneli yatay ve alçak olduğu için 16/10 seçildi: 4/3 panelin yüksekliğini görünür biçimde artırıyor ve menünün altı ekrandan taşıyor. margin-bottom yalnızca "kenar ve kartlar" düzeninde işe yarıyor (görsel yan kolonun tepesinde, başlığın üstünde); .mega__promo içindeyken kutunun tek çocuğu olduğu için görünür bir etkisi yok. */ .mega__gorsel { aspect-ratio: 16/10; border-radius: var(--r-sm); margin-bottom: 1rem; } /* Tanıtım kutusu yalnızca görsel taşıyorsa iç boşluk küçülüyor: temanın 1.6rem'lik dolgusu başlık + metin + düğme içindi, tek görselde görseli gereksiz yere küçültüyor. Kutu başlık/açıklama/düğme taşıyabiliyor (menu_item_translations: heading_1, description, button_text, button_url) — bunlar panelden giriliyor. Aşağıdaki kural yalnızca metinsiz, YALNIZ GÖRSEL taşıyan kutu için: temanın 1.6rem dolgusu başlık + metin + düğme içindi. */ .mega__promo:has(> .mega__gorsel:only-child) { padding: .8rem; justify-content: center; } /* Arama kutusu — sonuç sayfasındaki. Katmandaki kutu temanın kendi .search-overlay kuralıyla biçimleniyor. */ .arama-kutusu { display: flex; gap: .6rem; margin: 0 0 2.5rem; flex-wrap: wrap; } .arama-kutusu input { flex: 1 1 22rem; min-height: 48px; padding: 0 1rem; border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; font-size: var(--fs-base); } .arama-kutusu input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-tint); } /* Uzun metin gövdesi: panelden HTML olarak giren içerik. Tema bu bloğun iç etiketlerine (h2, p, ul, table) kural vermiyordu çünkü statik sayfalar kendi sınıflarını taşıyordu; buradaki içerik editörden geliyor. */ .yazi { max-width: 78ch; } .yazi > * + * { margin-top: 1.1rem; } .yazi h2 { font-size: var(--fs-lg); font-variation-settings: "wdth" 112; margin-top: 2.5rem; } .yazi h3 { font-size: var(--fs-md); margin-top: 2rem; } .yazi ul, .yazi ol { padding-left: 1.2rem; list-style: revert; } .yazi li + li { margin-top: .4rem; } .yazi a { color: var(--orange-deep); text-decoration: underline; } .yazi img { max-width: 100%; height: auto; border-radius: var(--r-md); } .yazi table { width: 100%; border-collapse: collapse; } .yazi th, .yazi td { border: 1px solid var(--line); padding: .6rem .8rem; text-align: left; } .yazi__kapak { aspect-ratio: 16/9; border-radius: var(--r-md); margin-bottom: 2rem; } .urun-aciklama { margin-top: var(--section); } /* Ürün detayındaki küçük resimler. Büyük görsel penceresi Faz 4'te. */ .galeri { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-top: .6rem; } .galeri .media { aspect-ratio: 4/3; border-radius: var(--r-sm); } /* K17: para birimi başına ayrı fiyat satırı, kur çevirisi yok. */ .iletisim-liste { display: grid; gap: 1rem; margin: 2rem 0; } .vergi { color: var(--steel); font-size: var(--fs-sm); margin-bottom: 1.5rem; } .harita { border-radius: var(--r-md); overflow: hidden; } .harita iframe { width: 100%; min-height: 380px; border: 0; display: block; } /* Üst bardaki dil + para birimi açılırı (K11). Temada seçenekler düğmeydi; burada bağlantı: seçim /para-birimi/{kod} ile çereze yazılıyor. */ .dropdown__menu a { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .5rem .6rem; border-radius: var(--r-sm); font-size: var(--fs-sm); } .dropdown__menu a b { width: 34px; } .dropdown__menu a:hover { background: var(--sheet); } .dropdown__menu a.is-active { background: var(--orange-tint); color: var(--orange-deep); } /* ========================================================================= Arama katmanı — canlı öneri listesi ek.css'e eklenecek. style.css'teki .search-results kuralları (grid, kart zemini, turuncu sol kenar) OLDUĞU GİBİ kullanılıyor: statik temada öneri listesi zaten bu sınıfla çiziliyordu. Burada yalnızca statik temada karşılığı olmayan üç şey var. ========================================================================= */ /* 1) GİZLEME. Bu kural ZORUNLU, kozmetik değil. style.css'te ".search-results { display: grid }" yazıyor ve bir sınıf kuralı, tarayıcının [hidden] için uyguladığı "display: none"u ezer. Bu satır olmadan tema.js listeyi hidden yaptığında liste ekranda kalır — üstelik boş bir kutu olarak. */ .search-results[hidden] { display: none; } /* 2) KLAVYEYLE VURGULANAN SATIR. Fare ile :hover, klavye ile .is-active aynı görünüyor: iki ayrı görünüm, listenin nereye gittiğini iki ayrı biçimde öğretirdi. Odak gerçekte arama kutusunda kalıyor (aria-activedescendant), bu yüzden :focus ile yapılamıyor. */ .search-results a.is-active { border-left-color: var(--orange); background: var(--graphite-3); } /* 3) DURUM MESAJI. "Bulunamadı", "en az 3 harf" ve "öneriler alınamıyor" aynı yerde görünüyor; üçü aynı anda oluşamaz. Katmanın zemini koyu olduğu için renk .search-overlay p ile aynı aileden. */ .arama-oneri__mesaj { margin-top: 1.5rem; color: var(--steel-light); font-size: var(--fs-sm); } .arama-oneri__mesaj[hidden] { display: none; } /* ===================================================================== İletişim formu — ek.css'e eklenecek kurallar (form agent'ı) style.css ZATEN VEREN kurallar (kontrol edildi, tekrarlanmadı): .form-grid, .form-grid .full, .field input/select/textarea, .field.has-error, .field .err, .consent, .field-label Bu dosyada yalnızca .NET sürümünün getirdiği İKİ yeni ihtiyaç var. ===================================================================== */ /* Bal küpü alanı: ekranda görünmez ama ekran okuyucu dışında DOM'da duruyor. display:none KULLANILMIYOR — birçok bot gizlenmiş alanları atlıyor, ekrandan taşırmak ise onları yanıltmaya devam ediyor. Yanındaki aria-hidden ile birlikte ekran okuyucu da okumuyor. */ .bal-kupu { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Form başındaki bildirim şeridi: başarı iletisi ve alan dışı hatalar. Statik temada karşılığı yoktu; orada gönderim JS ile taklit ediliyordu ve sunucudan dönen bir ileti diye bir şey yoktu. Renkler temanın değişkenlerinden; sabit onaltılık yazmak, ana renk panelden değiştiğinde (general.primary_color) burayı ayrı düşürürdü. */ .form-bildirim { margin: 0; padding: .85rem 1rem; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--sheet); color: var(--graphite); font-size: var(--fs-sm); font-weight: 600; } .form-bildirim--hata { border-color: var(--danger); background: transparent; color: var(--danger); } /* .field dışındaki sarmalayıcılarda da (KVKK onayı) hata metni görünsün. style.css'teki kural yalnızca .field.has-error .err seçicisini kapsıyor; onay kutusu .field değil, doğrudan .full içinde duruyor. */ .full.has-error .err { display: block; color: var(--danger); font-size: var(--fs-xs); margin-top: .3rem; } .full > .err { display: none; } /* ========================================================================= Anasayfa · ekip ve müşteri görüşleri bölümleri ek.css'e EKLENECEK. Kurallar style.css'ten SONRA yüklenmeli (_Layout.cshtml zaten öyle: style.css → ek.css). Ekip bölümünün (.team / .member) hiçbir ek kuralı yok: statik temanın işaretlemesi (.media + data-code, h3, p) birebir üretildiği için style.css'teki tanımlar olduğu gibi çalışıyor. Aşağıdaki iki kural yalnızca yorum kartının, statik temadan FARKLI olan iki yanı için. ========================================================================= */ /* Yorum kartı puansız çiziliyor: puan entries.extra içinde duruyor ama PublicEntry o alanı taşımıyor, taşımadan yıldız çizmek her yorumu beş yıldız göstermek olurdu (bkz. HomeViewModel sınıf yorumu). Statik temada blockquote'un 1rem üst boşluğu, üstündeki yıldız sırasını ayırmak içindi; yıldız yokken kartın içine fazladan boşluk bırakıyor. */ .review > blockquote:first-child { margin-top: 0; } /* Statik temada aynı anda yalnızca iki yorum görünüyordu ve ileri/geri düğmeleri sayfalıyordu. Burada dördü birden bir ızgarada; farklı uzunluktaki metinlerde kartlar aynı satır yüksekliğine uzayıp adların hizası bozuluyor. Ad satırını kartın altına sabitliyoruz. */ .review { display: flex; flex-direction: column; } .review footer { margin-top: auto; } /* ========================================================================= Sayaç bandı — ek.css'e eklenecek TEK kural. style.css'teki .stats sabit 4 kolon (mobilde 2). Statik tema için doğruydu: orada satırlar data.js'te sabitti. Artık paneldeki bir yönetici 5. satırı ekleyebiliyor ve o satır tek başına ikinci sıraya düşüp bandı dengesiz gösteriyor. Kural yalnızca 5. çocuk VARSA devreye giriyor; dört satırlık asıl tasarım hiç değişmiyor. style.css DEĞİŞTİRİLMEDİ (statik temadan birebir kopya, elle düzenlenmiyor). ========================================================================= */ .stats:has(> :nth-child(5)) { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } /* ===================================================================== SEPET — ek.css'e eklenecek kurallar (Faz 4 · birinci dilim) Sepetin görsel sınıfları (.cart, .citem, .qty, .summary, .remove, .empty, .price--quote, .icon-btn .count) style.css'te ZATEN VAR ve statik temadan bire bir geliyor. Burada yalnızca sunucu tarafı çizimin getirdiği iki farkın karşılığı duruyor; tema dosyasına dokunulmuyor. ===================================================================== */ /* --------------------------------------------------------------------- 1) JavaScript'siz adet alanı Temanın .qty kutusu −/+ düğmeleriyle tasarlanmış ve o düğmeler Store.setQty çağıran JavaScript istiyor. Sunucu tarafı sepette öyle bir betik yok; çalışmayan iki düğme koymak yerine (KURALLAR §2) adet doğrudan yazılıyor. Bu yüzden tarayıcının kendi artır/azalt oku geri açılıyor ve alan okunur genişliğe çekiliyor. .qty--sade daima .qty ile birlikte kullanılıyor; kutu çerçevesi, yüksekliği ve yazı ayarları oradan geliyor. --------------------------------------------------------------------- */ .qty--sade input { width: 74px; padding-inline: .35rem; -moz-appearance: auto; appearance: auto; } .qty--sade input::-webkit-inner-spin-button, .qty--sade input::-webkit-outer-spin-button { -webkit-appearance: auto; appearance: auto; opacity: 1; } /* Adedi onaylama düğmesi. .qty button kuralı genişliği ve arka planı zaten veriyor; burada yalnızca imleç ve üzerine gelme geri bildirimi ekleniyor ki düğme olduğu anlaşılsın. */ .qty--sade button[type="submit"] { cursor: pointer; color: var(--steel); border-left: 1px solid var(--line); } .qty--sade button[type="submit"]:hover { background: var(--sheet); color: var(--ink); } /* --------------------------------------------------------------------- 2) Satır içindeki form sarmalayıcıları Her işlem (adet güncelle, satırı çıkar) kendi formunda; formlar iç içe geçemediği için tek bir büyük forma alınamıyorlar. Tarayıcıların
için varsayılan bir kenar boşluğu yok ama bazı sıfırlama dosyaları ekliyor; ızgara hizası bozulmasın diye açıkça sıfırlanıyor. .citem ızgarasında ve .pcard__foot esnek kutusunda ÖĞE artık form; .qty ve .remove sınıfları doğrudan form ile düğmenin üzerinde olduğu için ek bir hizalama kuralı gerekmiyor. --------------------------------------------------------------------- */ .citem form, .pcard__foot form { margin: 0; } /* 640px altında .citem üç sütuna iniyor ve style.css .citem .qty öğesini ikinci sütuna alıyor. .qty sınıfı formun kendisinde olduğu için bu kural olduğu gibi çalışıyor; çıkarma formunun düğmesi de 36px'lik son sütuna oturuyor. */ @media (max-width: 640px) { .citem form .remove { margin-left: auto; } } /* ===================================================================== HAVALE İLE SİPARİŞ — ek.css'e eklenecek kurallar (Faz 4 · ikinci dilim) Sipariş akışının görsel sınıflarının TAMAMINA YAKINI style.css'te ZATEN VAR ve statik temadan bire bir geliyor. Kullanılan ve doğrulanmış sınıflar, satır numaralarıyla: .cart style.css:711 .cart-steps 712 .cart-steps li style.css:713 .cart-steps li::before 714 .cart-steps li.is-done 715 .citem 716 .citem .media 717 .citem > div > small 719 .citem h3 720 .citem__variant 721 .citem .price 722-723 .remove 724-726 .summary 727 .summary h2 728 .summary dl 729 .summary dd 730 .summary .total 731 .note 732 .form-grid 737 .form-grid .full 738 .field input/select/textarea 739-743 .field.has-error 744 .field .err 745-746 .consent 747-749 .banks 782 .bank 783 .bank h3 784 .bank p 785 .iban 786 .iban button 787-788 .empty 556 .price 367-370 .price--quote 370 .citem__variant 721 .btn 92-101 .btn--primary 102-103 .btn--ghost 106-108 .btn--block 110 .field-label 679 .two-col 770 .container 68 .section 69 .section--sheet 70 .kicker 76-82 .title 83 .lead 88 .citem duyarlı 836-838 (640px altı) .two-col duyarlı 813 ek.css'ten kullanılanlar: .bal-kupu (229), .form-bildirim (243), .form-bildirim--hata (254), .full.has-error .err (263), .coksatir (58), .qty--sade (336-360), .citem form (~376). Aşağıdakiler GERÇEKTEN eksik olanlar: statik temada sipariş alındı ekranı hiç yoktu (sepet.html sipariş formunu gösteriyor, sonrasını göstermiyor), bu yüzden o ekranın kutuları için karşılık yok. ===================================================================== */ /* --------------------------------------------------------------------- 1) Sipariş alındı kutusu .empty KULLANILMADI. O sınıf kesik çizgili "burada bir şey yok" kutusu; sipariş numarasını taşıyan bir onay kutusunda kesik çizgi ve soluk gri metin, başarıyı eksiklik gibi gösterirdi. Renk temanın --ok değişkeninden (style.css :root) geliyor; yeni bir renk tanımlanmadı. --------------------------------------------------------------------- */ .siparis-ozet { border: 1px solid var(--line); border-left: 4px solid var(--ok); background: var(--white); border-radius: var(--r-md); padding: 1.6rem; margin-bottom: 2rem; /* Sol sütunda duruyor; uzun bir e-posta adresi sütunu taşırmasın. */ overflow-wrap: anywhere; } .siparis-ozet h2 { font-size: var(--fs-md); margin-bottom: .6rem; } .siparis-ozet p { color: var(--steel); font-size: var(--fs-sm); margin: .5rem 0 0; } /* Sipariş numarası: okunması ve elle kopyalanması gereken tek değer. tabular-nums, .price ve .iban kurallarındaki ile aynı gerekçe — rakamlar sabit genişlikte hizalansın. */ .siparis-no { font-size: var(--fs-lg); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .04em; margin: 0 0 .2rem; } /* .siparis-ozet p kuralı rengi soluklaştırıyor; numara ondan sonra geldiği için özgüllük eşit ve sıraya güvenmek kırılgan olurdu. */ .siparis-ozet .siparis-no { color: var(--ink); margin-top: 0; } /* --------------------------------------------------------------------- 2) Özet kutusundaki ara başlıklar ve çok satırlı metin .summary içinde h2 var (style.css:728) ama h3 yok; fatura bilgileri ve sipariş notu için gereken ikinci seviye başlık burada tanımlanıyor. --------------------------------------------------------------------- */ .siparis-baslik { font-size: var(--fs-sm); font-weight: 700; margin: 1.4rem 0 .4rem; padding-top: 1rem; border-top: 1px solid var(--line); } .siparis-adres { font-size: var(--fs-sm); color: var(--steel); margin: 0 0 1rem; } /* --------------------------------------------------------------------- 3) Sipariş satırı — düzenlenemez hâl Temanın .citem ızgarası beş sütunlu (görsel, ad, adet kutusu, tutar, çıkar düğmesi). Sipariş alındı ekranında adet kutusu ve çıkarma düğmesi YOK — verilmiş bir sipariş satırı düzenlenemez — ve üç öğe beş sütunluk ızgarada tutarı sona itemiyor. Bu yüzden ızgara üç sütuna iniyor; öteki her şey .citem'den geliyor. --------------------------------------------------------------------- */ .citem--ozet { grid-template-columns: 110px 1fr auto; } /* style.css:836 satırındaki 640px kuralı .citem'i üç sütuna indiriyor ve .price'ı ikinci sütuna alıyor; burada adet/çıkar sütunu zaten yok, bu yüzden tutar kendi sütununda kalabilir ve dar ekranda ada alt satırda eşlik eder. */ @media (max-width: 640px) { .citem--ozet { grid-template-columns: 80px 1fr; } .citem--ozet .price { grid-column: 2; text-align: left; } } /* ===================================================================== ÜRÜN DETAY — statik temadaki urun-detay şablonuna getirme .pd, .gallery, .tabs, .spec-table, .doc-row, .vcard, .lightbox, .assure kuralları style.css'te ZATEN VAR (statik temadan bire bir). Burada yalnızca sunucu tarafı çizimin getirdiği farklar duruyor: statik temada bu blok JavaScript'le çiziliyordu (main.js · Pages.detay), burada sunucu çiziyor ve betik (urun-detay.js) yalnızca etkileşimi ekliyor. ===================================================================== */ /* --------------------------------------------------------------------- 1) Dar üst şerit: yalnızca kırıntı yolu Statik temada bu ayar sayfanın HTML'inde satır içi yazılıydı (style="--pad:1.5rem" + container'a padding). Sınıfa alındı; ürün adı şeritte değil sayfanın gövdesindeki H1'de (bkz. PageHeader.Compact). --------------------------------------------------------------------- */ .page-hero--dar .container { padding-top: 1.4rem; padding-bottom: 1.4rem; } .page-hero--dar .crumbs { margin: 0; } .urun-bolum { padding-top: 3rem; } /* --------------------------------------------------------------------- 2) Küçük resimler ve ana görsel olarak çiziliyor Statik temada