/* * CmsProject — Paylaşılan CMS blok stilleri (tema-bağımsız) * GrapesJS ile üretilen `cms-*` bloklarının her temada tutarlı/şık görünmesini sağlar. * Tüm tema Layout.cshtml'lerinde 'de yüklenir; ayrıca GrapesJS canvas'ına da enjekte edilir. * Tema kendi blockClasses ile ek sınıf eklerse o stiller bunları geçersiz kılabilir. */ /* ── Tam genişlik (full-bleed) ───────────────────────────────────── Layout @RenderBody'yi .container içine sardığından slider/promo daralır. Bu öğeler container içinde olsa bile ekranı kenardan kenara doldurur. */ #slider.slider-element, .cms-fullbleed, .content-wrap > .container > .promo.promo-full { position: relative; width: 100vw; margin-left: 50%; transform: translateX(-50%); max-width: 100vw; } html, body { overflow-x: clip; } /* ── Genel blok aralığı ───────────────────────────────────────── */ .cms-text-block, .cms-card-group, .cms-accordion, .cms-counter-block, .cms-image-block, .cms-image-overlay, .cms-map { margin-block: 1.25rem; } /* ── Counter (Sayaç) ──────────────────────────────────────────── */ .cms-counter-block { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; text-align: center; } .cms-counter-item { flex: 1 1 160px; min-width: 140px; padding: 1.25rem 1rem; } .cms-counter-value { display: block; font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1.1; color: var(--cms-accent, #2563eb); } .cms-counter-label { display: block; margin-top: .5rem; font-size: .95rem; font-weight: 500; opacity: .8; } /* ── Accordion (SSS) ──────────────────────────────────────────── */ .cms-accordion { display: flex; flex-direction: column; gap: .5rem; } .cms-accordion-item { border: 1px solid rgba(0, 0, 0, .1); border-radius: .5rem; overflow: hidden; background: rgba(0, 0, 0, .015); } .cms-accordion-head { cursor: pointer; list-style: none; padding: .9rem 1.1rem; font-weight: 600; position: relative; user-select: none; display: flex; align-items: center; justify-content: space-between; } .cms-accordion-head::-webkit-details-marker { display: none; } .cms-accordion-head::after { content: "+"; font-size: 1.25rem; line-height: 1; transition: transform .2s ease; margin-inline-start: 1rem; opacity: .6; } .cms-accordion-item[open] > .cms-accordion-head::after { content: "\2212"; /* minus */ } .cms-accordion-body { padding: 0 1.1rem 1.1rem; animation: cms-accordion-reveal .2s ease; } @keyframes cms-accordion-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ── Kart grubu ───────────────────────────────────────────────── */ .cms-card-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .cms-card-group .cms-card { border: 1px solid rgba(0, 0, 0, .1); border-radius: .5rem; padding: 1.25rem; background: #fff; } @media (max-width: 768px) { .cms-card-group { grid-template-columns: 1fr; } } /* ── Görsel + Yazı (overlay) ──────────────────────────────────── */ .cms-image-overlay { position: relative; overflow: hidden; border-radius: .5rem; } .cms-image-overlay img { width: 100%; height: auto; display: block; } .cms-image-overlay-text { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 1rem; background: rgba(0, 0, 0, .4); color: #fff; } .cms-image-overlay-text .cms-btn { display: inline-block; margin-top: .75rem; padding: .55rem 1.25rem; border-radius: .375rem; background: var(--cms-accent, #2563eb); color: #fff; text-decoration: none; font-weight: 600; } /* ── Görsel bloğu ─────────────────────────────────────────────── */ .cms-image-block img { max-width: 100%; height: auto; display: block; } /* ── Ayırıcı ──────────────────────────────────────────────────── */ .cms-divider { border: 0; border-top: 1px solid rgba(0, 0, 0, .12); margin: 2rem 0; } /* ═══════════════════════════════════════════════════════════════ * HAZIR BÖLÜMLER — tema-bağımsız fallback'ler * Canvas (corporate-3) bu sınıfları kendi tema CSS'iyle baskın * biçimde stiller; bu kurallar yalnızca tema sağlamadığında devreye * girer (örn. layout/grid utility'leri eksik temalar). * ═══════════════════════════════════════════════════════════════ */ /* Genel bölüm + grid fallback (tema container/row/col sağlamazsa) */ .cms-section-plain { padding-block: clamp(2.5rem, 6vw, 4.5rem); } .cms-hero .container, .cms-promo .container, .cms-cta .container, .cms-section-plain .container { max-width: 1140px; margin-inline: auto; padding-inline: 1rem; } /* Bootstrap row/col yoksa: basit flex ızgara fallback */ .cms-fbox-row, .cms-testimonial-row, .cms-logo-row, .cms-imgtext-row { display: flex; flex-wrap: wrap; margin-inline: -.75rem; } .cms-fbox-row > [class*="col-"], .cms-testimonial-row > .col, .cms-logo-row > .col, .cms-imgtext-row > [class*="col-"] { padding-inline: .75rem; box-sizing: border-box; flex: 1 1 auto; } /* ── Kahraman Bölüm (Hero) ────────────────────────────────────── */ .cms-hero { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; color: #fff; text-align: center; padding-block: clamp(4rem, 12vw, 8rem); } .cms-hero::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .5); } .cms-hero-inner { position: relative; z-index: 1; } .cms-hero-title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; margin: 0 0 1rem; color: #fff; } .cms-hero-text { font-size: clamp(1rem, 2vw, 1.25rem); max-width: 640px; margin: 0 auto 1.75rem; opacity: .92; } /* ── Ortak buton fallback ─────────────────────────────────────── */ .cms-btn { display: inline-block; padding: .7rem 1.75rem; border-radius: .4rem; background: var(--cms-accent, #2563eb); color: #fff; text-decoration: none; font-weight: 600; border: 0; cursor: pointer; transition: opacity .2s ease; } .cms-btn:hover { opacity: .9; } /* ── Tanıtım Şeridi (Promo) ───────────────────────────────────── */ .cms-promo { background: var(--cms-accent, #2563eb); color: #fff; padding-block: 2rem; } .cms-promo-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } .cms-promo-text { margin: 0; font-size: clamp(1.1rem, 2.4vw, 1.6rem); font-weight: 600; color: #fff; } .cms-promo-text span { text-decoration: underline; } .cms-promo .cms-promo-btn { background: #fff; color: var(--cms-accent, #2563eb); white-space: nowrap; } /* ── Özellik Kutuları / Listesi (feature-box) ─────────────────── */ .cms-fbox { text-align: center; padding: 1.5rem 1rem; } .cms-fbox-sm { text-align: start; } .cms-fbox-icon { font-size: 2.25rem; line-height: 1; color: var(--cms-accent, #2563eb); margin-bottom: 1rem; } .cms-fbox-icon i { display: inline-block; } .cms-fbox-title { margin: 0 0 .5rem; font-size: 1.2rem; font-weight: 700; } .cms-fbox-sub { margin: 0; opacity: .8; font-size: .95rem; } /* ── Başlık bloğu (heading-block) ─────────────────────────────── */ .cms-heading { margin-bottom: 2.5rem; } .cms-heading h2 { margin: 0 0 .35rem; font-size: clamp(1.6rem, 3.2vw, 2.25rem); font-weight: 800; } .cms-heading-sub { display: block; opacity: .7; font-size: 1rem; } /* ── Yorumlar (Testimonials) ──────────────────────────────────── */ .cms-testimonial { height: 100%; border: 1px solid rgba(0, 0, 0, .1); border-radius: .6rem; background: #fff; } .cms-testimonial .card-body { padding: 1.75rem; text-align: center; } .cms-testimonial-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; display: block; } .cms-testimonial-quote { font-style: italic; margin: 0 0 1rem; opacity: .9; } .cms-testimonial-name { font-weight: 700; } .cms-testimonial-company { font-size: .9rem; opacity: .65; } /* ── Logo Şeridi ──────────────────────────────────────────────── */ .cms-logo-strip { padding-block: clamp(2rem, 5vw, 3.5rem); } .cms-logo-col { display: flex; align-items: center; justify-content: center; padding-block: 1rem; } .cms-logo-img { max-width: 100%; height: auto; filter: grayscale(100%); opacity: .55; transition: opacity .2s ease, filter .2s ease; } .cms-logo-img:hover { filter: grayscale(0); opacity: 1; } /* ── Çağrı Bandı (Alt CTA) ────────────────────────────────────── */ .cms-cta { position: relative; background: var(--cms-accent, #1e293b); background-size: cover; background-position: center; color: #fff; text-align: center; padding-block: clamp(3rem, 8vw, 5rem); } .cms-cta[data-bg]::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .55); } .cms-cta-inner { position: relative; z-index: 1; } .cms-cta-title { margin: 0 0 .75rem; font-size: clamp(1.6rem, 3.5vw, 2.5rem); font-weight: 800; color: #fff; } .cms-cta-text { margin: 0 auto 1.5rem; max-width: 560px; opacity: .9; } /* ── Görsel + Metin Bölümü ────────────────────────────────────── */ .cms-imgtext-row { align-items: center; gap: 1.5rem 0; } .cms-imgtext-img { width: 100%; height: auto; border-radius: .6rem; display: block; } .cms-iconlist { list-style: none; padding: 0; margin: 1rem 0 1.5rem; } .cms-iconlist li { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; } .cms-iconlist li i { color: var(--cms-accent, #2563eb); } /* ── Responsive ───────────────────────────────────────────────── */ @media (max-width: 768px) { .cms-promo-inner { flex-direction: column; text-align: center; } .cms-fbox-row > [class*="col-"] { flex: 1 1 100%; } .cms-testimonial-row > .col { flex: 1 1 100%; } .cms-logo-row > .col { flex: 1 1 50%; } }