/* ============================================================================= KAYNAK TASARIMDAN BİLİNÇLİ SAPMALAR `bootstrap.css`, `site.css` ve `pages.css` kaynağın (sh.com.tr) KENDİ dosyalarıdır ve boru hattı yeniden çalıştırıldığında ÜZERİNE YAZILIR. Oradaki bir kuralı elle değiştirmek, bir sonraki taşımada sessizce geri gelir. Bu yüzden bizim kararlarımız burada durur ve bu dosya kaynak katmanından SONRA yüklenir. Her sapma NEDENİYLE yazılır — "beğenmedim" değil, gözlenen bir sorunla. ============================================================================= */ /* ----------------------------------------------------------------------------- Destek/CTA şeridi (`.section-support`) — köşe yuvarlaklığı KALDIRILDI ----------------------------------------------------------------------------- Kaynakta şeridin sol alt köşesi 150px yuvarlatılmış (`border-radius: 0 0 0 150px`) ve şerit footer'ın üstüne -100px bindiriliyor. Yuvarlatılan köşe, arkasındaki koyu footer bloğunu AÇIKTA bırakıyor: köşede sayfa zemini (beyaz) görünüyor ve şerit "kesik" duruyor. Kaynakta bu, footer'ın kendi `:before` bloğuyla maskeleniyordu; bizim düzenimizde aynı hizalama tutmadığı için beyaz boşluk kalıyor. Karar: yuvarlaklık kaldırıldı, şerit düz bitiyor. ---------------------------------------------------------------------------- */ body:where(:not(.sh-panel)) .section-support { border-radius: 0; } /* ----------------------------------------------------------------------------- Aynı şeridin footer'a BİNMESİ de kaldırıldı ----------------------------------------------------------------------------- Kaynakta şerit `margin-bottom: -100px` ile footer'ın üstüne biniyor ve footer bunu kendi `:before` bloğuyla kapatıyordu. Bizim footer'ımızın markup'ı/dolgusu farklı olduğu için kartların alt kısmı footer'ın içinde KALIYOR ve kesik görünüyordu. Şerit artık kendi dolgusuyla bitiyor. ---------------------------------------------------------------------------- */ body:where(:not(.sh-panel)) .section-support { margin-bottom: 0; padding-bottom: 48px; } @media only screen and (max-width: 992px) { body:where(:not(.sh-panel)) .section-support { border-radius: 0; margin-bottom: 0; padding-bottom: 32px; } } /* ----------------------------------------------------------------------------- Karşılaştırma tablosu — KOLON GENİŞLİĞİ sütun sayısından hesaplanır ----------------------------------------------------------------------------- Kaynakta kolon genişliği 25% / 33.33% olarak SABİT yazılmış (sayfa başına 4 ya da 3 paket olduğu varsayılmış). Bizim kategorilerimizde paket sayısı değişiyor: linux-hosting'de 8 paket var ve sabit 25% ile kolonlar alt satıra taşıyor, başlık ile veri hizası kayıyordu. Sütun sayısını şablon `--compare-cols` ile veriyor (bkz. `_macros.njk#compareTable`), genişlik burada hesaplanıyor. Dar ekranda (≤992px) kaynağın kendi düzeni satırları alt alta alıyor; orada kolonu %50'nin altına düşürmüyoruz, yoksa 8 pakette hücreler okunmaz hâle geliyor. ---------------------------------------------------------------------------- */ .comparison__table .item__header .item__row .column-right .column, .comparison__table .item__detail .item__row .column-right .column { width: calc(100% / var(--compare-cols, 4)); } @media only screen and (max-width: 992px) { .comparison__table .item__header .item__row .column-right .column, .comparison__table .item__detail .item__row .column-right .column { width: max(50%, calc(100% / var(--compare-cols, 4))); } } /* ----------------------------------------------------------------------------- Karşılaştırma tablosu — başlık şeridinin BOŞ YÜKSEKLİĞİ kaldırıldı ----------------------------------------------------------------------------- Kaynakta başlık hücresinde paket adının yanı sıra FİYAT ve SİPARİŞ butonu duruyordu; bu yüzden `min-height: 180–200px` verilmiş. Bizim tablomuzda başlıkta yalnız paket adı var (fiyat/sipariş ürün kartlarında), dolayısıyla başlık ile ilk özellik satırı arasında ~150px boş alan kalıyordu. Yükseklik içeriğe bırakıldı; şerit yapışkan (sticky) davranışını korur. ---------------------------------------------------------------------------- */ .comparison__table .item__header { min-height: 0; } /* ───────────────────────────────────────────────────────────────────────────── LOKASYON SEKMELERİ (kategori sayfası) — SAF CSS. `/cloud-server` 38 kartı tek ızgaraya döküyordu; oysa katalog 11 paket × 3 lokasyon + 5 storage demek. Kartlar artık lokasyona göre sekmelenir. NEDEN JS YOK: sekme mekanizması gizli radyo düğmeleri + `:checked ~` kardeş seçicisidir. Betik engellenmiş/gecikmiş olsa da çalışır. CSS hiç yüklenmezse de bir şey KAYBOLMAZ: radyolar görünür kalır ve tüm gruplar alt alta basılır (aşağıdaki `display:block` yedeği). ───────────────────────────────────────────────────────────────────────────── */ .shs-groups .shs-group-radio { position: absolute; opacity: 0; pointer-events: none; } .shs-groups .shs-group-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 32px 0 8px; } .shs-groups .shs-group-tabs > label { cursor: pointer; padding: 10px 22px; border: 1px solid #dededc; border-radius: 50px; font-weight: 600; font-size: 15px; line-height: 1.2; color: var(--bs-dark, #242736); background: #fff; transition: all .15s ease-in-out; user-select: none; } .shs-groups .shs-group-tabs > label:hover { border-color: var(--bs-danger, #d7261e); } .shs-groups .shs-group-count { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 500; opacity: .6; } /* Klavye ile gezinen kullanıcı odağı GÖRMELİ: radyo gizli olduğu için odak halkası etikete taşınır. */ .shs-groups .shs-group-radio:focus-visible + .shs-group-tabs > label, .shs-groups .shs-group-radio:focus-visible ~ .shs-group-tabs > label { outline: 2px solid var(--bs-danger, #d7261e); outline-offset: 2px; } /* Seçili sekme ve paneli. `nth-of-type` eşlemesi: n. radyo → n. etiket → n. panel. Bu yüzden şablonda radyolar TEK BLOK hâlinde ve panellerle AYNI SIRADA basılır — araya başka bir `input` girerse eşleşme kayar. */ .shs-groups .shs-group-panel { display: none; } .shs-groups .shs-group-radio:nth-of-type(1):checked ~ .shs-group-tabs > label:nth-of-type(1), .shs-groups .shs-group-radio:nth-of-type(2):checked ~ .shs-group-tabs > label:nth-of-type(2), .shs-groups .shs-group-radio:nth-of-type(3):checked ~ .shs-group-tabs > label:nth-of-type(3), .shs-groups .shs-group-radio:nth-of-type(4):checked ~ .shs-group-tabs > label:nth-of-type(4), .shs-groups .shs-group-radio:nth-of-type(5):checked ~ .shs-group-tabs > label:nth-of-type(5), .shs-groups .shs-group-radio:nth-of-type(6):checked ~ .shs-group-tabs > label:nth-of-type(6) { background: var(--bs-danger, #d7261e); border-color: var(--bs-danger, #d7261e); color: #fff; } .shs-groups .shs-group-radio:nth-of-type(1):checked ~ .shs-group-panel:nth-of-type(1), .shs-groups .shs-group-radio:nth-of-type(2):checked ~ .shs-group-panel:nth-of-type(2), .shs-groups .shs-group-radio:nth-of-type(3):checked ~ .shs-group-panel:nth-of-type(3), .shs-groups .shs-group-radio:nth-of-type(4):checked ~ .shs-group-panel:nth-of-type(4), .shs-groups .shs-group-radio:nth-of-type(5):checked ~ .shs-group-panel:nth-of-type(5), .shs-groups .shs-group-radio:nth-of-type(6):checked ~ .shs-group-panel:nth-of-type(6) { display: block; } /* Yazdırma: sekme mantığı kâğıtta anlamsız — bütün gruplar görünsün. */ @media print { .shs-groups .shs-group-tabs { display: none; } .shs-groups .shs-group-panel { display: block !important; } } /* ───────────────────────────────────────────────────────────────────────────── DÖVİZ SEÇİCİ (üst şerit). Katalog fiyatlarını vitrin dövizi ↔ tahsilat dövizi arasında çevirir; dönüşüm YALNIZ görüntüdedir (sepet/ödeme her zaman tahsilat dövizinde). ───────────────────────────────────────────────────────────────────────────── */ .shs-fx { display: inline-flex; align-items: stretch; border: 1px solid #dededc; border-radius: 50px; overflow: hidden; line-height: 1; } .shs-fx > button { appearance: none; border: 0; background: transparent; cursor: pointer; padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 600; color: var(--bs-dark-gray, #767676); transition: background-color .15s ease-in-out, color .15s ease-in-out; } .shs-fx > button:hover { color: var(--bs-dark, #242736); } .shs-fx > button.is-active { background: var(--bs-danger, #d7261e); color: #fff; } .shs-fx > button:focus-visible { outline: 2px solid var(--bs-danger, #d7261e); outline-offset: -2px; } /* ───────────────────────────────────────────────────────────────────────────── PAKET KARTI — SABİT YÜKSEKLİK SÖZLEŞMESİNİN KIRILMASI. Kaynağın `pages.css` dosyası `.hosting-package`'a `height: 380px` + `min-height: 380px` veriyor. Kaynakta kartlar kısaydı; bizim kartımız 534px istiyor (daha uzun paket adı, iki satırlık fiyat bloğu, özellik listesi). Sonuç: kart 380px'de kesiliyor, `.package-detail` kartın DIŞINA taşıp bir alttaki satırın kartlarının üstüne biniyordu — mobilde açıklama metni de ortadan kırpılıyordu. `pages.css` içe aktarma boru hattıyla YENİDEN ÜRETİLİR, bu yüzden düzeltme oraya değil buraya yazılır (bu dosya kaynak katmanından SONRA yüklenir). ───────────────────────────────────────────────────────────────────────────── */ .hosting-package { height: auto; min-height: 0; /* Kart, sütununun tamamını doldurur → aynı satırdaki kartlar EŞİT boyda görünür. */ display: flex; flex-direction: column; } /* Özellik listesi kartın altına yapışır; fiyat blokları farklı uzunlukta olsa da "Detaylar" düğmeleri aynı hizada kalır. */ .hosting-package .package-detail { margin-top: auto; } .section-hosting .row > .col { display: flex; } .section-hosting .row > .col > .hosting-package { width: 100%; } /* SATIR BAŞINA KART SAYISI. `.col` varsayılanı "satırı eşit böl"dür: 11 paket 7+4 diye kırılıyor, ilk satır okunamayacak kadar dar, ikinci satır gereksiz geniş oluyordu. Kart genişliği artık ekrana göre sabit; kaç paket olursa olsun aynı boyda diziliyor. */ .section-hosting .row { justify-content: center; } .section-hosting .row > .col { flex: 0 0 auto; width: 100%; } @media (min-width: 576px) { .section-hosting .row > .col { width: 50%; } } @media (min-width: 992px) { .section-hosting .row > .col { width: 33.3333%; } } @media (min-width: 1200px) { .section-hosting .row > .col { width: 25%; } } /* ----------------------------------------------------------------------------- MOBİLDE SÜTUNLAR ÇÖKMÜYORDU — en ağır yerleşim kusuru ----------------------------------------------------------------------------- `pages.css` kaynaktan olduğu gibi taşınırken `.col-lg-6 { width:50% }` kuralını MEDYA SORGUSU OLMADAN yazıyor (L2098). `pages.css`, `bootstrap.css`'ten SONRA yüklendiği için Bootstrap'ın `@media (min-width:992px)` içindeki aynı kuralını HER genişlikte eziyordu. Ölçüldü (390px ekran, /tr/linux-hosting): `.col-lg-6` = 195px — yani ekranın tam yarısı. Sonuç: kategori hero başlıkları telefonda 195px'lik bir sütunda 7 satıra iniyor, ekranın sağ yarısı bomboş kalıyor; SSL sayfasında metin `overflow:hidden` ile gerçekten KESİLİYOR. Bootstrap'ın kendi davranışı geri getirilir: `lg` altında tam genişlik. ---------------------------------------------------------------------------- */ @media (max-width: 991.98px) { .col-lg-6 { width: 100%; } } /* ----------------------------------------------------------------------------- HERO SABİT 400px — içerik az olduğunda yarısı boş kalıyordu ----------------------------------------------------------------------------- `pages.css` `.section-banner .banner-text`e sabit `height:400px` veriyor ve `site.css`'in `@media(max-width:992px){height:auto}` kuralını eziyor (sonra yüklendiği için). Ölçüldü: hero yüksekliği 1920'de de 390'da da 460px. `/tr/hosting` gibi yalnız başlık taşıyan bir sayfada 844px'lik telefon ekranının yarısından fazlası boş kalıyor. `height` yerine `min-height`: dolu hero eskisi gibi görünür, boş hero içeriği kadar yer kaplar. ---------------------------------------------------------------------------- */ .section-banner .banner-text { height: auto; min-height: 240px; padding: 32px 0; } @media (min-width: 992px) { .section-banner .banner-text { min-height: 400px; } } /* ----------------------------------------------------------------------------- KIRINTI YOLU EKRAN GENİŞLİĞİNDE BİR KATMAN ÜRETİYORDU ----------------------------------------------------------------------------- `site.css` `.main-breadcrumb`e `position:absolute; width:100%` veriyor; konumlanmış atası `.section-banner` olduğu için kutu ekran genişliğine açılıyor ve gutter kadar (15px×2) sağa taşıyor. `.section-banner`in `overflow:hidden`'ı görüntüyü gizliyor ama tıklanabilir katman sayfa boyunca duruyordu. ---------------------------------------------------------------------------- */ .section-banner .main-breadcrumb { position: relative; width: auto; } /* ----------------------------------------------------------------------------- KART IZGARASINDA BOŞLUK YOKTU — SSL'de satırlar ÜST ÜSTE biniyordu ----------------------------------------------------------------------------- Kart genişliğini `.col`a biz verdik (aşağıdaki blok), ama boşluğu tanımlamadık: ölçümde yatay aralık 8px, dikey aralık 1–2px, SSL sayfasında ikinci satır birinciyi 12px ÖRTÜYORDU. Kartlar tek bir beyaz levha gibi görünüyordu. Boşluk `gap` ile değil `padding` ile verilir: `.row`un kaynaktan gelen -15px kenar boşluğu sütun padding'i varsayar; `gap` eklemek o hizalamayı bozardı. ---------------------------------------------------------------------------- */ .section-hosting .row > .col { padding: 0 12px; margin-bottom: 24px; } /* ----------------------------------------------------------------------------- `.row` NEGATİF KENAR BOŞLUĞU TELAFİSİZ KALAN KAPSAYICILAR ----------------------------------------------------------------------------- `pages.css` `.row { margin: 0 -15px }` yazıyor; sütunları olmayan kapsayıcılarda bu 30px'lik bir taşma üretiyor (ölçüldü: `.tab-content`, `.shs-group-panel`, `.package-order` her genişlikte 15px). Kırpılıyor ama içerik kenara yapışıyor. ---------------------------------------------------------------------------- */ .section-tabs .tab-content, .shs-group-panel, .package-order { max-width: 100%; } /* ----------------------------------------------------------------------------- PAKET AÇIKLAMASI MOBİLDE CÜMLE ORTASINDA KESİLİYORDU ----------------------------------------------------------------------------- `pages.css` `.desc`e `min-height:90px` + `overflow:hidden` veriyor. Telefonda kartlar 2'şer dizildiği için kart genişliği 172px'e düşüyor ve açıklama 159px'e çıkıyor → görünen 90px, gerisi kayboluyor ("…için hızlı" diye bitiyor). Küçük ekranda yükseklik serbest bırakılır: kart uzar, cümle tamamlanır. ---------------------------------------------------------------------------- */ @media (max-width: 991.98px) { .hosting-package .package-main .desc { min-height: 0; overflow: visible; } .hosting-package .package-main .icon { height: auto; overflow: visible; } } /* ----------------------------------------------------------------------------- KARŞILAŞTIRMA TABLOSUNDA DEĞERLER SATIR ÇİZGİSİNE TAŞIYORDU ----------------------------------------------------------------------------- `pages.css` satır yüksekliğini 44px'e sabitliyor; "2048 GB NVMe SSD" gibi uzun değerler 48–57px yer istiyor ve `overflow:visible` olduğu için bir alttaki satırın üstüne biniyor. ---------------------------------------------------------------------------- */ .comparison__table .item__detail .item__row { height: auto; min-height: 44px; } .comparison__table .item__detail .item__row .column-right .column { height: auto; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 6px 4px; } /* ----------------------------------------------------------------------------- MOBİLDE DOKUNMA HEDEFLERİ ÇOK KÜÇÜKTÜ ----------------------------------------------------------------------------- Ölçüldü (390px): footer bağlantıları 16px, iletişim bağlantıları 24px, sipariş formundaki radyo/onay kutuları 13×13px yükseklikteydi. Parmakla isabet ettirmek zor; sipariş formundaki kutular DÖNÜŞÜM yolunda. ---------------------------------------------------------------------------- */ @media (max-width: 991.98px) { footer .foot-link ul li a, .foot-contact > a { display: inline-flex; align-items: center; min-height: 40px; } .field input[type='radio'], .field input[type='checkbox'], .addon-field input[type='checkbox'] { width: 20px; height: 20px; } label.opt, .addon-field label { min-height: 40px; display: flex; align-items: center; gap: 8px; } }