/* ============================================================ MANSET OVERLAY — ortak dosya Anasayfa manşet slider'ı (templates/bloklar/manset.tpl) ve yönetim panelindeki manşet önizlemesi (admin/templates/mansetler/duzenle.tpl) AYNI bu dosyayı kullanır. Burada yapılan değişiklik her ikisine de yansır. Yüklendiği yerler: - templates/anasayfa.tpl - admin/templates/mansetler/duzenle.tpl (kök yol ile: /assets/css/manset-overlay.css) ============================================================ */ /* ------------------------------------------------------------ Kart yazilari (#manset-JS / .news-card.style-1) 2026-09-23 - beyaz kutucuk yerine alttan siyah gradyan. Duzen: ustte beyaz SPOT, altinda sari BASLIK. Ikisi de tek satir ve gorselin %100 genisligini dolduracak sekilde olceklenir. Font boyutu, yazinin GERCEK genisliginden hesaplanir: --w-title / --w-spot -> metnin em cinsinden genisligi. site.php, DM Sans harf genislik tablosuyla (class/manset-metrics.php) olcup .caption uzerine basar. Karakter sayisi tahmini degil, birebir olcum -> tarayici basligi "…" ile kirpmaz. --dolu-baslik/-spot -> kartin genisliginin yuzde kacini doldursun (95.6 = tam kenar; kenar boslugu icin biraz altinda tutulur) --k-oran -> spot en fazla basligin bu orani kadar buyuk olur --manset-sari -> baslik rengi ------------------------------------------------------------ */ /* position/width normalde home.css'teki .news-card kuralindan gelir; panelde o dosya yuklenmedigi icin burada da tekrarlanir - dosya kendi basina calissin. font-family BURADA acikca verilir: yazi boyutu DM Sans harf genisliklerine gore hesaplaniyor (class/manset-metrics.php). Kart baska bir fontla cizilirse -- ornegin panelin Open Sans'i -- harfler daha genis gelir, yazi kutuya sigmaz ve tarayici sonunu "…" ile kirpar. Sayfa hangi font kullanirsa kullansin kart DM Sans olmali. */ .news-card.style-1{ position:relative; display:block; width:100%; font-family:"DM Sans", system-ui, sans-serif; container-type:inline-size; /* cqw = kartin kendi genisligi */ --dolu-baslik:93; /* baslik kart genisliginin %93'unu doldurur */ --dolu-spot:93; /* spot icin ayni */ --k-oran:.67; /* spot en fazla basligin %67'si kadar olur */ --manset-sari:#ffe000; } .news-card.style-1 > img{ width:100%; max-width:100%; display:block; } .news-card.style-1 .caption{ position:absolute; left:0; right:0; bottom:0; width:100%; box-sizing:border-box; padding:11% 2.2% 2.6%; text-align:center; pointer-events:none; background:linear-gradient(to top, rgba(0,0,0,.89) 0%, rgba(0,0,0,.85) 32%, rgba(0,0,0,.56) 62%, rgba(0,0,0,0) 100%); } .news-card.style-1 .caption .spot, .news-card.style-1 .caption .title{ display:block; width:100%; max-width:100%; white-space:nowrap; /* her zaman tek satir */ overflow:hidden; text-overflow:ellipsis; /* text-transform YOK: buyuk harf cevrimi PHP'de (site::manset_buyuk). Tarayicinin uppercase'i Turkce'de 'i' -> 'I' yapiyordu, 'İ' degil. */ letter-spacing:-.02em; line-height:1.1; /* golge em cinsinden: sabit px verilirse kucuk puntoda orantisiz kalir ve asagidaki dolgu payini asip kirpilir */ text-shadow:0 .03em .08em rgba(0,0,0,.55); /* Ç, Ş, Ğ gibi harflerin alti kesilmesin diye: DM Sans'in harf kutusu 1.322em (fontun OS/2 winAscent+winDescent degeri), line-height ise 1.1 -> harfler satir kutusundan ust/alttan 0.111em tasiyor ve ustteki overflow:hidden tam orayi kirpiyor. overflow PADDING kutusundan kirptigi icin dolgu ekleyip AYNI olcude negatif margin veriyoruz: kirpma alani buyuyor, yerlesim zerre degismiyor (0.2 + 1.1 + 0.2 - 0.4 = 1.1em, oncekiyle ayni). Pay 0.2em: harf tasmasi 0.111em + golge 0.11em icin yeterli. */ padding-top:.2em; padding-bottom:.2em; margin-top:-.2em; margin-bottom:-.2em; } .news-card.style-1 .caption .spot{ color:#fff; font-weight:700; /* ust: -.2 (tasma payi geri alinir), alt: -.2 + .10 = -.10 (eski bosluk korunur) */ margin:-.2em 0 -.1em; font-size:22px; /* yedek: cqw desteklemeyen tarayici */ /* spot da kutuyu doldurur; ama hicbir zaman basligin --k-oran'indan buyuk olmaz */ font-size:clamp(13px, min( calc(var(--dolu-spot) * 1cqw / var(--w-spot,26)), calc(var(--dolu-baslik) * var(--k-oran) * 1cqw / var(--w-title,17)) ), 40px); } .news-card.style-1 .caption .title{ color:var(--manset-sari); font-weight:900; font-size:40px; /* yedek */ font-size:clamp(20px, calc(var(--dolu-baslik) * 1cqw / var(--w-title,17)), 96px); } /* Sira ters cevrildiginde (panelde "Sırayı ters çevir", tbl_mansetler.baslik_ustte) baslik uste, spot alta gecer. Iki satir arasindaki bosluk normalde spot'un alt margin'inde duruyor; ters durumda onu basliga tasiriz. */ .news-card.style-1 .caption.ters .title{ margin-bottom:-.1em; } .news-card.style-1 .caption.ters .spot{ margin-bottom:-.2em; } /* Uzun baslik: iki satira sarar. --w-title zaten satir basina dusen genislik olarak gelir (bkz. site::manset_yazi, MANSET_SAR_ORAN). BILEREK satir sinirlamasi (line-clamp) YOK: yazi iki satira sigmazsa ucuncu satira tasar ve kutu yukari dogru buyur - gradyan da onunla birlikte buyur. Boylece hicbir kelime gizlenmez; MANSET_SAR_ORAN dar kalsa bile veri kaybi olmaz. */ .news-card.style-1 .caption .title.sar{ white-space:normal; overflow:visible; text-overflow:clip; text-wrap:balance; line-height:1.02; } /* eski kategori rozeti kullanilmiyor, dursun */ .news-card.style-1 .caption .category{ position:relative; z-index:1; color:#fff; font-size:14px; font-weight:600; padding:9px 15.5px; margin-bottom:8px; text-transform:uppercase; display:inline-block; border-radius:0px } .news-card.style-1.x2 .caption .category{ font-size:15px } @media (max-width:767px){ .news-card.style-1 .caption{ padding:14% 3% 3.2%; } }