/** * Coşkun Ağır Nakliyat * Yazar: Turgay Coşkun * Dosya: public/css/themes.css * Amaç: Ana sayfa görsel tema kataloğu — sadece CSS değişken override + pattern. * Temalar ile aktive olur; site.css sonrası yüklenir. * Bileşen HTML yapısı değişmez, breakpoint'ler aynı kalır. * * Ek token'lar (site.css --c-accent-rgb / --c-on-accent üzerine): * --r-card, --btn-radius, --hero-pattern, --accent-gradient, * --card-bg-layer, --shape-cut */ /* ========================================================= Ortak tema token'ları (varsayılanları site.css'ten gelir; tema bunları override edebilir) ========================================================= */ :root { --btn-radius: var(--r-sm); --card-radius: var(--r-lg); --hero-pattern: none; --hero-pattern-size: 54px 54px; --accent-gradient: linear-gradient(135deg, var(--c-accent), var(--c-accent-2)); --card-bg-layer: linear-gradient(180deg, var(--c-surface) 0%, var(--c-surface-2) 100%); } /* ========================================================= 1) INDUSTRIAL-AMBER — varsayılan, endüstriyel koyu + amber ========================================================= */ html.theme-industrial-amber { /* token'lar zaten site.css :root default'u — ek bir şey yok */ --hero-pattern: linear-gradient(rgba(var(--c-accent-rgb), .12) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--c-accent-rgb), .12) 1px, transparent 1px); --hero-pattern-size: 54px 54px; } /* ========================================================= 2) STEEL-BLUE — metalik mavi + buz mavi, diyagonal çelik bantları, glass ========================================================= */ html.theme-steel-blue { --c-bg: #0b1726; --c-bg-2: #11213a; --c-surface: #142a48; --c-surface-2: #1a3358; --c-border: #223c66; --c-text: #eaf2ff; --c-text-2: #c7d6ef; --c-muted: #89a0c6; --c-accent: #60a5fa; --c-accent-2: #93c5fd; --c-accent-rgb: 96, 165, 250; --c-accent-2-rgb: 147, 197, 253; --c-on-accent: #0b1726; --c-on-accent-rgb: 11, 23, 38; --c-accent-dim: rgba(var(--c-accent-rgb), .16); --btn-radius: 999px; --card-radius: 16px; --hero-pattern: repeating-linear-gradient(135deg, rgba(var(--c-accent-rgb), .08) 0 2px, transparent 2px 18px); --hero-pattern-size: auto; --card-bg-layer: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01) 40%, transparent 70%), linear-gradient(180deg, var(--c-surface), var(--c-surface-2)); } html.theme-steel-blue .service-card, html.theme-steel-blue .fleet-card, html.theme-steel-blue .process-step, html.theme-steel-blue .faq-item, html.theme-steel-blue .stat-card { backdrop-filter: blur(8px); border-radius: var(--card-radius); } html.theme-steel-blue .btn { border-radius: var(--btn-radius); padding-left: 1.4rem; padding-right: 1.4rem; } /* ========================================================= 3) DESERT-SAND — açık bej zemin, antrasit, inşaat turuncu hazard ========================================================= */ html.theme-desert-sand { --c-bg: #f5efe6; --c-bg-2: #ebe3d4; --c-surface: #ffffff; --c-surface-2: #faf5ec; --c-border: #d9cdb6; --c-text: #1c1c1c; --c-text-2: #3b3b3b; --c-muted: #6b665c; --c-accent: #ea580c; --c-accent-2: #f97316; --c-accent-rgb: 234, 88, 12; --c-accent-2-rgb: 249, 115, 22; --c-on-accent: #ffffff; --c-on-accent-rgb: 255, 255, 255; --c-accent-dim: rgba(var(--c-accent-rgb), .14); --c-shadow: 0 18px 48px rgba(40, 30, 10, .18); --btn-radius: 2px; --card-radius: 4px; --hero-pattern: repeating-linear-gradient(45deg, rgba(var(--c-accent-rgb), .85) 0 22px, rgba(0,0,0,.82) 22px 44px); --hero-pattern-size: auto; color-scheme: light; } html.theme-desert-sand .topbar { background: rgba(245,239,230,.92); border-bottom-color: var(--c-border); } html.theme-desert-sand .hero-grid-pattern { opacity: .10; } html.theme-desert-sand .hero-overlay { background: linear-gradient(180deg, rgba(245,239,230,.25) 0%, rgba(245,239,230,.55) 60%, var(--c-bg) 100%); } html.theme-desert-sand .hero-trust, html.theme-desert-sand .hero-sub { color: #ffffff; text-shadow: 0 2px 14px rgba(0,0,0,.65); } html.theme-desert-sand .hero-inner h1 { color: #ffffff; text-shadow: 0 4px 24px rgba(0,0,0,.7); } html.theme-desert-sand .btn, html.theme-desert-sand .service-card, html.theme-desert-sand .fleet-card, html.theme-desert-sand .process-step, html.theme-desert-sand .faq-item, html.theme-desert-sand .stat-card, html.theme-desert-sand .contact-form, html.theme-desert-sand .cta-band { border-radius: var(--card-radius); } html.theme-desert-sand .btn-ghost { color: var(--c-text); border-color: var(--c-border); } html.theme-desert-sand .btn-ghost:hover { background: var(--c-surface-2); } html.theme-desert-sand .cta-band { background: repeating-linear-gradient(45deg, var(--c-accent) 0 40px, var(--c-accent-2) 40px 80px); color: #1c1c1c; } html.theme-desert-sand .cta-band h2, html.theme-desert-sand .cta-band p { color: #1c1c1c; } /* ========================================================= 4) CRIMSON-NIGHT — premium siyah + crimson + mat altın ========================================================= */ html.theme-crimson-night { --c-bg: #0a0a0a; --c-bg-2: #111111; --c-surface: #161616; --c-surface-2: #1c1c1c; --c-border: #2a2a2a; --c-text: #fff5ec; --c-text-2: #d9c9b6; --c-muted: #9a8a78; --c-accent: #dc2626; --c-accent-2: #d4a574; --c-accent-rgb: 220, 38, 38; --c-accent-2-rgb: 212, 165, 116; --c-on-accent: #ffffff; --c-on-accent-rgb: 255, 255, 255; --c-accent-dim: rgba(var(--c-accent-rgb), .18); --btn-radius: 28px; --card-radius: 22px; --hero-pattern: radial-gradient(circle at 20% 30%, rgba(var(--c-accent-rgb), .25) 0%, transparent 45%), radial-gradient(circle at 80% 70%, rgba(var(--c-accent-2-rgb), .18) 0%, transparent 45%); --hero-pattern-size: auto; } html.theme-crimson-night .btn-primary { box-shadow: 0 10px 28px rgba(var(--c-accent-rgb), .45), inset 0 1px 0 rgba(255,255,255,.15); border-radius: var(--btn-radius); } html.theme-crimson-night .service-card, html.theme-crimson-night .fleet-card, html.theme-crimson-night .faq-item, html.theme-crimson-night .process-step, html.theme-crimson-night .stat-card, html.theme-crimson-night .contact-form { border-radius: var(--card-radius); border-color: rgba(var(--c-accent-2-rgb), .25); box-shadow: 10px 10px 0 rgba(var(--c-accent-rgb), .14); } html.theme-crimson-night .section-eyebrow { color: var(--c-accent-2); } /* ========================================================= 5) FOREST-OPS — koyu yeşil + oliv + kehribar, hex/camo pattern ========================================================= */ html.theme-forest-ops { --c-bg: #0f1f17; --c-bg-2: #152a1e; --c-surface: #1a3426; --c-surface-2: #1e3d2c; --c-border: #28523b; --c-text: #ecf5ea; --c-text-2: #c8d8bf; --c-muted: #8a9a82; --c-accent: #fbbf24; --c-accent-2: #fde68a; --c-accent-rgb: 251, 191, 36; --c-accent-2-rgb: 253, 230, 138; --c-on-accent: #0f1f17; --c-on-accent-rgb: 15, 31, 23; --c-accent-dim: rgba(var(--c-accent-rgb), .14); --btn-radius: 4px; --card-radius: 8px; /* hex pattern — SVG data-url, tema rengine gömülü */ --hero-pattern: url("data:image/svg+xml;utf8,"); --hero-pattern-size: 56px 48px; } html.theme-forest-ops .btn, html.theme-forest-ops .service-card, html.theme-forest-ops .fleet-card, html.theme-forest-ops .faq-item, html.theme-forest-ops .process-step, html.theme-forest-ops .stat-card, html.theme-forest-ops .contact-form { border-radius: var(--card-radius); } html.theme-forest-ops .service-card { border-left: 3px solid #8a9a4a; } /* ========================================================= 6) SLATE-MODERN — nötr slate + cyan + glass, minimal corporate ========================================================= */ html.theme-slate-modern { --c-bg: #0f172a; --c-bg-2: #131d36; --c-surface: #172241; --c-surface-2: #1c2a52; --c-border: #2a3a68; --c-text: #f1f5f9; --c-text-2: #cbd5e1; --c-muted: #94a3b8; --c-accent: #22d3ee; --c-accent-2: #67e8f9; --c-accent-rgb: 34, 211, 238; --c-accent-2-rgb: 103, 232, 249; --c-on-accent: #0f172a; --c-on-accent-rgb: 15, 23, 42; --c-accent-dim: rgba(var(--c-accent-rgb), .14); --btn-radius: 10px; --card-radius: 14px; --hero-pattern: radial-gradient(circle, rgba(var(--c-accent-rgb), .35) 1px, transparent 1.5px); --hero-pattern-size: 24px 24px; } html.theme-slate-modern .btn-primary { background: transparent; color: var(--c-accent); border: 1.5px solid var(--c-accent); box-shadow: 0 0 0 0 rgba(var(--c-accent-rgb), .0); transition: box-shadow .25s, background .25s, color .25s; } html.theme-slate-modern .btn-primary:hover { background: var(--c-accent); color: var(--c-on-accent); box-shadow: 0 0 24px rgba(var(--c-accent-rgb), .5); } html.theme-slate-modern .service-card, html.theme-slate-modern .fleet-card, html.theme-slate-modern .faq-item, html.theme-slate-modern .process-step, html.theme-slate-modern .stat-card, html.theme-slate-modern .contact-form { border-radius: var(--card-radius); backdrop-filter: blur(6px); background: linear-gradient(180deg, rgba(255,255,255,.03), transparent), var(--c-surface); } /* ========================================================= Hero pattern — tema değişkeni tüm temalarda aynı sınıfa aktarılır ========================================================= */ .hero-grid-pattern { background-image: var(--hero-pattern); background-size: var(--hero-pattern-size); } /* ========================================================= LAYOUT VARYASYONLARI — her tema farklı yapı (renk/köşe override'ları yukarıda; bunlar geometri/düzen) ========================================================= */ /* ---------- 2) STEEL-BLUE: split hero, yatay carousel, dikey timeline ---------- */ /* Mobile'da çelik bandı hero soluna yatay sticker — tema karakteri */ html.theme-steel-blue .hero-inner { border-left: 3px solid var(--c-accent); padding-left: var(--s-4); } html.theme-steel-blue .hero-badge { font-family: ui-monospace, SFMono-Regular, monospace; letter-spacing: .08em; } @media (min-width: 900px) { html.theme-steel-blue .hero .container { max-width: none; padding-left: 8vw; } html.theme-steel-blue .hero-media { clip-path: polygon(40% 0, 100% 0, 100% 100%, 52% 100%); } html.theme-steel-blue .hero-overlay { background: linear-gradient(90deg, var(--c-bg) 0%, rgba(11,23,38,.95) 38%, rgba(11,23,38,.35) 52%, transparent 68%); } html.theme-steel-blue .hero-inner { max-width: 52%; border-left: 3px solid var(--c-accent); } } /* Hizmetler — yatay carousel (mobilde de aktif) */ html.theme-steel-blue .services-grid { display: flex; gap: var(--s-4); overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scroll-padding-left: var(--s-4); padding: var(--s-3) var(--s-4) var(--s-6); margin: 0 calc(-1 * var(--s-4)); scrollbar-width: thin; grid-template-columns: none; } html.theme-steel-blue .services-grid::-webkit-scrollbar { height: 8px; } html.theme-steel-blue .services-grid::-webkit-scrollbar-thumb { background: var(--c-accent-dim); border-radius: 4px; } html.theme-steel-blue .service-card { flex: 0 0 260px; scroll-snap-align: start; } @media (min-width: 768px) { html.theme-steel-blue .service-card { flex-basis: 320px; } } /* Süreç — dikey timeline */ @media (min-width: 900px) { html.theme-steel-blue .process-grid { grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; position: relative; } html.theme-steel-blue .process-grid::before { content: ""; position: absolute; left: 22px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, var(--c-accent), transparent); } html.theme-steel-blue .process-step { padding-left: 70px; } html.theme-steel-blue .process-num { position: absolute; left: 0; } } /* Filo — yan yana dar kartlar */ html.theme-steel-blue .fleet-grid { gap: var(--s-3); } /* ---------- 3) DESERT-SAND: diagonal hero, zigzag services, şerit stat ---------- */ html.theme-desert-sand .hero { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0 100%); } html.theme-desert-sand .hero-inner { background: rgba(0,0,0,.42); padding: var(--s-6); border-left: 6px solid var(--c-accent); backdrop-filter: blur(2px); } /* Hizmetler — 3 sütun (zigzag kaldırıldı: transform stacking context kart shadow'larının örtüşmesine yol açıyordu). Retro-blok kart + offset shadow tema karakterini tek başına taşıyor. */ @media (min-width: 1100px) { html.theme-desert-sand .services-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } } /* Retro-blok kart stili — mobilde de geçerli (tema karakteri) */ html.theme-desert-sand .service-card, html.theme-desert-sand .fleet-card, html.theme-desert-sand .faq-item { background: var(--c-surface); border: 2px solid var(--c-text); box-shadow: 5px 5px 0 var(--c-accent); color: var(--c-text); border-radius: 0; isolation: isolate; } /* Kart içi ::before glow'u tema karakteriyle çelişir — kapat */ html.theme-desert-sand .service-card::before { display: none; } html.theme-desert-sand .service-card:hover { transform: none; border-color: var(--c-accent); box-shadow: 8px 8px 0 var(--c-accent); } /* Mobil: section padding artır ki 5px offset shadow sağdan taşmasın */ @media (max-width: 899px) { html.theme-desert-sand .services-grid { gap: var(--s-6); padding-right: 8px; } html.theme-desert-sand .service-card { padding: var(--s-5) var(--s-4); } html.theme-desert-sand .service-card-icon { background: var(--c-bg-2); border: 1.5px solid var(--c-text); border-radius: 0; } } html.theme-desert-sand .service-card h3 { color: var(--c-text); } html.theme-desert-sand .service-card p, html.theme-desert-sand .service-feats li { color: var(--c-text-2); } html.theme-desert-sand .service-num { -webkit-text-stroke-color: rgba(var(--c-accent-rgb), .7); color: transparent; } /* Süreç — büyük numaralar + yatay ok */ html.theme-desert-sand .process-num { width: 60px; height: 60px; font-size: 1.6rem; border-radius: 4px; background: var(--c-accent); color: var(--c-on-accent); box-shadow: 4px 4px 0 var(--c-text); } html.theme-desert-sand .process-step { background: var(--c-surface); border: 2px solid var(--c-text); } html.theme-desert-sand .process-step h3 { color: var(--c-text); } /* Stat — inşaat şerit görünümü */ html.theme-desert-sand .stats { background: repeating-linear-gradient(45deg, var(--c-text) 0 14px, var(--c-accent) 14px 28px); padding: var(--s-6) 0; } html.theme-desert-sand .stats-grid { gap: var(--s-3); } html.theme-desert-sand .stat-card { background: #fff; border: 2px solid var(--c-text); border-radius: 0; box-shadow: 4px 4px 0 var(--c-text); } html.theme-desert-sand .stat-val { color: var(--c-accent); } html.theme-desert-sand .stat-label { color: var(--c-text); } /* ---------- 4) CRIMSON-NIGHT: editorial, mega-card, parıltılı ring ---------- */ html.theme-crimson-night .hero { min-height: 96vh; } html.theme-crimson-night .hero-inner { max-width: 1000px; } html.theme-crimson-night .hero h1 { font-size: clamp(2.4rem, 9vw, 5.5rem); font-weight: 900; letter-spacing: -0.03em; line-height: .95; background: linear-gradient(180deg, var(--c-text) 0%, var(--c-accent-2) 70%, var(--c-accent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } html.theme-crimson-night .hero-sub { font-size: clamp(1.05rem, 1.6vw, 1.4rem); max-width: 720px; } /* Mobilde de mega-card karakteri — offset shadow + altın kenar */ html.theme-crimson-night .service-card { border-color: rgba(var(--c-accent-2-rgb), .25); box-shadow: 8px 8px 0 rgba(var(--c-accent-rgb), .2); } @media (min-width: 1100px) { html.theme-crimson-night .services-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } html.theme-crimson-night .service-card { padding: var(--s-8) var(--s-6) var(--s-6); } html.theme-crimson-night .service-card h3 { font-size: 1.6rem; } html.theme-crimson-night .service-num { font-size: 4rem; } } /* Süreç — merkez hat, numaralar ring */ @media (min-width: 900px) { html.theme-crimson-night .process-grid { grid-template-columns: 1fr; max-width: 780px; margin: 0 auto; gap: var(--s-3); } html.theme-crimson-night .process-step { text-align: center; padding: var(--s-6) var(--s-5); border: 1px solid rgba(var(--c-accent-2-rgb), .2); } } html.theme-crimson-night .process-num { width: 72px; height: 72px; font-size: 1.6rem; background: radial-gradient(circle, var(--c-accent) 30%, transparent 60%); color: #fff; box-shadow: 0 0 28px rgba(var(--c-accent-rgb), .55); border: 2px solid var(--c-accent-2); } /* Stat — parıltılı ring kart */ html.theme-crimson-night .stat-card { border-radius: 999px; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid rgba(var(--c-accent-2-rgb), .5); box-shadow: inset 0 0 40px rgba(var(--c-accent-rgb), .15), 0 0 40px rgba(var(--c-accent-rgb), .2); background: radial-gradient(circle at 30% 20%, rgba(var(--c-accent-rgb), .12), transparent 60%); } html.theme-crimson-night .stat-val { color: var(--c-accent-2); font-size: clamp(2rem, 3.5vw, 3rem); } /* ---------- 5) FOREST-OPS: blueprint hero, spec tablosu, HUD stat ---------- */ html.theme-forest-ops .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(138,154,74,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(138,154,74,.15) 1px, transparent 1px); background-size: 40px 40px; } html.theme-forest-ops .hero-inner::before { content: "LAT 40.80° N / LON 29.43° E / GEBZE"; position: absolute; top: -24px; left: 0; font-family: ui-monospace, monospace; font-size: .75rem; color: var(--c-accent); letter-spacing: .15em; } html.theme-forest-ops .hero-inner { position: relative; padding-top: var(--s-4); } html.theme-forest-ops .hero-badge { font-family: ui-monospace, monospace; letter-spacing: .1em; border-radius: 0; } /* Hizmetler — spec tablo görünümü: sıkı kartlar, tek sütun şerit başlıklar */ html.theme-forest-ops .service-card { display: grid; grid-template-columns: 72px 1fr; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-left: 4px solid var(--c-accent); border-radius: 4px; } html.theme-forest-ops .service-card-icon { margin: 0; } html.theme-forest-ops .service-num { position: static; font-family: ui-monospace, monospace; -webkit-text-stroke: 0; color: var(--c-accent); font-size: .75rem; letter-spacing: .2em; grid-column: 2; } html.theme-forest-ops .service-card h3 { grid-column: 2; font-family: ui-monospace, monospace; letter-spacing: .05em; font-size: 1rem; } html.theme-forest-ops .service-card > p, html.theme-forest-ops .service-feats, html.theme-forest-ops .service-cta { grid-column: 2; } @media (min-width: 900px) { html.theme-forest-ops .services-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { html.theme-forest-ops .services-grid { grid-template-columns: repeat(2, 1fr); } } /* Stat — HUD */ html.theme-forest-ops .stat-card { font-family: ui-monospace, monospace; border: 1px solid var(--c-accent); border-radius: 2px; background: rgba(138,154,74,.05); position: relative; } html.theme-forest-ops .stat-card::before { content: ""; position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px; border: 1px dashed rgba(138,154,74,.35); pointer-events: none; } html.theme-forest-ops .stat-val { font-family: ui-monospace, monospace; letter-spacing: .05em; } /* Süreç — koordinat/aşama kartları */ html.theme-forest-ops .process-step { border-left: 4px solid var(--c-accent); border-radius: 2px; } html.theme-forest-ops .process-step h3 { font-family: ui-monospace, monospace; letter-spacing: .05em; } /* ---------- 6) SLATE-MODERN: minimal hero, glass masonry, zaman çizgisi ---------- */ html.theme-slate-modern .hero { min-height: 72vh; padding-top: var(--s-10); } html.theme-slate-modern .hero h1 { font-weight: 300; letter-spacing: -0.025em; } html.theme-slate-modern .hero h1 strong, html.theme-slate-modern .hero h1 b { font-weight: 700; color: var(--c-accent); } html.theme-slate-modern .hero-badge { background: transparent; border: 1px solid var(--c-border); color: var(--c-text-2); } /* Glass + cyan outline kartlar (mobilde de) */ html.theme-slate-modern .service-card, html.theme-slate-modern .fleet-card, html.theme-slate-modern .faq-item, html.theme-slate-modern .process-step, html.theme-slate-modern .stat-card, html.theme-slate-modern .contact-form { backdrop-filter: blur(6px); background: linear-gradient(180deg, rgba(255,255,255,.035), transparent), var(--c-surface); } /* Hizmetler — masonry benzeri glass (CSS columns) */ @media (min-width: 900px) { html.theme-slate-modern .services-grid { display: block; column-count: 3; column-gap: var(--s-5); } html.theme-slate-modern .service-card { display: inline-block; width: 100%; margin: 0 0 var(--s-5); break-inside: avoid; } html.theme-slate-modern .service-card:nth-child(3n+1) { padding-bottom: var(--s-8); } html.theme-slate-modern .service-card:nth-child(3n+2) { padding-bottom: var(--s-6); } } /* Süreç — yatay kompakt timeline */ @media (min-width: 900px) { html.theme-slate-modern .process-grid { grid-template-columns: repeat(5, 1fr); gap: 0; background: linear-gradient(90deg, transparent 10%, rgba(var(--c-accent-rgb),.35) 50%, transparent 90%) center/100% 2px no-repeat; } html.theme-slate-modern .process-step { background: var(--c-surface); margin: 0 var(--s-2); border-radius: 14px; text-align: center; } html.theme-slate-modern .process-num { margin: 0 auto var(--s-3); width: 36px; height: 36px; font-size: .95rem; } } /* Stat — compact dashboard */ html.theme-slate-modern .stat-card { border-radius: 14px; text-align: left; padding: var(--s-4) var(--s-5); background: linear-gradient(180deg, rgba(255,255,255,.03), transparent), var(--c-surface); } html.theme-slate-modern .stat-val { font-size: clamp(1.8rem, 3vw, 2.4rem); } html.theme-slate-modern .stat-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--c-muted); } /* ========================================================= Erişilebilirlik: reduced motion — carousel snap yumuşat ========================================================= */ @media (prefers-reduced-motion: reduce) { html.theme-steel-blue .services-grid { scroll-behavior: auto; } html.theme-desert-sand .services-grid .service-card:nth-child(even) { transform: none; } }