/* Tema tabanı (token'lar + tipografi). `global.css` YAYINA GİRMİYOR — bkz. theme-base.css başlığı. Bölüm CSS'i giriyor, o yüzden buradan. */ /* Imported from: ../../theme-base.css */ /* ========================================================================== TEMA TABANI — token'lar + tipografi yardımcı sınıfları NEDEN AYRI DOSYA: `global.css` editör önizlemesine dev sunucusunun WebSocket'i üzerinden gidiyor ama YAYINA GİRMİYOR. Yayınlanan sitede `--kombos-` token tanımları ve `display-` / `text-` sınıfları yoktu; zemin beyaz, butonlar stilsiz kalıyordu (alt bileşen CSS'i ise paylaşılan parçalarla sorunsuz gidiyor). Bu yüzden taban her BÖLÜMÜN styles.css'inden @import edilir. SEÇİCİ NOTU: bileşen CSS'i derlenirken her seçicinin başına `.cc_ ` eklenir — ölçüldü. Bu yüzden `:root` `.cc_id :root` olur ve HİÇBİR ZAMAN eşleşmez. Token'lar bu yüzden bölüm kök sınıflarına da yazılır; DOM'da her alt bileşen bir bölümün içinde olduğu için kalıtımla hepsine ulaşır. ========================================================================== */ /* NOT: ikas'ın hazır global.css başlık yorumu buradan KALDIRILDI. Sebebi: bileşen CSS kapsamlayıcısı yorumları ATLAMIYOR. Bir yorumun içinde süslü parantez geçerse onu kural sınırı sanıp yorum metnini seçiciye çeviriyor (ölçüldü: 27 seçicilik bozuk bir kural üretti). Aynı şekilde yıldız ve eğik çizginin yan yana gelmesi yorumu erken kapatır. KURAL: bu projedeki CSS yorumlarında süslü parantez kullanma. */ /* ===== Colors — Kombos Design System ===== */ .cc_MSI3fYnLer_cDZ2E4sRrC :root, .cc_MSI3fYnLer_cDZ2E4sRrC .cart-page, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-about-ema, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-emr, .cc_MSI3fYnLer_cDZ2E4sRrC .customer-email-verification, .cc_MSI3fYnLer_cDZ2E4sRrC .forgot-password, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-account-info, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-b2b, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-blog-home, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-bp, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-brand-cats, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-brand-intro, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-brand-logo, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-catalog, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-catdir, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-category-images, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-category-list, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-contact, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-features, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-footer, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-header, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-hero-slider, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-neon, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-pd, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-pd-tabs, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-product-slider, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-rich-text, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar, .cc_MSI3fYnLer_cDZ2E4sRrC .login, .cc_MSI3fYnLer_cDZ2E4sRrC .not-found, .cc_MSI3fYnLer_cDZ2E4sRrC .product-detail-reviews, .cc_MSI3fYnLer_cDZ2E4sRrC .recover-password, .cc_MSI3fYnLer_cDZ2E4sRrC .register { /* Z-Index */ --kombos-z-dropdown: 50; --kombos-z-header: 100; --kombos-z-overlay: 200; /* ========================================================== GECE VİTRİNİ — koyu tema token'ları ---------------------------------------------------------- Kombos'un token ADLARI korunur, DEĞERLERİ koyu temaya çevrilir. Böylece 51 bileşen tek dosyadan dönüşür. Skala ters çevrildi: gray-900 artık en AÇIK (ana metin), gray-50 en KOYU (yüzey). Kullanım rolleri aynı kaldığı için bileşen CSS'lerinin çoğu hiç değişmeden doğru çalışır: gray-900 → ana metin/başlık (139 metin kullanımı) gray-700 → ikincil metin (57) gray-500 → soluk metin (70) gray-200 → kenarlık (69) gray-50 → hover yüzeyi (27) Açık tema orijinalleri yorumda saklandı — geri dönmek için satırları takas etmek yeterli. ========================================================== */ /* Base — "white" bu temada KART/PANEL YÜZEYİDİR (36 zemin kullanımı) */ --kombos-white: #141a24; /* açık tema: #ffffff */ /* Sayfa zemini — Kombos'ta karşılığı yoktu; sabit (sticky) başlık ve altbilgi gibi kendi zeminini çizmek zorunda olan yüzeyler için gerekli. Editördeki "Gece Vitrini" renk şemasıyla aynı değerler. */ --kombos-bg: #0b0e14; --kombos-bg-deep: #080b10; /* Yükselti — koyu zeminde gölge "daha koyu" değil "daha derin" olmalı; açık temanın 0.06 alfa'sı görünmez kalıyor. */ --kombos-shadow-md: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.55); /* Vurgu — Kelvin mantığı: amber 2700K satar, mavi 6500K bilgilendirir */ --kombos-accent: #ffb454; /* sıcak amber — CTA, fiyat, aktif/seçili durum */ --kombos-accent-hover: #ffc478; /* amber dolgunun hover'ı — parlar, kararmaz */ --kombos-on-accent: #171008; /* DOYGUN DOLGU ÜZERİNE MÜREKKEP — amber, kırmızı rozet ve tehlike butonu dahil. Koyu temada açık metin bu dolgularda AA'yı geçmiyor (2.78:1), mürekkep geçiyor (6.19:1). */ --kombos-accent-2: #4fc3f7; /* soğuk mavi — teknik/B2B, odak halkası */ --kombos-glow-warm: rgba(255, 180, 84, 0.35); --kombos-glow-cool: rgba(79, 195, 247, 0.3); /* Prototip çizgi renkleri — kenarlıklar düz gri yerine yarı saydam beyaz. Koyu zeminde gri kenarlık "çamurlu" durur; saydam beyaz her yüzeyde çalışır. Prototipteki --line ve --line-strong karşılıkları. */ --kombos-line: rgba(255, 255, 255, 0.06); --kombos-line-strong: rgba(255, 255, 255, 0.12); /* Prototip köşe yarıçapı — kart/karo/panel köşeleri */ --kombos-radius: 16px; /* Işıklı ürün sahnesi — ürün görselleri karanlık vitrinde AÇIK bir kaide üzerinde durur (prototip .card-media). Beyaz zeminli ürün fotoğrafları multiply karışımıyla bu gradyana oturur, kesik beyaz kutu görünmez. */ --kombos-media-grad: linear-gradient(180deg, #fbfaf8 0%, #efece7 100%); --kombos-media-scrim: rgba(11, 14, 20, 0); /* Yazı aileleri — prototipte üç aile var. Kombos kuralı tek aile varsaydığı için font-family yazmayı yasaklar; bu tasarım sistemi üç aile ister. Aileler editör tipografi ayarlarında da tanımlı (Google Fonts oradan yüklenir). */ --kombos-font-head: "Space Grotesk", "Inter", system-ui, sans-serif; --kombos-font-mono: "IBM Plex Mono", ui-monospace, monospace; /* Semantic — koyu zeminde okunacak şekilde parlaklaştırıldı */ --kombos-error: #ff5a63; /* açık tema: #d4323b */ --kombos-success: #35d68a; /* açık tema: #0a8a4f */ --kombos-warning: #ffb454; /* açık tema: #b87514 */ --kombos-info: #4fc3f7; /* açık tema: #2563eb */ --kombos-badge-bg: #ff3b30; /* açık tema: #ff0000 */ --kombos-discount-bg: #ffb454; /* indirim rozeti amber (açık tema: #c8102e) */ --kombos-success-bg: #10361f; /* açık tema: #ceffb3 */ --kombos-error-hover: #ff7078; /* açık tema: #c82f37 */ /* Gray — TERS ÇEVRİLDİ (900 = en açık, 50 = en koyu) */ --kombos-gray-50: #1a2230; /* hover yüzeyi (açık tema: #fafafa) */ --kombos-gray-100: #1a2230; /* ince zemin/kenar (açık tema: #f6f6f6) */ --kombos-gray-200: #232a36; /* kenarlık (açık tema: #ececed) */ --kombos-gray-300: #5a6474; /* soluk metin/kenar (açık tema: #c4c4c6) */ --kombos-gray-400: #6f7a8c; /* placeholder metin (açık tema: #9c9c9f) */ --kombos-gray-500: #8b95a7; /* ikincil metin (açık tema: #727276) */ --kombos-gray-600: #aab3c2; /* — (açık tema: #4a4a4f) */ --kombos-gray-700: #d6dce5; /* birincil metin (açık tema: #2e2e33) */ --kombos-gray-800: #e6eaf0; /* — (açık tema: #202025) */ --kombos-gray-900: #f2f5f9; /* başlık/ana metin (açık tema: #14141a) */ /* Layout */ --kombos-max-width: 93.75rem; } /* ===== Typography — Kombos Design System ===== */ /* Font: Montserrat | Weights: Regular 400, Medium 500, Semibold 600 */ /* --- Display --- */ .cc_MSI3fYnLer_cDZ2E4sRrC .display-xxl-regular { font-weight: 400; font-size: 4.5rem; line-height: 5.625rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .display-xxl-medium { font-weight: 500; font-size: 4.5rem; line-height: 5.625rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .display-xxl-semibold { font-weight: 600; font-size: 4.5rem; line-height: 5.625rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .display-xl-regular { font-weight: 400; font-size: 3.75rem; line-height: 4.5rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .display-xl-medium { font-weight: 500; font-size: 3.75rem; line-height: 4.5rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .display-xl-semibold { font-weight: 600; font-size: 3.75rem; line-height: 4.5rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .display-lg-regular { font-weight: 400; font-size: 3rem; line-height: 3.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .display-lg-medium { font-weight: 500; font-size: 3rem; line-height: 3.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .display-lg-semibold { font-weight: 600; font-size: 3rem; line-height: 3.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .display-md-regular { font-weight: 400; font-size: 2.25rem; line-height: 2.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .display-md-medium { font-weight: 500; font-size: 2.25rem; line-height: 2.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .display-md-semibold { font-weight: 600; font-size: 2.25rem; line-height: 2.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .display-sm-regular { font-weight: 400; font-size: 1.875rem; line-height: 2.375rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .display-sm-medium { font-weight: 500; font-size: 1.875rem; line-height: 2.375rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .display-sm-semibold { font-weight: 600; font-size: 1.875rem; line-height: 2.375rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .display-xs-regular { font-weight: 400; font-size: 1.5rem; line-height: 2rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .display-xs-medium { font-weight: 500; font-size: 1.5rem; line-height: 2rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .display-xs-semibold { font-weight: 600; font-size: 1.5rem; line-height: 2rem; } /* --- Text --- */ .cc_MSI3fYnLer_cDZ2E4sRrC .text-xl-regular { font-weight: 400; font-size: 1.25rem; line-height: 1.875rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .text-xl-medium { font-weight: 500; font-size: 1.25rem; line-height: 1.875rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .text-xl-semibold { font-weight: 600; font-size: 1.25rem; line-height: 1.875rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .text-lg-regular { font-weight: 400; font-size: 1.125rem; line-height: 1.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .text-lg-medium { font-weight: 500; font-size: 1.125rem; line-height: 1.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .text-lg-semibold { font-weight: 600; font-size: 1.125rem; line-height: 1.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .text-md-regular { font-weight: 400; font-size: 1rem; line-height: 1.5rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .text-md-medium { font-weight: 500; font-size: 1rem; line-height: 1.5rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .text-md-semibold { font-weight: 600; font-size: 1rem; line-height: 1.5rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .text-sm-regular { font-weight: 400; font-size: 0.875rem; line-height: 1.25rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .text-sm-medium { font-weight: 500; font-size: 0.875rem; line-height: 1.25rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .text-sm-semibold { font-weight: 600; font-size: 0.875rem; line-height: 1.25rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .text-xs-regular { font-weight: 400; font-size: 0.75rem; line-height: 1.125rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .text-xs-medium { font-weight: 500; font-size: 0.75rem; line-height: 1.125rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .text-xs-semibold { font-weight: 600; font-size: 0.75rem; line-height: 1.125rem; } /* --- Strikethrough variants --- */ .cc_MSI3fYnLer_cDZ2E4sRrC .text-xl-medium-strike { font-weight: 500; font-size: 1.25rem; line-height: 1.875rem; text-decoration: line-through; } .cc_MSI3fYnLer_cDZ2E4sRrC .text-md-regular-strike { font-weight: 400; font-size: 1rem; line-height: 1.5rem; text-decoration: line-through; } .cc_MSI3fYnLer_cDZ2E4sRrC .text-sm-regular-strike { font-weight: 400; font-size: 0.875rem; line-height: 1.25rem; text-decoration: line-through; } .cc_MSI3fYnLer_cDZ2E4sRrC .text-xs-regular-strike { font-weight: 400; font-size: 0.75rem; line-height: 1.125rem; text-decoration: line-through; } /* --- Underline variants --- */ .cc_MSI3fYnLer_cDZ2E4sRrC .display-xxl-underline { font-weight: 400; font-size: 4.5rem; line-height: 5.625rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .display-xl-underline { font-weight: 400; font-size: 3.75rem; line-height: 4.5rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .display-lg-underline { font-weight: 400; font-size: 3rem; line-height: 3.75rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .display-md-underline { font-weight: 400; font-size: 2.25rem; line-height: 2.75rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .display-sm-underline { font-weight: 400; font-size: 1.875rem; line-height: 2.375rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .display-xs-underline { font-weight: 400; font-size: 1.5rem; line-height: 2rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .text-xl-underline { font-weight: 400; font-size: 1.25rem; line-height: 1.875rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .text-lg-underline { font-weight: 400; font-size: 1.125rem; line-height: 1.75rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .text-md-underline { font-weight: 400; font-size: 1rem; line-height: 1.5rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .text-sm-underline { font-weight: 400; font-size: 0.875rem; line-height: 1.25rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .text-xs-underline { font-weight: 400; font-size: 0.75rem; line-height: 1.125rem; text-decoration: underline; } /* --- Responsive: sm (640px+) — Tailwind-style prefix --- */ @media (min-width: 640px) { /* Display */ .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:display-xxl-regular { font-weight: 400; font-size: 4.5rem; line-height: 5.625rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:display-xxl-medium { font-weight: 500; font-size: 4.5rem; line-height: 5.625rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:display-xxl-semibold { font-weight: 600; font-size: 4.5rem; line-height: 5.625rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:display-xl-regular { font-weight: 400; font-size: 3.75rem; line-height: 4.5rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:display-xl-medium { font-weight: 500; font-size: 3.75rem; line-height: 4.5rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:display-xl-semibold { font-weight: 600; font-size: 3.75rem; line-height: 4.5rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:display-lg-regular { font-weight: 400; font-size: 3rem; line-height: 3.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:display-lg-medium { font-weight: 500; font-size: 3rem; line-height: 3.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:display-lg-semibold { font-weight: 600; font-size: 3rem; line-height: 3.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:display-md-regular { font-weight: 400; font-size: 2.25rem; line-height: 2.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:display-md-medium { font-weight: 500; font-size: 2.25rem; line-height: 2.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:display-md-semibold { font-weight: 600; font-size: 2.25rem; line-height: 2.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:display-sm-regular { font-weight: 400; font-size: 1.875rem; line-height: 2.375rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:display-sm-medium { font-weight: 500; font-size: 1.875rem; line-height: 2.375rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:display-sm-semibold { font-weight: 600; font-size: 1.875rem; line-height: 2.375rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:display-xs-regular { font-weight: 400; font-size: 1.5rem; line-height: 2rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:display-xs-medium { font-weight: 500; font-size: 1.5rem; line-height: 2rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:display-xs-semibold { font-weight: 600; font-size: 1.5rem; line-height: 2rem; } /* Text */ .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:text-xl-regular { font-weight: 400; font-size: 1.25rem; line-height: 1.875rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:text-xl-medium { font-weight: 500; font-size: 1.25rem; line-height: 1.875rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:text-xl-semibold { font-weight: 600; font-size: 1.25rem; line-height: 1.875rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:text-lg-regular { font-weight: 400; font-size: 1.125rem; line-height: 1.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:text-lg-medium { font-weight: 500; font-size: 1.125rem; line-height: 1.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:text-lg-semibold { font-weight: 600; font-size: 1.125rem; line-height: 1.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:text-md-regular { font-weight: 400; font-size: 1rem; line-height: 1.5rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:text-md-medium { font-weight: 500; font-size: 1rem; line-height: 1.5rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:text-md-semibold { font-weight: 600; font-size: 1rem; line-height: 1.5rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:text-sm-regular { font-weight: 400; font-size: 0.875rem; line-height: 1.25rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:text-sm-medium { font-weight: 500; font-size: 0.875rem; line-height: 1.25rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:text-sm-semibold { font-weight: 600; font-size: 0.875rem; line-height: 1.25rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:text-xs-regular { font-weight: 400; font-size: 0.75rem; line-height: 1.125rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:text-xs-medium { font-weight: 500; font-size: 0.75rem; line-height: 1.125rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:text-xs-semibold { font-weight: 600; font-size: 0.75rem; line-height: 1.125rem; } /* Strikethrough */ .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:text-xl-medium-strike { font-weight: 500; font-size: 1.25rem; line-height: 1.875rem; text-decoration: line-through; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:text-md-regular-strike { font-weight: 400; font-size: 1rem; line-height: 1.5rem; text-decoration: line-through; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:text-sm-regular-strike { font-weight: 400; font-size: 0.875rem; line-height: 1.25rem; text-decoration: line-through; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:text-xs-regular-strike { font-weight: 400; font-size: 0.75rem; line-height: 1.125rem; text-decoration: line-through; } /* Underline — Display */ .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:display-xxl-underline { font-weight: 400; font-size: 4.5rem; line-height: 5.625rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:display-xl-underline { font-weight: 400; font-size: 3.75rem; line-height: 4.5rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:display-lg-underline { font-weight: 400; font-size: 3rem; line-height: 3.75rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:display-md-underline { font-weight: 400; font-size: 2.25rem; line-height: 2.75rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:display-sm-underline { font-weight: 400; font-size: 1.875rem; line-height: 2.375rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:display-xs-underline { font-weight: 400; font-size: 1.5rem; line-height: 2rem; text-decoration: underline; } /* Underline — Text */ .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:text-xl-underline { font-weight: 400; font-size: 1.25rem; line-height: 1.875rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:text-lg-underline { font-weight: 400; font-size: 1.125rem; line-height: 1.75rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:text-md-underline { font-weight: 400; font-size: 1rem; line-height: 1.5rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:text-sm-underline { font-weight: 400; font-size: 0.875rem; line-height: 1.25rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .sm\:text-xs-underline { font-weight: 400; font-size: 0.75rem; line-height: 1.125rem; text-decoration: underline; } } /* --- Responsive: md (768px+) — Tailwind-style prefix --- */ @media (min-width: 768px) { /* Display */ .cc_MSI3fYnLer_cDZ2E4sRrC .md\:display-xxl-regular { font-weight: 400; font-size: 4.5rem; line-height: 5.625rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:display-xxl-medium { font-weight: 500; font-size: 4.5rem; line-height: 5.625rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:display-xxl-semibold { font-weight: 600; font-size: 4.5rem; line-height: 5.625rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:display-xl-regular { font-weight: 400; font-size: 3.75rem; line-height: 4.5rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:display-xl-medium { font-weight: 500; font-size: 3.75rem; line-height: 4.5rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:display-xl-semibold { font-weight: 600; font-size: 3.75rem; line-height: 4.5rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:display-lg-regular { font-weight: 400; font-size: 3rem; line-height: 3.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:display-lg-medium { font-weight: 500; font-size: 3rem; line-height: 3.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:display-lg-semibold { font-weight: 600; font-size: 3rem; line-height: 3.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:display-md-regular { font-weight: 400; font-size: 2.25rem; line-height: 2.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:display-md-medium { font-weight: 500; font-size: 2.25rem; line-height: 2.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:display-md-semibold { font-weight: 600; font-size: 2.25rem; line-height: 2.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:display-sm-regular { font-weight: 400; font-size: 1.875rem; line-height: 2.375rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:display-sm-medium { font-weight: 500; font-size: 1.875rem; line-height: 2.375rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:display-sm-semibold { font-weight: 600; font-size: 1.875rem; line-height: 2.375rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:display-xs-regular { font-weight: 400; font-size: 1.5rem; line-height: 2rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:display-xs-medium { font-weight: 500; font-size: 1.5rem; line-height: 2rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:display-xs-semibold { font-weight: 600; font-size: 1.5rem; line-height: 2rem; } /* Text */ .cc_MSI3fYnLer_cDZ2E4sRrC .md\:text-xl-regular { font-weight: 400; font-size: 1.25rem; line-height: 1.875rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:text-xl-medium { font-weight: 500; font-size: 1.25rem; line-height: 1.875rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:text-xl-semibold { font-weight: 600; font-size: 1.25rem; line-height: 1.875rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:text-lg-regular { font-weight: 400; font-size: 1.125rem; line-height: 1.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:text-lg-medium { font-weight: 500; font-size: 1.125rem; line-height: 1.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:text-lg-semibold { font-weight: 600; font-size: 1.125rem; line-height: 1.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:text-md-regular { font-weight: 400; font-size: 1rem; line-height: 1.5rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:text-md-medium { font-weight: 500; font-size: 1rem; line-height: 1.5rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:text-md-semibold { font-weight: 600; font-size: 1rem; line-height: 1.5rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:text-sm-regular { font-weight: 400; font-size: 0.875rem; line-height: 1.25rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:text-sm-medium { font-weight: 500; font-size: 0.875rem; line-height: 1.25rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:text-sm-semibold { font-weight: 600; font-size: 0.875rem; line-height: 1.25rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:text-xs-regular { font-weight: 400; font-size: 0.75rem; line-height: 1.125rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:text-xs-medium { font-weight: 500; font-size: 0.75rem; line-height: 1.125rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:text-xs-semibold { font-weight: 600; font-size: 0.75rem; line-height: 1.125rem; } /* Strikethrough */ .cc_MSI3fYnLer_cDZ2E4sRrC .md\:text-xl-medium-strike { font-weight: 500; font-size: 1.25rem; line-height: 1.875rem; text-decoration: line-through; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:text-md-regular-strike { font-weight: 400; font-size: 1rem; line-height: 1.5rem; text-decoration: line-through; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:text-sm-regular-strike { font-weight: 400; font-size: 0.875rem; line-height: 1.25rem; text-decoration: line-through; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:text-xs-regular-strike { font-weight: 400; font-size: 0.75rem; line-height: 1.125rem; text-decoration: line-through; } /* Underline — Display */ .cc_MSI3fYnLer_cDZ2E4sRrC .md\:display-xxl-underline { font-weight: 400; font-size: 4.5rem; line-height: 5.625rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:display-xl-underline { font-weight: 400; font-size: 3.75rem; line-height: 4.5rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:display-lg-underline { font-weight: 400; font-size: 3rem; line-height: 3.75rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:display-md-underline { font-weight: 400; font-size: 2.25rem; line-height: 2.75rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:display-sm-underline { font-weight: 400; font-size: 1.875rem; line-height: 2.375rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:display-xs-underline { font-weight: 400; font-size: 1.5rem; line-height: 2rem; text-decoration: underline; } /* Underline — Text */ .cc_MSI3fYnLer_cDZ2E4sRrC .md\:text-xl-underline { font-weight: 400; font-size: 1.25rem; line-height: 1.875rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:text-lg-underline { font-weight: 400; font-size: 1.125rem; line-height: 1.75rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:text-md-underline { font-weight: 400; font-size: 1rem; line-height: 1.5rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:text-sm-underline { font-weight: 400; font-size: 0.875rem; line-height: 1.25rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .md\:text-xs-underline { font-weight: 400; font-size: 0.75rem; line-height: 1.125rem; text-decoration: underline; } } /* --- Responsive: lg (1024px+) — Tailwind-style prefix --- */ @media (min-width: 1024px) { /* Display */ .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:display-xxl-regular { font-weight: 400; font-size: 4.5rem; line-height: 5.625rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:display-xxl-medium { font-weight: 500; font-size: 4.5rem; line-height: 5.625rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:display-xxl-semibold { font-weight: 600; font-size: 4.5rem; line-height: 5.625rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:display-xl-regular { font-weight: 400; font-size: 3.75rem; line-height: 4.5rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:display-xl-medium { font-weight: 500; font-size: 3.75rem; line-height: 4.5rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:display-xl-semibold { font-weight: 600; font-size: 3.75rem; line-height: 4.5rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:display-lg-regular { font-weight: 400; font-size: 3rem; line-height: 3.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:display-lg-medium { font-weight: 500; font-size: 3rem; line-height: 3.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:display-lg-semibold { font-weight: 600; font-size: 3rem; line-height: 3.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:display-md-regular { font-weight: 400; font-size: 2.25rem; line-height: 2.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:display-md-medium { font-weight: 500; font-size: 2.25rem; line-height: 2.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:display-md-semibold { font-weight: 600; font-size: 2.25rem; line-height: 2.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:display-sm-regular { font-weight: 400; font-size: 1.875rem; line-height: 2.375rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:display-sm-medium { font-weight: 500; font-size: 1.875rem; line-height: 2.375rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:display-sm-semibold { font-weight: 600; font-size: 1.875rem; line-height: 2.375rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:display-xs-regular { font-weight: 400; font-size: 1.5rem; line-height: 2rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:display-xs-medium { font-weight: 500; font-size: 1.5rem; line-height: 2rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:display-xs-semibold { font-weight: 600; font-size: 1.5rem; line-height: 2rem; } /* Text */ .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:text-xl-regular { font-weight: 400; font-size: 1.25rem; line-height: 1.875rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:text-xl-medium { font-weight: 500; font-size: 1.25rem; line-height: 1.875rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:text-xl-semibold { font-weight: 600; font-size: 1.25rem; line-height: 1.875rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:text-lg-regular { font-weight: 400; font-size: 1.125rem; line-height: 1.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:text-lg-medium { font-weight: 500; font-size: 1.125rem; line-height: 1.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:text-lg-semibold { font-weight: 600; font-size: 1.125rem; line-height: 1.75rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:text-md-regular { font-weight: 400; font-size: 1rem; line-height: 1.5rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:text-md-medium { font-weight: 500; font-size: 1rem; line-height: 1.5rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:text-md-semibold { font-weight: 600; font-size: 1rem; line-height: 1.5rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:text-sm-regular { font-weight: 400; font-size: 0.875rem; line-height: 1.25rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:text-sm-medium { font-weight: 500; font-size: 0.875rem; line-height: 1.25rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:text-sm-semibold { font-weight: 600; font-size: 0.875rem; line-height: 1.25rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:text-xs-regular { font-weight: 400; font-size: 0.75rem; line-height: 1.125rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:text-xs-medium { font-weight: 500; font-size: 0.75rem; line-height: 1.125rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:text-xs-semibold { font-weight: 600; font-size: 0.75rem; line-height: 1.125rem; } /* Strikethrough */ .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:text-xl-medium-strike { font-weight: 500; font-size: 1.25rem; line-height: 1.875rem; text-decoration: line-through; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:text-md-regular-strike { font-weight: 400; font-size: 1rem; line-height: 1.5rem; text-decoration: line-through; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:text-sm-regular-strike { font-weight: 400; font-size: 0.875rem; line-height: 1.25rem; text-decoration: line-through; } /* Underline — Display */ .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:display-xxl-underline { font-weight: 400; font-size: 4.5rem; line-height: 5.625rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:display-xl-underline { font-weight: 400; font-size: 3.75rem; line-height: 4.5rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:display-lg-underline { font-weight: 400; font-size: 3rem; line-height: 3.75rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:display-md-underline { font-weight: 400; font-size: 2.25rem; line-height: 2.75rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:display-sm-underline { font-weight: 400; font-size: 1.875rem; line-height: 2.375rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:display-xs-underline { font-weight: 400; font-size: 1.5rem; line-height: 2rem; text-decoration: underline; } /* Underline — Text */ .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:text-xl-underline { font-weight: 400; font-size: 1.25rem; line-height: 1.875rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:text-lg-underline { font-weight: 400; font-size: 1.125rem; line-height: 1.75rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:text-md-underline { font-weight: 400; font-size: 1rem; line-height: 1.5rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:text-sm-underline { font-weight: 400; font-size: 0.875rem; line-height: 1.25rem; text-decoration: underline; } .cc_MSI3fYnLer_cDZ2E4sRrC .lg\:text-xs-underline { font-weight: 400; font-size: 0.75rem; line-height: 1.125rem; text-decoration: underline; } } /* --- Icons --- */ .cc_MSI3fYnLer_cDZ2E4sRrC svg.kombos-icon { fill: none; font-size: inherit; height: 1em; } .cc_MSI3fYnLer_cDZ2E4sRrC svg.kombos-icon path { color: currentColor; } /* ===== Container — Max-Width Wrapper ===== */ .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-container { max-width: var(--kombos-max-width); margin-left: auto; margin-right: auto; width: 100%; padding-left: 1rem; padding-right: 1rem; } @media (min-width: 768px) { .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-container { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1024px) { .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-container { padding-left: 1.5rem; padding-right: 1.5rem; } } /* ===== Base Reset ===== */ .cc_MSI3fYnLer_cDZ2E4sRrC * { word-break: break-word; } /* ===== Richtext ===== */ .cc_MSI3fYnLer_cDZ2E4sRrC img, .cc_MSI3fYnLer_cDZ2E4sRrC video { max-width: 100%; height: auto; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext { color: var(--kombos-gray-900); font-size: 14px; overflow: hidden; position: relative; width: 100%; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext th { font-weight: bolder; text-align: left; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext caption { text-align: left; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext h1 { font-size: 2em; margin: 0; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext h2 { font-size: 1.5em; margin: 0; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext h3 { font-size: 1.17em; margin: 0; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext h4, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext p, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext blockquote, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext ul, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext fieldset, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext form, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext ol, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext dl, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext dir, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext menu { margin: 0; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext h5 { font-size: 0.83em; margin: 0; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext h6 { font-size: 0.75em; margin: 0; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext h1, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext h2, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext h3, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext h4, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext h5, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext h6, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext b, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext strong { font-weight: bolder; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext blockquote { margin-top: 0.625rem !important; margin-bottom: 0.625rem !important; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext i, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext cite, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext em, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext var, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext address { font-style: italic; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext pre, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext tt, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext code, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext kbd, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext samp { font-family: monospace; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext pre { white-space: pre; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext big { font-size: 1.17em; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext small, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext sub, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext sup { font-size: 0.83em; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext sub { vertical-align: sub; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext sup { vertical-align: super; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext table { border-spacing: 2px; border-collapse: collapse; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext thead, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext tbody, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext tfoot { vertical-align: middle; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext td, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext th, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext tr { vertical-align: inherit; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext s, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext strike, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext del { text-decoration: line-through; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext hr { border: 1px inset; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext ol, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext ul, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext dir, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext menu, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext dd { margin-left: 2.5rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext ol { list-style-type: decimal; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext ul { list-style-type: disc; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext ol ul, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext ul ol, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext ul ul, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext ol ol { margin-top: 0; margin-bottom: 0; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext { line-height: 1.2; } /* HTML5 */ .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-richtext figure { margin: 1em 40px; } .cc_MSI3fYnLer_cDZ2E4sRrC .centered-images img { margin: 0 auto; } /* ===== Reduced Motion ===== */ @media (prefers-reduced-motion: reduce) { .cc_MSI3fYnLer_cDZ2E4sRrC *, .cc_MSI3fYnLer_cDZ2E4sRrC *::before, .cc_MSI3fYnLer_cDZ2E4sRrC *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ===== Shimmer Animation ===== */ @keyframes cc_MSI3fYnLer_cDZ2E4sRrC_kombos-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* ========================================================================== ZENGİN METİN — mağaza panelinden gelen HTML Platformun temel CSS'i h1-h6 etiketlerini sıfırlıyor: hepsi gövde boyutunda ve kenar boşluksuz geliyordu, bu yüzden başlıklar paragraflardan ayırt edilemiyor ve birbirine yapışıyordu. Panelden gelen metnin yapısını burada geri veriyoruz. Renk etkisizleştirmesi ilgili bileşenlerin kendi CSS'inde; burası yalnız TİPOGRAFİ ve RİTİM. Yeni bir zengin metin alanı eklersen sınıfını bu listeye ekle. ========================================================================== */ .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-bp__content :is(h1, h2, h3, h4, h5, h6), .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-category-list__description :is(h1, h2, h3, h4, h5, h6), .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-pd-desc__body :is(h1, h2, h3, h4, h5, h6) { display: block; margin: 1.75rem 0 0.5rem; line-height: 1.25; font-family: "Space Grotesk", Inter, system-ui, sans-serif; letter-spacing: -0.01em; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-bp__content :is(h1, h2, h3, h4, h5, h6):first-child, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-category-list__description :is(h1, h2, h3, h4, h5, h6):first-child, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-pd-desc__body :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-bp__content h1, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-category-list__description h1, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-pd-desc__body h1 { font-size: 1.5rem; font-weight: 700; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-bp__content h2, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-category-list__description h2, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-pd-desc__body h2 { font-size: 1.25rem; font-weight: 700; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-bp__content h3, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-category-list__description h3, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-pd-desc__body h3 { font-size: 1.0625rem; font-weight: 600; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-bp__content :is(h4, h5, h6), .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-category-list__description :is(h4, h5, h6), .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-pd-desc__body :is(h4, h5, h6) { font-size: 1rem; font-weight: 600; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-bp__content p, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-category-list__description p, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-pd-desc__body p { margin: 0 0 0.875rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-bp__content :is(ul, ol), .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-category-list__description :is(ul, ol), .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-pd-desc__body :is(ul, ol) { margin: 0 0 0.875rem; padding-left: 1.25rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-bp__content li, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-category-list__description li, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-pd-desc__body li { margin-bottom: 0.375rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-bp__content :is(p, ul, ol):last-child, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-category-list__description :is(p, ul, ol):last-child, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-pd-desc__body :is(p, ul, ol):last-child { margin-bottom: 0; } /* ========================================================================== GECE VİTRİNİ ORTAK KALIPLARI — prototipten birebir Prototipteki .mono, .sec-head, .sec-eyebrow, .sec-title, .sec-link kalıplarının bileşen karşılıkları. Her bölüm styles.css'i bu dosyayı @import ettiği için bu sınıflar her bölümde kullanılabilir. ========================================================================== */ /* Mono etiket — spec çipleri, eyebrow'lar, rozetler (prototip .mono) */ .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-mono { font-family: var(--kombos-font-mono); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; } /* Bölüm başlığı satırı — başlık solda, "tümünü gör" sağda, alta hizalı */ .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 2.75rem; } /* Eyebrow — başlığın üstündeki mono etiket, önünde 24px amber çizgi */ .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-sec-eyebrow { font-family: var(--kombos-font-mono); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kombos-gray-500); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.625rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-sec-eyebrow::before { content: ""; width: 1.5rem; height: 1px; background: var(--kombos-accent); display: inline-block; } /* Bölüm başlığı — Space Grotesk, sıkı aralık */ .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-sec-title { font-family: var(--kombos-font-head); font-weight: 700; font-size: clamp(1.75rem, 4vw, 2.75rem); letter-spacing: -0.02em; line-height: 1.12; color: var(--kombos-gray-900); } /* "Tümünü gör" bağlantısı — amber, hover'da ok açılır */ .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-sec-link { color: var(--kombos-accent); font-weight: 600; font-size: 0.9375rem; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; transition: gap 0.25s; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-sec-link:hover { gap: 0.75rem; } /* End import: ../../theme-base.css */ /* ===== SolarStory — gün'den geceye stilize solar sahne ===== MÜŞTERİ KARARI: ürün fotoğrafı YOK, sahne CSS çizimi. Koni ve havuz geometrisi prototipten birebir — koni merkezi lamba kafası merkezidir, göz kararı oynama. Çizim ölçüleri bilerek px (bu bir illüstrasyon, arayüz boşluğu değil); ölçekleme media query'lerde transform ile. */ .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar { width: 100%; position: relative; /* KAYDIRMA SAHASI: sahne sticky, kullanıcı 260vh boyunca kaydırırken gün geceye döner (--solar-p 0-1, TSX yazar); son üçte bir final sahnesi. Geri kaydırınca geri sarar — animasyon her görünüşte yeniden oynar. */ height: 320vh; /* Bölüm kendi zeminini çizer — kod bileşenleri `body`/sayfa zeminini boyayamaz, CLI o kuralları düşürür (bkz. global.css başlığı). */ background: var(--kombos-bg); color: var(--kombos-gray-900); } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__scene { position: sticky; top: 0; height: 100vh; min-height: 40rem; overflow: hidden; display: flex; align-items: center; } /* Masaüstü: panel dikeyde ortalanır ama üstte yapışkan duyuru + menü yüksekliğini aşan pay GARANTİ — panel uzunken başlık menü altında kalıyordu (canlıda görüldü). Flex ortalama içerik kutusunda çalıştığı için padding kadar üst boşluk her zaman korunur. */ @media (min-width: 861px) { .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__scene { box-sizing: border-box; padding-top: calc(var(--kombos-announce-h, 0px) + 6.5rem); padding-bottom: 2rem; } } /* --- Gökyüzü katmanları --- */ .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__sky { position: absolute; inset: 0; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__sky--day { background: linear-gradient(180deg, #7fb7de 0%, #a8cbe0 45%, #c9d6d3 100%); } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__sky--night { background: linear-gradient(180deg, #05070c 0%, #0b0e14 60%, #10141d 100%); /* p 0.05-0.40 aralığında kararır; taşan değerleri tarayıcı kırpar */ opacity: calc((var(--solar-p, 0) - 0.04) / 0.28); } /* Güneş — gece batar */ .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__sun { position: absolute; left: 14%; top: 16%; width: 110px; height: 110px; border-radius: 999px; background: radial-gradient( circle, #fff3d6 20%, #ffd98a 60%, rgba(255, 217, 138, 0) 72% ); box-shadow: 0 0 90px 40px rgba(255, 220, 150, 0.55); transform: translateY(calc(var(--solar-p, 0) * 90vh)); opacity: calc(1 - (var(--solar-p, 0) - 0.18) / 0.15); } /* Yıldızlar — gece belirir */ .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__stars { position: absolute; inset: 0; opacity: calc((var(--solar-p, 0) - 0.26) / 0.22); background-image: radial-gradient(1.5px 1.5px at 12% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 28% 12%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 44% 28%, #dfe9ff 50%, transparent 51%), radial-gradient(1px 1px at 61% 15%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 74% 24%, #dfe9ff 50%, transparent 51%), radial-gradient(1px 1px at 86% 10%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 93% 32%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 35% 40%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 55% 45%, #dfe9ff 50%, transparent 51%); } /* Zemin */ .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__ground { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(180deg, rgba(8, 11, 16, 0) 0%, #080b10 55%); } /* Sol taraf metin okunurluğu için perde */ .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient( 90deg, rgba(5, 7, 12, 0.55) 0%, rgba(5, 7, 12, 0.15) 50%, transparent 70% ); } /* --- Armatür silüetleri --- */ .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__fixtures { position: absolute; right: 4%; bottom: 14%; width: min(46vw, 660px); height: 58vh; min-height: 380px; z-index: 2; pointer-events: none; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__sf { position: absolute; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__label { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); font-family: var(--kombos-font-mono); font-weight: 500; font-size: 10px; letter-spacing: 0.08em; color: var(--kombos-gray-500); white-space: nowrap; } /* Solar panel parçası — hepsinde ortak doku */ .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__panel { position: absolute; background: linear-gradient(135deg, #2a3a55, #141e2e); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 2px; } /* Parıltılar: hepsi kapalı başlar, gece SIRAYLA yanar. Yalnız opacity anime edilir; gecikmeler ateşleme sırasını verir. */ .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__glow { opacity: 0; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__glow { transition: opacity 0.5s ease; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s-pole .kombos-solar__pole-headglow, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s-pole .kombos-solar__pole-cone, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s-pole .kombos-solar__pole-pool { opacity: 1; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s-bollard .kombos-solar__bollard-slitglow, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s-bollard .kombos-solar__bollard-pool { opacity: 1; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s-spike .kombos-solar__spike-upcone { opacity: 1; } /* 1) Solar sokak direği */ .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__pole { right: 3%; bottom: 0; width: 14px; height: 80%; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__pole-mast { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 9px; height: 100%; background: linear-gradient(90deg, #151a23, #2c3340 50%, #10141b); border-radius: 5px 5px 0 0; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__pole-arm { position: absolute; top: 0; right: 4px; width: 78px; height: 8px; border-radius: 6px; background: linear-gradient(180deg, #2c3340, #151a23); } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__pole-head { position: absolute; top: 3px; right: 54px; width: 48px; height: 12px; border-radius: 6px; background: linear-gradient(180deg, #333b4a, #171c26); } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__pole-panel { top: -6px; right: 56px; width: 42px; height: 6px; transform: skewX(-16deg); } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__pole-headglow { position: absolute; top: 12px; right: 60px; width: 36px; height: 4px; border-radius: 3px; background: #ffe1ac; box-shadow: 0 0 16px 5px rgba(255, 214, 150, 0.85); } /* Koni ve havuz lamba kafasının tam altında — right hesabı prototipten */ .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__pole-cone { position: absolute; top: 15px; right: -37px; width: 230px; height: 46vh; min-height: 250px; background: radial-gradient( ellipse 46% 58% at 50% 0%, rgba(255, 199, 120, 0.34) 0%, rgba(255, 199, 120, 0.12) 45%, transparent 72% ); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__pole-pool { position: absolute; bottom: -6vh; right: -72px; width: 300px; height: 96px; background: radial-gradient( ellipse at center, rgba(255, 199, 120, 0.38) 0%, transparent 66% ); mix-blend-mode: screen; } /* 2) Bollard */ .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__bollard { right: 58%; bottom: 0; width: 30px; height: 24%; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__bollard-body { position: absolute; inset: 0; border-radius: 9px 9px 3px 3px; background: linear-gradient(90deg, #141922, #2a303c 50%, #0f141c); } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__bollard-panel { top: -5px; left: 2px; width: 26px; height: 5px; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__bollard-slit { position: absolute; left: 5px; right: 5px; top: 15%; height: 26%; border-radius: 4px; background: #0b0f16; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__bollard-slitglow { position: absolute; left: 5px; right: 5px; top: 15%; height: 26%; border-radius: 4px; background: #ffdfa8; box-shadow: 0 0 20px 7px rgba(255, 203, 130, 0.6); } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__bollard-pool { position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%); width: 190px; height: 56px; background: radial-gradient( ellipse at center, rgba(255, 199, 120, 0.34) 0%, transparent 66% ); mix-blend-mode: screen; } /* 3) Çim saplama spot — yukarı vurur; koni çanağın tam üstünden başlar */ .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__spike { right: 31%; bottom: 0; width: 44px; height: 92px; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__spike-stem { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 4px; height: 46px; background: linear-gradient(90deg, #10141b, #252c38); } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__spike-cup { position: absolute; bottom: 42px; left: 50%; transform: translateX(-50%); width: 28px; height: 15px; border-radius: 50% 50% 4px 4px; background: linear-gradient(180deg, #333b4a, #171c26); } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__spike-panel { bottom: 56px; left: 50%; width: 22px; height: 4px; transform: translateX(-50%); } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__spike-upcone { position: absolute; bottom: 57px; left: 50%; transform: translateX(-50%); width: 130px; height: 200px; background: radial-gradient( ellipse 52% 62% at 50% 100%, rgba(255, 210, 140, 0.3) 0%, rgba(255, 210, 140, 0.1) 45%, transparent 72% ); clip-path: polygon(0 0, 100% 0, 61% 100%, 39% 100%); } /* 4) Peri LED zinciri — .kombos-icon 1em ölçüsünü ezer */ /* Çift sınıf: svg.kombos-icon (etiket+sınıf) height 1em kuralını ezmek için — tek sınıf yenik düşüyordu (DevTools'ta görüldü) */ .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__fairy.kombos-solar__fairy { position: absolute; left: -2%; top: 4%; /* Yükseklik sabit 8em (müşteri denedi, beğendi); genişlik orandan türer. aspect-ratio şart — SVG'nin içsel oranı yok, olmadan yükseklik çöker (canlıda 16px ölçüldü; viewBox 400x90). */ height: 8em; width: auto; aspect-ratio: 400 / 90; overflow: visible; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__fairy circle { opacity: 0; filter: drop-shadow(0 0 5px rgba(255, 217, 160, 0.9)); } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__fairy circle { transition: opacity 0.45s ease; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s-fairy .kombos-solar__fairy circle { opacity: 1; } /* Noktalar zincir boyunca sırayla yanar */ .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s-fairy .kombos-solar__fairy circle:nth-of-type(1) { transition-delay: 0.00s; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s-fairy .kombos-solar__fairy circle:nth-of-type(2) { transition-delay: 0.06s; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s-fairy .kombos-solar__fairy circle:nth-of-type(3) { transition-delay: 0.12s; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s-fairy .kombos-solar__fairy circle:nth-of-type(4) { transition-delay: 0.18s; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s-fairy .kombos-solar__fairy circle:nth-of-type(5) { transition-delay: 0.24s; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s-fairy .kombos-solar__fairy circle:nth-of-type(6) { transition-delay: 0.30s; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s-fairy .kombos-solar__fairy circle:nth-of-type(7) { transition-delay: 0.36s; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s-fairy .kombos-solar__fairy circle:nth-of-type(8) { transition-delay: 0.42s; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s-fairy .kombos-solar__fairy circle:nth-of-type(9) { transition-delay: 0.48s; } /* Zincir 8em'e büyüdü — etiket yayın ALTINA iner */ .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__label--fairy { left: 30%; top: calc(4% + 8em + 14px); transform: none; } /* --- Sol metin paneli --- */ .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__copy { position: relative; z-index: 3; max-width: 29.375rem; margin-left: max(4vw, calc((100vw - 77.5rem) / 2)); background: rgba(5, 7, 12, 0.55); padding: 1.625rem; border-radius: 18px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Adımlar kaydırmayla TEK TEK belirir: aktif adım parlak, öncekiler soluk kalır (kaynak sırası önemli: soluklaştırma kuralları aktif kurallardan SONRA gelir ki üst sahnede kazansın) */ .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__step { margin-bottom: 2.125rem; opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s1 .kombos-solar__step:nth-child(1) { opacity: 1; transform: none; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s2 .kombos-solar__step:nth-child(1) { opacity: 0.35; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s2 .kombos-solar__step:nth-child(2) { opacity: 1; transform: none; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s3 .kombos-solar__step:nth-child(2) { opacity: 0.35; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s3 .kombos-solar__step:nth-child(3) { opacity: 1; transform: none; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__step-label { display: block; margin-bottom: 0.625rem; font-family: var(--kombos-font-mono); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kombos-accent-2); } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__step-title { margin: 0 0 0.5rem; font-family: var(--kombos-font-head); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.125rem); letter-spacing: -0.02em; line-height: 1.12; color: var(--kombos-gray-900); } /* Adım açıklamaları yalnız masaüstünde — mobilde etiket + başlık yeter (müşteri istedi; dar ekranda panel sahneyi kapatıyordu) */ .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__step-text { display: none; margin: 0; color: var(--kombos-gray-500); line-height: 1.6; } @media (min-width: 1024px) { .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__step-text { display: block; } } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__cta-wrap { margin-top: 0.625rem; opacity: 0; transition: opacity 0.5s ease 0.15s; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s3 .kombos-solar__cta-wrap { opacity: 1; } /* CTA — prototip .btn-amber */ .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__cta { display: inline-flex; align-items: center; justify-content: center; padding: 0.875rem 1.75rem; border-radius: 999px; font-weight: 600; font-size: 0.9375rem; text-decoration: none; background: var(--kombos-accent); color: var(--kombos-on-accent); box-shadow: 0 0 24px rgba(255, 180, 84, 0.25); transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__cta:hover { background: var(--kombos-accent-hover); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 180, 84, 0.28), 0 0 44px rgba(255, 180, 84, 0.35); } /* ===== Ölçekleme ===== */ @media (max-width: 1100px) { .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__fixtures { right: 2%; transform: scale(0.85); transform-origin: bottom right; } } @media (max-width: 860px) { /* DİKEY AYRIM: panel sahnenin ÜSTÜNE yaslanır ve kompaktlaşır, armatürler alt bölgede kendi alanında kalır — panel çizimleri örtüyordu (canlıda görüldü) */ .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__scene { align-items: flex-start; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__fixtures { right: 0; bottom: 4%; width: 88vw; /* Daha uzun kutu = zincir (kutunun tepesi) panele yaklaşır, buton ile direk arasındaki boş bant kapanır (müşteri istedi) */ height: 46vh; min-height: 300px; transform: scale(0.75); transform-origin: bottom right; } /* Zincir mobilde daha SOLDA ve bir kademe küçük — sağdan taşıyordu */ .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__fairy.kombos-solar__fairy { left: -8em; height: 6em; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__label--fairy { top: calc(4% + 6em + 12px); left: 3em; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__label { font-size: 9px; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__copy { margin-inline: 4vw; max-width: none; /* Sticky navbar + duyuru barının altından başlar */ margin-top: 6.5rem; padding: 1.125rem 1.25rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__step { margin-bottom: 1.125rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__step-title { font-size: 1.25rem; } .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__step-label { margin-bottom: 0.375rem; } }