/* ============================================================
BERÇEM İNŞAAT — Projeler & Proje Detay Stilleri
/css/style.css dosyasına eklenecek
Google Fonts import — sayfanın bölümüne ekleyin:
============================================================ */
/* ─── CSS Değişkenleri ─── */
:root {
--bc-primary: #0F2A47;
--bc-grey: #a0a3a5;
--bc-grey-light: #f4f5f6;
--bc-grey-mid: #e2e4e6;
--bc-white: #ffffff;
--bc-text: #2c2c2c;
--bc-text-muted: #6b6e70;
--bc-font: 'Poppins', sans-serif;
--bc-radius: 6px;
--bc-radius-lg: 12px;
--bc-shadow: 0 4px 20px rgba(15, 42, 71, 0.08);
--bc-shadow-hover:0 12px 40px rgba(15, 42, 71, 0.16);
--bc-transition: 0.3s ease;
}
/* ─── Reset / Base ─── */
.bc-projects *,
.bc-projects *::before,
.bc-projects *::after,
.bc-detail *,
.bc-detail *::before,
.bc-detail *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.bc-projects,
.bc-detail {
font-family: var(--bc-font);
color: var(--bc-text);
-webkit-font-smoothing: antialiased;
}
/* ================================================================
1. PROJELER LİSTE SECTION
================================================================ */
.bc-projects {
background-color: var(--bc-white);
padding: 80px 0 100px;
}
.bc-projects__inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* ─── Section Header ─── */
.bc-projects__header {
text-align: center;
margin-bottom: 60px;
}
.bc-projects__label {
display: inline-block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--bc-grey);
margin-bottom: 14px;
}
.bc-projects__title {
font-size: clamp(24px, 3vw, 36px);
font-weight: 700;
color: var(--bc-primary);
line-height: 1.2;
margin-bottom: 16px;
}
.bc-projects__subtitle {
font-size: 15px;
color: var(--bc-text-muted);
max-width: 520px;
margin: 0 auto;
line-height: 1.7;
}
/* ─── Proje Grid ─── */
.bc-projects__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
list-style: none;
}
/* ─── Proje Kartı ─── */
.bc-card {
background: var(--bc-white);
border: 1px solid var(--bc-grey-mid);
border-radius: var(--bc-radius-lg);
overflow: hidden;
box-shadow: var(--bc-shadow);
transition: transform var(--bc-transition), box-shadow var(--bc-transition);
}
.bc-card:hover {
transform: translateY(-6px);
box-shadow: var(--bc-shadow-hover);
}
.bc-card article {
display: flex;
flex-direction: column;
height: 100%;
}
/* Görsel alanı */
.bc-card__visual {
position: relative;
overflow: hidden;
background-color: var(--bc-grey-light);
aspect-ratio: 3 / 2;
}
.bc-card__visual img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.bc-card:hover .bc-card__visual img {
transform: scale(1.04);
}
/* Badge */
.bc-card__badge {
position: absolute;
top: 14px;
left: 14px;
background: var(--bc-primary);
color: var(--bc-white);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 4px;
}
/* Kart içerik */
.bc-card__body {
padding: 24px;
display: flex;
flex-direction: column;
flex: 1;
}
.bc-card__name {
font-size: 18px;
font-weight: 700;
color: var(--bc-primary);
margin-bottom: 14px;
letter-spacing: -0.01em;
}
.bc-card__features {
list-style: none;
margin-bottom: 22px;
flex: 1;
}
.bc-card__features li {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--bc-text-muted);
padding: 5px 0;
border-bottom: 1px solid var(--bc-grey-light);
line-height: 1.5;
}
.bc-card__features li:last-child {
border-bottom: none;
}
.bc-card__feat-icon {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--bc-grey);
flex-shrink: 0;
}
/* Detay butonu */
.bc-card__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 20px;
background: transparent;
border: 1.5px solid var(--bc-primary);
border-radius: var(--bc-radius);
color: var(--bc-primary);
font-family: var(--bc-font);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.03em;
text-decoration: none;
cursor: pointer;
transition: background var(--bc-transition), color var(--bc-transition);
align-self: flex-start;
}
.bc-card__btn:hover,
.bc-card__btn:focus-visible {
background: var(--bc-primary);
color: var(--bc-white);
outline: none;
}
/* ================================================================
2. PROJE DETAY SECTION
================================================================ */
.bc-detail {
background: var(--bc-grey-light);
padding: 60px 0 100px;
}
.bc-detail[hidden] { display: none; }
.bc-projects[hidden] { display: none; }
.bc-detail__inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* ─── Breadcrumb / Geri ─── */
.bc-detail__breadcrumb {
margin-bottom: 28px;
}
.bc-detail__back {
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: none;
cursor: pointer;
font-family: var(--bc-font);
font-size: 13px;
font-weight: 500;
color: var(--bc-text-muted);
padding: 6px 0;
transition: color var(--bc-transition);
}
.bc-detail__back:hover {
color: var(--bc-primary);
}
/* ─── Detay Başlığı ─── */
.bc-detail__title {
font-size: clamp(26px, 3.5vw, 40px);
font-weight: 700;
color: var(--bc-primary);
margin-bottom: 40px;
letter-spacing: -0.02em;
line-height: 1.15;
}
/* ─── 2 Kolonlu Layout (slider+thumbs sol | info sağ) ─── */
.bc-detail__layout {
display: grid;
grid-template-columns: 1fr 340px;
gap: 14px;
align-items: start;
}
/* ─── Sol: Slider Kolonu (slider + thumb şeridi) ─── */
.bc-detail__slider-col {
min-width: 0;
display: flex;
flex-direction: column;
gap: 0;
}
/* ─── Orta kolon artık kullanılmıyor, gizle ─── */
.bc-detail__thumbs-col {
display: none;
}
/* ─── Slider ─── */
.bc-slider {
background: var(--bc-white);
border-radius: var(--bc-radius-lg) var(--bc-radius-lg) 0 0;
overflow: hidden;
box-shadow: var(--bc-shadow);
}
.bc-slider__stage {
position: relative;
aspect-ratio: 3 / 2;
background: var(--bc-grey-light);
overflow: hidden;
}
.bc-slider__main-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: opacity 0.25s ease;
}
.bc-slider__counter {
position: absolute;
bottom: 12px;
right: 14px;
background: rgba(15, 42, 71, 0.75);
color: #fff;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.05em;
padding: 4px 10px;
border-radius: 20px;
pointer-events: none;
}
.bc-slider__controls {
display: flex;
gap: 1px;
}
.bc-slider__btn {
flex: 1;
background: var(--bc-grey-light);
border: none;
padding: 14px;
cursor: pointer;
color: var(--bc-primary);
display: flex;
align-items: center;
justify-content: center;
transition: background var(--bc-transition), color var(--bc-transition);
}
.bc-slider__btn:hover,
.bc-slider__btn:focus-visible {
background: var(--bc-primary);
color: var(--bc-white);
outline: none;
}
/* ─── Thumbnail Şeridi — slider'ın hemen altında yatay ─── */
.bc-thumbs-strip {
background: var(--bc-white);
border-radius: 0 0 var(--bc-radius-lg) var(--bc-radius-lg);
box-shadow: var(--bc-shadow);
padding: 12px 14px;
display: flex;
flex-direction: row;
gap: 8px;
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: var(--bc-grey-mid) transparent;
}
.bc-thumbs-strip::-webkit-scrollbar {
height: 4px;
}
.bc-thumbs-strip::-webkit-scrollbar-track {
background: transparent;
}
.bc-thumbs-strip::-webkit-scrollbar-thumb {
background: var(--bc-grey-mid);
border-radius: 2px;
}
/* ─── Sağ: Bilgi Paneli ─── */
.bc-detail__info-col {
min-width: 0;
}
.bc-info {
background: var(--bc-white);
border-radius: var(--bc-radius-lg);
padding: 32px;
box-shadow: var(--bc-shadow);
}
.bc-info__heading {
font-size: 14px;
font-weight: 700;
color: var(--bc-primary);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 2px solid var(--bc-grey-light);
}
.bc-info__table {
width: 100%;
border-collapse: collapse;
margin-bottom: 28px;
}
.bc-info__th,
.bc-info__td {
padding: 11px 0;
font-size: 13.5px;
line-height: 1.5;
border-bottom: 1px solid var(--bc-grey-light);
vertical-align: middle;
}
.bc-info__th {
font-weight: 500;
color: var(--bc-text-muted);
width: 45%;
padding-right: 12px;
}
.bc-info__td {
font-weight: 600;
color: var(--bc-text);
text-align: right;
}
/* Butonlar */
.bc-info__actions {
display: flex;
flex-direction: column;
gap: 10px;
}
.bc-info__btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 20px;
border-radius: var(--bc-radius);
font-family: var(--bc-font);
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.02em;
text-decoration: none;
border: 1.5px solid transparent;
cursor: pointer;
transition: background var(--bc-transition), color var(--bc-transition), border-color var(--bc-transition);
}
.bc-info__btn--primary {
background: var(--bc-primary);
color: var(--bc-white);
border-color: var(--bc-primary);
}
.bc-info__btn--primary:hover,
.bc-info__btn--primary:focus-visible {
background: #0a1f35;
border-color: #0a1f35;
outline: none;
}
.bc-info__btn--whatsapp {
background: transparent;
color: #25D366;
border-color: #25D366;
}
.bc-info__btn--whatsapp:hover,
.bc-info__btn--whatsapp:focus-visible {
background: #25D366;
color: var(--bc-white);
outline: none;
}
/* ================================================================
3. RESPONSIVE
================================================================ */
/* Tablet: ≤ 1024px */
@media (max-width: 1024px) {
.bc-projects__grid {
grid-template-columns: repeat(2, 1fr);
}
.bc-detail__layout {
grid-template-columns: 1fr;
}
.bc-detail__info-col {
grid-column: 1 / 2;
}
}
/* Mobil: ≤ 640px */
@media (max-width: 640px) {
.bc-projects {
padding: 56px 0 72px;
}
.bc-projects__header {
margin-bottom: 40px;
}
.bc-projects__grid {
grid-template-columns: 1fr;
gap: 20px;
}
.bc-detail {
padding: 40px 0 72px;
}
.bc-detail__title {
margin-bottom: 28px;
}
.bc-detail__layout {
grid-template-columns: 1fr;
gap: 16px;
}
.bc-info {
padding: 24px 20px;
}
.bc-card__btn {
width: 100%;
}
}
/* ================================================================
4. THUMBNAIL BUTON STİLLERİ (bc-thumbs-strip içindeki)
================================================================ */
.bc-thumb {
display: block;
flex-shrink: 0;
width: 80px;
height: 80px;
border: 2px solid transparent;
border-radius: var(--bc-radius);
overflow: hidden;
cursor: pointer;
background: var(--bc-grey-light);
padding: 0;
transition: border-color var(--bc-transition), opacity var(--bc-transition);
}
.bc-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.bc-thumb:hover {
border-color: var(--bc-grey);
opacity: 0.9;
}
.bc-thumb--active {
border-color: var(--bc-primary) !important;
opacity: 1;
}
/* ================================================================
5. ERİŞİLEBİLİRLİK — Focus Visible
================================================================ */
.bc-card__btn:focus-visible,
.bc-slider__btn:focus-visible,
.bc-thumb:focus-visible,
.bc-info__btn:focus-visible,
.bc-detail__back:focus-visible {
outline: 2px solid var(--bc-primary);
outline-offset: 3px;
}
/* ================================================================
6. PRINT
================================================================ */
@media print {
.bc-slider__controls,
.bc-thumbs-strip,
.bc-info__actions {
display: none;
}
}
/* ================================================================
RTL / FARSÇA — Projeler & Proje Detay Düzeltmeleri
================================================================ */
/* Proje badge: sol üsteydi, sağ üste taşı */
[dir="rtl"] .bc-card__badge { left: auto; right: 14px; }
/* Kart özellik listesi (ikon + metin) */
[dir="rtl"] .bc-card__features li { flex-direction: row-reverse; }
[dir="rtl"] .bc-card__name { text-align: right; }
/* Detay butonu sola hizalı kalmalı (column flex + RTL = sağa kayar) */
[dir="rtl"] .bc-card__btn { align-self: flex-end; flex-direction: row-reverse; }
/* Detay sayfası: slider sol | bilgi sağ düzeni korunur */
[dir="rtl"] .bc-detail__layout { direction: ltr; }
[dir="rtl"] .bc-detail__layout > * { direction: rtl; }
[dir="rtl"] .bc-detail__title { text-align: right; }
[dir="rtl"] .bc-detail__back { flex-direction: row-reverse; }
/* Slider sayacı: sağ altta kalır */
[dir="rtl"] .bc-slider__counter { right: auto; left: 14px; }
/* Slider prev/next butonları: görsel sıra korunur */
[dir="rtl"] .bc-slider__controls { flex-direction: row-reverse; }
/* Thumbnail şeridi: soldan sağa sıralanmaya devam eder */
[dir="rtl"] .bc-thumbs-strip { flex-direction: row-reverse; }
/* Bilgi paneli */
[dir="rtl"] .bc-info__heading { text-align: right; }
[dir="rtl"] .bc-info__th { text-align: right; padding-right: 0; padding-left: 12px; }
[dir="rtl"] .bc-info__td { text-align: left; }
[dir="rtl"] .bc-info__btn { flex-direction: row-reverse; }