/* ============================================================ ORTAK EK KATMAN style.css (v14 tabanı) ile sayfa katmanı arasında yüklenir. Birden fazla sayfanın paylaştığı, tabanda olmayan ilkeller. ============================================================ */ /* Nav — açık zeminli hero/bölüm üzerinde koyu logo ve metin. hakkinda, tedaviler ve seminerler sayfalarının üçü de kullanır. */ nav.acik { color: var(--metin); } nav.acik .marka-logo { filter: brightness(0); } nav.acik .nav-cta:hover span { color: #fff; } /* Placeholder foto bloğu — gerçek görsel/video gelene kadar duran, marka gradyanı üzerine ikon + açıklama etiketi taşıyan blok. */ .placeholder-foto { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--marka-solgun) 0%, var(--marka-orta) 55%, var(--marka-koyu) 100%); display: flex; align-items: center; justify-content: center; min-height: 320px; } .placeholder-foto-ic { text-align: center; color: #fff; padding: 24px; } .placeholder-foto-ic svg { width: 34px; height: 34px; opacity: 0.85; margin-bottom: 14px; } .placeholder-foto-etiket { font-family: var(--govde); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.92; line-height: 1.8; } /* Gerçek foto geldiğinde aynı bloğa eklenir. Görsel yüklenemezse alttaki gradyan görünür kalır; bölüm hiçbir koşulda boş düşmez. */ .foto-dolu { background-size: cover; background-position: center; background-repeat: no-repeat; } .foto-dolu .placeholder-foto-ic { display: none; } /* ============================================================ PAYLAŞILAN BÖLÜMLER Aşağıdaki iki blok birden fazla sayfada kullanılır, bu yüzden sayfa katmanında değil burada durur. Sınıf adları tasarımcının ilk verdiği hâliyle (tedavi-*) korunmuştur. · Sayfa hero'su → Tedaviler, İletişim · Kapanış çağrısı → Tedaviler, İletişim ============================================================ */ /* 01 HERO — tam ekran video */ .tedavi-hero { position: relative; height: 100vh; min-height: 720px; overflow: hidden; background-color: #E9ECEE; } .tedavi-hero-video, .tedavi-hero-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .tedavi-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(240,242,245,0.90) 0%, rgba(240,242,245,0.72) 30%, rgba(240,242,245,0.32) 52%, rgba(240,242,245,0.00) 70%); } /* Hero metni dikeyde ortalanmaz, üstten sabit bir paydan başlar. Ortalandığında metnin başladığı yer içerik uzunluğuna göre kayıyordu: uzun metinli Tedaviler'de başlık bandın içine giriyor, kısa metinli Hikâyeler'de bandın altında kalıyordu. Sabit pay, içerik ne kadar olursa olsun üst etiketi ve başlığı her sayfada aynı yere oturtur. Alt sınır (140px) sabit nav'ın altında kalmak içindir. */ .tedavi-hero-ic { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; max-width: var(--max-genislik); margin: 0 auto; padding: clamp(140px, 20vh, 220px) var(--dis-bosluk) var(--dis-bosluk); } .tedavi-hero-metin { max-width: 44%; } .tedavi-hero-metin .bolum-eyebrow { color: var(--marka-koyu); } .tedavi-hero-baslik { font-family: var(--display); font-weight: 400; font-size: clamp(38px, 4.4vw, 64px); line-height: 1.08; letter-spacing: -0.02em; color: var(--metin); margin-bottom: 28px; } .tedavi-hero-govde p { font-family: var(--govde); font-size: 17px; line-height: 1.8; color: var(--metin-yumusak); max-width: 460px; margin-bottom: 14px; } /* Manifesto satırlarındaki vurgu, ana sayfadaki .manifesto-satir içinde tanımlı. Aynı metin sayfa hero'sunda da kullanılabildiği için vurgunun rengi burada da geçerli olmalı. */ .tedavi-hero-govde .aksan { color: var(--marka-koyu); } .tedavi-hero-cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; font-family: var(--govde); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--metin-aksan); text-decoration: none; border-bottom: 1px solid var(--marka-koyu); padding-bottom: 6px; transition: opacity 250ms; } .tedavi-hero-cta:hover { opacity: 0.65; } /* 08 CTA — tam ekran klinik, akşam */ .cta-bolum { position: relative; min-height: 68vh; display: flex; align-items: center; overflow: hidden; background: var(--zemin-derin); } .cta-bolum .placeholder-foto { position: absolute; inset: 0; min-height: 68vh; } .cta-bolum::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(30,42,50,0.55) 0%, rgba(30,42,50,0.78) 100%); } .cta-ic { position: relative; z-index: 2; max-width: var(--max-genislik); margin: 0 auto; padding: 0 var(--dis-bosluk); width: 100%; text-align: center; } .cta-baslik { font-family: var(--display); font-weight: 400; font-size: clamp(36px, 4.6vw, 62px); line-height: 1.1; color: #fff; margin-bottom: 26px; } .cta-baslik em { font-style: italic; color: var(--marka-solgun); } .cta-alt { font-family: var(--govde); font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.82); max-width: 520px; margin: 0 auto 40px; } .cta-buton { display: inline-block; background: #fff; color: var(--zemin-derin); padding: 18px 40px; font-family: var(--govde); font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; text-decoration: none; border: 1px solid #fff; transition: background 300ms, color 300ms; } .cta-buton:hover { background: transparent; color: #fff; } @media (max-width: 980px) { .tedavi-hero-metin { max-width: 78%; } } @media (max-width: 640px) { .tedavi-hero-metin { max-width: 100%; } } /* ============================================================ DİĞER TALEPLER — hasta dışı başvuru kanalları Kanal sayısı serbest. Ayırıcı çizgiler yalnızca sütunlar ARASINA düşer; satır başındaki kartta çizgi olmaz, bu yüzden her kırılımda nth-child ile satır başı sıfırlanır. ============================================================ */ .talep-bolum .bolum-baslik { max-width: 760px; } .talep-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 64px; } .talep-kart { padding-left: 38px; padding-right: 24px; border-left: 1px solid var(--cizgi); } .talep-kart:nth-child(4n + 1) { border-left: 0; padding-left: 0; } .talep-baslik { font-family: var(--display); font-weight: 400; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.3; color: var(--metin); letter-spacing: -0.01em; margin-bottom: 16px; } .talep-ozet { font-family: var(--govde); font-size: 14.5px; line-height: 1.75; color: var(--metin-yumusak); margin-bottom: 18px; } .talep-eposta { font-family: var(--govde); font-size: 14px; line-height: 1.6; color: var(--marka-koyu); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 300ms ease; word-break: break-word; } .talep-eposta:hover { border-bottom-color: var(--marka-koyu); } @media (max-width: 1080px) { .talep-grid { grid-template-columns: repeat(2, 1fr); row-gap: 48px; } .talep-kart { border-left: 1px solid var(--cizgi); padding-left: 38px; } .talep-kart:nth-child(2n + 1) { border-left: 0; padding-left: 0; } } @media (max-width: 640px) { .talep-grid { grid-template-columns: 1fr; row-gap: 0; margin-top: 44px; } .talep-kart { border-left: 0; padding-left: 0; padding-right: 0; border-top: 1px solid var(--cizgi); padding-top: 30px; margin-top: 30px; } .talep-kart:first-child { border-top: 0; padding-top: 0; margin-top: 0; } } /* ============================================================ RANDEVU TALEBİ — solda asimetrik görsel kümesi, sağda form İki sütunlu kurgu: sol sütunda başlık + künye satırları + üç görselin kaydırmalı (asimetrik) kümesi, sağ sütunda beyaz form kartı. Görsel sayısı üçtür ve panelden gelir; biri boş bırakılırsa o kare kümeden düşer, kalanlar aynı yerde durur. ============================================================ */ .randevu-duzen { display: grid; grid-template-columns: 6fr 6fr; gap: 80px; align-items: start; } /* ---- Sol sütun: başlık, künye, görseller ---- */ .randevu-baslik { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 3.6vw, 52px); line-height: 1.1; letter-spacing: -0.02em; color: var(--metin); margin-bottom: 28px; } .randevu-baslik em { font-style: italic; font-weight: 500; } .randevu-govde { font-family: var(--govde); font-size: 16.5px; line-height: 1.8; color: var(--metin-yumusak); max-width: 460px; } /* Künye — sol dar etiket, sağ açıklama. Satırlar arasına ince çizgi düşmez; yalnızca listenin üstünde bir ayırıcı vardır. */ .randevu-kunye { margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--cizgi); display: grid; row-gap: 20px; } .randevu-kunye-satir { display: grid; grid-template-columns: 116px 1fr; gap: 24px; align-items: baseline; } .randevu-kunye-etiket { font-family: var(--govde); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--metin-yumusak); } .randevu-kunye-deger { font-family: var(--govde); font-size: 15px; line-height: 1.7; color: var(--metin); } /* Görsel kümesi — 12 sütunluk ızgara üzerinde birbirine binen üç kare. Satır yüksekliği tek bir modülden (grid-auto-rows) türer, böylece sütun daraldığında kurgu oranını koruyarak küçülür. Dikey etiketler kümenin sağındaki/solundaki boşluğa oturur; bu yüzden ızgaranın iki yanında 30px'lik pay bırakılır. */ .randevu-kume { position: relative; margin-top: 56px; padding: 0 30px; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(16px, 2.2vw, 24px); } .randevu-kare { position: relative; overflow: visible; background: var(--zemin-orta); } .randevu-kare-gorsel { position: absolute; inset: 0; background-size: cover; background-position: center; filter: grayscale(0.25); transition: filter 700ms ease; } .randevu-kare:hover .randevu-kare-gorsel { filter: grayscale(0); } .randevu-kare.k1 { grid-column: 1 / 9; grid-row: 1 / 11; z-index: 1; } .randevu-kare.k2 { grid-column: 8 / 13; grid-row: 6 / 18; z-index: 2; } .randevu-kare.k3 { grid-column: 2 / 8; grid-row: 15 / 23; z-index: 3; } /* Küme içindeki kareler beyaz bir payla ayrılır; böylece binen kenarlar birbirine yapışmaz, referanstaki "kesilmiş kâğıt" hissi korunur. */ .randevu-kare.k2, .randevu-kare.k3 { border: 8px solid var(--zemin); } /* Etiketler — biri yatay (kümenin içinde), ikisi dikey (yan boşlukta) */ .randevu-etiket { position: absolute; z-index: 4; font-family: var(--govde); font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--marka-koyu); background: var(--zemin); border: 1px solid var(--cizgi); padding: 7px 14px; white-space: nowrap; } .randevu-etiket.yatay { left: -14px; bottom: -16px; } .randevu-etiket.dikey { writing-mode: vertical-rl; padding: 14px 7px; } .randevu-etiket.dikey.sag { right: -30px; top: 22px; } .randevu-etiket.dikey.sol { left: -30px; bottom: 22px; transform: rotate(180deg); } /* ---- Sağ sütun: form kartı ---- Sol sütun görsel kümesi yüzünden daha uzundur; kart geniş ekranda yapışkan durur, böylece küme kaydırılırken form görüş alanında kalır. */ .randevu-sag { position: sticky; top: 96px; } .randevu-kart { background: #fff; border: 1px solid var(--cizgi); padding: clamp(28px, 3.4vw, 52px); } .randevu-kart-basarili { margin-bottom: 28px; padding: 16px 20px; border-left: 2px solid var(--marka-koyu); background: rgba(62, 93, 111, 0.06); font-family: var(--govde); font-size: 14.5px; line-height: 1.6; color: var(--metin); } .randevu-kart-form { display: grid; row-gap: 26px; } .randevu-kart-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; } .randevu-alan { display: block; } .randevu-alan > span { display: block; margin-bottom: 10px; font-family: var(--govde); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--metin-yumusak); } .randevu-kart-form input[type="text"], .randevu-kart-form input[type="tel"], .randevu-kart-form input[type="email"], .randevu-kart-form textarea { width: 100%; display: block; font-family: var(--govde); font-size: 15px; color: var(--metin); background: transparent; border: 0; border-bottom: 1px solid var(--cizgi); border-radius: 0; padding: 10px 0 12px; transition: border-color 350ms ease; } .randevu-kart-form textarea { border: 1px solid var(--cizgi); padding: 16px 18px; resize: vertical; min-height: 148px; line-height: 1.7; } .randevu-kart-form input::placeholder, .randevu-kart-form textarea::placeholder { color: rgba(107, 122, 133, 0.65); } .randevu-kart-form input:focus, .randevu-kart-form textarea:focus { outline: none; border-color: var(--marka-koyu); } /* Konu seçimi — radyo düğmeleri görsel olarak gizlenir, etiketler kutu hâline gelir. Seçili kutu marka rengiyle dolar. */ .randevu-konu { display: flex; flex-wrap: wrap; gap: 10px; } .randevu-konu input { position: absolute; opacity: 0; width: 1px; height: 1px; } .randevu-konu label { display: inline-block; cursor: pointer; font-family: var(--govde); font-size: 13px; color: var(--metin); background: transparent; border: 1px solid var(--cizgi); padding: 12px 20px; transition: background 300ms, color 300ms, border-color 300ms; } .randevu-konu label:hover { border-color: var(--marka-orta); } .randevu-konu input:checked + label { background: var(--marka-koyu); border-color: var(--marka-koyu); color: #fff; } .randevu-konu input:focus-visible + label { outline: 2px solid var(--marka-orta); outline-offset: 2px; } .randevu-kart-onay { display: flex; align-items: flex-start; gap: 12px; font-family: var(--govde); font-size: 13px; line-height: 1.6; color: var(--metin-yumusak); cursor: pointer; } .randevu-kart-onay input { margin-top: 3px; accent-color: var(--marka-koyu); } .randevu-kart-gonder { width: 100%; cursor: pointer; background: var(--zemin-derin); color: #fff; border: 1px solid var(--zemin-derin); padding: 20px 28px; font-family: var(--govde); font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; transition: background 300ms, color 300ms; } .randevu-kart-gonder:hover { background: transparent; color: var(--zemin-derin); } @media (max-width: 1080px) { .randevu-duzen { grid-template-columns: 1fr; gap: 64px; } .randevu-sag { position: static; } .randevu-govde { max-width: none; } .randevu-kume { max-width: 620px; margin-top: 48px; } } @media (max-width: 640px) { .randevu-kunye-satir { grid-template-columns: 1fr; gap: 6px; } .randevu-kart-ikili { grid-template-columns: 1fr; } .randevu-kume { padding: 0 24px; } .randevu-etiket { font-size: 9px; letter-spacing: 0.18em; padding: 6px 10px; } .randevu-etiket.dikey { padding: 10px 6px; } .randevu-etiket.dikey.sag { right: -24px; } .randevu-etiket.dikey.sol { left: -24px; } } /* ============================================================ İLETİŞİM BİLGİLERİ — hero'nun hemen altındaki künye şeridi Sütun sayısı serbest; satırda dörtlü dizilir, ekran daraldıkça ikiliye sonra alt alta iner. Ayırıcı çizgiler yalnızca sütunlar ARASINA düşer, bu yüzden her kırılımda satır başı sıfırlanır. Sıra numarası (01, 02 …) döngüden üretilir, panelden girilmez. ============================================================ */ .bilgi-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .bilgi-sutun { padding-left: 40px; padding-right: 28px; border-left: 1px solid var(--cizgi); } .bilgi-sutun:nth-child(4n + 1) { border-left: 0; padding-left: 0; } .bilgi-sira { font-family: var(--govde); font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--metin-yumusak); margin-bottom: 26px; } .bilgi-sira span { opacity: 0.55; } /* Büyük değer — telefon, e-posta. Uzun e-posta adresleri dar sütunda taşmasın diye kırılmaya izin verilir. */ .bilgi-deger { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.25; letter-spacing: -0.01em; color: var(--metin); text-decoration: none; overflow-wrap: anywhere; transition: opacity 250ms ease; } a.bilgi-deger:hover { opacity: 0.6; } /* Uzun değerler (e-posta adresleri) dar sütunda kelime ortasından bölünmesin diye bir punto küçülür; sınıf blade tarafında karakter sayısına göre verilir, panelden bir şey seçilmez. */ .bilgi-deger.uzun { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.35; } /* Değerin altındaki ek satırlar (ikinci numara, kanal listesi) */ .bilgi-satirlar { margin-top: 18px; display: grid; row-gap: 8px; } .bilgi-satir, .bilgi-link { font-family: var(--govde); font-size: 15.5px; line-height: 1.6; color: var(--metin); text-decoration: none; } .bilgi-link { justify-self: start; border-bottom: 1px solid transparent; transition: border-color 300ms ease; } .bilgi-link:hover { border-bottom-color: var(--metin); } /* Değeri olmayan sütunda (örn. sosyal) liste üstten başlar */ .bilgi-sutun.degersiz .bilgi-satirlar { margin-top: 0; } .bilgi-ozet { margin-top: 18px; font-family: var(--govde); font-size: 14.5px; line-height: 1.75; color: var(--metin-yumusak); } @media (max-width: 1080px) { .bilgi-grid { grid-template-columns: repeat(2, 1fr); row-gap: 52px; } .bilgi-sutun { border-left: 1px solid var(--cizgi); padding-left: 40px; } .bilgi-sutun:nth-child(2n + 1) { border-left: 0; padding-left: 0; } } @media (max-width: 640px) { .bilgi-grid { grid-template-columns: 1fr; row-gap: 0; } .bilgi-sutun { border-left: 0; padding-left: 0; padding-right: 0; border-top: 1px solid var(--cizgi); padding-top: 32px; margin-top: 32px; } .bilgi-sutun:first-child { border-top: 0; padding-top: 0; margin-top: 0; } .bilgi-sira { margin-bottom: 18px; } } /* ============================================================ NAV — dil seçici ve randevu düğmesi artık gerçek bağlantı Görünüm tasarımdaki hâliyle birebir aynı kalsın diye style.css'te span/button için tanımlı kurallar öğesine taşınır. ============================================================ */ .dil a { color: currentColor; text-decoration: none; cursor: pointer; padding-bottom: 2px; transition: opacity 200ms; } .dil a:hover { opacity: 0.7; } .dil a.aktif { border-bottom: 1px solid currentColor; } /* display verilmez: .nav-sag zaten flex, öğe kendiliğinden bloklaşır. Burada display tanımlamak style.css'teki "900px altında gizle" kuralını ezer ve düğme mobilde görünür hâle gelirdi. */ a.nav-cta { text-decoration: none; color: currentColor; line-height: 1; } /* Mobil menü içindeki dil seçici — üst çubuktaki 900px altında gizli. */ .menu-overlay-dil { margin-top: 16px; padding-top: 24px; border-top: 1px solid var(--cizgi-koyu); display: flex; justify-content: center; gap: 8px; font-family: var(--govde); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(180, 210, 232, 0.75); } .menu-overlay-dil a { color: currentColor; text-decoration: none; padding-bottom: 2px; transition: opacity 200ms; } .menu-overlay-dil a:hover { opacity: 0.7; } .menu-overlay-dil a.aktif { border-bottom: 1px solid currentColor; } .menu-overlay-dil .ayrac { opacity: 0.4; } /* ---- Form doğrulama uyarıları ---------------------------------- Hata rengi palete yabancı düşmesin diye soğuk grinin yanında duran kısık bir kiremit tonu. Uyarı satırı yalnızca hata varken yer kaplar, böylece form ilk hâlinde zıplamaz. */ :root { --uyari: #9E5A4E; } .randevu-hata { display: none; margin-top: 9px; font-family: var(--govde); font-size: 12.5px; line-height: 1.5; color: var(--uyari); } .randevu-alan.hatali .randevu-hata, .randevu-onay-sarma.hatali .randevu-hata { display: block; } .randevu-alan.hatali input, .randevu-alan.hatali textarea { border-color: var(--uyari); } .randevu-alan.hatali > span { color: var(--uyari); } .randevu-onay-sarma.hatali .randevu-kart-onay input { accent-color: var(--uyari); outline: 1px solid var(--uyari); outline-offset: 2px; } /* ---- Telefon: ülke kodu + numara -------------------------------- Ülke seçici ile numara aynı satırda, tek bir alan gibi okunur. Seçici, alt çizgili diğer alanlarla aynı dili konuşsun diye tarayıcının kendi görünümünden arındırılıp ok işareti çizilir. */ .randevu-tel-satir { display: grid; grid-template-columns: minmax(132px, 38%) 1fr; gap: 18px; align-items: end; } .randevu-kart-form .randevu-ulke { width: 100%; min-width: 0; font-family: var(--govde); font-size: 15px; color: var(--metin); background: transparent; border: 0; border-bottom: 1px solid var(--cizgi); border-radius: 0; padding: 10px 24px 12px 0; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7A85' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; background-size: 16px 16px; text-overflow: ellipsis; transition: border-color 350ms ease; } .randevu-kart-form .randevu-ulke:focus { outline: none; border-bottom-color: var(--marka-koyu); } .randevu-alan.hatali .randevu-ulke { border-bottom-color: var(--uyari); } @media (max-width: 420px) { .randevu-tel-satir { grid-template-columns: 1fr; gap: 14px; } } /* Yazım hatası önerisi — hata değil, ipucu. Bu yüzden kiremit değil nötr renkte durur ve alanın çizgisini kırmızıya çevirmez. */ .randevu-alan.onerili .randevu-hata { display: block; color: var(--metin-yumusak); } button.randevu-oneri { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--govde); font-size: inherit; color: var(--marka-koyu); border-bottom: 1px solid var(--marka-koyu); transition: opacity 250ms ease; } button.randevu-oneri:hover { opacity: 0.65; } /* ============================================================ SAYFA İÇERİĞİ — panelin "İçerik" alanından gelen serbest metin Hero'nun altında, tek sütunlu klasik bir okuma bloğu. Ölçüler Hakkında sayfasındaki metin bloklarıyla aynı dili konuşur: ilk paragraf koyu ve bir punto büyük, devamı yumuşak tonda. ============================================================ */ .sayfa-icerik-govde { max-width: 780px; } .sayfa-icerik-govde p { font-family: var(--govde); font-size: 17px; line-height: 1.85; color: var(--metin-yumusak); margin-bottom: 24px; } .sayfa-icerik-govde p:first-child { font-size: 19px; line-height: 1.7; color: var(--metin); } .sayfa-icerik-govde p:last-child { margin-bottom: 0; } .sayfa-icerik-govde p strong { color: var(--metin); font-weight: 400; } .sayfa-icerik-govde em { font-style: italic; } .sayfa-icerik-govde h2, .sayfa-icerik-govde h3 { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2vw, 28px); line-height: 1.3; color: var(--metin); margin: 44px 0 18px; } .sayfa-icerik-govde ul, .sayfa-icerik-govde ol { margin: 0 0 24px 20px; color: var(--metin-yumusak); line-height: 1.85; } .sayfa-icerik-govde a { color: var(--marka-koyu); } /* Klinik bölümü tam genişlikte "Mimari Deneyim" görseliyle bitiyorsa, bölümün alt boşluğu görselle bir sonraki bölüm arasında açık bir şerit bırakıyordu. Görsel doğrudan sonraki bölüme değsin. */ section.bolum.mimari-bitisli { padding-bottom: 0; } /* Hero düğmeleri artık