/* ==========================================================================
BANSOFT SOLUTIONS — ÜRÜN SAYFASI TEMALARI
Amaç: ürün sayfaları Bansoft iskeletini (nav, footer, tipografi, ızgara)
korur; ana içerik alanı ise ürünün kendi sitesinin kimliğini taşır.
Yani sayfa, Bansoft tasarımı ile ürünün kendi tasarımı arasında durur.
Kullanım:
Değerler ürünlerin kendi sitelerindeki token'lardan alınmıştır.
========================================================================== */
/* Yazi tipleri artik HTML icinde ile yukleniyor:
@import, style.css indirilip ayristirilana kadar istek baslatmiyordu (zincirli gecikme). */
/* --------------------------------------------------------------------------
1. ORTAK YAPI
Renk değişkenleri yalnızca altına uygulanır; header ve footer
Bansoft kimliğinde kalır.
-------------------------------------------------------------------------- */
.urun-sayfa main {
--u-bg: var(--bg-dark);
--u-yazi-fontu: var(--font-head);
--u-lekeler:
radial-gradient(ellipse 60% 90% at 70% -10%, rgba(37, 99, 235, .35), transparent 60%),
radial-gradient(ellipse 50% 80% at 20% 110%, rgba(14, 165, 233, .18), transparent 60%);
--u-doku: none;
--u-doku-opaklik: 0;
}
/* Koyu bölümler ürünün arka planını alır */
.urun-sayfa main .page-header,
.urun-sayfa main .cta-section { background: var(--u-bg); }
.urun-sayfa main .page-header::before,
.urun-sayfa main .cta-section::before { background: var(--u-lekeler); }
/* Ürün sitelerinden gelen ince ızgara / doku katmanı */
.urun-sayfa main .page-header::after {
content: '';
position: absolute; inset: 0;
background-image: var(--u-doku);
background-size: 56px 56px;
opacity: var(--u-doku-opaklik);
-webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 78%);
mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 78%);
pointer-events: none;
}
/* Ürün adı, kendi sitesindeki gibi gradyan bir kelime markası */
.urun-sayfa main .page-header h1 {
font-family: var(--u-yazi-fontu);
letter-spacing: -.03em;
background: var(--gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: block;
width: fit-content;
margin: 0 auto 16px;
padding-bottom: .08em;
}
.urun-sayfa main .page-header .hero-badge {
border-color: var(--u-kenar, rgba(255, 255, 255, .18));
background: var(--u-badge-zemin, rgba(255, 255, 255, .07));
}
/* Bölüm başlıkları ve kart aksanları ürün rengine döner
(--primary / --accent / --gradient main altında ezildiği için
.eyebrow, .card-link, .service-icon, .cta-button otomatik uyar) */
.urun-sayfa main .section-title h2 { font-family: var(--u-yazi-fontu); }
/* Ürün sitesine giden ana buton: kendi sitesinin gradyanı */
.urun-sayfa main .cta-button {
background: var(--gradient);
box-shadow: var(--shadow-primary);
}
.urun-sayfa main .cta-button:hover { background: var(--gradient-hover); }
/* Kartlarda ürün aksanlı üst çizgi + hover kenarı */
.urun-sayfa main .service-card:hover { border-color: var(--u-kenar, var(--line)); }
/* --------------------------------------------------------------------------
2. BANSAR — bansar.com
Kaynak: bansar/assets/css/style.css (--bg #05060A, cyan #6EE7F9,
violet #A78BFA, display: Space Grotesk)
-------------------------------------------------------------------------- */
.urun-sayfa[data-urun="bansar"] main {
--primary: #22b8d6;
--primary-dark: #0e97b5;
--primary-soft: #e6fbff;
--accent: #8b5cf6;
--gradient: linear-gradient(115deg, #6EE7F9 0%, #A78BFA 55%, #F0ABFC 100%);
--gradient-hover: linear-gradient(115deg, #3ed3ec 0%, #8b5cf6 55%, #e879f9 100%);
--shadow-primary: 0 12px 30px -8px rgba(110, 231, 249, .45);
--u-bg: #05060A;
--u-yazi-fontu: 'Space Grotesk', var(--font-head);
--u-lekeler:
radial-gradient(120% 70% at 72% 42%, rgba(110, 231, 249, .20), transparent 60%),
radial-gradient(90% 60% at 22% 20%, rgba(167, 139, 250, .18), transparent 62%),
linear-gradient(180deg, transparent 45%, rgba(5, 6, 10, .86) 82%, #05060A 100%);
--u-kenar: rgba(110, 231, 249, .32);
--u-badge-zemin: rgba(110, 231, 249, .10);
}
.urun-sayfa[data-urun="bansar"] main .cta-button { color: #04121A; }
/* --------------------------------------------------------------------------
3. SMITHOSPHERE — smithosphere.com
Kaynak: Smithosphere/website/css/stil.css (--uzay #04060d,
cam göbeği #38bdf8, mor #a78bfa, pembe #f472b6, ince ızgara dokusu)
-------------------------------------------------------------------------- */
.urun-sayfa[data-urun="smithosphere"] main {
--primary: #0ea5e9;
--primary-dark: #0284c7;
--primary-soft: #e6f6fe;
--accent: #a78bfa;
--gradient: linear-gradient(100deg, #38bdf8 0%, #a78bfa 55%, #f472b6 100%);
--gradient-hover: linear-gradient(100deg, #0ea5e9 0%, #8b5cf6 55%, #ec4899 100%);
--shadow-primary: 0 12px 30px -8px rgba(56, 189, 248, .45);
--u-bg: #04060d;
--u-yazi-fontu: 'Space Grotesk', var(--font-head);
--u-lekeler:
radial-gradient(900px 600px at 85% -10%, rgba(167, 139, 250, .22), transparent 60%),
radial-gradient(800px 500px at -10% 30%, rgba(56, 189, 248, .18), transparent 60%),
radial-gradient(700px 700px at 60% 110%, rgba(244, 114, 182, .12), transparent 60%);
--u-doku:
linear-gradient(rgba(148, 163, 184, .16) 1px, transparent 1px),
linear-gradient(90deg, rgba(148, 163, 184, .16) 1px, transparent 1px);
--u-doku-opaklik: .5;
--u-kenar: rgba(56, 189, 248, .32);
--u-badge-zemin: rgba(56, 189, 248, .10);
}
/* --------------------------------------------------------------------------
4. CREDO MAX — credomax.com
NOT: credomax.com yayına girdiğinde bu blok, sitenin gerçek renk ve
fontlarıyla güncellenmeli. Şu anki değerler Credo ailesi için geçici
(muhasebe/güven tonları) olarak seçilmiştir.
-------------------------------------------------------------------------- */
.urun-sayfa[data-urun="credo"] main {
--primary: #0f9d76;
--primary-dark: #0b7d5e;
--primary-soft: #e7f8f2;
--accent: #6366f1;
--gradient: linear-gradient(120deg, #10b981 0%, #0ea5e9 60%, #6366f1 100%);
--gradient-hover: linear-gradient(120deg, #0b9d6d 0%, #0284c7 60%, #4f46e5 100%);
--shadow-primary: 0 12px 30px -8px rgba(16, 185, 129, .42);
--u-bg: #071019;
--u-lekeler:
radial-gradient(ellipse 70% 90% at 78% -10%, rgba(16, 185, 129, .28), transparent 62%),
radial-gradient(ellipse 55% 80% at 12% 110%, rgba(99, 102, 241, .22), transparent 62%);
--u-doku:
linear-gradient(rgba(148, 163, 184, .10) 1px, transparent 1px),
linear-gradient(90deg, rgba(148, 163, 184, .10) 1px, transparent 1px);
--u-doku-opaklik: .45;
--u-kenar: rgba(16, 185, 129, .30);
--u-badge-zemin: rgba(16, 185, 129, .10);
}
/* --------------------------------------------------------------------------
5. CREDOBASE — henüz kendi sitesi yok.
Credo MAX ile aynı aileden, bir ton daha açık/teal bir varyant.
Site yayına girdiğinde bu blok da gerçek kimlikle güncellenecek.
-------------------------------------------------------------------------- */
.urun-sayfa[data-urun="credobase"] main {
--primary: #0891b2;
--primary-dark: #0e7490;
--primary-soft: #e6f9fc;
--accent: #14b8a6;
--gradient: linear-gradient(120deg, #14b8a6 0%, #22d3ee 55%, #38bdf8 100%);
--gradient-hover: linear-gradient(120deg, #0d9488 0%, #06b6d4 55%, #0ea5e9 100%);
--shadow-primary: 0 12px 30px -8px rgba(20, 184, 166, .42);
--u-bg: #08131a;
--u-lekeler:
radial-gradient(ellipse 70% 90% at 74% -10%, rgba(34, 211, 238, .24), transparent 62%),
radial-gradient(ellipse 55% 80% at 14% 110%, rgba(20, 184, 166, .20), transparent 62%);
--u-doku:
linear-gradient(rgba(148, 163, 184, .10) 1px, transparent 1px),
linear-gradient(90deg, rgba(148, 163, 184, .10) 1px, transparent 1px);
--u-doku-opaklik: .45;
--u-kenar: rgba(34, 211, 238, .30);
--u-badge-zemin: rgba(34, 211, 238, .10);
}
/* --------------------------------------------------------------------------
6. HAREKET TERCİHİ
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.urun-sayfa main .page-header::after { opacity: calc(var(--u-doku-opaklik) * .6); }
}