/* ===================================================================== KURUMSAL GRAFİK PAKETLERİ — yalnızca önizleme kopyasında Kaynak: her markanın LAYOUT_SISTEMI / SOSYAL_MEDYA şablonları. Paketler body sınıfıyla açılır: .pa → marka zeminleri · .pb → marka bileşenleri · .pc → kurumsal kartlar Marka + ile seçilir. Yoğunluk --kk-a (0–1); önizleme panelindeki kaydıraç bunu değiştirir. ===================================================================== */ /* Varsayılan yoğunluk; panelden (Grafik Elementleri) değiştirilir. */ :root{ --kk-a:.15; } /* ============ PAKET A — MARKA ZEMİNLERİ ============ */ /* --------------------------------------------------------------- YAZI GÜVENLİ ALANI: desen, metnin durduğu orta sütunda maskeyle silinir. Elementler ayrıca kenarlara konumlandırılır — ikisi birlikte grafiklerin yazıdan net ayrışmasını sağlar. --------------------------------------------------------------- */ .kk-kat{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2; -webkit-mask:radial-gradient(ellipse 46% 44% at 50% 57%, transparent 0 58%,rgba(0,0,0,.55) 80%,#000 100%); mask:radial-gradient(ellipse 46% 44% at 50% 57%, transparent 0 58%,rgba(0,0,0,.55) 80%,#000 100%)} .kk-kat.sade{z-index:0; -webkit-mask:radial-gradient(ellipse 44% 60% at 50% 50%, transparent 0 62%,rgba(0,0,0,.5) 84%,#000 100%); mask:radial-gradient(ellipse 44% 60% at 50% 50%, transparent 0 62%,rgba(0,0,0,.5) 84%,#000 100%)} @media(max-width:900px){ .kk-kat,.kk-kat.sade{-webkit-mask:radial-gradient(ellipse 62% 50% at 50% 55%, transparent 0 62%,#000 100%); mask:radial-gradient(ellipse 62% 50% at 50% 55%,transparent 0 62%,#000 100%)} } .about-in,.sec .wrapc,.intro .inner{position:relative;z-index:2} body:not(.pa) .kk-kat{display:none} /* --- dev logo silueti (Fenomen / Fenomen Türk) --- */ .kk-dev{position:absolute;opacity:calc(var(--kk-a) * .95); filter:drop-shadow(0 0 30px rgba(0,0,0,.35))} [data-marka="fenomen"] .kk-dev, [data-marka="fenomenturk"] .kk-dev{ right:-26%;top:34%;width:66%;height:96%;transform:translateY(-50%) rotate(-11deg); background:var(--brand); -webkit-mask:var(--kk-logo) no-repeat center/contain; mask:var(--kk-logo) no-repeat center/contain; } .kk-kat.sade .kk-dev{opacity:calc(var(--kk-a) * .34);width:42%;right:-14%;height:118%;top:50%} /* --- ayna tipografi şeridi (Fenomen / Fenomen Türk) --- */ .kk-ayna{position:absolute;left:.4%;top:9%;bottom:11%;display:flex;align-items:center; writing-mode:vertical-rl;font-family:var(--head);text-transform:uppercase; font-size:clamp(22px,3.1vw,42px);line-height:.86;letter-spacing:.02em;white-space:nowrap; color:var(--brand);opacity:calc(var(--kk-a) * .9);overflow:hidden} .kk-ayna span{display:block} .kk-ayna .m{transform:scale(-1)} @media(max-width:900px){.kk-ayna{display:none}} /* --- Boombox: fırça darbesi (şablondaki gibi derli toplu, tam en değil) --- */ /* Şablondaki fırça DOLU sarıdır; yarı saydam olunca çamur rengine düşüyor. Bu yüzden taban opaklık yüksek tutulur, kaydıraç yalnız üstüne ekler. */ .kk-firca{position:absolute;left:-9%;top:auto;bottom:6%;width:46%;height:19%; transform:rotate(-7deg);opacity:calc(.42 + var(--kk-a) * .58)} .kk-firca svg{width:100%;height:100%} .kk-firca path{fill:var(--kk-sari,var(--brand))} .kk-kat.sade .kk-firca{opacity:calc(var(--kk-a) * .38);width:46%} /* --- Boombox: halftone nokta geçişi --- */ .kk-nokta{position:absolute;left:0;right:0;bottom:0;height:46%; background-image:radial-gradient(var(--kk-sari,var(--brand)) 1.7px,transparent 1.9px); background-size:15px 15px;opacity:calc(var(--kk-a) * .8); -webkit-mask:linear-gradient(0deg,#000 5%,transparent 92%); mask:linear-gradient(0deg,#000 5%,transparent 92%)} /* --- Boombox: grafiti karalamalar --- */ .kk-grafiti{position:absolute;inset:0;opacity:calc(var(--kk-a) * 1.15)} .kk-grafiti svg{position:absolute;overflow:visible} .kk-grafiti .g1{left:3.5%;top:12%;width:126px} .kk-grafiti .g2{right:5%;top:11%;width:84px} .kk-grafiti .g3{right:4%;bottom:11%;width:112px} .kk-grafiti .g4{left:5%;bottom:30%;width:70px} .kk-grafiti [stroke]{fill:none;stroke-linecap:round;stroke-linejoin:round} @media(max-width:900px){.kk-grafiti .g2,.kk-grafiti .g4{display:none}} /* --- İstanbul FM: çeyrek daire mozaik (KÖŞE PANELİ — tam kaplamaz) --- */ .kk-mozaik{position:absolute;right:0;top:0;width:46%;height:58%; opacity:calc(var(--kk-a) * .95); -webkit-mask:linear-gradient(212deg,#000 22%,transparent 74%); mask:linear-gradient(212deg,#000 22%,transparent 74%)} .kk-mozaik svg{width:100%;height:100%} .kk-kat.sade .kk-mozaik{width:30%;height:100%;opacity:calc(var(--kk-a) * .5)} /* --- İstanbul FM: köşeyi kesen büyük yay --- */ .kk-yay{position:absolute;opacity:calc(var(--kk-a) * .9)} .kk-yay.y1{left:-11%;bottom:-17%;width:29vw;height:29vw;background:var(--brand); border-radius:0 100% 0 0} .kk-kat.sade .kk-yay{opacity:calc(var(--kk-a) * .28)} /* --- Bayrakstar (çatı): eğik kapsül şeritler + renk bloğu --- */ .kk-kapsul{position:absolute;border-radius:999px;opacity:calc(var(--kk-a) * .8)} .kk-blok{position:absolute;display:flex;opacity:calc(var(--kk-a) * .95)} .kk-blok i{display:block;flex:1} /* ============ PAKET B — MARKA BİLEŞENLERİ ============ */ /* --- resmî "● LIVE" rozeti --- */ .kk-live{display:inline-flex;align-items:center;gap:6px;background:#e30613;color:#fff; font-family:var(--body);font-weight:800;font-size:11px;letter-spacing:.09em; padding:5px 11px 5px 9px;border-radius:30px;text-transform:uppercase;line-height:1} .kk-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff} body:not(.pb):not(.pc) .kk-live{display:none} /* --- resmî saat etiketi (siyah kutu) --- */ body.pb .tl .tm{background:#111;color:#fff;border-radius:3px;padding:7px 11px; font-family:var(--body);font-weight:800;font-size:12.5px;letter-spacing:.06em; min-width:0;text-align:center;flex-shrink:0} body.pb[data-marka="boombox"] .tl .tm{background:var(--brand);color:#111} body.pb .tl .now{background:#e30613;color:#fff;border-radius:30px} /* --- bölüm etiketi (.tag) kutulanır --- */ body.pb .tag{background:var(--brand);color:var(--onbrand);padding:6px 13px;border-radius:3px; letter-spacing:.22em;font-size:11.5px} /* --- Boombox: fosforlu kalem vurgusu (başlıklar) --- */ body.pb[data-marka="boombox"] .sec h2 span.kk-vurgu, body.pb[data-marka="boombox"] .about h2 span.kk-vurgu{ background:var(--brand);color:#111;padding:2px 12px 4px; box-decoration-break:clone;-webkit-box-decoration-break:clone; transform:rotate(-1.2deg);display:inline-block} /* --- Fenomen / FT: başlık ayna yankısı --- */ body.pb .kk-yanki{position:relative;display:inline-block} body.pb .kk-yanki::after{content:attr(data-yanki);position:absolute;left:0;top:100%; transform:scaleY(-1);transform-origin:top;color:var(--brand);opacity:.2; pointer-events:none;white-space:nowrap} /* --- PROGRAM GÖRSELİ marka biçimine girer (yayın akışı) --- Yayıncı afişlerine DOKUNULMAZ: afişin kendi yazısı kırpılmamalı. */ body.pb[data-maske="daire"] .tl .pim{border-radius:50%} body.pb[data-maske="yay"] .tl .pim{border-radius:0 0 0 60%} body.pb[data-marka="boombox"] .tl .pim{border-radius:4px; border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 45%,transparent)} /* --- yayıncı afişi kartı: kırpma yok, marka çerçevesi var --- */ body.pb .host.afisli{border-color:color-mix(in srgb,var(--brand) 55%,transparent)} body.pb .host.afisli .ph{border-bottom:3px solid var(--brand)} /* fotoğrafı olan ama afiş OLMAYAN kartlarda marka maskesi uygulanır */ body.pb[data-maske="daire"] .host:not(.afisli) .ph:not(.fotosuz){ background:var(--brand);display:flex;align-items:center;justify-content:center} body.pb[data-maske="daire"] .host:not(.afisli) .ph:not(.fotosuz) img{ width:80%;height:80%;border-radius:50%;object-fit:cover} body.pb[data-maske="daire"] .host:not(.afisli) .ph::after{display:none} body.pb[data-maske="yay"] .host:not(.afisli) .ph{border-radius:0 0 0 46%;overflow:hidden} /* ============ PAKET C — KURUMSAL KARTLAR ============ */ /* --- ana sayfa radyo kartları: her kart KENDİ grafik diliyle --- */ /* Kart yazıları SOL ALT'ta (slogan + düğmeler), logo SOL ÜST'te. Grafik bu yüzden sağ tarafa çekilir, sol alt köşede maskeyle silinir. */ .kk-rk{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none; opacity:calc(.35 + var(--kk-a) * .65); -webkit-mask:linear-gradient(108deg,transparent 0 30%,rgba(0,0,0,.5) 52%,#000 78%); mask:linear-gradient(108deg,transparent 0 30%,rgba(0,0,0,.5) 52%,#000 78%)} body:not(.pc) .kk-rk{display:none} body.pc .rcard .bg{filter:saturate(.6) brightness(.42)} body.pc .rcard:hover .bg{filter:saturate(.75) brightness(.5)} .kk-rk .d{position:absolute;right:-16%;top:38%;width:72%;height:112%; transform:translateY(-50%) rotate(-11deg);background:var(--kkc); -webkit-mask:var(--kkl) no-repeat center/contain;mask:var(--kkl) no-repeat center/contain; opacity:.5} .kk-rk .f{position:absolute;right:-6%;left:auto;top:auto;bottom:27%;width:52%;height:26%; transform:rotate(-7deg)} .kk-rk .f svg{width:100%;height:100%} .kk-rk .n{position:absolute;inset:0; background-image:radial-gradient(var(--kka) 1.5px,transparent 1.7px);background-size:13px 13px; -webkit-mask:linear-gradient(0deg,#000,transparent 70%); mask:linear-gradient(0deg,#000,transparent 70%);opacity:.75} .kk-rk .mz{position:absolute;right:0;top:0;width:56%;height:88%; -webkit-mask:linear-gradient(215deg,#000 28%,transparent 84%); mask:linear-gradient(215deg,#000 28%,transparent 84%)} .kk-rk .mz svg{width:100%;height:100%} /* --- fotoğrafı olmayan yayıncı: rehberin kendi kart düzeni --- (şu an tüm yayıncılarda resmî afiş var; yeni yayıncı fotoğrafsız eklenirse bu düzen kendiliğinden devreye girer) */ body.pc .host .ph.fotosuz{background:var(--brand);position:relative;overflow:hidden} body.pc .host .ph.fotosuz > img{display:none} .kk-kart{position:absolute;inset:0;display:flex;flex-direction:column; justify-content:space-between;padding:16px 15px;color:var(--onbrand);text-align:left} body:not(.pc) .kk-kart{display:none} .kk-kart .ust{display:flex;justify-content:space-between;align-items:flex-start;gap:8px} .kk-kart .prog{font-family:var(--head);text-transform:uppercase;font-size:15px;line-height:1; letter-spacing:.02em;max-width:64%} .kk-kart .ad{font-family:var(--head);text-transform:uppercase;line-height:.92; font-size:clamp(22px,3.4vw,30px);letter-spacing:.01em} .kk-kart .alt{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap} .kk-kart .saat{background:#111;color:#fff;font-weight:800;font-size:10.5px;letter-spacing:.06em; padding:5px 9px;border-radius:3px;white-space:nowrap} .kk-kart .lg{height:20px;object-fit:contain;opacity:.95;margin-left:auto} body.pc .host .ph.fotosuz::after{display:none}