/* ========================================================================== GOOD IPTV PLAYER — TEMEL KATMAN (belirteçler + kart ilkelleri) -------------------------------------------------------------------------- 🔴 BU DOSYADAKİ HİÇBİR SAYI UYDURULMAMIŞTIR. Hepsi uygulamanın kaynak kodundan ölçülmüştür; kaynağı yorumda yazar. Ölçüm raporu: arastirma/kart-anatomisi.md pt → px birebir alınır (web'de 1pt = 1px kabul, oranlar korunur). ========================================================================== */ :root{ /* --- Renkler — Sources/Theme.swift:53-155 ------------------------------ */ --ink: #050509; /* Theme.bg Theme.swift:60 */ --ink-2: #0B0813; /* Theme.bgTop Theme.swift:61 */ --card: #171721; /* Theme.card Theme.swift:62 */ --chip: #21212E; /* Theme.cardLight Theme.swift:63 */ --magenta: #E71380; /* Theme.pink Theme.swift:64 */ --violet: #8E5AFF; /* Theme.purple Theme.swift:65 */ --coral: #FF8A65; /* Theme.orange Theme.swift:66 */ --amber: #FFAD33; /* Theme.uyari Theme.swift:96 */ --red: #FF6666; /* Theme.hataKirmizi Theme.swift:99 */ --turkuaz: #33C7D9; /* çocuk profili Components.swift:453 */ --dim: rgba(255,255,255,.55);/* Theme.textDim Theme.swift:67 */ --hair: rgba(255,255,255,.08);/* Theme.standartKenar Theme.swift:83 */ --hair-pro: rgba(231,19,128,.34); /* Theme.premiumKenar Theme.swift:88 */ --ayrac: rgba(255,255,255,.07);/* Theme.ayiraci Theme.swift:92 */ --kart-kenar: rgba(255,255,255,.05); /* kart overlay stroke Components.swift:186 */ /* --- Degradeler — Theme.swift:116-193 --------------------------------- */ --zemin-grad: linear-gradient(180deg,#0B0813 0%,#050509 100%); /* :143 */ --pembe-dolgu: linear-gradient(180deg,#EE5AA6 0%,#EA2F8F 40%, #E71380 46%,#E71380 100%); /* :134 */ --baslik-grad: linear-gradient(90deg,#FF8A65 0%,#E71380 50%, #8E5AFF 100%); /* :123 */ --premium-kart:linear-gradient(180deg,#251320 0%,#171721 100%); /* :116 */ /* GMark.fillGradient — logo dolgusu, Theme.swift:190 */ --marka-grad: linear-gradient(to top right,#8E5AFF 0%,#E71380 100%); /* AppLogo "GOOD" yazı dolgusu — Theme.swift:275 */ --yazi-grad: linear-gradient(180deg,#FFFFFF 0%,#9696A6 100%); /* --- Ölçüler — kaynağı yanında ---------------------------------------- */ --r-kart: 12px; /* PosterCardView cornerRadius Components.swift:140 */ --r-kutu: 16px; /* HesapOlcu.kartKosesi Theme.swift:177 */ --r-satir: 12px; /* HesapOlcu.satirKosesi Theme.swift:179 */ --kenar: 16px; /* HeaderMetrics.edge Components.swift:689 */ --bant-h: 48px; /* HeaderMetrics.height Components.swift:691 */ --kart-ara: 10px; /* LazyHStack(spacing:10) HomeView.swift:562 */ --sutun: 420px; /* HesapOlcu.sutun Theme.swift:173 */ } /* ========================================================================== AFİŞ KARTI — PosterCardView (Sources/Views/Components.swift:129-199) Oran 2:3 · köşe 12 · zemin #171721 · kenarlık beyaz %5 1px · GÖLGE YOK Başlık: 11.5px/600, beyaz %90, iki satır, SABİT 30px kutu, üste yaslı ========================================================================== */ .afis{ width:var(--afis-en,118px); display:block; } .afis .kutu{ display:block; position:relative; width:100%; aspect-ratio:2/3; /* Theme.posterRatio 1.5 */ border-radius:var(--r-kart); background:var(--card); overflow:hidden; } .afis .kutu::after{ /* overlay stroke :186 */ content:""; position:absolute; inset:0; border-radius:var(--r-kart); border:1px solid var(--kart-kenar); pointer-events:none; } .afis .kutu img{ width:100%; height:100%; object-fit:cover; display:block; } .afis .ad{ display:block; margin-top:8px; /* VStack spacing:8 :138 */ height:30px; /* sabit 30pt :196 */ font-size:11.5px; font-weight:600; line-height:1.25; color:rgba(255,255,255,.9); text-align:center; overflow:hidden; } /* İlerleme (yalnız progress verilince) — Components.swift:169-181 */ .afis .karart{ position:absolute; left:0; right:0; bottom:0; height:45%; /* width×0.45 */ background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.85) 100%); } .afis .serit{ position:absolute; left:8px; right:8px; bottom:8px; /* padding 8/8 */ height:4px; border-radius:2px; background:rgba(255,255,255,.3); } .afis .serit i{ display:block; height:4px; border-radius:2px; background:var(--magenta); } /* ========================================================================== KANAL KARTI — ChannelCardView (Components.swift:53-126) Uygulama her yerde tall:true çağırır → oran 2:3, logo kutusu 0.9w × 0.9w ========================================================================== */ .kanal{ width:var(--afis-en,118px); display:block; } .kanal .kutu{ position:relative; width:100%; aspect-ratio:2/3; border-radius:var(--r-kart); background:var(--card); overflow:hidden; display:grid; place-items:center; } .kanal .kutu::after{ content:""; position:absolute; inset:0; border-radius:var(--r-kart); border:1px solid var(--kart-kenar); } .kanal .kutu img{ width:90%; height:90%; object-fit:contain; display:block; } .kanal .ad{ display:block; margin-top:8px; height:30px; font-size:11.5px; font-weight:600; line-height:1.25; color:rgba(255,255,255,.9); text-align:center; overflow:hidden; } /* "Şu an yayında" bandı — EPGKit.swift:51-92 (kartın İÇİNDE, alta oturur) */ .kanal .bant{ position:absolute; left:0; right:0; bottom:0; padding:22px 8px 7px; /* üst22 yan8 alt7 :72 */ background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.72) 60%, rgba(0,0,0,.96) 100%); border-radius:0 0 var(--r-kart) var(--r-kart); } .kanal .bant b{ display:block; font-size:10px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 2px rgba(0,0,0,.7); } .kanal .bant span{ display:block; margin-top:4px; /* spacing:4 :56 */ font-size:8.5px; font-weight:800; color:rgba(255,255,255,.85); } /* ========================================================================== "KALDIĞIN YER" KARTI — ResumeCardView (Components.swift:209-311) 176 × 99 (16:9) · köşe 12 · alt karartma %42 · oynat üçgeni 21×25 Zaman çizgisi UÇTAN UCA: zemin beyaz %24, dolgu pembe, kalınlık 3.5 ========================================================================== */ .devam{ width:var(--devam-en,176px); display:block; } .devam .kutu{ display:block; position:relative; width:100%; aspect-ratio:16/9; /* :226 */ border-radius:var(--r-kart); background:var(--card); overflow:hidden; } .devam .kutu::after{ content:""; position:absolute; inset:0; border-radius:var(--r-kart); border:1px solid var(--kart-kenar); } .devam .kutu img{ width:100%; height:100%; object-fit:cover; display:block; } .devam .karart{ position:absolute; left:0; right:0; bottom:0; height:42%; background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.78) 100%); } .devam .kalan{ position:absolute; right:8px; bottom:8px; font-size:9.5px; font-weight:700; color:rgba(255,255,255,.92); white-space:nowrap; } .devam .oynat{ /* 21×25, tam orta */ position:absolute; left:50%; top:50%; width:21px; height:25px; transform:translate(-50%,-50%); filter:drop-shadow(0 1px 5px rgba(0,0,0,.65)); } .devam .cizgi{ position:absolute; left:0; right:0; bottom:0; height:3.5px; background:rgba(255,255,255,.24); } .devam .cizgi i{ display:block; height:3.5px; background:var(--magenta); } .devam .ad{ display:block; margin-top:7px; /* spacing:7 :229 */ font-size:11.5px; font-weight:600; color:rgba(255,255,255,.9); text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* -------------------------------------------------------------------------- SANAT KATMANI — kart görselinin durduğu yer. 🔴 inset:0 ZORUNLU. `aspect-ratio` ile yükseklik alan bir kutunun içinde yüzdelik yükseklik ÇÖZÜLMEZ; `height:100%` verilen katman görünmez olur (09.09.2026'da ölçümle yakalandı). Mutlak konum bu tuzağı tamamen kapatır. -------------------------------------------------------------------------- */ .sanat{ position:absolute; inset:0; display:block; } .sanat img{ width:100%; height:100%; object-fit:cover; display:block; } /* Kanal logosu kutunun ortasında durur, kırpılmaz (contentMode:.fit) */ .kanal .kutu > .logo{ position:relative; z-index:1; } /* -------------------------------------------------------------------------- KART KUTUSU SIFIRLAMA — emniyet kemeri (09.09.2026 ölçümü). Site katmanındaki pazarlama kutusu aynı `.kutu` adını taşıyordu; border, padding:26px ve box-shadow her kartın içine sızıp kanal logosunu 105,6×87,1 yerine 62,4×63,4 çizdiriyordu. Pazarlama kutusu `.panel` oldu; bu blok benzer bir sızıntının tekrar olmasını engeller. -------------------------------------------------------------------------- */ .afis .kutu, .kanal .kutu, .devam .kutu{ border:0; padding:0; box-shadow:none } /* ========================================================================== AFİŞ YER TUTUCUSU — PosterPlaceholder (Shared/CachedImage.swift:588-737) Görseli olmayan içerik için uygulamanın çizdiği boş durum. 🔴 DEGRADE YOK. Theme.heroGradients kartların İÇİNDE hiç kullanılmaz; o degradeler yalnız kahraman/detay ARKA PLANIDIR (HomeView:1368 %55). Kartlara degrade koymak uygulamada olmayan bir tasarım uydurmaktı. Ayırt ediciliği renk değil AD sağlar — kaynağın kendi yorumu: "afişi olmayan içerikler birbirinin aynısı görünmez, «eksik» değil «tasarım» durur" (CachedImage.swift:589-599) ========================================================================== */ .sanat.bos{ overflow:hidden } .sanat.bos::before{ /* taban görsel, ad varsa %8 :658-661 */ content:""; position:absolute; inset:0; background:url(../g/poster-yer-tutucu.png) center/cover no-repeat; opacity:.08; } .sanat.bos::after{ /* kart yüzeyi #16161A %95 :717 */ content:""; position:absolute; inset:0; background:rgba(22,22,26,.95); } .sanat.bos .yigin{ /* VStack(spacing:9) + Spacer :665-687 */ position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; gap:9px; } .sanat.bos .bosluk{ flex:1 1 0; min-height:0 } .sanat.bos .ayrac{ /* Rectangle white %16, 26×1 :721-724 */ flex:none; width:26px; height:1px; background:rgba(255,255,255,.16); } .sanat.bos .yazi{ /* .app(12,.semibold) %55 :671-679 */ flex:none; margin:0; padding:0 9px; font-size:12px; font-weight:600; line-height:1.2; color:rgba(255,255,255,.55); text-align:center; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:break-word; } .sanat.bos .marka{ /* AppLogo(9) gri %55, alt 9 :683-686 */ flex:none; --s:9px; margin-bottom:9px; filter:grayscale(1); opacity:.55; } /* 🔴 Bu kural ZORUNLU: `.afis .kutu img{height:100%}` (0,2,1) `.marka img`i (0,1,1) eziyor ve işaret 16,2 px yerine 123,97 px çiziliyordu. (0,3,1) kazanır. */ .sanat.bos .marka img{ width:auto; height:calc(var(--s)*1.8); object-fit:contain } /* KÜÇÜK dal — kucuk = en<90 || boy<110 (CachedImage.swift:656) Yalnız taban görsel, opaklık 1; kart yüzeyi ve yığın yok. */ .sanat.bos.kucuk::before{ opacity:1 } .sanat.bos.kucuk::after { content:none } .sanat.bos.kucuk .yigin { display:none } /* Kanal kartı: logo kutusu 0.9w × 0.9w, contentMode:.fit (Components.swift:67-82) 16:9 kanal görseli 2:3 kutuya SIĞDIRILIR (kırpılmaz) — uygulamadaki gibi. */ .kanal .kutu > .sanat.kanallogo{ inset:5%; } .kanal .kutu > .sanat.kanallogo img{ width:100%; height:100%; object-fit:contain } /* Geniş kanal kartı — Apple TV'deki 218×135 kanal kartının karşılığı (TVSahne.swift:1734-1735). Görsel kutuyu doldurur; 2:3 kutuda 16:9 görsel %30 doluluk bırakıyordu (10.09.2026 ölçümü). */ .kanal.genis .kutu{ aspect-ratio:16/9 } /* kahramandakiyle aynı */ .kanal.genis .kutu > .sanat img{ width:100%; height:100%; object-fit:cover }