/* ========================================================================== Karanlık mod — -------------------------------------------------------------------------- system.css ve shop.css'ten SONRA yüklenir; yalnızca renk katmanını değiştirir. Ölçü, yerleşim ve tipografi bu dosyada YER ALMAZ. Yapı: 1) Tasarım belirteçleri (tokens) — çoğu bileşen bunlarla otomatik döner 2) Belirteç kullanmayan sabit renkli kurallar için hedefli düzeltmeler 3) Görsel, gölge, kaydırma çubuğu, seçim gibi tarayıcı katmanı ========================================================================== */ /* ------------------------------------------------------------------ 1) BELİRTEÇLER Açık palet kurumsal lacivert-mavi üzerine kurulu; karanlık palet de aynı aileden türetildi (nötr gri değil), böylece marka hissi korunuyor. ------------------------------------------------------------------ */ :root[data-tema="koyu"] { color-scheme: dark; /* zeminler */ --bg: #0b0f1a; --bg-soft: #111726; --bg-tint: #131c33; --surface: #141a29; --surface-elevated: #1a2133; /* metin */ --ink: #f2f5fa; --ink-2: #dde4ee; --ink-3: #c0cad9; --muted: #94a1b6; --muted-2: #6f7c92; /* çizgiler */ --line: #232b3d; --line-soft: #1b2232; --line-strong: #35405a; /* birincil — koyu zeminde okunurluk için açıldı */ --primary: #4d84f5; --primary-hover: #6394f7; --primary-active: #7ba7ff; --primary-soft: #16233d; --primary-ink: #ffffff; --accent: #4d84f5; --accent-2: #7ba7ff; --accent-soft: #16233d; --accent-ink: #ffffff; --copper: #e09a5f; --copper-soft: #2b1f14; --copper-ink: #f6ddc4; --forest: #0e1626; --forest-2: #16203a; --forest-soft: #1e2a47; --ok: #34d17f; --ok-soft: #10261a; --warn: #fbbf3c; --warn-soft: #2a2010; --danger: #f8716b; --danger-soft: #2c1416; /* gölgeler — açık moddaki lacivert alfa karanlıkta görünmez, saf siyaha geçildi */ --shadow-xs: 0 1px 2px #00000052; --shadow-sm: 0 1px 3px #00000066, 0 1px 2px #0000004d; --shadow-md: 0 8px 24px -8px #00000080, 0 4px 12px -4px #00000066; --shadow-lg: 0 24px 60px -16px #0000008c, 0 10px 30px -10px #00000073; --shadow-xl: 0 40px 80px -24px #00000099, 0 20px 50px -16px #00000080; --shadow-blue: 0 12px 32px -8px #4d84f552; } /* İşletim sistemi karanlık ve kullanıcı henüz seçim yapmadıysa aynı palet. data-tema yazılı olduğunda bu blok devre dışı kalır (seçim her zaman kazanır). */ @media (prefers-color-scheme: dark) { :root:not([data-tema]) { color-scheme: dark; --bg:#0b0f1a; --bg-soft:#111726; --bg-tint:#131c33; --surface:#141a29; --surface-elevated:#1a2133; --ink:#f2f5fa; --ink-2:#dde4ee; --ink-3:#c0cad9; --muted:#94a1b6; --muted-2:#6f7c92; --line:#232b3d; --line-soft:#1b2232; --line-strong:#35405a; --primary:#4d84f5; --primary-hover:#6394f7; --primary-active:#7ba7ff; --primary-soft:#16233d; --primary-ink:#fff; --accent:#4d84f5; --accent-2:#7ba7ff; --accent-soft:#16233d; --accent-ink:#fff; --copper:#e09a5f; --copper-soft:#2b1f14; --copper-ink:#f6ddc4; --forest:#0e1626; --forest-2:#16203a; --forest-soft:#1e2a47; --ok:#34d17f; --ok-soft:#10261a; --warn:#fbbf3c; --warn-soft:#2a2010; --danger:#f8716b; --danger-soft:#2c1416; --shadow-xs:0 1px 2px #00000052; --shadow-sm:0 1px 3px #00000066, 0 1px 2px #0000004d; --shadow-md:0 8px 24px -8px #00000080, 0 4px 12px -4px #00000066; --shadow-lg:0 24px 60px -16px #0000008c, 0 10px 30px -10px #00000073; --shadow-xl:0 40px 80px -24px #00000099, 0 20px 50px -16px #00000080; --shadow-blue:0 12px 32px -8px #4d84f552; } } /* ------------------------------------------------------------------ 2) BELİRTEÇ KULLANMAYAN KURALLAR Aşağıdaki seçiciler kaynak dosyalarda sabit #fff zemin kullanıyor. Kaynak dosyalar belirtece geçirilene kadar burada karşılanıyorlar. ------------------------------------------------------------------ */ :root[data-tema="koyu"] .about-main-card, :root[data-tema="koyu"] .about-proof-card, :root[data-tema="koyu"] .about-stats-section, :root[data-tema="koyu"] .about-visual, :root[data-tema="koyu"] .admin-card, :root[data-tema="koyu"] .admin-collapsible-summary, :root[data-tema="koyu"] .admin-empty, :root[data-tema="koyu"] .admin-feature-row, :root[data-tema="koyu"] .admin-filter-bar, :root[data-tema="koyu"] .admin-message, :root[data-tema="koyu"] .admin-offer-actions, :root[data-tema="koyu"] .admin-page-meta, :root[data-tema="koyu"] .admin-page-pill, :root[data-tema="koyu"] .admin-section-features, :root[data-tema="koyu"] .admin-transcript-bot, :root[data-tema="koyu"] .admin-transcript-row, :root[data-tema="koyu"] .article-card, :root[data-tema="koyu"] .blog-share-btn, :root[data-tema="koyu"] .blog-sidebar-card, :root[data-tema="koyu"] .blog-toc, :root[data-tema="koyu"] .card, :root[data-tema="koyu"] .career-card, :root[data-tema="koyu"] .chat-bubble-bot, :root[data-tema="koyu"] .chat-card, :root[data-tema="koyu"] .chat-form-cancel, :root[data-tema="koyu"] .chat-lead-form, :root[data-tema="koyu"] .chat-panel, :root[data-tema="koyu"] .chat-quick-reply, :root[data-tema="koyu"] .choice-pill, :root[data-tema="koyu"] .clean-blog-card, :root[data-tema="koyu"] .clean-faq-preview, :root[data-tema="koyu"] .clean-hero, :root[data-tema="koyu"] .clean-home, :root[data-tema="koyu"] .clean-projects, :root[data-tema="koyu"] .commerce-window, :root[data-tema="koyu"] .faq-line, :root[data-tema="koyu"] .faq-simple-section, :root[data-tema="koyu"] .feature-detail-main, :root[data-tema="koyu"] .feature-detail-visual, :root[data-tema="koyu"] .feature-grid, :root[data-tema="koyu"] .info-card, :root[data-tema="koyu"] .platform-card, :root[data-tema="koyu"] .project-detail-media, :root[data-tema="koyu"] .project-tile, :root[data-tema="koyu"] .sector-card, :root[data-tema="koyu"] .seo-article-section, :root[data-tema="koyu"] .solution-list-card, :root[data-tema="koyu"] .tile-card, :root[data-tema="koyu"] .wizard-card, :root[data-tema="koyu"] .wizard-checkbox, :root[data-tema="koyu"] .wizard-option, :root[data-tema="koyu"] .wizard-preview-row.is-filled { background: var(--surface); border-color: var(--line); color: var(--ink-2); } /* form alanları */ :root[data-tema="koyu"] .field input, :root[data-tema="koyu"] .field select, :root[data-tema="koyu"] .field textarea, :root[data-tema="koyu"] .admin-actions-grid select, :root[data-tema="koyu"] .admin-filter-field select { background: var(--bg-soft); border-color: var(--line); color: var(--ink); } :root[data-tema="koyu"] .chat-form-grid input:focus, :root[data-tema="koyu"] .chat-form-grid select:focus, :root[data-tema="koyu"] .chat-form-grid textarea:focus, :root[data-tema="koyu"] .field input:focus, :root[data-tema="koyu"] .field select:focus, :root[data-tema="koyu"] .field textarea:focus { background: var(--surface-elevated); border-color: var(--primary); } :root[data-tema="koyu"] input::placeholder, :root[data-tema="koyu"] textarea::placeholder { color: var(--muted-2); } /* renkli zemin üzerinde duran küçük beyaz parçalar — olduğu gibi kalmalı, yalnız kontrastı düşenler yükseltiliyor */ :root[data-tema="koyu"] .process-step-num, :root[data-tema="koyu"] .hero-shop-product-badge, :root[data-tema="koyu"] .solution-brand-list span, :root[data-tema="koyu"] .product-chrome span { background: var(--surface-elevated); color: var(--ink-2); } /* Sabit KOYU metin rengi kullanan kurallar — karanlık zeminde okunmaz kalıyorlardı */ :root[data-tema="koyu"] .admin-block-title, :root[data-tema="koyu"] .admin-section-head h3, :root[data-tema="koyu"] .notfound-code, :root[data-tema="koyu"] .testimonial-caption { color: var(--ink); } :root[data-tema="koyu"] .pd-installment, :root[data-tema="koyu"] .solution-proof { color: var(--ink-3); } :root[data-tema="koyu"] .alert.is-ok, :root[data-tema="koyu"] .status.is-ok, :root[data-tema="koyu"] .checkout-step.is-done { background: var(--ok-soft); border-color: #34d17f3d; color: var(--ok); } :root[data-tema="koyu"] .hero-shop-toast { background: var(--surface-elevated); border-color: var(--line); color: var(--ink-2); } /* bildirim kutuları (temafooter.php içindeki gömülü stil) */ :root[data-tema="koyu"] .pz-toast.is-ok { border-color:#34d17f3d; background:var(--ok-soft); color:var(--ok); } :root[data-tema="koyu"] .pz-toast.is-bad { border-color:#f8716b3d; background:var(--danger-soft); color:var(--danger); } /* "Hakkımızda" bölümünün yeşil paleti — karanlıkta koyu yeşile taşındı */ :root[data-tema="koyu"] .about-hero { background: #0d1a15; } :root[data-tema="koyu"] .about-copy p, :root[data-tema="koyu"] .about-main-card p { color: var(--ink-3); } :root[data-tema="koyu"] .about-stats, :root[data-tema="koyu"] .about-stats div { border-color: var(--line); } :root[data-tema="koyu"] .about-stats span { color: var(--muted); } /* ------------------------------------------------------------------ 3) TARAYICI KATMANI ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ ÜST BAR .site-header kaynak dosyada sabit yarı saydam BEYAZ zemin kullanıyor (#ffffffd9 / kaydırınca #ffffffeb). Karanlıkta aynı etkiyi koyu tonla verir. ------------------------------------------------------------------ */ :root[data-tema="koyu"] .site-header { background: #0b0f1ad9; border-bottom-color: #0000; } :root[data-tema="koyu"] .site-header.scrolled { background: #0b0f1af2; border-bottom-color: var(--line); box-shadow: 0 2px 14px -4px #00000080; } /* üst bardaki ikon düğmeleri */ :root[data-tema="koyu"] .nav-icon, :root[data-tema="koyu"] .nav-toggle { background: var(--surface); border-color: var(--line); color: var(--ink-2); } :root[data-tema="koyu"] .nav-icon:hover, :root[data-tema="koyu"] .nav-toggle:hover { background: var(--surface-elevated); border-color: var(--line-strong); color: var(--ink); } /* mobil menü perdesi */ :root[data-tema="koyu"] .mobile-nav-backdrop { background: #000000a6; } :root[data-tema="koyu"] .mobile-nav-panel { box-shadow: -20px 0 40px #00000080; } /* açık zemin üzerinde duran saydam beyaz parçalar karanlıkta ters düşüyor */ :root[data-tema="koyu"] .ops-panel, :root[data-tema="koyu"] .solution-card, :root[data-tema="koyu"] .platform-card-label, :root[data-tema="koyu"] .product-fav, :root[data-tema="koyu"] .hero-shop-product-fav, :root[data-tema="koyu"] .project-tile-arrow, :root[data-tema="koyu"] .wizard-preview-row { background: var(--surface-elevated); color: var(--ink-2); } /* ------------------------------------------------------------------ TERS DÖNEN BİLEŞENLER Bu kurallar zemini var(--ink), yazıyı #fff olarak tanımlıyor. Açık temada "koyu zemin + beyaz yazı" demek; karanlıkta --ink açık renge döndüğü için beyaz üstüne beyaz kalıyordu. Yazı rengi zemine göre çevrilir. ------------------------------------------------------------------ */ :root[data-tema="koyu"] .btn-dark { background: var(--ink); color: var(--bg); } :root[data-tema="koyu"] .btn-dark:hover { background: #fff; color: var(--bg); } :root[data-tema="koyu"] .product-flag { background: var(--ink); color: var(--bg); } /* yumuşak düğmenin üzerine gelme rengi sabit açık maviydi */ :root[data-tema="koyu"] .btn-soft:hover { background: var(--primary-soft); color: var(--primary-active); } /* renk taşıyan varyantlar zaten doğru — beyaz yazıları korunur */ :root[data-tema="koyu"] .product-flag.is-hot, :root[data-tema="koyu"] .product-flag.is-sale { color: #fff; } /* ------------------------------------------------------------------ ENTEGRASYON ŞERİDİ Marka renkleri açık zemin için seçildi; koyu zeminde kimi tonlar (lacivert, koyu yeşil, bordo) okunmuyor. Harf rozeti ve kart parlaklığı karanlığa göre yükseltilir. ------------------------------------------------------------------ */ :root[data-tema="koyu"] .entegre-harf { color: #fff; background: var(--surface-elevated); background: color-mix(in srgb, var(--ent, var(--primary)) 62%, #0b0f1a); border-color: color-mix(in srgb, var(--ent, var(--primary)) 45%, transparent); } :root[data-tema="koyu"] .entegre-marka .entegre-ad { color: var(--ink-2); } :root[data-tema="koyu"] .entegre-kutu { background: var(--surface); border-color: var(--line); } :root[data-tema="koyu"] .entegre-kutu:hover { border-color: var(--line-strong); box-shadow: 0 12px 26px -14px #000000a6; } /* gerçek marka logoları koyu zeminde göz almasın, üzerine gelince tam parlaklık */ :root[data-tema="koyu"] .entegre-kutu img { filter: brightness(.94); transition: filter .25s, opacity .25s, transform .25s; } :root[data-tema="koyu"] .entegre-kutu:hover img { filter: none; } /* ------------------------------------------------------------------ ÜST BÖLÜM — DAİRESEL VİTRİN Kaynak dosyada parlama sabit açık mavi-beyaz (#dbeafe → #eff6ff); koyu zeminde patlamış beyaz bir leke gibi duruyordu. Karanlıkta ekrandan sızan ışık hissi veren yumuşak mavi bir hâleye çevrildi. ------------------------------------------------------------------ */ :root[data-tema="koyu"] .hero-daire-isik { background: radial-gradient(circle, rgba(77, 132, 245, .20) 0%, rgba(77, 132, 245, .07) 42%, transparent 70%); } /* daireyi çevreleyen halkalar karanlıkta kayboluyordu */ :root[data-tema="koyu"] .hero-halka { border-color: #4d84f52e; } /* gölgeler lacivert alfayla tanımlıydı, koyu zeminde görünmez */ :root[data-tema="koyu"] .hero-daire { box-shadow: 0 40px 90px -28px #000000a6, 0 0 0 1px #ffffff14; } /* alt kenardaki karartma zaten koyu zeminde gereksiz — hafifletildi */ :root[data-tema="koyu"] .hero-daire-ic { box-shadow: inset 0 -90px 70px -60px #00000059; } /* daire çevresindeki yüzen bilgi kartları — zemin belirteçten geliyor, yalnız lacivert alfayla tanımlı gölgeleri karanlığa uygun hale getirilir */ :root[data-tema="koyu"] .hero-etiket { box-shadow: 0 18px 40px -14px #000000a6, 0 2px 6px -2px #00000080; outline: 1px solid #ffffff0f; outline-offset: -1px; } :root[data-tema="koyu"] .hero-etiket:hover { box-shadow: 0 24px 50px -14px #000000bf; } /* dairenin altındaki ürün adı şeridi biraz yükseltilir ki daireden ayrışsın */ :root[data-tema="koyu"] .hero-daire-ad { background: var(--surface-elevated); } /* ------------------------------------------------------------------ LOGO Panelden karanlık moda özel logo yüklendiyse temaheader.php onu basar ve bu blok devreye girmez. Yüklenmediyse mevcut koyu renkli logo karanlık zeminde kaybolmasın diye beyaza çevrilir. ------------------------------------------------------------------ */ :root[data-tema="koyu"] .brand-logo-img.logo-acik { filter: brightness(0) invert(1); opacity: .92; } /* çift logo kurulumunda hangisinin görüneceği */ .brand-logo-img.logo-koyu { display: none; } :root[data-tema="koyu"] .brand-logo-img.logo-koyu { display: block; } :root[data-tema="koyu"] .brand-logo-img.logo-acik.logo-cift { display: none; } /* Ürün ekran görüntüleri açık arayüz içeriyor; karanlıkta göz yormasın */ :root[data-tema="koyu"] .product-media img, :root[data-tema="koyu"] .flagship-media img, :root[data-tema="koyu"] .commerce-window img { filter: brightness(.92) contrast(1.02); transition: filter .2s; } :root[data-tema="koyu"] .product-card:hover .product-media img, :root[data-tema="koyu"] .flagship-card:hover .flagship-media img { filter: none; } /* seçim ve odak */ :root[data-tema="koyu"] ::selection { background: var(--primary-soft); color: var(--ink); } :root[data-tema="koyu"] :focus-visible { outline-color: var(--primary-active); } /* kaydırma çubuğu */ :root[data-tema="koyu"] ::-webkit-scrollbar { width: 12px; height: 12px; } :root[data-tema="koyu"] ::-webkit-scrollbar-track { background: var(--bg-soft); } :root[data-tema="koyu"] ::-webkit-scrollbar-thumb { background: var(--line-strong); border: 3px solid var(--bg-soft); border-radius: 99px; } :root[data-tema="koyu"] ::-webkit-scrollbar-thumb:hover { background: var(--muted-2); } /* tema düğmesi ikon değişimi (kaynak dosyada tanımlı, burada yalnız vurgu) */ :root[data-tema="koyu"] .tema-dugme { color: var(--warn); } /* yazdırma her zaman açık temada */ @media print { :root[data-tema="koyu"] { --bg:#fff; --bg-soft:#fff; --surface:#fff; --surface-elevated:#fff; --ink:#000; --ink-2:#111; --ink-3:#333; --muted:#555; --line:#ddd; } }