/* ===================================================================== CLASSIC — HABERPORT Tasarım kaynağı: "C1 - anasayfa.html" (Stitch AI / Tailwind) Tailwind CDN'den Bootstrap 5.3'e taşındı. Tasarımın tamamı burada ÜÇ katmanda duruyor: 1) Token'lar — Stitch'in tailwind.config'indeki renk, tipografi ve boşluk değerleri birebir CSS değişkeni oldu. 2) Bootstrap — ızgara, kart, tablo, form Bootstrap'in kendisi. 3) Bileşenler — Tailwind yardımcı sınıflarının karşılığı olan az sayıda tema sınıfı (.hp- öneki). NEDEN `.hp-` ÖNEKİ Bootstrap'in kendi sınıflarıyla çakışmasın ve bir sınıfın temaya mı Bootstrap'e mi ait olduğu tek bakışta anlaşılsın. ===================================================================== */ /* ===================================================================== 1. TOKEN'LAR ===================================================================== */ :root { /* ---- Renkler: tailwind.config'den birebir ---- */ --hp-primary: #9e001f; --hp-primary-container: #c8102e; --hp-on-primary: #ffffff; --hp-primary-fixed: #ffdad8; --hp-primary-fixed-dim: #ffb3b1; --hp-on-primary-container: #ffdad8; --hp-on-primary-fixed-variant: #92001c; --hp-secondary: #006c4c; --hp-on-secondary: #ffffff; --hp-secondary-container: #95f2c7; --hp-secondary-fixed-dim: #7cd8af; /* Stitch config'inde vardı, atlanmıştı */ --hp-on-secondary-container: #00714f; --hp-tertiary: #004a9c; --hp-on-tertiary: #ffffff; --hp-tertiary-container: #1e62bf; --hp-tertiary-fixed-dim: #acc7ff; --hp-error: #ba1a1a; --hp-on-error: #ffffff; --hp-surface: #f8f9ff; --hp-on-surface: #191c20; --hp-on-surface-variant: #5c403f; --hp-on-background: #191c20; /* Yüzey basamakları: bölümler bunlarla ayrılıyor (beyaz / açık gri dönüşümlü). Tasarımın ritmi buna dayanıyor. */ --hp-surface-lowest: #ffffff; --hp-surface-low: #f2f3f9; --hp-surface-container: #eceef3; --hp-surface-high: #e6e8ee; --hp-surface-highest: #e1e2e8; --hp-surface-variant: #e1e2e8; --hp-inverse-surface: #2e3135; --hp-inverse-on-surface: #eff0f6; --hp-outline: #906f6e; --hp-outline-variant: #e5bdbb; /* ---- Tipografi ---- */ --hp-font-headline:"Poppins","Barlow Condensed", "Arial Narrow", system-ui, sans-serif; --hp-font-headline-title:"Barlow Condensed", "Arial Narrow", system-ui, sans-serif; --hp-font-body: "Poppins","Source Sans 3", -apple-system, "Segoe UI", Roboto, sans-serif; --hp-fw-600 : 600; --hp-fw-700 : 700; --hp-fw-800 : 800; --hp-fw-900 : 900; /* POPPINS Ayarları */ --hp-fs-hp-sub2-title : 19px; --hp-fs-hp-h-sm : 16px; --hp-fs-hp-hero : 48px; --hp-fs-hp-lead : 18px; --hp-fs-hp-title : 20px; --hp-fs-top_content_title : 19px; --hp-fs-hp-h-md : 24px; --hp-fs-gallery-title : 22px; --hp-fs-hp-sm : 14px; --hp-fs-article-title : 14px; --hp-fs-hp-nav-link : 16px; --hp-fs-video-title : 18px; --hp-fs-hp-h-lg: 25px; /* --hp-fs-hp-sub2-title : 23px; --hp-fs-hp-h-sm : 22px; --hp-fs-hp-hero : 48px; --hp-fs-hp-lead : 18px; --hp-fs-hp-title : 24px; --hp-fs-top_content_title : 19px; --hp-fs-hp-h-md : 28px; --hp-fs-gallery-title : 26px; --hp-fs-hp-sm : 14px; --hp-fs-article-title : 14px; --hp-fs-hp-nav-link : 22px; --hp-fs-video-title : 18px; --hp-fs-hp-h-lg : 36px; */ /* ---- Boşluk ölçeği ---- */ --hp-space-1: 4px; --hp-space-2: 8px; --hp-space-3: 12px; --hp-space-4: 16px; --hp-space-6: 24px; --hp-space-8: 32px; --hp-space-12: 48px; --hp-space-16: 64px; --hp-max-width: 1280px; --hp-gutter: 20px; --hp-margin: 32px; /* ---- Köşe yarıçapı ---- DİKKAT: tasarım BİLEREK köşesiz sayılır. Stitch config'inde rounded-lg = 0.25rem (4px), DEFAULT = 0.125rem (2px). Bootstrap'in varsayılanı 0.375rem; olduğu gibi bırakılsaydı tema yumuşar ve "gazete" havasını kaybederdi. */ --hp-radius: 2px; --hp-radius-lg: 4px; --hp-radius-xl: 8px; /* Bootstrap'in kendi değişkenlerini de tema tarafına çekiyoruz ki .btn, .card, .form-control gibi hazır bileşenler uyumlu çıksın. */ --bs-body-font-family: var(--hp-font-body); --bs-body-color: var(--hp-on-surface); --bs-body-bg: var(--hp-surface); --bs-border-radius: var(--hp-radius); --bs-border-radius-sm: var(--hp-radius); --bs-border-radius-lg: var(--hp-radius-lg); --bs-border-radius-xl: var(--hp-radius-xl); --bs-primary: var(--hp-primary); --bs-link-color: var(--hp-primary); --bs-link-hover-color: var(--hp-on-primary-fixed-variant); } /* ===================================================================== 2. TABAN ===================================================================== */ html, body { margin: 0; padding: 0; } body { background: var(--hp-surface); color: var(--hp-on-surface); font-family: var(--hp-font-body); font-size: 16px; line-height: normal; -webkit-font-smoothing: antialiased; overscroll-behavior: none; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } .shadow-hp{ box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 1px !important;} /* --------------------------------------------------------------------- KAYDIRMA ÇUBUĞU Stitch çıktısında `::-webkit-scrollbar { display:none }` + `* { scrollbar-width:none }` vardı ve olduğu gibi alınmıştı. Sonuç: sayfada HİÇ kaydırma çubuğu görünmüyordu. Bu kabul edilemez: · Kullanıcı sayfanın ne kadar uzun olduğunu ve nerede olduğunu göremiyor — uzun bir ana sayfada en çok ihtiyaç duyulan ipucu. · Çubuğu sürükleyerek gezinme tamamen kayboluyor. · Erişilebilirlik açısından görsel bir gösterge eksiliyor. Artık dikey çubuk GÖRÜNÜYOR, yalnızca temaya uygun biçimde inceltildi. Gizleme yalnızca YATAY şeritlerde kaldı: orada çubuk işlevsel değil, içerik zaten dokunarak ya da düğmelerle geziliyor. `scrollbar-gutter: stable` — çubuk belirip kaybolduğunda sayfanın yatayda oynamasını engelliyor (kısa sayfadan uzun sayfaya geçişte CLS kaynağı). --------------------------------------------------------------------- */ html { scrollbar-gutter: stable; } * { scrollbar-width: thin; scrollbar-color: var(--hp-outline-variant) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--hp-surface-low); } ::-webkit-scrollbar-thumb { background: var(--hp-outline-variant); border-radius: 999px; border: 2px solid var(--hp-surface-low); } ::-webkit-scrollbar-thumb:hover { background: var(--hp-outline); } /* Yatay şeritlerde gizli: numara çubuğu ve mobil sürmanşet. */ .hp-pager, .hp-subhead-items { scrollbar-width: none; } .hp-pager::-webkit-scrollbar, .hp-subhead-items::-webkit-scrollbar { display: none; } /* Sayfa gövdesi sabit başlığın altından başlasın. Başlık üç katlı: 40px üst şerit + 64px ana bar + 40px son dakika. */ /* padding-top KALDIRILDI: başlık artık sticky, akışta kendi yerini kaplıyor. Boşluk bırakmak içeriği ikinci kez aşağı iterdi. */ .hp-main { min-height: 100vh; } /* Ortak kap — Bootstrap'in .container'ı 1320px'e çıkıyor, tasarım 1280px'de sabit. */ .hp-wrap { max-width: var(--hp-max-width); margin-inline: auto; padding-inline: var(--hp-margin); } /* Izgara boşluğu tasarımda 20px (Bootstrap varsayılanı 24px). */ .hp-row { --bs-gutter-x: var(--hp-gutter); --bs-gutter-y: var(--hp-gutter); } .hp-section { padding-block: var(--hp-space-12); } .hp-section-sm { padding-block: var(--hp-space-8); } .hp-section-xs { padding-block: var(--hp-space-6); } /* ===================================================================== 3. TİPOGRAFİ — Stitch fontSize tablosunun birebir karşılığı ===================================================================== */ .hp-hero, .hp-h-lg, .hp-h-md, .hp-h-sm, .hp-badge { font-family: var(--hp-font-headline); } .hp-hero { font-size: var(--hp-fs-hp-hero); line-height: 56px; letter-spacing: -.02em; font-weight: 700; font-family:var(--hp-font-headline-title) !important; } .hp-h-lg { font-size: var(--hp-fs-hp-h-lg); line-height: 42px; letter-spacing: -.01em; font-weight: 700; } .hp-h-md { font-size: var(--hp-fs-hp-h-md); line-height: 34px; letter-spacing: -.005em; font-weight: 600; } .hp-h-sm { font-size: var(--hp-fs-hp-h-sm); line-height: 28px; font-weight: 600; } .hp-title { font-family: var(--hp-font-body); font-size: var(--hp-fs-hp-title); line-height: 27px; font-weight: 700; } .video-title { font-family: var(--hp-font-body); font-size: var(--hp-fs-video-title) !important; line-height: 27px; font-weight: 700; } .hp-lead { font-family: var(--hp-font-body); font-size: var(--hp-fs-hp-lead); line-height: 30px; font-weight: 400; } .hp-body { font-family: var(--hp-font-body); font-size: 16px; line-height: 26px; font-weight: 400; } .hp-sm { font-family: var(--hp-font-body); font-size: var(--hp-fs-hp-sm); line-height: 22px; font-weight: 400; } .hp-cap { font-family: var(--hp-font-body); font-size: 12px; line-height: 16px; font-weight: 500; } /* Mobil kırılımı — Stitch'te ayrı token'dı (headline-hero-mobile vb.) */ @media (max-width: 767.98px) { .hp-hero { font-size: 32px; line-height: 38px; letter-spacing: -.01em; } .hp-h-lg { font-size: 26px; line-height: 32px; letter-spacing: -.01em; } .hp-h-md { font-size: 24px; line-height: 30px; } /* Mobil telafi de gereksiz — sticky başlık zaten yer kaplıyor. */ } .hp-upper { text-transform: uppercase; } /* Satır kırpma — Tailwind line-clamp karşılığı */ .hp-clamp-1, .hp-clamp-2, .hp-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .hp-clamp-1 { -webkit-line-clamp: 1; } .hp-clamp-2 { -webkit-line-clamp: 2; } .hp-clamp-3 { -webkit-line-clamp: 3; } /* ===================================================================== 5. ROZETLER ===================================================================== */ .hp-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; line-height: 14px; letter-spacing: .04em; font-weight: 700; text-transform: uppercase; padding: 4px 8px; border-radius: var(--hp-radius); white-space: nowrap; } .hp-badge-sm { font-size: 11px; padding: 2px 6px; } .hp-badge-primary { background: var(--hp-primary); color: var(--hp-on-primary); } .hp-badge-container { background: var(--hp-primary-container); color: var(--hp-on-primary); } .hp-badge-secondary { background: var(--hp-secondary); color: var(--hp-on-secondary); } .hp-badge-tertiary { background: var(--hp-tertiary); color: var(--hp-on-tertiary); } .hp-badge-tertiary-c{ background: var(--hp-tertiary-container); color: var(--hp-on-tertiary); } .hp-badge-error { background: var(--hp-error); color: var(--hp-on-error); } .hp-badge-neutral { background: var(--hp-on-surface-variant); color: var(--hp-surface-lowest); } .hp-badge-glass { background: rgba(25,28,32,.8); color: #fff; backdrop-filter: blur(4px); } .hp-badge-black { background: rgba(0,0,0,.7); color: #fff; } /* Bölüm başlığındaki renkli dikey çubuk */ .hp-bar { width: 10px; height: 32px; border-radius: 999px; flex: 0 0 auto; } .hp-bar-thin { width: 6px; } /* Nabız / yanıp sönen nokta */ .hp-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; } .hp-ping { animation: hp-ping 1.6s cubic-bezier(0,0,.2,1) infinite; } .hp-pulse { animation: hp-pulse 2s cubic-bezier(.4,0,.6,1) infinite; } @keyframes hp-ping { 0% { transform: scale(1); opacity: 1 } 75%,100% { transform: scale(1.9); opacity: 0 } } @keyframes hp-pulse { 0%,100% { opacity: 1 } 50% { opacity: .4 } } /* ===================================================================== 6. GÖRSEL ÇERÇEVESİ Tailwind'de `aspect-video` + `object-cover` + `group-hover:scale-105` üçlüsüyle yapılıyordu. Burada tek sınıf. ===================================================================== */ .hp-media { position: relative; overflow: hidden; border-radius: var(--hp-radius-lg); } .hp-media > img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .hp-media-16x8 { aspect-ratio: 16/8; } .hp-media-16x9 { aspect-ratio: 16/9; } .hp-media-16x96 { aspect-ratio: 16/9.6; } .hp-media-16x10 { aspect-ratio: 16 / 10; } .hp-media-16x11 { aspect-ratio: 16 / 11; } .hp-media-4x3 { aspect-ratio: 4/3; } .hp-media-1x1 { aspect-ratio: 1/1; } .hp-card:hover .hp-media > img, .hp-media:hover > img { transform: scale(1.05); } /* Görsel üstündeki metin için karartma */ .hp-scrim { position: absolute; inset: 0; background: linear-gradient(to top, var(--hp-on-background) 0%, rgba(25,28,32,.5) 45%, transparent 100%); } .hp-scrim-soft { position: absolute; inset: 0; background: linear-gradient(to top, rgba(25,28,32,.9) 0%, rgba(25,28,32,.3) 45%, transparent 100%); } .hp-overlay-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; } /* ===================================================================== 7. KARTLAR ===================================================================== */ .hp-card { background: var(--hp-surface-lowest); border-radius: var(--hp-radius-lg); box-shadow: 0 1px 2px rgba(0,0,0,.05); overflow: hidden; transition: box-shadow .2s ease, background-color .2s ease; display: flex; flex-direction: column; height: 100%; } .hp-card:hover { box-shadow: 0 4px 10px rgba(0,0,0,.08); } .hp-card-low { background: var(--hp-surface-low); } .hp-card-low:hover { background: var(--hp-surface-container); } /* Başlık rengi kartın üzerine gelince değişiyor */ .hp-card:hover .hp-hl { color: var(--hp-primary); } .hp-hl { transition: color .2s ease; } .hp-link-muted { color: var(--hp-on-surface-variant); transition: color .2s ease; } .hp-link-muted:hover { color: var(--hp-primary); } /* ===================================================================== 8. BAŞLIK (header) ===================================================================== */ /* STICKY, FIXED DEĞİL — düzeltildi 06.09.2026 `fixed` iken başlık akıştan çıkıyordu ve altındaki içeriği .hp-main üzerindeki SABİT bir padding telafi ediyordu. İki sayı tutmuyordu: başlığın gerçek yüksekliği 160px (40 üst şerit + 80 bar + 40 son dakika) telafi 80px Sonuç: HER sayfada içeriğin üstünden 80px başlığın altında kalıyordu (mobilde 16px). Anasayfada ilk blok tam genişlik bir görsel olduğu için göze batmıyordu; kategori sayfasında ekmek kırıntısı ile H1 tamamen kaybolunca ortaya çıktı — ölçüldü, tahmin değil. Sabit sayıyı düzeltmek yetmezdi: son dakika şeridi haber yoksa hiç basılmıyor, üst şerit mobilde gizli, yani yükseklik duruma göre değişiyor. `sticky` başlığı AKIŞTA bırakıyor; kendi yerini kaplıyor, telafiye gerek kalmıyor ve hangi parça basılırsa basılsın doğru çalışıyor. Kaydırma davranışı birebir aynı. */ .hp-header { position: sticky; top: 0; z-index: 1030; background: var(--hp-surface-lowest); box-shadow: 0 1px 8px rgba(0,0,0,.04); } .hp-topbar { background: var(--hp-surface-low); height: 40px; } .hp-navbar { height: 92px; } .hp-tickerbar { background: var(--hp-primary); height: 40px; } /* .hp-logo-mark / .hp-logo-text KALDIRILDI — tasarım şablonundaki yazıyla yapılmış "HABER|PORT" logosunun sınıflarıydı. Üst bar çoktan $setting['site_logo'] basıyordu; son kullanan yer alt bilgiydi, o da artık gerçek logoyu basıyor. Hiçbir işaretleme bu sınıfları kullanmıyor (tema genelinde arandı). */ .hp-nav-link { padding: 8px 12px; font-family: var(--hp-font-headline); font-size: var(--hp-fs-hp-nav-link); line-height: 28px; font-weight: 600; text-transform: uppercase; letter-spacing: -0.02em; color: var(--hp-on-surface); border-radius: var(--hp-radius); transition: color .2s ease, background-color .2s ease; } .hp-nav-link:hover { color: var(--hp-primary); } .hp-nav-link.active { background: var(--hp-primary); color: var(--hp-on-primary); } .hp-icon-btn { border: 0; background: transparent; padding: 8px; color: var(--hp-on-surface-variant); line-height: 0; transition: color .2s ease; } .hp-icon-btn:hover { color: var(--hp-on-surface); } /* .hp-avatar KALDIRILDI — uyelik sistemi yok, giris ikonu da yok. */ /* Eski yatay kayan şerit (marquee) KALDIRILDI — yerine dikey slider geldi, aşağıdaki SON DAKİKA ŞERİDİ bölümüne bakın. */ /* Hareket azaltma tercihi: kayan yazı ve nabızlar durur. */ @media (prefers-reduced-motion: reduce) { .hp-ping, .hp-pulse { animation: none; } .hp-media > img { transition: none; } } /* ===================================================================== 9. MANŞET NUMARA ÇUBUĞU --------------------------------------------------------------------- TÜM KUTULAR EŞİT GENİŞLİKTE — aktif olan dahil. İlk hâlde pasif düğmeler `flex: 1`, aktif olan `flex: 0 0 40px` idi. Aktif düğme yer değiştirdikçe genişlikler yeniden dağılıyor, dolayısıyla BÜTÜN RAKAMLAR kayıyordu; üzerine gelme alanı ile seçili alan da örtüşmüyordu. Artık ölçü hiç değişmiyor: `flex: 1 1 0` + `min-width` ile hepsi aynı. Aktiflik YALNIZCA renkle belli oluyor. `min-width` dar ekranda devreye giriyor: 15 kutu 358px genişliğe sığmaz, çubuk yatayda kaydırılabilir hâle geliyor (kaydırma çubuğu zaten gizli). ===================================================================== */ .hp-pager { background: var(--hp-surface-low); border-radius: var(--hp-radius-lg); padding: 8px; display: flex; align-items: center; gap: 4px; box-shadow: inset 0 2px 4px rgba(0,0,0,.05); overflow-x: auto; -webkit-overflow-scrolling: touch; } .hp-pager button { flex: 1 1 0; min-width: 40px; height: 36px; padding: 0; border: 0; background: transparent; font-family: var(--hp-font-headline); font-size: 22px; font-weight: 600; color: var(--hp-on-surface-variant); border-radius: var(--hp-radius); transition: background-color .2s ease, color .2s ease; } .hp-pager button:hover { background: var(--hp-surface-container); color: var(--hp-on-surface); } .hp-pager button.active { background: var(--hp-primary); color: var(--hp-on-primary); font-weight: 700; } .hp-pager button.active:hover { background: var(--hp-primary); color: var(--hp-on-primary); } /* ===================================================================== 10. AKIŞ (son dakika) — zaman damgalı dikey liste ===================================================================== */ .hp-feed-item { background: var(--hp-surface-lowest); border-radius: var(--hp-radius-lg); padding: var(--hp-space-4); display: flex; gap: var(--hp-space-4); align-items: flex-start; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: box-shadow .2s ease; } .hp-feed-item:hover { box-shadow: 0 3px 8px rgba(0,0,0,.07); } .hp-feed-time { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; font-family: var(--hp-font-headline); font-size: 22px; line-height: 28px; font-weight: 700; } /* ===================================================================== 11. REKLAM YUVASI — CLS korumalı Yükseklik SABİT: reklam geç gelirse sayfa zıplamasın. ===================================================================== */ /* .hp-ad-300x600 KALDIRILDI — ortak .hp-ad bilesenine tasindi (bkz. REKLAM ENVANTERI). */ /* YAPIŞKAN YAN ÇUBUK — YALNIZCA MASAÜSTÜ İKİ SÜRÜM OLDU, İLKİ KUTULARI EZİYORDU: önce `max-height: calc(100vh - 184px)` + `overflow-y: auto` vardı. `.hp-sticky` bir FLEX SÜTUN ve flex çocuklarının varsayılanı `flex-shrink: 1` — yani yükseklik sınırı gelince kutular kaydırma çubuğu çıkarmak yerine SIKIŞIYOR. Ölçüldü: yazarlar kutusu 508px yerine 178px'e, e-bülten 295px yerine 186px'e iniyordu; kullanıcı "yarıda kesilmiş" olarak gördü. `scrollHeight === clientHeight` olması taşma değil ezilme olduğunu kanıtladı. ŞİMDİKİ YAKLAŞIM: yükseklik sınırı YOK, iç kaydırma YOK. Yan çubuk sayfayla birlikte normal kayıyor; ALTI ekranın altına dayandığında yapışıyor. Bunu `top`un NEGATİF olmasıyla yapıyoruz ve değeri theme.js §15 ölçüp yazıyor (yükseklik JS'siz bilinemez). JS çalışmazsa `top: 168px` geçerli kalıyor: uzun yan çubukta bu, alt kutuların görünmemesi demek — ama hiçbir şey EZİLMİYOR ve sayfa normal kayıyor. Bozulma güvenli. */ .hp-sticky { position: static; } /* Kutular ASLA sıkışmasın — asıl hatanın kaynağı buydu. */ .hp-sticky > * { flex-shrink: 0; } @media (min-width: 992px) { .hp-sticky { position: sticky; top: var(--hp-yapiskan-ust, 168px); } }.hp-table { width: 100%; font-size: 14px; line-height: 22px; } .hp-table th { font-size: 12px; font-weight: 500; text-transform: uppercase; color: var(--hp-on-surface-variant); padding: 8px 0; font-family: var(--hp-font-body); } .hp-table td { padding: 10px 0; } .hp-table tbody tr { transition: background-color .2s ease; } .hp-table tbody tr:hover { background: var(--hp-surface-container); } .hp-rank { width: 20px; height: 20px; border-radius: 999px; background: var(--hp-surface-highest); color: var(--hp-on-surface); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .hp-rank-1 { background: var(--hp-primary); color: var(--hp-on-primary); } /* ===================================================================== 13. EN ÇOK OKUNANLAR — büyük sıra numarası ===================================================================== */ .hp-num { font-family: var(--hp-font-headline); font-size: 36px; line-height: 1; font-weight: 700; width: 48px; text-align: center; flex: 0 0 auto; color: var(--hp-on-surface-variant); } .hp-num-top { color: var(--hp-primary); } /* ===================================================================== 14. VİDEO KARTI ===================================================================== */ .hp-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.2); transition: background-color .2s ease; } .hp-play:hover { background: rgba(0,0,0,.4); } .hp-play > span { width: 48px; height: 48px; border-radius: 999px; background: rgba(158,0,31,.9); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,.35); transition: transform .2s ease; } .hp-media:hover .hp-play > span { transform: scale(1.1); } .hp-duration { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.8); color: #fff; font-size: 11px; font-weight: 500; padding: 2px 6px; border-radius: var(--hp-radius); } .hp-carousel-btn { width: 36px; height: 36px; border: 0; border-radius: var(--hp-radius); background: var(--hp-on-background); color: var(--hp-inverse-on-surface); display: inline-flex; align-items: center; justify-content: center; transition: background-color .2s ease; } .hp-carousel-btn:hover { background: var(--hp-primary); } /* ===================================================================== 15. ANKET ===================================================================== */ .hp-poll-option { display: block; padding: var(--hp-space-3); background: var(--hp-surface-low); border-radius: var(--hp-radius); cursor: pointer; transition: background-color .2s ease; } .hp-poll-option:hover { background: var(--hp-surface-container); } /* display:block ŞART — satır içidir ve satır içi öğede width/ height uygulanmaz. Bu yüzden ilk koşumda anket çubukları hiç görünmüyordu (ekran görüntüsünde yakalandı). */ .hp-poll-bar { display: block; width: 100%; height: 8px; background: var(--hp-surface-highest); border-radius: 999px; overflow: hidden; } .hp-poll-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--hp-primary); } .hp-poll-option input[type="radio"] { accent-color: var(--hp-primary); cursor: pointer; } /* ===================================================================== 16. DÜĞMELER ===================================================================== */ .hp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: var(--hp-radius); font-family: var(--hp-font-headline); font-size: 17px; line-height: 28px; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; padding: 8px 24px; transition: background-color .2s ease, color .2s ease; } .hp-btn-primary { background: var(--hp-primary); color: var(--hp-on-primary); } .hp-btn-primary:hover { background: var(--hp-primary-container); color: var(--hp-on-primary); } .hp-btn-secondary { background: var(--hp-secondary); color: var(--hp-on-secondary); } .hp-btn-secondary:hover { background: var(--hp-on-secondary-container); color: var(--hp-on-secondary); } .hp-btn-quiet { background: var(--hp-surface-highest); color: var(--hp-on-surface); font-size: 16px; } .hp-btn-quiet:hover { background: var(--hp-outline-variant); } .hp-input { border: 0; outline: 0; border-radius: var(--hp-radius); background: var(--hp-surface-highest); color: var(--hp-on-surface); padding: 8px 16px; font-size: 14px; line-height: 22px; width: 100%; } .hp-input::placeholder { color: var(--hp-on-surface-variant); } .hp-input:focus { background: var(--hp-surface-lowest); } /* ===================================================================== 17. MATERIAL SYMBOLS Tasarım bu ikon ailesini kullanıyor. Bootstrap Icons'a çevirmek görünümü değiştirirdi, bu yüzden korundu. ===================================================================== */ /* ===================================================================== İKONLAR — SVG sprite --------------------------------------------------------------------- Material Symbols FONTU KALDIRILDI (4 MB iniyordu, bkz. index.html içindeki sprite notu). Artık her ikon satır içi , kullanım . Boyut `font-size` ile veriliyor ve `em` üzerinden genişliğe/ yüksekliğe dönüşüyor — ms-* sınıfları eskisi gibi çalışsın, işaretlemede başka bir şey değişmesin diye. `fill: currentColor`: ikon, bulunduğu yerin metin rengini alıyor. Font davranışının aynısı, ek sınıf gerekmiyor. ===================================================================== */ .hp-ico { width: 1em; height: 1em; fill: currentColor; flex-shrink: 0; vertical-align: -0.15em; /* metinle aynı hizaya otursun */ font-size: 20px; /* ms-* verilmezse makul varsayılan */ } .ms-13 { font-size: 13px } .ms-14 { font-size: 14px } .ms-15 { font-size: 15px } .ms-16 { font-size: 16px } .ms-18 { font-size: 18px } .ms-20 { font-size: 20px } .ms-22 { font-size: 22px } .ms-24 { font-size: 24px } .ms-26 { font-size: 26px } .ms-28 { font-size: 28px } .ms-48 { font-size: 48px } /* ===================================================================== 18. MOBİL ===================================================================== */ /* --------------------------------------------------------------------- MANŞET KARTI — mobilde 16:9 YETMİYOR 358px genişlikte 16:9 kutu yalnızca 201px yüksek; başlık (32/38) + üstveri oraya sığmıyor ve mutlak konumlu metin görselin DIŞINA taşıp rozetlerin üstüne biniyordu (mobil ekran görüntüsünde yakalandı). 4:5 oran 448px veriyor: üç satır başlık + üstveri rahat sığıyor ve görselin üst yarısı nefes alıyor. Özet mobilde gizleniyor — dar ekranda manşetin işi başlığı okutmak, özeti değil. BU KURAL DOSYANIN SONUNDA OLMAK ZORUNDA: `.hp-media-16x9` ile aynı özgüllükte ve o 6. bölümde tanımlı. Kural yukarıda dursaydı sessizce ezilirdi — ilk denemede tam olarak bu oldu, oran 16:9 kaldı. --------------------------------------------------------------------- */ @media (max-width: 767.98px) { .hp-hero-card { aspect-ratio: 4 / 5; } .hp-hero-card .hp-lead { display: none; } .hp-hero-card h1 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } } @media (max-width: 991.98px) { .hp-wrap { padding-inline: 16px; } .hp-ad-300x600 { margin-inline: auto; } } @media (max-width: 575.98px) { .hp-num { font-size: 28px; width: 36px; } .hp-btn { font-size: 18px; padding: 8px 16px; } } /* .hp-offcanvas KALDIRILDI — soldaki mobil menü artık yok, sağdaki panel kategorileri de taşıyor. */ /* ===================================================================== RENK YARDIMCILARI — BILEREK DOSYANIN SONUNDA Once 4. bolumdeydi ve .hp-card ondan SONRA geliyordu; ikisi de tek sinif oldugu icin cakismada sonraki kazaniyor ve e-bulten kutusunun `hp-card hp-bg-dark` ikilisinde KOYU ZEMIN KAYBOLUYORDU (olculdu: kutu beyaz cikti, acik metin okunamaz haldeydi). Yardimci sinif bir bileseni EZEBILMELI. Ozgulluk artirmak (.hp-card.hp-bg-dark) tek bir vakayi cozerdi; siralamayi duzeltmek hepsini birden cozuyor. ===================================================================== */ .hp-bg-lowestX { background: var(--hp-surface-lowest); } .hp-bg-low { background: var(--hp-surface-low); } .hp-bg-cont { background: var(--hp-surface-container); } .hp-bg-high { background: var(--hp-surface-high); } .hp-bg-highest { background: var(--hp-surface-highest); } .hp-bg-dark { background: var(--hp-inverse-surface); color: var(--hp-inverse-on-surface); } .hp-t-primary { color: var(--hp-primary); } .hp-t-secondary{ color: var(--hp-secondary); } .hp-t-tertiary { color: var(--hp-tertiary); } .hp-t-error { color: var(--hp-error); } .hp-t-muted { color: var(--hp-on-surface-variant); } .hp-t-surface { color: var(--hp-on-surface); } .hp-t-dim { color: var(--hp-surface-variant); } /* ===================================================================== GÖRSEL STANDARDI — .hp-img --------------------------------------------------------------------- TEMANIN BİRİNCİ KURALI: logo ve manşetin ilk slaytı dışında HER görsel tembel yüklenir. Neden data-src DEĞİL, native loading="lazy": · JavaScript çalışmazsa data-src görseli HİÇ göstermez — haber sitesinde kabul edilemez. · Googlebot native lazy'yi doğrudan görür; data-src için sayfayı render etmesini beklemek gerekir. · Kaydırmada JS çalışmaz, tarayıcı kendi halleder. KULLANIM ... İSTİSNA — bunlar ASLA tembel olmaz: logo -> loading="eager" manşetin İLK slaytı -> loading="eager" fetchpriority="high" LCP öğesine loading="lazy" vermek vega temasında ölçüldü: mobil LCP 6,5 sn'den 17,5 sn'ye çıkmıştı. theme.js bir emniyet ağı kuruyor: loading özniteliği yazılmamış her görseli açılışta tembelleştiriyor. Yani unutulsa bile kural işler. ===================================================================== */ .hp-img { /* GRİ YER TUTUCU + PARILTI Görsel inene kadar yeri boş kalmasın: kutu gri duruyor ve üzerinden yavaş bir parıltı geçiyor. Görsel gelince ikisi de kapanıyor. JS KÜTÜPHANESİ KULLANILMADI. Tembel yükleme zaten tarayıcının kendi `loading="lazy"` özelliğiyle yapılıyor; buradaki iş yalnızca GÖRSEL bir dolgu. Kütüphane eklemek istek sayısını azaltmaz, üstüne bir de JavaScript yükü bindirirdi. Kutunun ölçüsü kapsayıcıdan geliyor (aspect-ratio), bu yüzden gri alan görselle tam aynı yeri kaplıyor ve düzen kaymıyor. */ background-color: var(--hp-surface-highest); background-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%); background-size: 220% 100%; background-repeat: no-repeat; animation: hp-parilti 1.6s ease-in-out infinite; } /* Görsel geldi: gri zemin ve parıltı kalkar. */ .hp-img.is-loaded { background: none; animation: none; } @keyframes hp-parilti { from { background-position: 120% 0; } to { background-position: -120% 0; } } /* JS yoksa `is-loaded` hiç eklenmez; gri kutu sonsuza kadar kalmasın. */ .no-js .hp-img { background: none; animation: none; } @media (prefers-reduced-motion: reduce) { .hp-img { animation: none; } } /* ===================================================================== SLIDER — yeniden kullanılabilir, SINIF tabanlı --------------------------------------------------------------------- ID KULLANILMIYOR: aynı sayfada istenildiği kadar slider olabilir, hiçbiri diğerini etkilemez. Her biri kendi kökü içinde çalışır. İSKELET
...
...
(isteğe bağlı)
SEÇENEKLER (data-* ile) data-autoplay="6000" ms; 0 veya yoksa otomatik geçiş yok data-axis="x|y" varsayılan x; y dikey kayar (şerit için) data-loop="false" varsayılan true data-pause-hover="false" varsayılan true Ayrıntı ve davranış: assets/js/theme.js ===================================================================== */ .hp-slider { position: relative; } .hp-slider-viewport { overflow: hidden; width: 100%; } .hp-slider-track { display: flex; transition: transform .55s cubic-bezier(.4, 0, .2, 1); will-change: transform; } .hp-slider[data-axis="y"] .hp-slider-track { flex-direction: column; } /* SLAYT GENİŞLİĞİ — aynı anda kaç tane görüneceğine göre --hp-per-view JavaScript tarafından yazılıyor (ekran kırılımına göre değişebiliyor), varsayılanı 1. Aradaki boşluk formülden düşülüyor; düşülmeseydi beş slayt + dört boşluk viewport'u aşar ve sonuncusu kırpılırdı. Kaydırma adımı çoklu görünümde piksel cinsinden hesaplanıyor (theme.js içindeki ciz fonksiyonu); boşluk ne olursa olsun hizalama doğru kalıyor. */ .hp-slider-track { gap: var(--hp-slide-gap, 0px); } .hp-slide { flex: 0 0 calc((100% - (var(--hp-per-view, 1) - 1) * var(--hp-slide-gap, 0px)) / var(--hp-per-view, 1)); min-width: 0; } .hp-slider[data-axis="y"] .hp-slide { flex: 0 0 auto; width: 100%; } /* Sürükleme sırasında geçiş kapanır, parmak takip edilsin. */ .hp-slider.is-dragging .hp-slider-track { transition: none; } .hp-slider.is-dragging { cursor: grabbing; } /* Otomatik üretilen noktalar */ .hp-slider-dots { display: flex; align-items: center; gap: 6px; } .hp-slider-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--hp-outline-variant); cursor: pointer; transition: background-color .2s ease, width .2s ease; } .hp-slider-dots button[aria-current="true"] { background: var(--hp-primary); width: 20px; } @media (prefers-reduced-motion: reduce) { .hp-slider-track { transition: none; } } /* ===================================================================== SON DAKİKA ŞERİDİ — dikey slider --------------------------------------------------------------------- Önce yatay kayan tek satırdı (marquee). Vega'daki gibi SAAT + BAŞLIK ikilisi hâline getirildi ve haberler teker teker dikey olarak değişiyor: okunabilirlik marquee'den belirgin şekilde iyi, çünkü göz hareket eden metni takip etmek zorunda kalmıyor. ===================================================================== */ .hp-newsbar { flex: 1; min-width: 0; } .hp-newsbar .hp-slider-viewport { height: 40px; } .hp-newsbar .hp-slide { height: 40px; display: flex; align-items: center; gap: var(--hp-space-3); } .hp-newsbar-time { font-family: var(--hp-font-headline); font-weight: 700; font-size: 18px; line-height: 1; color: var(--hp-on-primary); flex: 0 0 auto; letter-spacing: -.01em; } .hp-newsbar-sep { width: 1px; height: 14px; background: var(--hp-outline-variant); flex: 0 0 auto; } .hp-newsbar-title { font-size: 14px; line-height: 22px; color: var(--hp-on-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s ease; } .hp-newsbar a:hover .hp-newsbar-title { color: var(--hp-surface-low); } /* ===================================================================== ARAMA PANELİ — üstten açılan ===================================================================== */ /* Arama katmanı içeriği kadar yüksek olmalı. İşaretlemede `style="height:auto"` vardı ama işe yaramıyordu: öğe `position:fixed` ve hem `top:0` hem `bottom:0` alıyor, bu durumda `height:auto` içerik yüksekliğine değil iki uç arasına (tam ekran) genişliyor. Ölçüldü: içerik 222px, katman 800px. Altındaki boşluk, "Popüler Aramalar" kutusu kaldırılınca iyice göze battı. `bottom:auto` ile bağ kopuyor ve yükseklik gerçekten içeriğe oturuyor. */ .hp-search { border: 0; bottom: auto; height: auto; } .hp-search .offcanvas-body { padding: 0; } .hp-search-inner { max-width: var(--hp-max-width); margin-inline: auto; padding: var(--hp-space-12) var(--hp-margin); } .hp-search-field { display: flex; align-items: center; gap: var(--hp-space-3); border-bottom: 2px solid var(--hp-on-surface); padding-bottom: var(--hp-space-3); } .hp-search-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-family: var(--hp-font-headline); font-weight: 600; font-size: 36px; line-height: 44px; color: var(--hp-on-surface); } /* Yer tutucu --hp-outline-variant (#e5bdbb) ile fazla soluk ve pembeye kaciyordu; arama kutusunda okunmasi gereken bir metin. --hp-outline (#906f6e) hem token ailesinden hem yeterli kontrast. */ .hp-search-field input::placeholder { color: var(--hp-outline); } .hp-search-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: var(--hp-surface-low); color: var(--hp-on-surface-variant); font-size: 14px; line-height: 22px; transition: background-color .2s ease, color .2s ease; } .hp-search-chip:hover { background: var(--hp-primary); color: var(--hp-on-primary); } .author_avatar { width:110px;height:110px } .author-article-title{ font-size:var(--hp-fs-article-title); } .top_content_title{ font-size:var(--hp-fs-top_content_title); } .h-120{ height:120px !important;} .home-gallery-title{ line-height:1.25;color:#fff; font-size:var(--hp-fs-gallery-title); } @media (max-width: 767.98px) { .hp-search-inner { padding: var(--hp-space-6) 16px; } .hp-search-field input { font-size: 24px; line-height: 32px; } } /* ===================================================================== SAĞ PANEL — ekranın %30'u --------------------------------------------------------------------- Yüzde ölçü dar ekranda kullanışsız kalıyor (390px'in %30'u 117px), bu yüzden alt sınır konuldu ve mobilde tam genişliğe çıkıyor. ===================================================================== */ .hp-panel { --bs-offcanvas-width: 30%; min-width: 380px; } @media (max-width: 767.98px) { .hp-panel { --bs-offcanvas-width: 100%; min-width: 0; } } .hp-panel .offcanvas-header { border-bottom: 1px solid var(--hp-outline-variant); padding: var(--hp-space-4) var(--hp-space-6); } .hp-panel .offcanvas-body { padding: var(--hp-space-6); } .hp-panel-section + .hp-panel-section { margin-top: var(--hp-space-6); padding-top: var(--hp-space-6); border-top: 1px solid var(--hp-outline-variant); } .hp-panel-heading { font-family: var(--hp-font-headline); font-weight: 600; font-size: 18px; text-transform: uppercase; letter-spacing: .04em; color: var(--hp-on-surface-variant); margin-bottom: var(--hp-space-3); } .hp-panel-link { display: flex; align-items: center; justify-content: space-between; padding: 10px var(--hp-space-3); border-radius: var(--hp-radius); color: var(--hp-on-surface); font-family: var(--hp-font-headline); font-weight: 600; font-size: var(----hp-fs-hp-h-sm); text-transform: uppercase; transition: background-color .2s ease, color .2s ease; } .hp-panel-link:hover { background: var(--hp-surface-low); color: var(--hp-primary); } /* İçi doldurulmayı bekleyen alan — kullanıcının planı geldiğinde burası değişecek. */ .hp-panel-slot { border: 1px dashed var(--hp-outline-variant); border-radius: var(--hp-radius-lg); padding: var(--hp-space-4); text-align: center; color: var(--hp-on-surface-variant); } /* ===================================================================== SÜRMANŞET BANDI --------------------------------------------------------------------- Header ile manşet arasında duran dar şerit. Dört haber. NEDEN BU DÜZEN Sayfadaki diğer dört kart biçimi zaten kullanılmıştı: · manşet -> büyük 16:9, metin görselin üstünde · yan manşet -> görsel solda, başlık sağda, yuvarlak köşeli kart · öne çıkanlar -> görsel üstte, metin altta · en çok okunan -> büyük sıra numarası + tek satır başlık Beşinci bir kart biçimi icat etmek yerine AYRAÇLI ŞERİT seçildi: gazete sayfasının klasik dili, sayfada başka hiçbir yerde yok ve dikey olarak çok az yer kaplıyor — manşetin baskınlığını bozmuyor. YÜKSEKLİK BİLEREK KÜÇÜK. Bu band manşetin ÜSTÜNDE; büyürse manşeti ekranın altına iter ve sayfanın ilk izlenimi zayıflar. Görseller 72x72 kare, başlık iki satırla sınırlı. LCP: buradaki görseller `loading="lazy"`. Ekranın üstünde oldukları için tarayıcı zaten hemen indiriyor, ama manşetin `fetchpriority=high` görseliyle bant genişliği YARIŞMIYORLAR. Vega'da dört fazladan öncelikli görsel mobil LCP'yi 6,5 sn'den 9 sn'ye çıkarmıştı. ===================================================================== */ .hp-subhead { background: var(--hp-surface-low); /* border-bottom: 1px solid var(--hp-outline-variant); */ margin: 10px 0px; } .hp-subhead-row { display: flex; align-items: stretch; gap: var(--hp-space-4); } /* Sol etiket — dikey yazılmış, dar ve kırmızı. */ .hp-subhead-label { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--hp-primary); color: var(--hp-on-primary); border-radius: var(--hp-radius); padding: var(--hp-space-3) 6px; font-family: var(--hp-font-headline); font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; } .hp-subhead-items { display: flex; flex: 1 1 auto; min-width: 0; } /* AYRAÇ: bandın kimliği. Kart gölgesi/çerçevesi yok, maddeleri birbirinden yalnızca 1px'lik çizgi ayırıyor. */ .hp-subhead-item { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: var(--hp-space-3); padding: var(--hp-space-3) var(--hp-space-4); border-left: 1px solid var(--hp-outline-variant); transition: background-color .2s ease; } .hp-subhead-item:first-child { border-left: 0; } .hp-subhead-item:hover { background: var(--hp-surface-lowest); } .hp-subhead-media { flex: 0 0 auto; width: 72px; height: 72px; border-radius: var(--hp-radius); overflow: hidden; position: relative; } .hp-subhead-media > img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .hp-subhead-item:hover .hp-subhead-media > img { transform: scale(1.08); } .hp-subhead-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .hp-subhead-cat { font-family: var(--hp-font-headline); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; line-height: 1; } .hp-subhead-title { font-family: var(--hp-font-body); font-weight: 700; font-size: 15px; line-height: 20px; color: var(--hp-on-surface); margin: 0; display: -webkit-box; -webkit-box-orient: vertical; /* ÜÇ SATIR: iki satırda başlıklar kelime ortasından kesiliyordu ("... Oksij…"). Metin sütunu 190px; gerçek haber başlıkları için iki satır yetmiyor. Görsel 72px olduğu için üçüncü satır banda yükseklik EKLEMİYOR — öğe yüksekliğini zaten görsel belirliyordu. */ -webkit-line-clamp: 3; overflow: hidden; transition: color .2s ease; } .hp-subhead-item:hover .hp-subhead-title { color: var(--hp-primary); } .hp-subhead-time { font-size: 12px; line-height: 16px; color: var(--hp-on-surface-variant); display: flex; align-items: center; gap: 4px; } /* --------------------------------------------------------------------- MOBİL — yatay kaydırma + hizalama Dört maddeyi alt alta dizmek bandı 4 katına çıkarır ve manşeti ekrandan tamamen atardı. Yatayda kaydırılıp her maddede duruyor (scroll-snap); JavaScript gerekmiyor. --------------------------------------------------------------------- */ @media (max-width: 991.98px) { .hp-subhead-row { flex-direction: column; gap: var(--hp-space-2); } .hp-subhead-label { writing-mode: horizontal-tb; transform: none; align-self: flex-start; padding: 4px 10px; font-size: 13px; } .hp-subhead-items { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .hp-subhead-item { flex: 0 0 84%; scroll-snap-align: start; padding: var(--hp-space-2) var(--hp-space-3); } .hp-subhead-item:first-child { padding-left: 0; } } /* ===================================================================== REKLAM ENVANTERİ --------------------------------------------------------------------- Altı yuva, TEK bileşen. Ölçü `--hp-ad-w` / `--hp-ad-h` ile veriliyor; her yuva için ayrı bir kutu stili yazılmıyor. HEPSİ CLS KORUMALI. Yükseklik önceden ayrılıyor, reklam geç gelse de sayfa zıplamıyor. Reklam sunucusu yavaşladığında düzenin bozulmaması pazarlık konusu değil: Core Web Vitals'ta CLS'i en çok bozan şey ölçüsü bildirilmemiş reklamlardır. YUVALAR hp-ad-masthead 970x250 header'ın altı (en değerli) hp-ad-leaderboard 728x90 bölümler arası hp-ad-halfpage 300x600 yan sütun, yapışkan hp-ad-rail 160x600 içeriğin DIŞINDA sol/sağ ray hp-ad-mobile 320x50 mobilde ekranın altına sabit Her yuvanın mobil karşılığı ayrıca tanımlı: 970px'lik kutuyu 390px ekranda yüzdeye çevirmek yetmez, YÜKSEKLİK de değişmeli yoksa ekranın yarısını boş bir kutu kaplar. ===================================================================== */ .hp-ad { position: relative; width: var(--hp-ad-w, 100%); height: var(--hp-ad-h, 90px); max-width: 100%; flex: 0 0 auto; background: var(--hp-surface-high); border-radius: var(--hp-radius-lg); box-shadow: inset 0 2px 4px rgba(0,0,0,.05); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; color: var(--hp-on-surface-variant); } .hp-ad-label { position: absolute; top: 6px; left: 8px; font-size: 10px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: var(--hp-outline); } .hp-ad-note { font-size: 12px; line-height: 16px; margin: 0; } /* Ortalayıcı sarmalayıcı — bölümler arasına konan yuvalar için. */ .hp-ad-wrap { display: flex; justify-content: center; } /* ---- 970x250 masthead ------------------------------------------- */ .hp-ad-masthead { --hp-ad-w: 970px; --hp-ad-h: 250px; } @media (max-width: 991.98px) { .hp-ad-masthead { --hp-ad-w: 100%; --hp-ad-h: 100px; } } /* ---- 728x90 bölüm arası ------------------------------------------ */ .hp-ad-leaderboard { --hp-ad-w: 728px; --hp-ad-h: 90px; } @media (max-width: 767.98px) { .hp-ad-leaderboard { --hp-ad-w: 100%; --hp-ad-h: 100px; } } /* ---- 300x600 yan sütun ------------------------------------------- */ .hp-ad-halfpage { --hp-ad-w: 300px; --hp-ad-h: 600px; } /* ---- 160x600 SOL/SAĞ RAY — içeriğin dışında ------------------- Vega'da bu alanlar `position:fixed; margin-left:-180px` ile sabitlenmişti ve MEDYA SORGUSU YOKTU: dar ekranda içeriğin üstüne biniyorlardı. Burada raylar ancak GERÇEKTEN YER VARSA görünüyor. Hesap: içerik 1280px, ray 160px, aradaki boşluk 24px. 1280 + 2 x (160 + 24) = 1648px Bu yüzden eşik 1660px. Altında raylar hiç çizilmiyor. ------------------------------------------------------------------ */ .hp-ad-rail { --hp-ad-w: 160px; --hp-ad-h: 600px; position: fixed; top: 180px; /* başlığın (144px) altında kalsın */ z-index: 1020; /* header 1030, offcanvas 1045 */ display: none; } .hp-ad-rail-left { left: calc(50% - 640px - 184px); } .hp-ad-rail-right { left: calc(50% + 640px + 24px); } @media (min-width: 1660px) { .hp-ad-rail { display: flex; } } /* ---- 320x50 MOBİL YAPIŞKAN -------------------------------------- Yalnızca mobilde ve ekranın altında sabit. Kapatma düğmesi ŞART: kapatılamayan yapışkan reklam hem kullanıcıyı kaçırıyor hem de Google'ın "araya giren geçiş reklamı" ölçütüne takılıyor. `body` altına dolgu ekleniyor (theme.js), yoksa şerit alt bilginin son satırını örtüyor. ------------------------------------------------------------------ */ .hp-ad-mobile { --hp-ad-w: 320px; --hp-ad-h: 50px; position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 1035; display: none; border-radius: var(--hp-radius-lg) var(--hp-radius-lg) 0 0; box-shadow: 0 -2px 12px rgba(0,0,0,.12); } @media (max-width: 767.98px) { .hp-ad-mobile { display: flex; } } .hp-ad-mobile.is-closed { display: none !important; } .hp-ad-close { position: absolute; top: -22px; right: 0; width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--hp-radius) var(--hp-radius) 0 0; background: var(--hp-surface-high); color: var(--hp-on-surface-variant); display: flex; align-items: center; justify-content: center; line-height: 0; } /* ===================================================================== YUKARI ÇIK --------------------------------------------------------------------- Sağ altta, standart yer. İki ayrıntı sıradan bir düğmeden ayırıyor: 1) OKUMA İLERLEMESİ HALKASI. Düğmenin çevresi konik bir degrade; dolu kısım sayfanın okunan oranı, `--hp-scroll` (0-100) JavaScript'ten geliyor. Kullanıcı hem "başa dön" düğmesini hem de nerede olduğunu tek öğede görüyor — 8000px'lik bir ana sayfada işe yarıyor. 2) MOBİL YAPIŞKAN REKLAMLA ÇAKIŞMIYOR. Alt boşluk `--hp-bottom-offset` üzerinden hesaplanıyor; reklam görünürken theme.js bu değeri yazıyor, kapatılınca siliyor. Sabit bir `bottom` yazılsaydı reklam kapatıldığında düğme havada kalırdı. Görünme eşiği 400px: daha erken çıkarsa kullanıcı daha okumaya başlamadan ekranı meşgul ediyor. ===================================================================== */ .hp-top { position: fixed; right: 24px; bottom: calc(24px + var(--hp-bottom-offset, 0px)); z-index: 1030; /* header 1030, offcanvas 1045 */ width: 52px; height: 52px; padding: 3px; border: 0; border-radius: 999px; cursor: pointer; /* Halka: dolu kısım okunan oran. */ background: conic-gradient( var(--hp-primary) calc(var(--hp-scroll, 0) * 1%), var(--hp-surface-highest) 0 ); opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9); transition: opacity .25s ease, transform .25s ease, visibility .25s ease, bottom .25s ease; } .hp-top.is-on { opacity: 1; visibility: visible; transform: none; } .hp-top-inner { width: 100%; height: 100%; border-radius: 999px; background: var(--hp-primary); color: var(--hp-on-primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.22); transition: background-color .2s ease; } .hp-top:hover .hp-top-inner { background: var(--hp-primary-container); } .hp-top:focus-visible { outline: 2px solid var(--hp-on-surface); outline-offset: 3px; } @media (max-width: 575.98px) { .hp-top { right: 16px; width: 46px; height: 46px; } } @media (prefers-reduced-motion: reduce) { .hp-top { transition: none; } } /* ===================================================================== SÜRMANŞET B — görsel üstünde yazı --------------------------------------------------------------------- A ile aynı işi yapan ikinci seçenek. Karşılaştırıp birini seçmek için ikisi de sayfada duruyor. A: yatay şerit, 72px kare küçük görsel, yazı yanda, aralarında ayraç B: 4:3 büyük görsel, yazı görselin ÜSTÜNDE TASARIM AYRINTILARI Sayfada bindirmeli metin zaten iki yerde var (manşet ve foto galeri), ikisi de düz karartma kullanıyor. B'nin onlara benzememesi için üç şey eklendi: 1) ALT KENAR ÇUBUĞU. Kartın en altında 4px'lik kategori rengi. Rozet yerine geçiyor — kullanıcı rozet istemedi ama kategori bilgisi kaybolmamalı. Gazete sayfasındaki bölüm çizgisinin karşılığı. 2) KADEMELİ KARARTMA. Düz siyah bindirme fotoğrafı öldürüyor. Üstte tamamen saydam, altta koyu — fotoğrafın üst yarısı olduğu gibi görünüyor. 3) ÜZERİNE GELİNCE BAŞLIK 3px YUKARI. Küçük ama kartın canlı olduğunu hissettiren ayrıntı; karartma da bir tık koyulaşıyor. Yazı okunabilirliği: karartmanın altı %92 opaklıkta. Açık renkli bir fotoğrafta bile beyaz başlık okunur kalıyor — bindirmeli metinde en sık yapılan hata karartmayı yeterince koyu yapmamaktır. ===================================================================== */ .hp-sub2-card { position: relative; display: block; aspect-ratio: 4 / 3.4; border-radius: var(--hp-radius-lg); overflow: hidden; background: var(--hp-inverse-surface); } .hp-sub2-card > img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .hp-sub2-card:hover > img { transform: scale(1.05); } .hp-sub2-scrim { position: absolute; inset: 0; background: linear-gradient( to top, rgba(25, 28, 32, .92) 0%, rgba(25, 28, 32, .70) 28%, rgba(25, 28, 32, .18) 55%, rgba(25, 28, 32, 0) 80% ); transition: opacity .3s ease; } .hp-sub2-card:hover .hp-sub2-scrim { opacity: .88; } .hp-sub2-text { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--hp-space-4); padding-bottom: calc(var(--hp-space-4) + 4px); /* alt çubuk için yer */ transition: transform .3s ease; } .hp-sub2-card:hover .hp-sub2-text { transform: translateY(-3px); } /* Güvenli varsayılan: satır içi stil geçersiz bir token'a düşerse etiket koyu fotoğrafın üzerinde kaybolmasın. */ .hp-sub2-cat { color: #fff; display: block; font-family: var(--hp-font-headline); font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; } .hp-sub2-title { font-family: var(--hp-font-headline); font-weight: 700; font-size: var(--hp-fs-hp-sub2-title); line-height: 26px; letter-spacing: -.01em; color: #fff; margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .hp-sub2-time { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--hp-surface-highest); } /* Kategori rengindeki alt kenar çubuğu — rozetin yerini tutuyor. */ .hp-sub2-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; } @media (max-width: 575.98px) { .hp-sub2-title { font-size: 19px; line-height: 24px; } } /* ===================================================================== TOP MANŞET — tam genişlik şerit --------------------------------------------------------------------- Vega'daki `topheadline` bloğunun karşılığı. Oradaki iki kusur düzeltildi: 1) GÖRSELLER EZİLİYORDU. Vega: `height:220px; width:100%` ve `object-fit` YOK — dikey bir fotoğraf yatay olarak sıkıştırılıp deforme oluyor. Burada `object-fit: cover`. 2) MOBİLDE TAMAMEN GİZLİYDİ (`display:none !important`). İçeriği mobilde yok saymak yerine oran değiştiriliyor: geniş ekranda 1280x260 şerit, dar ekranda 16:9. Müşteri bloğu kapatmak isterse bunu panelden yapar — tema kendi başına içerik gizlemez. Numaralı gezinme sağ altta duruyor; vega'daki `owl-numbers` alışkanlığı korundu ama motor bizim (theme.js -> HpSlider). ===================================================================== */ .hp-topman { position: relative; } .hp-topman .hp-slider-viewport { border-radius: var(--hp-radius-lg); } .hp-topman-slide { position: relative; aspect-ratio: 1280 / 260; overflow: hidden; background: var(--hp-inverse-surface); } .hp-topman-slide > img { width: 100%; height: 100%; object-fit: cover; } .hp-topman-text { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--hp-space-4) var(--hp-space-6); background: linear-gradient(to top, rgba(25,28,32,.88), rgba(25,28,32,0)); } .hp-topman-title { font-family: var(--hp-font-headline); font-weight: 700; font-size: 26px; line-height: 32px; letter-spacing: -.01em; color: #fff; margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /* Numaralı gezinme — sağ altta, şeridin üstünde. */ .hp-topman-nav { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: flex; gap: 4px; } .hp-topman-nav button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--hp-radius); background: rgba(25, 28, 32, .55); color: #fff; font-family: var(--hp-font-headline); font-weight: 700; font-size: 14px; backdrop-filter: blur(3px); transition: background-color .2s ease; } .hp-topman-nav button:hover { background: rgba(25, 28, 32, .8); } .hp-topman-nav button.active { background: var(--hp-primary); } /* Oklar yalnızca üzerine gelince — vega'daki davranış. */ .hp-topman-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; padding: 0; border: 0; background: rgba(25, 28, 32, .55); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s ease, background-color .2s ease; } .hp-topman:hover .hp-topman-arrow { opacity: 1; } .hp-topman-arrow:hover { background: var(--hp-primary); } .hp-topman-arrow.prev { left: 0; border-radius: 0 var(--hp-radius) var(--hp-radius) 0; } .hp-topman-arrow.next { right: 0; border-radius: var(--hp-radius) 0 0 var(--hp-radius); } /* Dokunmatikte hover yok — oklar hep görünsün. */ @media (hover: none) { .hp-topman-arrow { opacity: 1; } } @media (max-width: 991.98px) { .hp-topman-slide { aspect-ratio: 16 / 9; } .hp-topman-title { font-size: 20px; line-height: 26px; } .hp-topman-text { padding: var(--hp-space-3) var(--hp-space-4); } } /* ===================================================================== ÇEREZ BİLGİLENDİRME VE ONAY --------------------------------------------------------------------- TAM EKRAN KAPLAMA DEĞİL, ALT BANT. İki sebep: · Google'ın "araya giren geçiş reklamı" (intrusive interstitial) ölçütü mobilde içeriği kapatan katmanları cezalandırıyor. · Kullanıcı karar vermeden de haberi okuyabilmeli; onay isteği okumanın önüne geçmemeli. RET DÜĞMESİ KABULLE EŞİT AĞIRLIKTA. Reddi küçük gri bir bağlantıya indirmek karanlık desendir; KVKK ve GDPR rehberleri onayın "açık ve özgür irade" ile verilmesini istiyor. İkisi de aynı boyutta, aynı belirginlikte. KAPATMA (X) DÜĞMESİ YOK. Kapatmak "kabul mü ret mi" belirsiz bırakır; belirsiz onay onay değildir. Kullanıcı üç seçenekten birini seçmek zorunda ama bu arada sayfayı okuyabiliyor. ===================================================================== */ .hp-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; /* header 1030, offcanvas 1045 */ background: var(--hp-surface-lowest); border-top: 3px solid var(--hp-primary); box-shadow: 0 -6px 28px rgba(0, 0, 0, .14); transform: translateY(100%); transition: transform .35s cubic-bezier(.2, .7, .3, 1); } .hp-consent.is-on { transform: none; } /* Çerez bandı açıkken mobil yapışkan reklam GÖSTERİLMEZ. Sebep görsel değil hukuki: reklam çerezleri onay gerektiriyor, onay alınmadan reklamı basmak KVKK/GDPR açısından yanlış. Yan faydası, iki bandın ekranın altında üst üste binmesini de engellemesi — ölçüldü, biniyorlardı. */ .hp-consent-acik .hp-ad-mobile { display: none !important; } .hp-consent-inner { max-width: var(--hp-max-width); margin-inline: auto; padding: var(--hp-space-4) var(--hp-margin); display: flex; align-items: center; gap: var(--hp-space-6); } .hp-consent-main { flex: 1 1 auto; min-width: 0; } .hp-consent-title { font-family: var(--hp-font-headline); font-weight: 700; font-size: 20px; line-height: 26px; text-transform: uppercase; letter-spacing: .01em; margin: 0 0 4px; } .hp-consent-text { font-size: 14px; line-height: 21px; color: var(--hp-on-surface-variant); margin: 0; } .hp-consent-text a { color: var(--hp-primary); text-decoration: underline; } .hp-consent-actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--hp-space-2); } /* Üç düğme de aynı yükseklikte; kabul ile ret aynı genişlikte. */ .hp-consent-actions .hp-btn { font-size: 14px; padding: 10px 22px; min-width: 132px; } .hp-btn-ghost { background: transparent; color: var(--hp-on-surface-variant); text-decoration: underline; min-width: 0 !important; } .hp-btn-ghost:hover { color: var(--hp-primary); } .hp-btn-outline { background: transparent; color: var(--hp-on-surface); box-shadow: inset 0 0 0 2px var(--hp-on-surface); } .hp-btn-outline:hover { background: var(--hp-on-surface); color: var(--hp-surface-lowest); } /* ---- Ayrıntı paneli (kategori seçimi) ---------------------------- */ .hp-consent-detail { border-top: 1px solid var(--hp-outline-variant); background: var(--hp-surface-low); } .hp-consent-detail-inner { max-width: var(--hp-max-width); margin-inline: auto; padding: var(--hp-space-4) var(--hp-margin); } .hp-consent-row { display: flex; align-items: flex-start; gap: var(--hp-space-3); padding: var(--hp-space-3) 0; border-bottom: 1px solid var(--hp-outline-variant); } .hp-consent-row:last-of-type { border-bottom: 0; } .hp-consent-row h3 { font-family: var(--hp-font-headline); font-weight: 600; font-size: 17px; line-height: 22px; margin: 0 0 2px; } .hp-consent-row p { font-size: 13px; line-height: 19px; color: var(--hp-on-surface-variant); margin: 0; } .hp-consent-row .form-check.form-switch { flex: 0 0 auto; padding-left: 2.6em; margin: 0; } .hp-consent-row .form-check-input { width: 2.2em; height: 1.2em; margin-left: -2.6em; cursor: pointer; } .hp-consent-row .form-check-input:checked { background-color: var(--hp-primary); border-color: var(--hp-primary); } .hp-consent-row .form-check-input:disabled { opacity: .55; cursor: not-allowed; } /* ---- Mobil ------------------------------------------------------- */ @media (max-width: 767.98px) { .hp-consent-inner { flex-direction: column; align-items: stretch; gap: var(--hp-space-3); padding: var(--hp-space-3) 16px; } .hp-consent-detail-inner { padding: var(--hp-space-3) 16px; } /* Dar ekranda üç düğme yan yana sıkışıyor: ayarlar üste alınıyor, kabul ve ret altta eşit genişlikte yan yana kalıyor. */ .hp-consent-actions { flex-wrap: wrap; } .hp-consent-actions .hp-btn-ghost { order: -1; width: 100%; text-align: center; } .hp-consent-actions .hp-btn:not(.hp-btn-ghost) { flex: 1 1 0; min-width: 0; } .hp-consent-title { font-size: 18px; line-height: 24px; } .hp-consent-text { font-size: 13px; line-height: 19px; } /* Kategori satırında anahtar sağa alınıyor. */ .hp-consent-row { align-items: center; } } @media (prefers-reduced-motion: reduce) { .hp-consent { transition: none; } } /* ===================================================================== REKLAM — DOLU YUVA · SİTE ÖNÜ --------------------------------------------------------------------- Bu blok dosyanın SONUNDA duruyor. `.hp-ad` yukarıda tanımlı ve aynı özgüllükte; buradaki kurallar önce yazılsaydı sessizce ezilirdi. (Aynı tuzağa e-bülten koyu zemini ve mobil manşet oranında düşüldü.) ===================================================================== */ /* Yuvada gerçek reklam varken yer tutucu görünümü kalkıyor: gri zemin ve iç gölge, reklamın kendi zeminiyle çakışıyordu. Ölçü sınıfı (hp-ad-masthead vb.) duruyor, yani ayrılmış yükseklik korunuyor — CLS koruması reklam gelince de geçerli. */ .hp-ad.is-dolu { background: transparent; box-shadow: none; } /* Reklam kodu kutuyu taşırmasın. Reklam ağları çoğu zaman kendi ölçüsünü dayatıyor; taşan iframe yatay kaydırma çubuğu çıkarıyordu. */ .hp-ad.is-dolu > *:not(.hp-ad-label) { max-width: 100%; max-height: 100%; } .hp-ad.is-dolu img, .hp-ad.is-dolu iframe { display: block; max-width: 100%; max-height: 100%; border: 0; } /* "Reklam" etiketi creative'in üstünde kalıyor; okunabilirlik için ince bir zemin. Etiketi tamamen kaldırmak yerine bırakıldı — reklamın reklam olduğunu belirtmek yayıncı sorumluluğu. */ .hp-ad.is-dolu > .hp-ad-label { top: 0; left: 0; padding: 1px 5px; background: rgba(255,255,255,.82); border-radius: 0 0 var(--hp-radius) 0; } /* --------------------------------------------------------------------- SİTE ÖNÜ (yuva 5) — tam ekran geçiş reklamı Vega'daki karşılığı jQuery ile yazılmıştı; burada saf JS (theme.js -> HpSiteOnu). Davranış aynı: 10 saniyelik geri sayım, "Reklamı Geç" düğmesi, kapatınca 1 saatlik çerez. Kapatma düğmesi ve geri sayım ŞART: kapatılamayan tam ekran geçiş reklamı Google'ın "araya giren geçiş reklamı" ölçütüne takılıyor ve mobil aramada sıra kaybettiriyor. --------------------------------------------------------------------- */ .hp-interstitial { position: fixed; inset: 0; z-index: 2000; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 16px; background: rgba(0,0,0,.88); } .hp-interstitial.is-acik { display: flex; } .hp-interstitial-bar { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 970px; justify-content: flex-end; } .hp-interstitial-sec { font-size: 12px; letter-spacing: .04em; color: rgba(255,255,255,.7); } .hp-interstitial-skip { border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: var(--hp-radius); cursor: pointer; } .hp-interstitial-skip:hover { background: rgba(255,255,255,.12); } .hp-interstitial-body { max-width: 100%; max-height: 78vh; overflow: auto; } .hp-interstitial-body img, .hp-interstitial-body iframe { display: block; max-width: 100%; height: auto; border: 0; } /* Anket SONUÇ satırı tıklanabilir değil; oy formundakiyle aynı kutuyu kullanıyor ama imleci ve vurgusu olmamalı — yoksa okur tekrar oy verebileceğini sanıyor. */ .hp-poll-option.is-sonuc { cursor: default; } .hp-poll-option.is-sonuc:hover { background: var(--hp-surface-low); } /* ===================================================================== SPOR ARENA — saha temalı bölüm --------------------------------------------------------------------- Dosyanın SONUNDA: `.hp-card`, `.hp-table`, `.hp-rank` yukarıda tanımlı ve buradaki kurallar onları eziyor. Önce yazılsaydı sessizce kaybolurdu (aynı tuzağa daha önce iki kez düşüldü). RENK TEK YERDEN. Bloğun kök öğesine PHP dört değişken basıyor: --hp-arena-accent vurgu (panelden, ör. #8BC34A) --hp-arena-accent-rgb aynı rengin r,g,b üçlüsü (rgba için) --hp-arena-deep vurgudan türetilmiş koyu zemin --hp-arena-deep2 daha koyusu (gradyanın orta durağı) --hp-arena-on-accent vurgunun ÜSTÜNE yazılacak renk (parlaklığa göre) Böylece panelden tek renk değişince bölümün tamamı — zemin, çizgiler, rozet, sıra numarası, düğme — birlikte dönüyor. `color-mix()` KULLANILMADI: Safari 16.2 ve öncesinde yok. Tonlar PHP'de hesaplanıp değişken olarak basılıyor. ===================================================================== */ .hp-arena { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--hp-space-16); color: #e9f3e0; background: radial-gradient(1000px 460px at 4% -22%, rgba(var(--hp-arena-accent-rgb), .40), transparent 64%), radial-gradient(760px 400px at 97% 118%, rgba(var(--hp-arena-accent-rgb), .26), transparent 62%), linear-gradient(158deg, var(--hp-arena-deep) 0%, var(--hp-arena-deep2) 52%, var(--hp-arena-deep) 100%); } /* Saha deseni. `slice` ile daima kaplıyor; oran korunduğu için dar ekranda çizgiler ezilmiyor, kırpılıyor. */ .hp-arena-art { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--hp-arena-accent); pointer-events: none; z-index: -1; } /* Üst ve alt kenara yumuşak geçiş — koyu bandın sınırı jilet gibi durmasın, komşu açık bölümlere yedirilsin. */ .hp-arena::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.16) 0%, transparent 14%, transparent 88%, rgba(0,0,0,.20) 100%); pointer-events: none; } /* ---- Başlık ---- */ .hp-arena-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--hp-space-4); padding-bottom: var(--hp-space-8); } .hp-arena-title { display: flex; align-items: center; gap: var(--hp-space-3); margin: 0; color: #fff; } .hp-arena-title .hp-bar { background: var(--hp-arena-accent); box-shadow: 0 0 18px rgba(var(--hp-arena-accent-rgb), .55); } .hp-arena-kicker { margin: 6px 0 0 22px; color: rgba(233,243,224,.62); font-size: 13px; line-height: 20px; } .hp-arena-all { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(var(--hp-arena-accent-rgb), .55); color: var(--hp-arena-accent); font-family: var(--hp-font-headline); font-size: 16px; letter-spacing: .04em; text-transform: uppercase; transition: background-color .2s ease, color .2s ease, border-color .2s ease; flex-shrink: 0; } .hp-arena-all:hover { background: var(--hp-arena-accent); border-color: var(--hp-arena-accent); color: var(--hp-arena-on-accent); } /* ---- Kartlar: koyu cam ---- Açık `.hp-card` bu zeminde beyaz bir yama gibi duruyordu. Saydam cam, sahanın deseninin kartın altından geçmesini sağlıyor. */ .hp-arena-card { position: relative; display: flex; flex-direction: column; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.10); border-radius: var(--hp-radius-lg); overflow: hidden; transition: background-color .25s ease, border-color .25s ease, transform .25s ease; } .hp-arena-card:hover { background: rgba(255,255,255,.09); border-color: rgba(var(--hp-arena-accent-rgb), .45); transform: translateY(-2px); } .hp-arena-card .hp-hl { color: #fff; } .hp-arena-card:hover .hp-hl { color: var(--hp-arena-accent); } /* Hero: masaüstünde görsel solda, mobilde tam genişlik. Eskiden inline `max-width:50%` vardı ve mobilde theme.js düzeltiyordu ([data-hp-half]); ölçüyü CSS'e almak o JS bağımlılığını kaldırdı. */ .hp-arena-hero { flex-direction: column; } .hp-arena-hero-media { width: 100%; flex-shrink: 0; border-radius: 0; } .hp-arena-hero-body { display: flex; flex-direction: column; justify-content: space-between; gap: var(--hp-space-4); padding: var(--hp-space-6); flex: 1 1 auto; } @media (min-width: 768px) { .hp-arena-hero { flex-direction: row; } .hp-arena-hero-media { width: 46%; } } /* Küçük kartlar eşit yükseklikte; alt satır dibe yapışıyor, başlıklar farklı uzunlukta olsa da meta satırları hizalı kalıyor. */ .hp-arena-mini { height: 100%; padding: var(--hp-space-3); } .hp-arena-mini .hp-media { margin-bottom: var(--hp-space-3); } .hp-arena-mini-body { display: flex; flex-direction: column; flex: 1 1 auto; gap: var(--hp-space-2); } .hp-arena-mini-meta { margin-top: auto; } /* Rozet: sahanın vurgu rengi, üstünde koyu yazı. Kategori rengi burada BİLEREK kullanılmıyor — bölümün kendi kimliği var; her karta farklı renk rozet koymak sahayı alacalı gösteriyordu. */ .hp-arena-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--hp-arena-accent); color: var(--hp-arena-on-accent); font-family: var(--hp-font-headline); font-size: 13px; line-height: 18px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; } .hp-arena-meta { color: rgba(233,243,224,.62); } .hp-arena-lead { color: rgba(233,243,224,.78); } /* ---- Yan sütun: puan cetveli ---- */ .hp-arena-panel { padding: var(--hp-space-4); gap: var(--hp-space-4); } .hp-arena-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--hp-space-2); padding-bottom: var(--hp-space-3); border-bottom: 1px solid rgba(255,255,255,.10); } .hp-arena-panel-head h3 { color: #fff; margin: 0; display: flex; align-items: center; gap: 8px; } .hp-arena-week { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: rgba(var(--hp-arena-accent-rgb), .16); color: var(--hp-arena-accent); white-space: nowrap; } .hp-arena .hp-table th { color: rgba(233,243,224,.5); border-bottom: 1px solid rgba(255,255,255,.10); } .hp-arena .hp-table td { border-bottom: 1px solid rgba(255,255,255,.055); } .hp-arena .hp-table tbody tr:last-child td { border-bottom: 0; } .hp-arena .hp-table tbody tr:hover { background: rgba(var(--hp-arena-accent-rgb), .10); } .hp-arena .hp-table .hp-t-muted { color: rgba(233,243,224,.55); } .hp-arena .hp-rank { background: rgba(255,255,255,.10); color: #fff; } .hp-arena .hp-rank-1 { background: var(--hp-arena-accent); color: var(--hp-arena-on-accent); box-shadow: 0 0 14px rgba(var(--hp-arena-accent-rgb), .45); } /* ---- Haftanın maçı ---- */ .hp-arena-match { border-radius: var(--hp-radius-lg); padding: var(--hp-space-4); background: linear-gradient(180deg, rgba(var(--hp-arena-accent-rgb), .14), rgba(var(--hp-arena-accent-rgb), .04)); border: 1px solid rgba(var(--hp-arena-accent-rgb), .22); text-align: center; } .hp-arena-match-when { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--hp-arena-accent); margin-bottom: 10px; } .hp-arena-match-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--hp-space-2); font-family: var(--hp-font-headline); font-size: 20px; line-height: 26px; color: #fff; } .hp-arena-match-row > :first-child { text-align: right; } .hp-arena-match-row > :last-child { text-align: left; } .hp-arena-vs { width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--hp-arena-accent); color: var(--hp-arena-on-accent); font-size: 13px; font-weight: 700; letter-spacing: .02em; } .hp-arena-match-where { font-size: 12px; color: rgba(233,243,224,.55); margin-top: 10px; } .hp-arena-btn { display: block; width: 100%; text-align: center; padding: 10px 14px; border-radius: var(--hp-radius); border: 1px solid rgba(255,255,255,.16); background: transparent; color: rgba(233,243,224,.85); font-family: var(--hp-font-headline); font-size: 17px; letter-spacing: .03em; transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .hp-arena-btn:hover { background: rgba(var(--hp-arena-accent-rgb), .14); border-color: rgba(var(--hp-arena-accent-rgb), .45); color: var(--hp-arena-accent); } /* Yer tutucu uyarısı — cetvel gerçek veriye bağlanana kadar. */ .hp-arena-stub { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(233,243,224,.38); text-align: center; } @media (max-width: 991.98px) { .hp-arena { padding-block: var(--hp-space-12); } } @media (max-width: 575.98px) { .hp-arena-head { align-items: flex-start; } .hp-arena-match-row { font-size: 17px; } } /* ===================================================================== E-BÜLTEN KARTI — posta deseni --------------------------------------------------------------------- Zemin olduğu gibi kalıyor (`hp-bg-dark`, antrasit). Üstüne yalnızca bir SVG katmanı biniyor: gradyan YOK, düz renk korunuyor. Katman `z-index:-1` ile içeriğin ALTINDA; `isolation:isolate` bunu karta hapsediyor, yoksa negatif z-index kartın kendi zeminini de delip sayfanın arkasına düşerdi. Dosyanın SONUNDA: `.hp-card` yukarıda tanımlı, buradaki `position: relative` onu tamamlıyor. ===================================================================== */ .hp-nl-card { position: relative; isolation: isolate; /* overflow:hidden zaten .hp-card'da var; desen köşeleri taşırmıyor. */ } .hp-nl-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } /* ===================================================================== KATEGORİ SAYFASI --------------------------------------------------------------------- Sayfanın tamamı Bootstrap ızgarası ve mevcut .hp-* bileşenleriyle kuruldu; burada yalnızca Bootstrap'te karşılığı OLMAYAN üç şey var. ===================================================================== */ /* Akış kartındaki küçük görsel. Bootstrap'te "mobilde tam genişlik, sm'den itibaren sabit 192px" diye hazır bir yardımcı yok. */ .hp-cat-thumb { width: 100%; } @media (min-width: 576px) { .hp-cat-thumb { width: 192px; } } /* Kenar çubuğundaki en çok okunan satırı. Bootstrap'in list-group'u kendi kenarlık/dolgu düzenini dayatıyor; tek satırlık kural daha ucuz. */ .hp-cat-pop { border-radius: var(--hp-radius); transition: background-color .2s ease; } .hp-cat-pop:hover { background: var(--hp-surface-low); } /* Vitrinin yan kartları: yüksekliği flex belirliyor (aspect-ratio YOK). Oran verilseydi kart, sol karttan bağımsız bir yükseklik dayatır ve iki sütun hizasız kalırdı. min-height ise görsel gelmeden önce kutunun çökmesini engelliyor (CLS). */ .hp-cat-yan { min-height: 180px; } /* Resmi ilan tarih seçicisinin "Göster" düğmesi: JS varken gereksiz (input onchange zaten gönderiyor), JS yokken şart.