/* ========================================================================= BrainFit — Sayfa düzenleri (birleştirilmiş) ========================================================================= Daha önce 5 ayrı dosya olarak içinde yükleniyordu (geçersiz HTML, render engelleme, FOUC). Tek dosyada birleştirilip 'e taşındı. Renkler ve boyutlar bf-tokens.css / bf-typography.css token'larından gelir. ========================================================================= */ /* ===== page-bizkimiz ===== */ /* Biz Kimiz — modern layout */ .bf-about-page { padding-bottom: 80px; } .bf-about-hero { padding: 48px 0 56px; background: linear-gradient(165deg, var(--Color-1) 0%, var(--White) 55%); } .bf-about-hero .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .bf-about-hero .hero-badge { display: inline-block; font-size: var(--bf-fs-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--Primary); background: var(--bf-accent-soft); padding: 6px 14px; border-radius: var(--bf-radius-xl); margin-bottom: 16px; } .bf-about-hero h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.2; color: var(--Primary); margin-bottom: 20px; font-weight: 700; } .bf-about-hero .hero-lead { font-size: var(--bf-fs-h4); line-height: 1.65; color: var(--Color-3); margin-bottom: 28px; max-width: 520px; } .bf-about-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; } .bf-about-hero .hero-image { border-radius: var(--bf-radius-lg); overflow: hidden; box-shadow: 0 24px 48px rgba(22, 25, 29, 0.12); background: var(--White); } .bf-about-hero .hero-image img { width: 100%; height: auto; display: block; object-fit: cover; } /* Pillars */ .bf-about-pillars { padding: 56px 0; } .bf-about-pillars .section-head { text-align: center; max-width: 640px; margin: 0 auto 40px; } .bf-about-pillars .section-head .sub { margin-bottom: 8px; } .bf-about-pillars .section-head h2 { color: var(--Primary); margin-bottom: 12px; } .bf-about-pillars .section-head p { color: var(--Color-3); font-size: var(--bf-fs-base); line-height: 1.6; margin: 0; } .bf-about-pillars .pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .bf-about-pillars .pillar-card { background: var(--White); border: 1px solid rgba(22, 25, 29, 0.08); border-radius: var(--bf-radius); padding: 28px 22px; transition: transform 0.25s ease, box-shadow 0.25s ease; height: 100%; } .bf-about-pillars .pillar-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(22, 25, 29, 0.08); } .bf-about-pillars .pillar-card .icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: var(--Color-1); border-radius: var(--bf-radius); margin-bottom: 18px; font-size: var(--bf-fs-h2); color: var(--Primary); } .bf-about-pillars .pillar-card h3 { font-size: var(--bf-fs-h4); color: var(--Primary); margin-bottom: 10px; font-weight: 600; } .bf-about-pillars .pillar-card p { font-size: var(--bf-fs-sm); line-height: 1.55; color: var(--Color-3); margin: 0; } /* Mission / Vision */ .bf-about-mv { padding: 0 0 56px; } .bf-about-mv .mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .bf-about-mv .mv-card { border-radius: var(--bf-radius-lg); padding: 36px 32px; position: relative; overflow: hidden; } .bf-about-mv .mv-card--mission, .bf-about-mv .mv-card--vision { background: var(--White); color: var(--Primary); border: 1px solid rgba(22, 25, 29, 0.08); box-shadow: 0 8px 24px rgba(22, 25, 29, 0.06); } .bf-about-mv .mv-card--mission { border-top: 4px solid var(--Third); } .bf-about-mv .mv-card--vision { border-top: 4px solid var(--Primary); background: var(--Color-1); } .bf-about-mv .mv-card .label { font-size: var(--bf-fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--Color-3); margin-bottom: 12px; } .bf-about-mv .mv-card h3 { font-size: var(--bf-fs-h2); font-weight: 700; margin-bottom: 16px; line-height: 1.25; color: var(--Primary); } .bf-about-mv .mv-card p { font-size: var(--bf-fs-base); line-height: 1.65; margin: 0; color: var(--Color-3); } /* CTA strip */ .bf-about-cta { margin-top: 8px; } .bf-about-cta .cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; background: var(--Color-1); border-radius: var(--bf-radius-lg); padding: 40px 48px; border: 1px solid rgba(22, 25, 29, 0.06); } .bf-about-cta .cta-inner h3 { font-size: var(--bf-fs-h2); color: var(--Primary); margin-bottom: 8px; } .bf-about-cta .cta-inner p { margin: 0; color: var(--Color-3); font-size: var(--bf-fs-base); max-width: 480px; } @media (max-width: 1200px) { .bf-about-pillars .pillar-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 991px) { .bf-about-hero .hero-grid { grid-template-columns: 1fr; gap: 32px; } .bf-about-hero .hero-image { order: -1; max-width: 480px; margin: 0 auto; } .bf-about-mv .mv-grid { grid-template-columns: 1fr; } } @media (max-width: 575px) { .bf-about-pillars .pillar-grid { grid-template-columns: 1fr; } .bf-about-cta .cta-inner { padding: 28px 24px; text-align: center; justify-content: center; } .bf-about-hero { padding: 32px 0 40px; } } /* ===== page-nasilyapiyoruz ===== */ /* Nasıl Yapıyoruz — modern layout */ .bf-how-page { padding-bottom: 80px; } .bf-how-hero { padding: 44px 0 52px; background: linear-gradient(165deg, var(--Color-1) 0%, var(--White) 50%); } .bf-how-hero .hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .bf-how-hero .badge { display: inline-block; font-size: var(--bf-fs-sm); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--Primary); background: var(--bf-accent-soft); padding: 6px 14px; border-radius: var(--bf-radius-xl); margin-bottom: 14px; } .bf-how-hero h1 { font-size: clamp(26px, 3.5vw, 38px); line-height: 1.2; color: var(--Primary); margin-bottom: 16px; } .bf-how-hero .lead { font-size: var(--bf-fs-base); line-height: 1.65; color: var(--Color-3); margin-bottom: 24px; max-width: 520px; } .bf-how-hero .hero-img { border-radius: var(--bf-radius-lg); overflow: hidden; box-shadow: 0 20px 40px rgba(22, 25, 29, 0.1); } .bf-how-hero .hero-img img { width: 100%; height: auto; display: block; } /* Process steps */ .bf-how-steps { padding: 56px 0; background: var(--White); } .bf-how-steps .section-head { text-align: center; max-width: 620px; margin: 0 auto 40px; } .bf-how-steps .section-head h2 { color: var(--Primary); margin: 8px 0 12px; } .bf-how-steps .section-head p { color: var(--Color-3); margin: 0; font-size: var(--bf-fs-base); line-height: 1.6; } .bf-how-steps .steps-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; } .bf-how-steps .step-card { background: var(--White); border: 1px solid rgba(22, 25, 29, 0.08); border-radius: var(--bf-radius); padding: 24px 20px; position: relative; border-top: 3px solid var(--Third); transition: box-shadow 0.25s ease, transform 0.25s ease; } .bf-how-steps .step-card:hover { box-shadow: 0 12px 28px rgba(22, 25, 29, 0.08); transform: translateY(-3px); } .bf-how-steps .step-card .num { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--Color-1); color: var(--Primary); font-weight: 700; font-size: var(--bf-fs-base); border-radius: var(--bf-radius-sm); margin-bottom: 14px; } .bf-how-steps .step-card .icon-wrap { font-size: var(--bf-fs-h3); color: var(--Primary); margin-bottom: 10px; opacity: 0.85; } .bf-how-steps .step-card h3 { font-size: var(--bf-fs-h4); color: var(--Primary); margin-bottom: 8px; font-weight: 600; } .bf-how-steps .step-card p { font-size: var(--bf-fs-sm); line-height: 1.55; color: var(--Color-3); margin: 0; } /* Approach cards (3 items) */ .bf-how-approach { padding: 0 0 56px; } .bf-how-approach .approach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .bf-how-approach .approach-card { display: flex; gap: 16px; padding: 22px; background: var(--Color-1); border-radius: var(--bf-radius); border: 1px solid rgba(22, 25, 29, 0.06); } .bf-how-approach .approach-card .icon { flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--White); border-radius: var(--bf-radius); font-size: var(--bf-fs-h3); color: var(--Primary); } .bf-how-approach .approach-card h4 { font-size: var(--bf-fs-base); color: var(--Primary); margin-bottom: 6px; font-weight: 600; } .bf-how-approach .approach-card p { font-size: var(--bf-fs-sm); line-height: 1.5; color: var(--Color-3); margin: 0; } /* Programs */ .bf-how-programs { padding: 56px 0; background: var(--Color-1); } .bf-how-programs .programs-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 36px; } .bf-how-programs .programs-head h2 { color: var(--Primary); margin: 8px 0 0; } .bf-how-programs .programs-head .sub { margin: 0; } .bf-how-programs .programs-head .intro { max-width: 520px; color: var(--Color-3); font-size: var(--bf-fs-base); line-height: 1.6; margin: 12px 0 0; } .bf-how-programs .program-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .bf-how-programs .program-card { background: var(--White); border-radius: var(--bf-radius); padding: 22px 20px; border: 1px solid rgba(22, 25, 29, 0.06); display: flex; flex-direction: column; min-height: 100%; transition: box-shadow 0.22s ease, transform 0.22s ease; } .bf-how-programs .program-card:hover { box-shadow: 0 10px 24px rgba(22, 25, 29, 0.08); transform: translateY(-2px); } .bf-how-programs .program-card .tag { font-size: var(--bf-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--Color-3); margin-bottom: 10px; } .bf-how-programs .program-card h3 { font-size: var(--bf-fs-base); color: var(--Primary); margin-bottom: 10px; font-weight: 600; line-height: 1.3; } .bf-how-programs .program-card p { font-size: var(--bf-fs-sm); line-height: 1.55; color: var(--Color-3); margin: 0; flex: 1; } /* CognitiveMAP */ .bf-how-cmap { padding: 56px 0; } .bf-how-cmap .cmap-top { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-bottom: 40px; } .bf-how-cmap .cmap-top img { width: 100%; border-radius: var(--bf-radius); box-shadow: 0 16px 36px rgba(22, 25, 29, 0.1); } .bf-how-cmap .cmap-top h2 { color: var(--Primary); margin-bottom: 14px; } .bf-how-cmap .cmap-top p { color: var(--Color-3); font-size: var(--bf-fs-base); line-height: 1.65; margin-bottom: 12px; } .bf-how-cmap .pillar-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .bf-how-cmap .pillar { background: var(--White); border: 1px solid rgba(22, 25, 29, 0.08); border-radius: var(--bf-radius); padding: 18px 14px; border-top: 3px solid var(--Primary); } .bf-how-cmap .pillar:nth-child(even) { border-top-color: var(--Third); } .bf-how-cmap .pillar h4 { font-size: var(--bf-fs-base); color: var(--Primary); margin-bottom: 12px; font-weight: 600; } .bf-how-cmap .pillar .chips { display: flex; flex-wrap: wrap; gap: 6px; } .bf-how-cmap .pillar .chip { font-size: var(--bf-fs-xs); line-height: 1.3; padding: 5px 8px; background: var(--Color-1); color: var(--Color-3); border-radius: var(--bf-radius-xs); } /* CTA */ .bf-how-cta .cta-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 36px 40px; background: var(--Color-1); border: 1px solid rgba(22, 25, 29, 0.08); border-radius: var(--bf-radius-lg); } .bf-how-cta .cta-box h3 { font-size: var(--bf-fs-h3); margin-bottom: 8px; color: var(--Primary); } .bf-how-cta .cta-box p { margin: 0; font-size: var(--bf-fs-base); line-height: 1.6; color: var(--Color-3); max-width: 480px; } .bf-how-cta .cta-box .tf-btn { flex-shrink: 0; } @media (max-width: 1200px) { .bf-how-programs .program-grid { grid-template-columns: repeat(2, 1fr); } .bf-how-cmap .pillar-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 991px) { .bf-how-hero .hero-inner, .bf-how-cmap .cmap-top { grid-template-columns: 1fr; } .bf-how-hero .hero-img { order: -1; max-width: 420px; margin: 0 auto; } .bf-how-steps .steps-row { grid-template-columns: repeat(2, 1fr); } .bf-how-approach .approach-grid { grid-template-columns: 1fr; } } @media (max-width: 575px) { .bf-how-steps .steps-row, .bf-how-programs .program-grid, .bf-how-cmap .pillar-grid { grid-template-columns: 1fr; } .bf-how-cta .cta-box { padding: 28px 24px; text-align: center; justify-content: center; } } /* ===== page-hakkimizda ===== */ /* Bilim İnsanları (Hakkımızda) */ .bf-science-page { padding-bottom: 80px; } .bf-science-hero { padding: 44px 0 48px; background: linear-gradient(165deg, var(--Color-1) 0%, var(--White) 55%); text-align: center; } .bf-science-hero .badge { display: inline-block; font-size: var(--bf-fs-sm); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--Primary); background: var(--bf-accent-soft); padding: 6px 14px; border-radius: var(--bf-radius-xl); margin-bottom: 14px; } .bf-science-hero h1 { font-size: clamp(26px, 3.5vw, 38px); color: var(--Primary); margin-bottom: 14px; max-width: 720px; margin-left: auto; margin-right: auto; } .bf-science-hero .lead { font-size: var(--bf-fs-base); line-height: 1.65; color: var(--Color-3); max-width: 640px; margin: 0 auto; } /* Bilim insanları grid */ .bf-science-team { padding: 56px 0; } .bf-science-team .section-head { text-align: center; max-width: 600px; margin: 0 auto 40px; } .bf-science-team .section-head h2 { color: var(--Primary); margin: 8px 0 10px; } .bf-science-team .section-head p { color: var(--Color-3); margin: 0; font-size: var(--bf-fs-base); } .bf-science-team .team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .bf-science-team .scientist-card { background: var(--White); border: 1px solid rgba(22, 25, 29, 0.08); border-radius: var(--bf-radius-lg); overflow: hidden; display: flex; flex-direction: row; align-items: stretch; transition: box-shadow 0.25s ease, transform 0.25s ease; } .bf-science-team .scientist-card:hover { box-shadow: 0 16px 36px rgba(22, 25, 29, 0.1); transform: translateY(-3px); } .bf-science-team .scientist-card .photo { flex: 0 0 140px; width: 140px; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 16px 12px; background: var(--Color-1); border-right: 1px solid rgba(22, 25, 29, 0.06); } .bf-science-team .scientist-card .photo img { width: 100%; height: auto; max-height: 168px; object-fit: contain; object-position: center center; border-radius: var(--bf-radius-sm); } .bf-science-team .scientist-card .body { padding: 20px 20px 22px; flex: 1; min-width: 0; display: flex; flex-direction: column; } .bf-science-team .scientist-card .role { font-size: var(--bf-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--Color-3); margin-bottom: 8px; line-height: 1.4; } .bf-science-team .scientist-card h3 { font-size: var(--bf-fs-h4); color: var(--Primary); margin-bottom: 10px; font-weight: 700; line-height: 1.3; } .bf-science-team .scientist-card .bio { font-size: var(--bf-fs-sm); line-height: 1.6; color: var(--Color-3); margin: 0 0 16px; flex: 1; } .bf-science-team .scientist-card .awards-label { font-size: var(--bf-fs-xs); font-weight: 700; color: var(--Primary); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.04em; } .bf-science-team .scientist-card .award-list { display: flex; flex-direction: column; gap: 8px; } .bf-science-team .scientist-card .award-item { padding: 10px 12px; background: var(--Color-1); border-radius: var(--bf-radius-sm); border-left: 3px solid var(--Third); } .bf-science-team .scientist-card .award-item .org { font-size: var(--bf-fs-xs); font-weight: 600; color: var(--Color-3); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 2px; } .bf-science-team .scientist-card .award-item .title { font-size: var(--bf-fs-sm); color: var(--Primary); font-weight: 500; margin: 0; line-height: 1.4; } /* Ödüller & tanınırlık */ .bf-science-recognition { padding: 56px 0; background: var(--Color-1); } .bf-science-recognition .rec-block { margin-bottom: 48px; } .bf-science-recognition .rec-block:last-child { margin-bottom: 0; } .bf-science-recognition .rec-block h2 { color: var(--Primary); font-size: var(--bf-fs-h3); margin-bottom: 20px; } .bf-science-recognition .award-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .bf-science-recognition .award-tile { background: var(--White); border-radius: var(--bf-radius); padding: 20px; border: 1px solid rgba(22, 25, 29, 0.06); display: flex; gap: 14px; align-items: flex-start; } .bf-science-recognition .award-tile .icon { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--Color-1); border-radius: var(--bf-radius-sm); color: var(--Primary); font-size: var(--bf-fs-h3); } .bf-science-recognition .award-tile h4 { font-size: var(--bf-fs-base); color: var(--Primary); margin-bottom: 6px; font-weight: 600; line-height: 1.35; } .bf-science-recognition .award-tile .year { font-size: var(--bf-fs-sm); color: var(--Color-3); margin: 0; } /* Konferanslar */ .bf-science-events { padding: 56px 0; } .bf-science-events .events-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .bf-science-events .events-col h3 { font-size: var(--bf-fs-h4); color: var(--Primary); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--Third); } .bf-science-events .event-list { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; padding-right: 8px; } .bf-science-events .event-list::-webkit-scrollbar { width: 6px; } .bf-science-events .event-list::-webkit-scrollbar-thumb { background: rgba(22, 25, 29, 0.15); border-radius: var(--bf-radius-xs); } .bf-science-events .event-list li { padding: 12px 14px; margin-bottom: 8px; background: var(--Color-1); border-radius: var(--bf-radius-sm); font-size: var(--bf-fs-sm); line-height: 1.45; color: var(--Color-3); } .bf-science-events .event-list li strong { color: var(--Primary); font-weight: 600; } /* Nörobilim özeti */ .bf-science-neuro { padding: 56px 0; background: var(--White); } .bf-science-neuro .neuro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .bf-science-neuro .neuro-card { padding: 26px 22px; background: var(--Color-1); border-radius: var(--bf-radius); border: 1px solid rgba(22, 25, 29, 0.06); border-top: 3px solid var(--Primary); } .bf-science-neuro .neuro-card:nth-child(2) { border-top-color: var(--Third); } .bf-science-neuro .neuro-card h4 { font-size: var(--bf-fs-h4); color: var(--Primary); margin-bottom: 10px; } .bf-science-neuro .neuro-card p { font-size: var(--bf-fs-sm); line-height: 1.6; color: var(--Color-3); margin: 0; } .bf-science-cta .cta-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 36px 40px; background: var(--Color-1); border: 1px solid rgba(22, 25, 29, 0.08); border-radius: var(--bf-radius-lg); } .bf-science-cta .cta-box h3 { color: var(--Primary); margin-bottom: 8px; } .bf-science-cta .cta-box p { color: var(--Color-3); margin: 0; max-width: 480px; font-size: var(--bf-fs-base); } @media (max-width: 991px) { .bf-science-team .team-grid, .bf-science-recognition .award-grid, .bf-science-events .events-grid { grid-template-columns: 1fr; } .bf-science-neuro .neuro-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .bf-science-team .scientist-card { flex-direction: column; } .bf-science-team .scientist-card .photo { flex: none; width: 100%; border-right: none; border-bottom: 1px solid rgba(22, 25, 29, 0.06); padding: 16px; } .bf-science-team .scientist-card .photo img { max-height: 200px; max-width: 220px; margin: 0 auto; display: block; } } @media (max-width: 575px) { .bf-science-cta .cta-box { padding: 28px 24px; text-align: center; justify-content: center; } } /* ===== page-listing ===== */ /* Blog & Programlar — kart listesi */ .bf-listing-page { padding-bottom: 72px; } .bf-listing-hero { padding: 36px 0 32px; text-align: center; background: linear-gradient(165deg, var(--Color-1) 0%, var(--White) 60%); } .bf-listing-hero .badge { display: inline-block; font-size: var(--bf-fs-sm); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--Primary); background: var(--bf-accent-soft); padding: 6px 14px; border-radius: var(--bf-radius-xl); margin-bottom: 12px; } .bf-listing-hero h1 { font-size: clamp(26px, 3vw, 34px); color: var(--Primary); margin-bottom: 10px; } .bf-listing-hero .lead { font-size: var(--bf-fs-base); line-height: 1.6; color: var(--Color-3); max-width: 560px; margin: 0 auto; } .bf-listing-section { padding: 40px 0 0; } .bf-listing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; } .bf-card { display: flex; flex-direction: column; height: 100%; background: var(--White); border: 1px solid rgba(22, 25, 29, 0.08); border-radius: var(--bf-radius); overflow: hidden; transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease; } .bf-card:hover { box-shadow: 0 14px 32px rgba(22, 25, 29, 0.1); transform: translateY(-4px); border-color: rgba(22, 25, 29, 0.12); } .bf-card__link-wrap { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; } .bf-card__media { flex: 0 0 auto; aspect-ratio: 16 / 10; overflow: hidden; background: var(--Color-1); position: relative; } .bf-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center center; transition: transform 0.35s ease; } .bf-card:hover .bf-card__media img { transform: scale(1.04); } .bf-card__body { flex: 1; display: flex; flex-direction: column; padding: 20px 20px 22px; min-height: 200px; } .bf-card__tag { font-size: var(--bf-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--Color-3); margin-bottom: 10px; } .bf-card__title { font-size: var(--bf-fs-h4); font-weight: 600; line-height: 1.35; color: var(--Primary); margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; } .bf-card__excerpt { font-size: var(--bf-fs-sm); line-height: 1.55; color: var(--Color-3); margin: 0 0 16px; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 4.65em; } .bf-card__more { font-size: var(--bf-fs-sm); font-weight: 600; color: var(--Primary); margin-top: auto; display: inline-flex; align-items: center; gap: 6px; } .bf-card__more i { font-size: var(--bf-fs-xs); transition: transform 0.2s ease; } .bf-card:hover .bf-card__more i { transform: translateX(4px); } .bf-listing-empty { text-align: center; padding: 48px 24px; color: var(--Color-3); grid-column: 1 / -1; } @media (max-width: 1100px) { .bf-listing-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .bf-listing-grid { grid-template-columns: 1fr; } .bf-card__body { min-height: 0; } .bf-card__title, .bf-card__excerpt { min-height: 0; } } /* ===== page-article ===== */ /* Blog / Program detay sayfası */ .bf-article-page { padding-bottom: 64px; } .bf-article-hero { padding: 32px 0 28px; max-width: 840px; margin: 0 auto; } .bf-article-hero .tag { display: inline-block; font-size: var(--bf-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--Color-3); margin-bottom: 12px; } .bf-article-hero h1 { font-size: clamp(26px, 4vw, 36px); line-height: 1.25; color: var(--Primary); margin-bottom: 16px; font-weight: 700; } .bf-article-hero .meta { display: flex; flex-wrap: wrap; gap: 16px 24px; list-style: none; margin: 0; padding: 0; font-size: var(--bf-fs-sm); color: var(--Color-3); } .bf-article-hero .meta li { display: flex; align-items: center; gap: 8px; } .bf-article-hero .meta i { color: var(--Primary); opacity: 0.7; } /* Kapaksız yazıda başlık ile gövde arasındaki ayraç */ .bf-article-cover-blank { max-width: 720px; margin: 0 auto 32px; border-top: 1px solid var(--bf-line); } .bf-article-cover { max-width: 900px; margin: 0 auto 40px; border-radius: var(--bf-radius-lg); overflow: hidden; background: var(--Color-1); box-shadow: 0 10px 28px rgba(22, 25, 29, 0.07); } .bf-article-cover img { width: 100%; height: auto; display: block; max-height: 420px; object-fit: cover; } /* ---- İçerik gövdesi ---- Metin panelden (TinyMCE) geliyor; satır içi biçimler App\Utils\Prose ile temizlendiği için burada `!important` yığmaya gerek kalmadı. Ölçü, ritim ve renk kararları tek yerde: aşağıdaki kurallar. */ .bf-article-prose { max-width: 720px; margin: 0 auto; font-size: var(--bf-fs-base); line-height: 1.75; color: var(--bf-ink-2); } .bf-article-prose > *:first-child { margin-top: 0; } .bf-article-prose > *:last-child { margin-bottom: 0; } .bf-article-prose p { margin: 0 0 1.15em; } /* Giriş paragrafı metne bir giriş tonu verir — başlık gibi davranan (yalnızca kalın metin taşıyan) ilk paragraf bunun dışında kalır. */ .bf-article-prose > p:first-of-type:not(:has(> strong:only-child)) { font-size: var(--bf-fs-lg); line-height: 1.65; color: var(--bf-ink); } .bf-article-prose h2, .bf-article-prose h3, .bf-article-prose h4, .bf-article-prose h5 { color: var(--bf-ink); font-family: var(--bf-font-heading); line-height: var(--bf-lh-heading); letter-spacing: -0.01em; } .bf-article-prose h2 { font-size: var(--bf-fs-h3); font-weight: 700; margin: 2em 0 0.5em; } .bf-article-prose h3 { font-size: var(--bf-fs-h4); font-weight: 700; margin: 1.75em 0 0.45em; } .bf-article-prose h4, .bf-article-prose h5 { font-size: var(--bf-fs-base); font-weight: 700; margin: 1.5em 0 0.4em; } /* Editörde başlık, çıktıda tek başına kalın paragraf olan satırlar (`

BAŞLIK

`) gerçek başlık gibi görünür — içerik yeniden yazılmadan hiyerarşi geri gelir. */ .bf-article-prose p > strong:only-child { display: block; font-family: var(--bf-font-heading); font-size: var(--bf-fs-h4); font-weight: 700; line-height: var(--bf-lh-heading); color: var(--bf-ink); } .bf-article-prose p:has(> strong:only-child) { margin: 1.75em 0 0.45em; } .bf-article-prose strong, .bf-article-prose b { color: var(--bf-ink); font-weight: 700; } .bf-article-prose a { color: var(--bf-accent); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; } .bf-article-prose a:hover { color: var(--bf-accent-strong); } .bf-article-prose ul, .bf-article-prose ol { margin: 0 0 1.15em; padding-left: 1.25em; } /* Listeyi tanıtan paragraf listeye yapışsın — araya paragraf boşluğu girmesin */ .bf-article-prose p:has(+ ul), .bf-article-prose p:has(+ ol) { margin-bottom: 0.5em; } .bf-article-prose li { margin-bottom: 0.4em; } .bf-article-prose ul { list-style: none; padding-left: 0; } .bf-article-prose ul > li { position: relative; padding-left: 1.5em; } /* Madde imi: tema ikonlarıyla aynı yumuşak form */ .bf-article-prose ul > li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.5em; height: 0.5em; border-radius: 40% 60% 55% 45% / 55% 45% 60% 40%; background: var(--bf-accent-bright); } .bf-article-prose blockquote { margin: 1.75em 0; padding: var(--bf-space-5) var(--bf-space-6); background: var(--bf-surface-2); border-left: 3px solid var(--bf-accent-bright); border-radius: var(--bf-radius-sm); font-size: var(--bf-fs-lg); line-height: 1.6; color: var(--bf-ink); } .bf-article-prose blockquote p:last-child { margin-bottom: 0; } .bf-article-prose img { max-width: 100%; height: auto; display: block; border-radius: var(--bf-radius); margin: 1.75em auto; } .bf-article-prose figure { margin: 1.75em 0; } .bf-article-prose figcaption { margin-top: var(--bf-space-2); font-size: var(--bf-fs-sm); color: var(--bf-ink-3); text-align: center; } .bf-article-prose iframe { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--bf-radius); margin: 1.75em 0; } /* Geniş tablolar sayfayı yatay kaydırmasın */ .bf-article-prose table { display: block; width: 100%; overflow-x: auto; border: 0; /* tema `table`'a üst çizgi veriyor */ border-collapse: collapse; margin: 1.75em 0; font-size: var(--bf-fs-sm); } .bf-article-prose th, .bf-article-prose td { padding: var(--bf-space-3) var(--bf-space-4); border: 1px solid var(--bf-line); text-align: left; } .bf-article-prose th { background: var(--bf-surface-2); color: var(--bf-ink); font-weight: 600; } .bf-article-prose hr { margin: 2em 0; border: 0; border-top: 1px solid var(--bf-line); } @media (max-width: 767px) { .bf-article-cover { margin-bottom: 28px; border-radius: var(--bf-radius); } .bf-article-prose blockquote { padding: var(--bf-space-4); } } .bf-article-footer { max-width: 760px; margin: 40px auto 0; padding: 24px 20px 0; border-top: 1px solid rgba(22, 25, 29, 0.08); } .bf-article-footer .back-link { display: inline-flex; align-items: center; gap: 8px; font-size: var(--bf-fs-base); font-weight: 600; color: var(--Primary); text-decoration: none; } .bf-article-footer .back-link:hover { color: var(--Color-4); } .bf-article-tags { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .bf-article-tags span { font-size: var(--bf-fs-sm); font-weight: 600; color: var(--Primary); } .bf-article-tags a { font-size: var(--bf-fs-sm); padding: 6px 12px; background: var(--Color-1); color: var(--Color-3); border-radius: var(--bf-radius-xl); text-decoration: none; } .bf-article-tags a:hover { background: var(--bf-accent-soft); color: var(--Primary); } /* ===== page-contact ===== */ /* Sosyal medya kartı — harita kartıyla aynı dil. Önceki hâli: başlıksız `.list-info` bağlantı listesi; sayfa altında bağlamsız duruyor, dokunma alanı bir satır metinle sınırlı kalıyordu. */ .bf-social-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); align-items: center; gap: var(--bf-space-6) var(--bf-space-10); padding: var(--bf-space-8); background: var(--bf-surface); border: 1px solid var(--bf-line); border-radius: var(--bf-radius-lg); } .bf-social-card__title { font-size: var(--bf-fs-h3); color: var(--bf-ink); margin: var(--bf-space-1) 0 var(--bf-space-2); } .bf-social-card__text { margin: 0; max-width: 46ch; font-size: var(--bf-fs-base); color: var(--bf-ink-2); } .bf-social-card__links { display: flex; flex-wrap: wrap; gap: var(--bf-space-3); margin: 0; padding: 0; list-style: none; } .bf-social-chip { display: inline-flex; align-items: center; gap: var(--bf-space-3); padding: var(--bf-space-2) var(--bf-space-5) var(--bf-space-2) var(--bf-space-2); background: var(--bf-surface-2); border: 1px solid var(--bf-line); border-radius: var(--bf-radius-pill); color: var(--bf-ink); font-size: var(--bf-fs-sm); font-weight: 600; text-decoration: none; transition: transform var(--bf-transition), border-color var(--bf-transition), box-shadow var(--bf-transition), color var(--bf-transition); } /* İkon, çek-up kartlarındaki yumuşak formun aynısı; ton hesap sırasına göre döner */ .bf-social-chip__icon { display: grid; place-items: center; flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: 40% 60% 55% 45% / 55% 45% 60% 40%; background: var(--bf-pastel-blue); color: var(--bf-ink); } .bf-social-card__links li:nth-child(6n + 2) .bf-social-chip__icon { background: var(--bf-pastel-green); } .bf-social-card__links li:nth-child(6n + 3) .bf-social-chip__icon { background: var(--bf-pastel-orange); } .bf-social-card__links li:nth-child(6n + 4) .bf-social-chip__icon { background: var(--bf-pastel-magenta); } .bf-social-card__links li:nth-child(6n + 5) .bf-social-chip__icon { background: var(--bf-pastel-coral); } .bf-social-card__links li:nth-child(6n + 6) .bf-social-chip__icon { background: var(--bf-pastel-grey); } .bf-social-chip__arrow { display: inline-flex; color: var(--bf-ink-3); transition: transform var(--bf-transition), color var(--bf-transition); } .bf-social-chip:hover { transform: translateY(-2px); border-color: var(--bf-accent); color: var(--bf-accent-strong); box-shadow: 0 10px 22px rgba(22, 25, 29, 0.08); } .bf-social-chip:hover .bf-social-chip__arrow { color: var(--bf-accent); transform: translateX(3px); } /* Harita bloğu ile aynı başlık tonu */ .bf-contact-map .description { color: var(--bf-ink-2); } @media (max-width: 991px) { .bf-social-card { grid-template-columns: 1fr; align-items: start; padding: var(--bf-space-6); } } /* ===== page-ekip ===== */ /* Ekibimiz hero'su — bizkimiz / nasilyapiyoruz ile aynı iki kolonlu kalıp. Görselin arkasındaki image-frame blob'u kaldırıldı: SVG fotoğraftan büyük olduğu için kayık duruyordu ve sağdan giren mercan blob metnin hizasını bozuyordu. */ .bf-team-hero { padding: 48px 0 56px; background: linear-gradient(165deg, var(--bf-surface-2) 0%, var(--bf-surface) 55%); } .bf-team-hero .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--bf-space-12); align-items: center; } .bf-team-hero h1 { margin-bottom: var(--bf-space-5); } .bf-team-hero .hero-content p { color: var(--bf-ink-2); margin-bottom: var(--bf-space-4); } .bf-team-hero .hero-lead { font-size: var(--bf-fs-lg); line-height: 1.65; color: var(--bf-ink); } .bf-team-hero .hero-actions { margin-top: var(--bf-space-6); } /* Görsel 640x480 — kaynağın lekesiz bölgesinden üretildi. Kolon genişliği sınırlı tutuluyor ki fotoğraf kendi çözünürlüğünün çok üstüne büyütülüp yumuşamasın. */ .bf-team-hero .hero-image { margin: 0; width: 100%; max-width: 30rem; justify-self: end; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--bf-radius-lg); background: var(--bf-surface-2); box-shadow: 0 20px 44px rgba(22, 25, 29, 0.10); } .bf-team-hero .hero-image img { width: 100%; height: 100%; display: block; object-fit: cover; } @media (max-width: 991px) { .bf-team-hero .hero-grid { grid-template-columns: 1fr; gap: var(--bf-space-8); } .bf-team-hero .hero-image { order: -1; justify-self: start; } }