/* * KLAS DIGITAL v191 — 4 Mevsim Tema Sistemi * ============================================ * Kullanım: * Mantık: Otomatik tarih bazlı veya window.KLAS_THEME_OVERRIDE ile manuel * * Bu dosya izole katmandır. Mevcut index.html style bloklarına dokunmaz. * Geri dönüş güvenliği: Bu dosya kaldırıldığında site v190.7 haline döner. * * Token Haritası: * --theme-bg Ana arka plan * --theme-bg-soft Yumuşak/alternatif arka plan * --theme-primary Ana vurgu rengi * --theme-accent İkincil vurgu / mevsim rengi * --theme-card Kart arka planı * --theme-card-hover Kart hover state * --theme-border Kenarlık / ayırıcı * --theme-glow Glow / shadow efekti * --theme-text Ana metin rengi * --theme-muted Soluk / ikincil metin * --theme-nav-bg Navbar arka planı * --theme-badge Badge / etiket rengi (CANLI badge vb.) */ /* =================================================================== BASE — Açık tema varsayılanı (data-season yoksa da çalışır) =================================================================== */ html[data-season] { --theme-bg: #FFFFFF; --theme-bg-soft: #F5F5F7; --theme-primary: #E10613; --theme-accent: #1A1A1A; --theme-card: #FFFFFF; --theme-card-hover: #F0F0F2; --theme-border: #E5E5E7; --theme-glow: rgba(225, 6, 19, 0.08); --theme-text: #1A1A1A; --theme-muted: #6B7280; --theme-nav-bg: rgba(255, 255, 255, 0.95); --theme-badge: #E10613; } /* =================================================================== WINTER / KIŞ — Aralık – Mart Karakter: Soğuk, temiz, profesyonel =================================================================== */ html[data-season="winter"] { --theme-bg: #FAFBFC; --theme-bg-soft: #EEF1F5; --theme-primary: #E10613; --theme-accent: #3B82F6; --theme-card: #FFFFFF; --theme-card-hover: #F0F4F8; --theme-border: #D1D9E6; --theme-glow: rgba(59, 130, 246, 0.10); --theme-text: #1E293B; --theme-muted: #64748B; --theme-nav-bg: rgba(250, 251, 252, 0.96); --theme-badge: #E10613; --theme-hero-shell-bg: #EDF4FF; --theme-hero-bg: linear-gradient(135deg,#EEF5FF 0%,#F8FBFF 48%,#FFFFFF 100%); --theme-hero-overlay: radial-gradient(circle at 18% 20%,rgba(59,130,246,.12),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.16),transparent 58%); --theme-section-panel-bg: linear-gradient(180deg,rgba(239,246,255,.76),rgba(255,255,255,.94)); --theme-social-panel-bg: linear-gradient(135deg,#F8FBFF,#EEF5FF); --theme-social-panel-border: rgba(59,130,246,.16); --theme-card-bg: rgba(255,255,255,.92); --theme-card-border: rgba(59,130,246,.16); --theme-card-shadow: 0 22px 60px rgba(59,130,246,.10); --theme-card-shadow-soft: 0 12px 28px rgba(59,130,246,.08); --theme-hover-shadow: 0 18px 40px rgba(59,130,246,.14); } /* =================================================================== SPRING / İLKBAHAR — Nisan – Haziran Karakter: Taze, canlı, enerjik =================================================================== */ html[data-season="spring"] { --theme-bg: #FEFFFE; --theme-bg-soft: #F0F9F4; --theme-primary: #E10613; --theme-accent: #10B981; --theme-card: #FFFFFF; --theme-card-hover: #ECFDF5; --theme-border: #D1FAE5; --theme-glow: rgba(16, 185, 129, 0.10); --theme-text: #1A1A1A; --theme-muted: #6B7280; --theme-nav-bg: rgba(254, 255, 254, 0.96); --theme-badge: #E10613; --theme-hero-shell-bg: #F1FFF8; --theme-hero-bg: linear-gradient(135deg,#F0FFF7 0%,#FBFFFD 50%,#FFFFFF 100%); --theme-hero-overlay: radial-gradient(circle at 18% 20%,rgba(16,185,129,.11),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.14),transparent 58%); --theme-section-panel-bg: linear-gradient(180deg,rgba(236,253,245,.72),rgba(255,255,255,.94)); --theme-social-panel-bg: linear-gradient(135deg,#FBFFFD,#F0FFF7); --theme-social-panel-border: rgba(16,185,129,.16); --theme-card-bg: rgba(255,255,255,.92); --theme-card-border: rgba(16,185,129,.15); --theme-card-shadow: 0 22px 60px rgba(16,185,129,.09); --theme-card-shadow-soft: 0 12px 28px rgba(16,185,129,.07); --theme-hover-shadow: 0 18px 40px rgba(16,185,129,.12); } /* =================================================================== SUMMER / YAZ — Temmuz – Eylül Karakter: Sıcak, parlak, enerjik =================================================================== */ html[data-season="summer"] { --theme-bg: #FFFDF8; --theme-bg-soft: #FFF8EC; --theme-primary: #E10613; --theme-accent: #F59E0B; --theme-card: #FFFFFF; --theme-card-hover: #FFF8EC; --theme-border: #F8DFAE; --theme-glow: rgba(245, 158, 11, 0.06); --theme-text: #1A1A1A; --theme-muted: #78716C; --theme-nav-bg: rgba(255, 254, 250, 0.96); --theme-badge: #E10613; --theme-hero-shell-bg: #FFF8EC; --theme-hero-bg: linear-gradient(135deg,#FFF8EC 0%,#FFFDF8 48%,#FFFFFF 100%); --theme-hero-overlay: radial-gradient(circle at 18% 20%,rgba(245,158,11,.11),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.16),transparent 58%); --theme-section-panel-bg: linear-gradient(180deg,rgba(255,248,236,.82),rgba(255,255,255,.95)); --theme-social-panel-bg: linear-gradient(135deg,#FFFDF8,#FFF8EC); --theme-social-panel-border: rgba(245,158,11,.16); --theme-card-bg: rgba(255,255,255,.94); --theme-card-border: rgba(245,158,11,.16); --theme-card-shadow: 0 24px 64px rgba(245,158,11,.10); --theme-card-shadow-soft: 0 12px 30px rgba(245,158,11,.08); --theme-hover-shadow: 0 18px 42px rgba(245,158,11,.14); } /* =================================================================== AUTUMN / SONBAHAR — Ekim – Kasım Karakter: Sıcak, olgun, zengin =================================================================== */ html[data-season="autumn"] { --theme-bg: #FFF8F0; --theme-bg-soft: #FFE7D0; --theme-primary: #E10613; --theme-accent: #B45309; --theme-card: #FFFDF9; --theme-card-hover: #FBF3E9; --theme-border: #D6A77D; --theme-glow: rgba(146, 64, 14, 0.12); --theme-text: #292524; --theme-muted: #78716C; --theme-nav-bg: rgba(253, 250, 246, 0.96); --theme-badge: #E10613; --theme-hero-shell-bg: #FFF3E7; --theme-hero-bg: linear-gradient(135deg,#FFF3E7 0%,#FFF8F0 44%,#FFFFFF 100%); --theme-hero-overlay: radial-gradient(circle at 18% 20%,rgba(146,64,14,.12),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.14),transparent 58%); --theme-section-panel-bg: linear-gradient(180deg,rgba(255,243,231,.78),rgba(255,255,255,.94)); --theme-social-panel-bg: linear-gradient(135deg,#FFF8F0,#FFF3E7); --theme-social-panel-border: rgba(146,64,14,.18); --theme-card-bg: rgba(255,255,255,.93); --theme-card-border: rgba(146,64,14,.16); --theme-card-shadow: 0 24px 64px rgba(146,64,14,.10); --theme-card-shadow-soft: 0 12px 30px rgba(146,64,14,.08); --theme-hover-shadow: 0 18px 42px rgba(146,64,14,.14); } /* =================================================================== TEMA UYGULAMA — Token'ların global elementlere bağlanması Not: Bu blok, mevcut CSS ile çakışmamak için düşük specificity kullanır. !important KULLANILMAZ. =================================================================== */ /* Body arka plan — sadece data-season aktifken */ html[data-season] body { background-color: var(--theme-bg); color: var(--theme-text); } /* Navbar */ html[data-season] .nav { background-color: var(--theme-nav-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Section arka planları */ html[data-season] .section.alt { background-color: var(--theme-bg-soft); } /* Genel border token */ html[data-season] .divider { border-color: var(--theme-border); } /* =================================================================== RADYO DİZİN / KART — Açık tema override'ları Mevcut klas-radio-directory.css koyu temayı tanımlar. Bu blok, data-season aktifken açık temayı uygular. =================================================================== */ /* Dizin arka planı: koyu gradient → açık tema */ html[data-season] .kd-route-view { background: radial-gradient(circle at top left, var(--theme-glow), transparent 34%), var(--theme-bg); color: var(--theme-text); } html[data-season] .kd-route-view__eyebrow { color: var(--theme-primary); } html[data-season] .kd-route-view__title { color: var(--theme-text); } html[data-season] .kd-route-view__lead { color: var(--theme-muted); } /* Kart: koyu glassmorphism → açık, temiz kart */ html[data-season] .kd-radio-card { background: var(--theme-card); border-color: var(--theme-border); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); } html[data-season] .kd-radio-card:hover { background: var(--theme-card-hover); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } /* Kart logo: koyu drop-shadow → minimal shadow */ html[data-season] .kd-radio-card__logo { filter: none; } /* Kart status badge */ html[data-season] .kd-radio-card__status { background: rgba(225, 6, 19, 0.08); color: var(--theme-primary); } /* Kart kanal adı */ html[data-season] .kd-radio-card__name { color: var(--theme-text); } /* Kart tagline */ html[data-season] .kd-radio-card__tagline { color: var(--theme-muted); } /* Kart buton — kanal rengi korunuyor (CSS custom property) */ html[data-season] .kd-radio-card__button { box-shadow: 0 2px 8px var(--channel-glow, rgba(225, 6, 19, 0.16)); } /* Kart detay linki */ html[data-season] .kd-radio-card__link { border-color: var(--theme-border); background: var(--theme-bg-soft); color: var(--theme-text); } /* Boş dizin mesajı */ html[data-season] .kd-route-view__empty { background: var(--theme-bg-soft); color: var(--theme-muted); } /* =================================================================== RADYO DETAY SAYFASI — Açık tema override'ları =================================================================== */ html[data-season] .kd-radio-detail { background: radial-gradient(circle at 15% 12%, var(--theme-glow), transparent 34%), var(--theme-card); border-color: var(--theme-border); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); color: var(--theme-text); } html[data-season] .kd-radio-detail__title { color: var(--theme-text); } html[data-season] .kd-radio-detail__tagline { color: var(--theme-text); } html[data-season] .kd-radio-detail__description { color: var(--theme-muted); } html[data-season] .kd-radio-detail__eyebrow { border-color: var(--theme-border); background: var(--theme-bg-soft); } html[data-season] .kd-radio-detail__pill { border-color: var(--theme-border); background: var(--theme-bg-soft); color: var(--theme-muted); } html[data-season] .kd-radio-detail__player { border-color: var(--theme-border); background: var(--theme-bg-soft); } html[data-season] .kd-radio-detail__now-title { color: var(--theme-text); } html[data-season] .kd-radio-detail__now-subtitle { color: var(--theme-muted); } html[data-season] .kd-radio-detail__status { color: var(--theme-muted); } html[data-season] .kd-radio-detail__panel { border-color: var(--theme-border); background: var(--theme-bg-soft); color: var(--theme-muted); } html[data-season] .kd-radio-detail__panel strong { color: var(--theme-text); } html[data-season] .kd-radio-detail__others-title { color: var(--theme-text); } html[data-season] .kd-radio-detail__other { border-color: var(--theme-border); background: var(--theme-bg-soft); color: var(--theme-text); } html[data-season] .kd-radio-detail__other span { color: var(--theme-muted); } html[data-season] .kd-radio-detail--missing h1 { color: var(--theme-text); } html[data-season] .kd-radio-detail--missing p { color: var(--theme-muted); } html[data-season] .kd-radio-detail__logo { filter: none; } /* =================================================================== HERO — Açık tema override'ları Mevcut: koyu gradient (#0D1117) + beyaz metin Hedef: açık arka plan + koyu metin + kırmızı accent =================================================================== */ /* Hero arka plan: koyu gradient → açık */ html[data-season] .hero-bg { background: var(--theme-bg) !important; } html[data-season] .hero-bg::after { background: var(--theme-glow) !important; } html[data-season] .hero-noise { opacity: 0; } /* Hero metin: beyaz → koyu */ html[data-season] .hero { color: var(--theme-text); } html[data-season] .h-eye { color: var(--theme-primary); } html[data-season] .h-hl { color: var(--theme-text); } html[data-season] .h-hl .r { color: var(--theme-primary); } html[data-season] .h-hl .g { color: var(--theme-primary); } html[data-season] .h-desc { color: var(--theme-muted); } /* Hero player card */ html[data-season] .h-now { background: var(--theme-card); border-color: var(--theme-border); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); } html[data-season] .h-nlbl { color: var(--theme-primary); } html[data-season] .h-ntrack { color: var(--theme-text); } html[data-season] .h-nartist { color: var(--theme-muted); } html[data-season] .h-nowplaying-source { color: var(--theme-muted); } /* Hero now-playing strip (inline styles override gerekli) */ html[data-season] .h-now-playing-strip { color: var(--theme-muted) !important; } html[data-season] .h-now-playing-strip strong { color: var(--theme-text) !important; } /* Hero disk/vinyl — minimal shadow for light theme */ html[data-season] .h-ndisk { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } /* Hero uygulama başlık */ html[data-season] .hero-app-title { color: var(--theme-muted); } /* Hero app badge */ html[data-season] .hero-app-badge { border-color: var(--theme-border); background: var(--theme-card); color: var(--theme-text); } /* v199 düzeltmesi: yukarıdaki kural rozetin arka planını koyudan açığa çeviriyor ama metin rengi .hero-app-badge{color:#fff} üzerinden beyaz kalıyordu — açık kartta beyaz yazı görünmüyordu ("UYGULAMAYI İNDİR" rozetlerindeki "Google Play" / "App Store" yazıları kayboluyordu). Ayrıca .store-name/.store-label class'ları güncel markup'ta hiç kullanılmıyor (gerçek class'lar .store-copy small / .store-copy strong) — bu yüzden eski kural hiçbir zaman devreye girmiyordu. */ html[data-season] .hero-app-badge .store-copy small, html[data-season] .hero-app-badge .store-copy strong, html[data-season] .hero-app-badge .store-name, html[data-season] .hero-app-badge .store-label { color: var(--theme-text); } /* Hero right side (TV preview card) — koyu card, açık zemin kontekstinde */ html[data-season] .tv-wrap { background: linear-gradient(145deg, #1a1a2e, #16213e); border-color: var(--theme-border); border-radius: var(--radius-section, 24px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); overflow: hidden; } /* =================================================================== CANLI YAYIN STRIP — Açık tema override'ları =================================================================== */ html[data-season] .kd-live-strip { background: var(--theme-bg-soft); border-top-color: var(--theme-border); border-bottom-color: var(--theme-border); } html[data-season] .kd-ls-badge { color: var(--theme-primary); border-color: var(--theme-primary); } html[data-season] .kd-ls-ch { background: var(--theme-card); border-color: var(--theme-border); color: var(--theme-text); } html[data-season] .kd-ls-ch:hover { background: var(--theme-card-hover); } html[data-season] .kd-ls-ch-name { color: var(--theme-text); } /* =================================================================== ANA SAYFA SECTION'LARI — Açık tema override'ları =================================================================== */ /* Tüm section genel renk kontrolü */ html[data-season] .section { color: var(--theme-text); } html[data-season] .section.alt { background: var(--theme-bg-soft); } /* Section başlıklar */ html[data-season] .sec-t { color: var(--theme-text); } html[data-season] .sec-sub { color: var(--theme-muted); } html[data-season] .sec-lnk { color: var(--theme-primary); } /* Editorial card blokları */ html[data-season] .ed-card { background: var(--theme-card); border-color: var(--theme-border); color: var(--theme-text); } html[data-season] .ed-card:hover { background: var(--theme-card-hover); } html[data-season] .ed-card-title { color: var(--theme-text); } html[data-season] .ed-card-desc { color: var(--theme-muted); } html[data-season] .ed-card-meta { color: var(--theme-muted); } /* Divider */ html[data-season] .divider { border-color: var(--theme-border); background: var(--theme-border); } /* =================================================================== ANA SAYFA İÇERİK KARTLARI — Mockup bazlı açık tema =================================================================== */ /* Hero alt kart blokları (Haber & Magazin, KLAS Club) */ html[data-season] .h-info-card { background: var(--theme-card); border-color: var(--theme-border); color: var(--theme-text); } html[data-season] .h-info-card-title { color: var(--theme-text); } html[data-season] .h-info-card-desc { color: var(--theme-muted); } /* Schedule / programlar */ html[data-season] .sch-item { border-color: var(--theme-border); color: var(--theme-text); } html[data-season] .sch-time { color: var(--theme-primary); } html[data-season] .sch-name { color: var(--theme-text); } /* Sosyal medya section */ html[data-season] .social-card { background: var(--theme-card); border-color: var(--theme-border); } /* Reklam section */ html[data-season] .ads-card, html[data-season] .contact-card { background: var(--theme-card); border-color: var(--theme-border); color: var(--theme-text); } /* About section */ html[data-season] .about-section { color: var(--theme-text); } html[data-season] .about-section p { color: var(--theme-muted); } /* =================================================================== KANAL KART STRIP (Ana sayfa horizontal scroll) Mockup + Stitch referansı: kare kartlar, SVG logo, renkli CANLI badge =================================================================== */ /* Strip container */ html[data-season] .kd-live-strip { background: var(--theme-bg); border: none; padding: 48px 0 56px; } html[data-season] .kd-ls-inner { max-width: var(--content-max, 1200px); margin: 0 auto; padding: var(--content-padding, 0 24px); } /* Header row */ html[data-season] .kd-ls-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; } html[data-season] .kd-ls-title { font-size: 14px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: var(--theme-text); margin: 0; } html[data-season] .kd-ls-cta { font-size: 13px; font-weight: 700; color: var(--theme-primary); text-decoration: none; letter-spacing: 0.5px; } /* Card grid — horizontal scroll */ html[data-season] .kd-ls-grid { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; } html[data-season] .kd-ls-grid::-webkit-scrollbar { display: none; } /* Individual card */ html[data-season] .kd-ls-card { flex: 0 0 auto; width: 128px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; scroll-snap-align: start; transition: transform 0.2s ease; } html[data-season] .kd-ls-card:hover { transform: translateY(-2px); } /* v217 — TRT.net.tr referansıyla: kare kutu yerine kendi renginde dairesel amblem (yayın kuruluşu rozeti hissi). --ch-color her kartta JS tarafından zaten set ediliyordu (bkz. klas-hero-player.js), önceden sadece hover'da kullanılıyordu — şimdi varsayılan halka rengi olarak da kullanılıyor. */ html[data-season] .kd-ls-card__logo { width: 112px; height: 112px; display: flex; align-items: center; justify-content: center; padding: 14px; border-radius: 50%; background: var(--theme-card); border: 2px solid var(--ch-color, var(--theme-border)); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.25s ease; } html[data-season] .kd-ls-card__logo img { border-radius: 50%; } html[data-season] .kd-ls-card:hover .kd-ls-card__logo { border-color: var(--ch-color, var(--theme-primary)); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--ch-color, var(--theme-primary)); } html[data-season] .kd-ls-card__logo img { width: 100%; height: 100%; object-fit: contain; } /* CANLI badge */ html[data-season] .kd-ls-card__badge { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill, 999px); color: #fff; font-size: 9px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; line-height: 1; } /* Channel name */ html[data-season] .kd-ls-card__name { font-size: 11px; font-weight: 700; color: var(--theme-muted); text-align: center; letter-spacing: 0.3px; } @media (max-width: 768px) { html[data-season] .kd-ls-card { width: 104px; } html[data-season] .kd-ls-card__logo { width: 96px; height: 96px; padding: 14px; } } /* =================================================================== HABER & MAGAZIN + KLAS CLUB — Yan yana kompozisyon Stitch + mockup referansı: sol haber, sağ club promo =================================================================== */ html[data-season] .editorial-news-section { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; } html[data-season] .editorial-news-section .sec-head { grid-column: 1 / -1; } @media (min-width: 900px) { html[data-season] .editorial-news-section { grid-template-columns: 1fr 340px; gap: 32px; } } /* KLAS Club promo card */ .v191-club-promo { display: none; } html[data-season] .v191-club-promo { display: flex; flex-direction: column; gap: 16px; } html[data-season] .v191-club-promo__card { padding: 32px 28px; border-radius: var(--radius-card, 16px); background: var(--theme-card); border: 1px solid var(--theme-border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); display: flex; flex-direction: column; gap: 16px; } html[data-season] .v191-club-promo__logo { width: 120px; height: auto; } html[data-season] .v191-club-promo__title { margin: 0; font-size: 20px; font-weight: 800; color: var(--theme-text); line-height: 1.3; } html[data-season] .v191-club-promo__desc { margin: 0; font-size: 14px; color: var(--theme-muted); line-height: 1.6; } html[data-season] .v191-club-promo__cta { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: var(--radius-pill, 999px); background: var(--theme-text); color: var(--theme-bg); text-decoration: none; font-size: 12px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; transition: opacity 0.2s; } html[data-season] .v191-club-promo__cta:hover { opacity: 0.85; } /* =================================================================== İLETİŞİM SECTION — v191 mockup referansı Sol: bilgi, Sağ: form. Tüm selector'lar v191-iletisim prefix'li. =================================================================== */ html[data-season] .v191-iletisim-section { padding: var(--section-gap, 80px) 0; } html[data-season] .v191-iletisim { max-width: var(--content-max, 1200px); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; } html[data-season] .v191-iletisim__title { font-size: 28px; font-weight: 900; color: var(--theme-text); margin-bottom: 32px; } html[data-season] .v191-iletisim__items { display: flex; flex-direction: column; gap: 24px; } html[data-season] .v191-iletisim__item strong { display: block; font-size: 13px; font-weight: 800; color: var(--theme-text); margin-bottom: 4px; } html[data-season] .v191-iletisim__item span { font-size: 14px; color: var(--theme-muted); line-height: 1.5; } html[data-season] .v191-iletisim__form-title { font-size: 20px; font-weight: 800; color: var(--theme-text); margin-bottom: 24px; } html[data-season] .v191-iletisim__field { margin-bottom: 16px; } html[data-season] .v191-iletisim__field label { display: block; font-size: 11px; font-weight: 700; color: var(--theme-muted); letter-spacing: 0.5px; margin-bottom: 6px; } html[data-season] .v191-iletisim__field input, html[data-season] .v191-iletisim__field textarea { width: 100%; padding: 12px 16px; border: 1px solid var(--theme-border); border-radius: var(--radius-card, 12px); background: var(--theme-card); color: var(--theme-text); font-family: inherit; font-size: 14px; outline: none; transition: border-color .2s; } html[data-season] .v191-iletisim__field input:focus, html[data-season] .v191-iletisim__field textarea:focus { border-color: var(--theme-primary); } html[data-season] .v191-iletisim__submit { display: inline-flex; align-items: center; justify-content: center; padding: 14px 32px; border: none; border-radius: var(--radius-pill, 999px); background: var(--theme-primary); color: #fff; font-family: inherit; font-size: 12px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer; transition: opacity .2s; } html[data-season] .v191-iletisim__submit:hover { opacity: 0.85; } @media (max-width: 768px) { html[data-season] .v191-iletisim { grid-template-columns: 1fr; gap: 40px; } } /* data-season yoksa iletisim section gizle (geri dönüş güvenliği — yeni eklenen section) */ .v191-iletisim-section { display: none; } html[data-season] .v191-iletisim-section { display: block; } /* =================================================================== CANLI YAYIN MERKEZİ — canli.html açık tema override'ları Namespace: cym- (Canlı Yayın Merkezi) Tüm selector'lar dar kapsamlı; ana sayfa/global player etkilenmez. =================================================================== */ /* Sayfa arka planı */ html[data-season] body { background-color: var(--theme-bg); } /* Container metin rengi */ html[data-season] .cym-container { color: var(--theme-text); } /* Kicker (CANLI YAYIN MERKEZİ başlığı) */ html[data-season] .cym-kicker { color: var(--theme-primary); } /* Section label (Radyolar, KLAS TV) */ html[data-season] .cym-section-label { color: var(--theme-muted); } /* Radyo grid wrapper */ html[data-season] .cym-radio-grid-wrap { background: var(--theme-bg-soft); border-color: var(--theme-border); } /* Radyo kartları */ html[data-season] .cym-radio-card { background: var(--theme-card); border-color: var(--theme-border); } html[data-season] .cym-radio-card:hover { background: var(--theme-card-hover); border-color: var(--theme-border); } html[data-season] .cym-radio-card.is-playing { border-color: #E10613; background: rgba(225, 6, 19, 0.04); } /* Radyo kanal adı */ html[data-season] .cym-radio-name { color: var(--theme-text); } /* Radyo açıklama */ html[data-season] .cym-radio-desc { color: var(--theme-muted); } /* TV sarmalayıcı */ html[data-season] .cym-tv-wrap { background: #111; border-color: var(--theme-border); } /* TV badge */ html[data-season] .cym-tv-badge { background: rgba(0, 0, 0, 0.3); color: rgba(255, 255, 255, 0.6); } /* TV offline mesajı */ html[data-season] .cym-tv-offline { color: rgba(255, 255, 255, 0.35); } /* Bottom player — koyu kalıyor (marka tutarlılığı) */ html[data-season] .cym-player { background: #0D1117; border-top-color: rgba(225, 6, 19, 0.25); } /* Club pill — canli.html'de açık tema uyumu */ html[data-season] .club-pill { color: var(--theme-primary); background: var(--theme-bg-soft); border-color: var(--theme-border); } html[data-season] .club-pill::before { background: var(--theme-primary); box-shadow: 0 0 8px rgba(225, 6, 19, 0.3); } /* =================================================================== FOOTER — Açık tema Mockup'ta footer koyu kalıyor; ama token kullanıma hazır. Şimdilik koyu bırakıyoruz (footer zaten marka alanı). =================================================================== */ /* Footer intentionally left dark — brand consistency */ /* =================================================================== GLOBAL BOTTOM PLAYER — Koyu kalıyor Player her zaman koyu: marka kimliği ve okunurluk için. =================================================================== */ /* Player intentionally left dark — brand consistency */ /* KLAS DIGITAL v192 — Navbar mevsim seçici UI */ .klas-season-control{position:relative;display:inline-flex;align-items:center;z-index:7800;} .klas-season-button{height:38px;display:inline-flex;align-items:center;gap:7px;padding:0 13px;border-radius:999px;border:1px solid rgba(245,158,11,.28);background:rgba(255,255,255,.92);color:#1F2937;font-family:'Montserrat','Segoe UI',sans-serif;font-size:11px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;box-shadow:0 10px 24px rgba(245,158,11,.12);cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;} .klas-season-button:hover{border-color:rgba(245,158,11,.52);background:#fff;transform:translateY(-1px);box-shadow:0 14px 30px rgba(245,158,11,.18);} .klas-season-icon{font-size:13px;line-height:1;} .klas-season-caret{font-size:12px;line-height:1;opacity:.68;margin-left:1px;} .klas-season-menu{position:absolute;right:0;top:calc(100% + 9px);min-width:168px;padding:7px;border:1px solid rgba(17,24,39,.10);border-radius:16px;background:rgba(255,255,255,.98);box-shadow:0 18px 44px rgba(17,24,39,.16);opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;transition:opacity .16s ease,visibility .16s ease,transform .16s ease;} .klas-season-control.is-open .klas-season-menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;} .klas-season-option{width:100%;height:36px;display:flex;align-items:center;gap:9px;padding:0 10px;border:0;border-radius:11px;background:transparent;color:#374151;font-family:'Montserrat','Segoe UI',sans-serif;font-size:11px;font-weight:850;letter-spacing:.4px;text-align:left;cursor:pointer;} .klas-season-option:hover,.klas-season-option[aria-selected="true"]{background:rgba(245,158,11,.12);color:#111827;} .klas-season-nav-item{display:none;} @media(max-width:768px){ .nav-r .klas-season-control--desktop{display:none;} .klas-season-nav-item{display:block;padding:6px 2px 2px;} .klas-season-control--mobile{display:flex;width:100%;} .klas-season-control--mobile .klas-season-button{width:100%;justify-content:center;height:42px;} .klas-season-control--mobile .klas-season-menu{position:static;width:100%;margin-top:8px;box-shadow:none;transform:none;display:none;} .klas-season-control--mobile.is-open .klas-season-menu{transform:none;display:block;} } /* KLAS DIGITAL v192 Faz 1b — Hakkımızda route scroll guard Keeps the about section above the fold when /hakkimizda scrolls to #about. */ html[data-season] .about-section { min-height: calc(100vh - 80px); } /* =================================================================== KLAS DIGITAL v192 Faz 2 — Ana Sayfa Summer Visual Transformation Scope: homepage visual overrides only. No player/stream/admin/backend logic. Strategy: increase specificity instead of editing legacy inline/v190 rules. =================================================================== */ html[data-season] body { background: var(--theme-bg); } html[data-season] body .hero { background: var(--theme-bg) !important; color: var(--theme-text) !important; max-height: none !important; } html[data-season] body .hero .hero-bg { background: radial-gradient(ellipse 70% 55% at 2% 38%, var(--theme-glow) 0%, transparent 62%), linear-gradient(135deg, var(--theme-bg) 0%, var(--theme-bg-soft) 58%, #FFFFFF 100%) !important; } html[data-season] body .hero .hero-bg::after { background: radial-gradient(ellipse 56% 44% at 85% 18%, rgba(255,255,255,.58) 0%, transparent 60%), radial-gradient(ellipse 50% 36% at 16% 82%, var(--theme-glow) 0%, transparent 66%) !important; opacity: 1 !important; } html[data-season] body .hero .hero-noise { opacity: 0 !important; } html[data-season] body .hero .h-eye, html[data-season] body .hero .hero-app-title { color: var(--theme-primary) !important; } html[data-season] body .hero .h-hl, html[data-season] body .hero .h-hl-alt .h-line, html[data-season] body .hero .h-hl-alt .h-line-1, html[data-season] body .hero .h-hl-alt .h-line-2 { color: var(--theme-text) !important; } html[data-season] body .hero .h-hl .r, html[data-season] body .hero .h-hl .g, html[data-season] body .hero .h-hl-alt .r, html[data-season] body .hero .h-hl-alt .g { color: var(--theme-primary) !important; } html[data-season] body .hero .h-now-playing-strip { color: var(--theme-muted) !important; } html[data-season] body .hero .h-now-playing-strip strong { color: var(--theme-text) !important; } html[data-season] body .hero .hero-app-badge { background: rgba(255,255,255,.92) !important; border: 1px solid var(--theme-border) !important; box-shadow: 0 16px 34px rgba(17,24,39,.08) !important; } html[data-season] body .hero .hero-app-badge, html[data-season] body .hero .hero-app-badge * { color: var(--theme-text) !important; } html[data-season] body .divider { background: var(--theme-bg) !important; } html[data-season] body [data-page="home"] .section, html[data-season] body [data-page="home"] .about-section { background-color: var(--theme-bg) !important; } html[data-season] body [data-page="home"] .section.alt { background-color: var(--theme-bg-soft) !important; } html[data-season] body [data-page="home"] .news-card, html[data-season] body [data-page="home"] .v191-club-promo__card, html[data-season] body [data-page="home"] .ads-package-card, html[data-season] body [data-page="home"] .ads-form-card, html[data-season] body [data-page="home"] .about-card, html[data-season] body [data-page="home"] .about-stat, html[data-season] body [data-page="home"] .v191-iletisim__field input, html[data-season] body [data-page="home"] .v191-iletisim__field textarea { background: var(--theme-card) !important; border-color: var(--theme-border) !important; box-shadow: 0 18px 50px rgba(17,24,39,.055) !important; } html[data-season="summer"] body .hero, html[data-season="summer"] body [data-page="home"] .section.alt { background-color: #FFF8EC !important; } html[data-season="summer"] body .hero .hero-bg { background: radial-gradient(ellipse 72% 58% at 0% 42%, rgba(245,158,11,.08) 0%, transparent 64%), radial-gradient(ellipse 42% 34% at 88% 18%, rgba(255,255,255,.72) 0%, transparent 60%), linear-gradient(135deg, #FFFDF8 0%, #FFF8EC 58%, #FFFFFF 100%) !important; } /* =================================================================== KLAS DIGITAL v192 Faz 2b — Home visual QA fix Scope: homepage-only visual corrections + safe overflow guard. No player/stream/router/admin/backend logic changes. =================================================================== */ /* Season-specific homepage hero surfaces: keep each manual season visually distinct. */ html[data-season="spring"] body [data-page="home"] .hero, html[data-season="spring"] body [data-page="home"] .section.alt { background-color: #F0F9F4 !important; } html[data-season="spring"] body [data-page="home"] .hero .hero-bg { background: radial-gradient(ellipse 72% 58% at 0% 42%, rgba(16,185,129,.10) 0%, transparent 64%), radial-gradient(ellipse 42% 34% at 88% 18%, rgba(255,255,255,.72) 0%, transparent 60%), linear-gradient(135deg, #FEFFFE 0%, #F0F9F4 58%, #FFFFFF 100%) !important; } html[data-season="summer"] body [data-page="home"] .hero, html[data-season="summer"] body [data-page="home"] .section.alt { background-color: #FFF8EC !important; } html[data-season="summer"] body [data-page="home"] .hero .hero-bg { background: radial-gradient(ellipse 72% 58% at 0% 42%, rgba(245,158,11,.08) 0%, transparent 64%), radial-gradient(ellipse 42% 34% at 88% 18%, rgba(255,255,255,.72) 0%, transparent 60%), linear-gradient(135deg, #FFFDF8 0%, #FFF8EC 58%, #FFFFFF 100%) !important; } html[data-season="autumn"] body [data-page="home"] .hero, html[data-season="autumn"] body [data-page="home"] .section.alt { background-color: #F3E6D8 !important; } html[data-season="autumn"] body [data-page="home"] .hero .hero-bg { background: radial-gradient(ellipse 72% 58% at 0% 42%, rgba(180,83,9,.13) 0%, transparent 64%), radial-gradient(ellipse 42% 34% at 88% 18%, rgba(255,255,255,.66) 0%, transparent 60%), linear-gradient(135deg, #FDF7EF 0%, #F3E6D8 58%, #FFFFFF 100%) !important; } html[data-season="winter"] body [data-page="home"] .hero, html[data-season="winter"] body [data-page="home"] .section.alt { background-color: #EAF1FA !important; } html[data-season="winter"] body [data-page="home"] .hero .hero-bg { background: radial-gradient(ellipse 72% 58% at 0% 42%, rgba(59,130,246,.11) 0%, transparent 64%), radial-gradient(ellipse 42% 34% at 88% 18%, rgba(255,255,255,.70) 0%, transparent 60%), linear-gradient(135deg, #FAFBFC 0%, #EAF1FA 58%, #FFFFFF 100%) !important; } /* Replace the old dark social panel with a light editorial surface in seasonal home mode. */ html[data-season] body [data-page="home"] .editorial-social-section .real-logo-grid { background: radial-gradient(ellipse 70% 65% at 8% 0%, var(--theme-glow) 0%, transparent 58%), linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.72)) !important; border: 1px solid var(--theme-border) !important; box-shadow: 0 24px 60px rgba(17,24,39,.08), inset 0 1px 0 rgba(255,255,255,.82) !important; } html[data-season] body [data-page="home"] .editorial-social-section .real-social-card { background: rgba(255,255,255,.82) !important; border-color: var(--theme-border) !important; box-shadow: 0 16px 38px rgba(17,24,39,.075) !important; color: var(--theme-text) !important; } html[data-season] body [data-page="home"] .editorial-social-section .real-social-card:hover { background: rgba(255,255,255,.96) !important; border-color: color-mix(in srgb, var(--theme-accent) 35%, var(--theme-border)) !important; box-shadow: 0 20px 48px rgba(17,24,39,.10), 0 0 0 1px var(--theme-glow) !important; } html[data-season] body [data-page="home"] .editorial-social-section .social-card:after { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(17,24,39,.30)) !important; } /* Keep the platform cards recognisable, but reduce the old dark/glass heaviness. */ html[data-season] body [data-page="home"] .editorial-social-section .social-card-bg { opacity: .62 !important; filter: saturate(.78) brightness(1.12) !important; } html[data-season] body [data-page="home"] .editorial-social-section .social-card-name, html[data-season] body [data-page="home"] .editorial-social-section .social-card-user, html[data-season] body [data-page="home"] .editorial-social-section .social-card-action { text-shadow: 0 1px 10px rgba(17,24,39,.18) !important; } /* Homepage section consistency and safe overflow guard. */ html[data-season] body [data-page="home"] { background: var(--theme-bg) !important; overflow-x: clip; } @supports not (overflow: clip) { html[data-season] body [data-page="home"] { overflow-x: hidden; } } /* v192 Faz 2d — homepage flow + reklam compact fix Scope: CSS-only visual flow fixes. No player/router/admin logic touched. */ html[data-season] body .kd-live-strip { background: var(--theme-bg, #fff); padding: clamp(56px, 6vw, 88px) clamp(24px, 4vw, 72px); } html[data-season] body .kd-live-strip .kd-ls-inner { max-width: 1560px; margin: 0 auto; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--theme-border, rgba(225, 6, 19, .12)); border-radius: 32px; background: var(--theme-card, rgba(255,255,255,.92)); box-shadow: 0 24px 70px rgba(15, 23, 42, .06); } html[data-season] body .kd-live-strip .kd-ls-header { align-items: center; min-width: 210px; } html[data-season] body .kd-live-strip .kd-ls-grid { width: 100%; } html[data-season] body .kd-live-strip .kd-ls-card { border-color: var(--theme-border, rgba(225, 6, 19, .12)); background: var(--theme-card, #fff); box-shadow: 0 18px 44px rgba(15, 23, 42, .05); } html[data-season] body .kd-live-strip + .divider { display: none; } html[data-season] body #reklam.section, html[data-season] body #advertise.section, html[data-season] body .ads-section { min-height: auto !important; padding-bottom: clamp(64px, 7vw, 96px) !important; } html[data-season] body #reklam .ads-inner, html[data-season] body #advertise .ads-inner { align-items: start; } html[data-season] body #reklam .ads-form, html[data-season] body #advertise .ads-form { align-self: start; } html[data-season] body #about.about-section { scroll-margin-top: 120px; } html[data-season] body #iletisim.contact-section { scroll-margin-top: 120px; } /* v192 Faz 2e — route scope / flow correction Purpose: keep homepage-only channel strip out of deep scroll routes and remove dead vertical space on reklam/about routes. No player, stream, admin or HTML order changes. */ body[data-scroll-route="schedule"] .hero, body[data-scroll-route="schedule"] .kd-live-strip { display: none !important; } body[data-scroll-route="schedule"] #schedule { padding-top: clamp(72px, 7vw, 120px) !important; min-height: auto !important; } body[data-scroll-route="news"] .hero, body[data-scroll-route="news"] .kd-live-strip, body[data-scroll-route="news"] #schedule { display: none !important; } body[data-scroll-route="social"] .hero, body[data-scroll-route="social"] .kd-live-strip, body[data-scroll-route="social"] #schedule, body[data-scroll-route="social"] #news { display: none !important; } body[data-scroll-route="reklam"] .hero, body[data-scroll-route="reklam"] .kd-live-strip, body[data-scroll-route="reklam"] #schedule, body[data-scroll-route="reklam"] #news, body[data-scroll-route="reklam"] #social { display: none !important; } body[data-scroll-route="reklam"] #reklam { min-height: auto !important; padding-top: clamp(96px, 8vw, 140px) !important; padding-bottom: clamp(72px, 7vw, 110px) !important; overflow: visible !important; } body[data-scroll-route="reklam"] #reklam .reklam-shell, body[data-scroll-route="reklam"] #reklam .reklam-grid, body[data-scroll-route="reklam"] #reklam .ad-grid, body[data-scroll-route="reklam"] #reklam .ad-form, body[data-scroll-route="reklam"] #reklam .ad-form-card { overflow: visible !important; } body[data-scroll-route="about"] .hero, body[data-scroll-route="about"] .kd-live-strip, body[data-scroll-route="about"] #schedule, body[data-scroll-route="about"] #news, body[data-scroll-route="about"] #social, body[data-scroll-route="about"] #reklam, body[data-scroll-route="about"] #iletisim { display: none !important; } body[data-scroll-route="about"] #about { min-height: calc(100vh - 80px) !important; padding-top: clamp(96px, 8vw, 140px) !important; padding-bottom: clamp(72px, 7vw, 110px) !important; } /* The homepage channel strip stays on the homepage, but can no longer create page-wide overflow. */ .kd-live-strip, .kd-live-strip .kd-ls-inner, .kd-live-strip .kd-ls-grid { max-width: 100% !important; box-sizing: border-box !important; } .kd-live-strip .kd-ls-grid { overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-inline: contain !important; scrollbar-width: thin; } .kd-live-strip .kd-ls-card { flex: 0 0 auto !important; }