/* ========================================================================= Dr. Kerem Çolakoğlu — görünüm düzeltmeleri Bölüm numaraları YAPILACAKLAR.md ile eşleşir. Renkler: bordo #591B12 · koyu bordo #4A160F · bej #D5B18C ========================================================================= */ /* ------------------------------------------------------------------------- §3.1 — Video düzeni (kapak görseli / facade) ---------------------------------------------------------------------- */ /* Videolar yan yana dizili flex container'larda ve genişlikleri içeriklerine göre belirleniyor (flex: 1 1 auto). Önceden her videoda 640 px genişlikli bir iframe vardı; hepsi eşit genişlikte duruyordu. Kapak görseline geçince içerik genişliği sıfırlandı: mobilde kapaklar 35 px'e düştü, tıklanan video iframe'i alıp büyürken diğerleri küçüldü. Sarmalayıcıya aynı 640 px'lik genişliği vermek, iframe'li özgün düzeni aynen geri getirir: masaüstü/tablette eşit genişlikte yan yana, mobilde tam genişlikte alt alta. Tıklamadan önce ve sonra ölçüler değişmez. */ .elementor-widget-video .elementor-wrapper.elementor-open-inline { width: 640px; max-width: 100%; } /* ------------------------------------------------------------------------- §7 — Mobil responsive (Not 5) ---------------------------------------------------------------------- */ /* §7.1 Ortak kenar boşluğu: mobilde tüm metin bölümleri ekran kenarından 25 px içeride başlar (Ertuğrul'un kararı, 26 Eylül). Masaüstü dolguları mobilde sıfırlanmadığı için her bölüm farklı bir kenardan başlıyordu (10 / 15 / 35 / 55 / 65 / 80 px) ve bazıları asimetrikti. Sayfanın dış container'ı zaten 15 px veriyor; aşağıdaki değerler toplamı 25 px'e tamamlar. Karuseller, galeriler ve kutu içleri olduğu gibi kaldı. Seçiciler Elementor öğe kimliklerine bağlı: bölüm Elementor'da yeniden kurulursa kural sessizce devre dışı kalır, bir şey kırılmaz. */ @media (max-width: 767px) { /* — Container'lar (Elementor dolguyu --padding-* değişkeniyle veriyor) — */ body .elementor-212 .elementor-element.elementor-element-6dd1c1b, /* SSS akordeonu: 50/30 → */ body .elementor-1474 .elementor-element.elementor-element-fb7dc45, body .elementor-1473 .elementor-element.elementor-element-63cece1, body .elementor-212 .elementor-element.elementor-element-f1fa27e, /* İletişim bloğu: 40/0 → */ body .elementor-1474 .elementor-element.elementor-element-bad9a13, body .elementor-1473 .elementor-element.elementor-element-a706ff7, body .elementor-212 .elementor-element.elementor-element-cf786e8 { /* Hakkımda metni (iç) */ --padding-left: 10px; --padding-right: 10px; } body .elementor-212 .elementor-element.elementor-element-8580674 { /* Hakkımda bölümü (dış, tam genişlik): 40 → */ --padding-left: 15px; --padding-right: 15px; } body .elementor-1474 .elementor-element.elementor-element-cafcdf5, /* Randevu Al form bölümü: 35 → */ body .elementor-1473 .elementor-element.elementor-element-b742d9e { /* Sizi Arayalım form bölümü: 35 → */ --padding-left: 25px; --padding-right: 25px; } /* — Widget'lar (dolgu öğenin kendisinde) — */ body .elementor-212 .elementor-element.elementor-element-c79bff4, /* hero altındaki tanıtım metni: 30 → */ body .elementor-212 .elementor-element.elementor-element-a77deb2, /* SSS alt başlığı: 25 → */ body .elementor-1474 .elementor-element.elementor-element-fc4fa76, body .elementor-1473 .elementor-element.elementor-element-72c637e { padding-left: 0; padding-right: 0; } /* "Hizmetlerimiz" ve "İçeriklerimiz" başlıkları artık bölüm dolgusuyla hizalı (§7.8) */ body .elementor-1474 .elementor-element.elementor-element-c2b2afb, body .elementor-1473 .elementor-element.elementor-element-ae3faeb { padding-left: 10px; padding-right: 10px; } /* Kliniğimiz: bölüm tam genişlikte (dış offset 0), iç container 10 px */ body .elementor-212 .elementor-element.elementor-element-e32e62d { /* başlık: 10 → 25 */ padding-left: 15px; padding-right: 15px; } body .elementor-212 .elementor-element.elementor-element-af6d746 { /* metin: 35 → 25 */ padding-left: 15px; padding-right: 15px; } body .elementor-166 .elementor-element.elementor-element-a609920 { /* Hakkımızda başlığı: sağ 0 → */ padding-right: 10px; } } /* §7.2 SSS akordeonu: başlık 2–3 satıra kırılınca ok ikonu dikeyde ortada kalıyor, metin yukarıdan başlıyordu (13–25 px kayma). Ok ilk satıra hizalanır. */ .wd-accordion .wd-accordion-title { align-items: flex-start; } /* Ok ikonu satır yüksekliğinden küçük; ilk satırın ortasına indir (ölçülen fark 8 px). */ .wd-accordion .wd-accordion-title .wd-accordion-opener { margin-top: 8px; } /* §7.5 Mobil ve tablette okunamayacak kadar küçük yazılar (hizmet sayfaları). Görsel altyazısı masaüstünde 11 px iken mobilde 9 px'e düşüyordu. Mobil ve tablette (≤1024 px) büyütülür; masaüstü tasarımına dokunulmadı. (Önceki/sonraki yazı başlıkları: §7.10) */ @media (max-width: 1024px) { /* Hizmet şablonunda (#1013) bu altyazıya mobil için ayrıca 9 px verilmiş. */ .elementor-widget-image .widget-image-caption, body .elementor-1013 .elementor-element.elementor-element-1079bee .widget-image-caption { font-size: 12px; } } /* §7.1 (tablet) SSS alt başlığı 768–1024 px'te dar sol sütunda satır başına 1–2 kelimeyle 5 satıra kırılıyordu (151–167 px genişlik). Yan dolgusu kaldırılır. */ @media (min-width: 768px) and (max-width: 1024px) { body .elementor-212 .elementor-element.elementor-element-a77deb2, body .elementor-1474 .elementor-element.elementor-element-fc4fa76, body .elementor-1473 .elementor-element.elementor-element-72c637e { padding-left: 0; padding-right: 0; } } /* §7.5 Mobil header'daki dil bayrakları 26×15 px: WCAG'ın 24×24 px'lik asgari dokunma hedefinin altında. Görünüm aynı kalır; dokunma alanı görünmez bir katmanla dikeyde 35 px'e büyütülür (yan yana bayrakları örtmeden). Sosyal ikonlar 24×27 px ile asgari değeri zaten karşılıyor. */ @media (max-width: 1024px) { .whb-top-bar .gtranslate_wrapper a.glink { position: relative; } .whb-top-bar .gtranslate_wrapper a.glink::after { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; } } /* §7.6 (Hizmet sayfalarındaki yazar kutusunun 320 px'te taşması — kutu kaldırıldığı için kuralı da kaldırıldı, §7.7.) */ /* §7.8 Ana sayfadaki üç bölümde (iletişim bilgilerinin altındaki hizmet carousel'i, "Hizmetlerimiz" carousel'i, "İçeriklerimiz" videoları) Elementor'da sağ/sol dolgu elle 0 yapılmış; diğer bölümler varsayılan 10 px'i kullanıyor. İçerik bu yüzden masaüstünde komşu bölümlerden 10 px geniş duruyor, mobil ve tablette 25 yerine 15 px'ten başlıyordu. Varsayılan 10 px geri verilir; üç bölüm her ekranda komşularıyla aynı kenardan başlar. */ body .elementor-212 .elementor-element.elementor-element-619bba5, body .elementor-212 .elementor-element.elementor-element-a54da29, body .elementor-212 .elementor-element.elementor-element-f87ec71 { --padding-left: 10px; --padding-right: 10px; } /* İçeriklerimiz videoları kendi iç container'ının dolgusuyla başlıktan içeride başlıyordu (masaüstünde 10, mobilde 25 px). Bölümün dolgusu yeterli. */ body .elementor-212 .elementor-element.elementor-element-4163934 { --padding-left: 0px; --padding-right: 0px; } /* §7.9 İçeriklerimiz videoları tablette 6'sı tek satıra sığdırılıyor, her biri ~110 px'e düşüyordu. 768–1024 px'te satırda 3 video, 2 satır. */ @media (min-width: 768px) and (max-width: 1024px) { body .elementor-212 .elementor-element.elementor-element-4163934 { --flex-wrap: wrap; } body .elementor-212 .elementor-element-4163934 > .elementor-widget-video { flex: 0 0 calc((100% - 2 * var(--column-gap, 20px)) / 3); } } /* §7.10 Hizmet sayfalarındaki Önceki / Sonraki bağlantıları. Başlıklar tek satıra zorlanıp "…" ile kesiliyordu: mobilde iki uzun başlık ("Botulinum Toksin il… | Botulinum Toksin il…") ortadaki çizgiye yapışıyor, birbirinden ayırt edilemiyordu. Etiket ile başlık arasında hiç boşluk yoktu, ikisi aynı renkteydi; başlık masaüstünde 9,8 px'ti. Başlıklar alt satıra geçer, çizgiyle aralarında boşluk kalır; etiket daha açık, başlık daha büyük ve kalın. */ body .elementor-post-navigation .elementor-post-navigation__link { white-space: normal; } body .elementor-post-navigation .elementor-post-navigation__prev a { padding-right: 20px; } body .elementor-post-navigation .elementor-post-navigation__next a { padding-left: 20px; } body .elementor-post-navigation span.elementor-post-navigation__link__prev, body .elementor-post-navigation span.elementor-post-navigation__link__next { gap: 4px; } body .elementor-post-navigation .post-navigation__prev--label, body .elementor-post-navigation .post-navigation__next--label { font-size: 12px; line-height: 1.4; letter-spacing: .06em; color: #767676; /* beyazda 4,54 */ } body .elementor-post-navigation .post-navigation__prev--title, body .elementor-post-navigation .post-navigation__next--title { font-size: 14px; font-weight: 600; line-height: 1.4; } @media (max-width: 767px) { /* Dar ekranda başlığa yer açmak için ok ile metin arası 15 → 8 px. */ body .elementor-post-navigation .elementor-post-navigation__link a { gap: 8px; } body .elementor-post-navigation .elementor-post-navigation__prev a { padding-right: 12px; } body .elementor-post-navigation .elementor-post-navigation__next a { padding-left: 12px; } } /* §7.11 Hizmet sayfası: "Bu içerikte neler var?" ve video akordeonu. İçindekiler kutusu yalnızca 15 px'lik ok simgesiyle açılıyordu; başlığın tamamı artık tıklanabilir (js/icindekiler.js). İki kutuda da üzerine gelince hafif zemin, klavyeyle gezinirken belirgin odak çerçevesi. */ .elementor-widget-table-of-contents .elementor-toc__header { cursor: pointer; transition: background-color .2s ease; } .elementor-widget-n-accordion .e-n-accordion-item-title { transition: background-color .2s ease; } @media (hover: hover) { .elementor-widget-table-of-contents .elementor-toc__header:hover, .elementor-widget-n-accordion .e-n-accordion-item-title:hover { background-color: rgba(89, 27, 18, .06); } } /* Odak çerçevesi: Woodmart her odaklanabilir öğeye !important ile noktalı çerçeve veriyor (değişkenleriyle ayarlanabilir). İçindekiler'de çerçeve 15 px'lik okun yerine başlık satırının tamamına alınır; iki kutuda da aynı düz bordo çerçeve. */ .elementor-widget-table-of-contents .elementor-toc__toggle-button { --wd-otl-width: 0px; } .elementor-widget-table-of-contents .elementor-toc__header:has(.elementor-toc__toggle-button:focus-visible) { outline: 2px solid var(--e-global-color-primary, #591B12); outline-offset: -6px; } .elementor-widget-n-accordion .e-n-accordion-item-title { --wd-otl-width: 2px; --wd-otl-style: solid; --wd-otl-color: var(--e-global-color-primary, #591B12); --wd-otl-offset: -6px; } /* Kapalıyken başlığın alt çizgisi kutu kenarlığının üstüne biniyor, alt kenar 3 px görünüyordu (video kutusunda 2 px). */ .elementor-widget-table-of-contents.elementor-toc--collapsed .elementor-toc__header { border-bottom-color: transparent; } /* Uzun başlıklar "…" ile kesilmesin, alt satıra geçsin. */ .elementor-toc--content-ellipsis .elementor-toc__list-item-text { white-space: normal; overflow: visible; } /* 34 hizmetin 14'ünde video yok: akordeon açılınca içi boş kalıyordu. Video yoksa akordeon gizlenir, "Bu içerikte neler var?" satırın tamamını kaplar. */ body .elementor-1013 .elementor-element-6cbd301:not(:has(.elementor-widget-video)) .elementor-element-2d0c32c { display: none; } body .elementor-1013 .elementor-element-6cbd301:not(:has(.elementor-widget-video)) .elementor-element.elementor-element-8514f74 { --width: 100%; } body .elementor-1013 .elementor-element-6cbd301:not(:has(.elementor-widget-video)) .elementor-element.elementor-element-bacc0bd { --container-widget-width: 100%; width: 100%; max-width: 100%; } /* ------------------------------------------------------------------------- §8 — Metin ve arka plan kontrastı (Not 6) ---------------------------------------------------------------------- */ /* §8.1 Form gönder butonları: Woodmart'ın "mağaza butonu" rengi hiç değiştirilmemiş, varsayılan yeşil #83B735 kalmıştı (beyaz yazıyla kontrast 2,39). Ana sayfadaki form butonuna Elementor'da verilen stil (bordo zemin + bej yazı, 6,60) tüm formlara ve yorum butonuna uygulanır. */ div.wpcf7 input[type="submit"], .comment-form input[type="submit"], .comment-form .submit { --btn-accented-bgcolor: var(--e-global-color-primary, #591B12); --btn-accented-color: var(--e-global-color-secondary, #D5B18C); /* Üzerine gelince ana sayfadaki gibi renkler yer değiştirir (kontrast yine 6,60). */ --btn-accented-bgcolor-hover: var(--e-global-color-secondary, #D5B18C); --btn-accented-color-hover: var(--e-global-color-primary, #591B12); } /* §8.2 Gövde metni renkli zeminlerde okunmuyordu. Sitenin tek gövde rengi #767676 (Woodmart varsayılanı) beyazda sınırda geçiyor (4,54), renkli zeminlerde kalıyordu. Yalnızca sorunlu bölümlerde değiştirilir; beyaz zeminli metinler olduğu gibi. Bej zeminler Elementor'da çoğunlukla tam opak "üst katman" olarak verildiği için bölümler kimlikleriyle hedeflenir. */ /* Bej #D5B18C zemin → bordo metin: 2,27 → 6,60 (marka paletiyle aynı) */ body .elementor-212 .elementor-element-4143aae p, /* ana sayfa form kutusu */ body .elementor-212 .elementor-element-a6edae4 p, /* Kliniğimiz bölümü */ body .elementor-1474 .elementor-element-cafcdf5 p, /* Randevu Al form kutusu */ body .elementor-1473 .elementor-element-b742d9e p, /* Sizi Arayalım form kutusu */ body .elementor-1013 .elementor-element-771dfd2 p { /* hizmet sayfaları form kutusu */ color: var(--e-global-color-primary, #591B12); } /* Açık pembe zemin (bordo %9 katman) → daha koyu gri: 3,82 → 5,45 */ body .elementor-212 .elementor-element-8580674 p { /* ana sayfa Hakkımda bölümü */ color: #5E5E5E; } /* Form alanları: yazılan metin ve yer tutucu da bej kutularda #767676 idi (2,27). "Sizi Arayalım" formunda etiket olmadığı için yer tutucu tek açıklama. Yazılan metin bordo (bej 6,60 / beyaz 13,2), yer tutucu %85 bordo (bej 4,98 / beyaz 8,61) — yazılan metinden ayırt edilebilir kalır. */ .wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .wpcf7 textarea, .wpcf7 select { color: var(--e-global-color-primary, #591B12); } .wpcf7 input::placeholder, .wpcf7 textarea::placeholder { color: rgba(89, 27, 18, .85); opacity: 1; } /* §8.6 Hizmet sayfalarının başındaki fotoğraf üstü breadcrumb: beyaz yazının ortanca kontrastı 5,4–14 ile geçiyor, ama fotoğrafın açık bölgelerine denk gelen harflerde 1,7'ye düşüyordu. Hafif gölge, görünümü değiştirmeden okunabilirliği fotoğraftan bağımsız hale getirir. (Başlık 5,4–7,9 ile zaten geçiyor.) */ .elementor-1013 .wd-breadcrumbs, .elementor-1013 .wd-breadcrumbs a { text-shadow: 0 1px 3px rgba(0, 0, 0, .55); } /* ------------------------------------------------------------------------- §10.1 — H1 başlıklar (Not 8) ---------------------------------------------------------------------- */ /* Randevu Al, Sizi Arayalım ve İletişim sayfalarının başlığı metin kutusunda

olarak yazılmıştı; SEO için

yapıldı. Temanın h1 stili araya girmesin, widget'ın kendi tipografisi (35 px / 700, bordo) aynen kalsın. */ body .elementor-1474 .elementor-element-66754df h1, body .elementor-1473 .elementor-element-3f40b41 h1, body .elementor-349 .elementor-element-69b938e h1 { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; line-height: inherit; margin: 0; } /* ------------------------------------------------------------------------- §6 — Footer ---------------------------------------------------------------------- */ /* §6.3 Telif şeridi: beyaz şerit kaldırıldı, footer paletine alındı. Beyaz, Woodmart'ın .wd-footer arka planıydı (footer-bar-bg ayarı). */ .wd-footer { background-color: #4A160F; } .wd-footer .wd-copyrights { background-color: #4A160F; border-top: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .8); /* #4A160F üzerinde kontrast 11,4 */ font-size: 14px; } .wd-footer .wd-copyrights a { color: inherit; } /* §6.4 WhatsApp düğmesi ve karşılama balonu, sayfanın en altında telif metninin üstüne biniyordu. Tablet ve mobilde metni düğmenin üstüne çıkar. */ @media (max-width: 1024px) { .wd-footer .wd-copyrights { padding-bottom: 96px; } } /* §6.1 Footer menüleri mobilde liste olarak görünüyor (açılır menü kapatıldı). Menü başlıkları ile listeler arasındaki boşluğu toparla. */ @media (max-width: 767px) { .elementor-1308 .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item { padding-top: 9px; padding-bottom: 9px; /* dokunma alanı ≈ 40 px */ line-height: 1.35; } } /* §6.1 Mobilde "Hizmetlerimiz" üç ayrı menü container'ından oluşuyor (#1c19d03 başlık + 1. liste, #a821c1f 2. liste, #66424e9 3. liste). Masaüstünde yan yana sütunlar; mobilde alt alta gelince aralarında ~60 px boşluk kalıyor ve tek liste yerine üç parça gibi okunuyordu. */ @media (max-width: 767px) { .elementor-1308 .elementor-element-1c19d03, .elementor-1308 .elementor-element-a821c1f { padding-bottom: 0; } .elementor-1308 .elementor-element-a821c1f, .elementor-1308 .elementor-element-66424e9 { padding-top: 0; margin-top: -20px; /* üst container'ın gap'ini sıfırla */ } .elementor-1308 .elementor-element-1c19d03 .elementor-widget-nav-menu, .elementor-1308 .elementor-element-a821c1f .elementor-widget-nav-menu { margin-bottom: 0; } } /* ------------------------------------------------------------------------- §14 — Son inceleme (26 Eylül) ---------------------------------------------------------------------- */ /* §14 SSS cevaplarındaki bağlantılar (telefon, WhatsApp, Randevu Al, Sizi Arayalım; Not 2'de eklendi) metinden yalnızca renkle ayrılıyordu: bağlantı #333, metin #767676 — WCAG'ın istediği 3:1 farkın altında ve alt çizgi yok. Sitenin diğer iletişim bağlantılarıyla (§4) aynı alt çizgi verilir. Woodmart'ın sonradan yüklenen ".elementor a" kuralı aynı özgüllükte olduğu için "body" ile güçlendirildi. */ body .wd-accordion-content a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } body .wd-accordion-content a:hover, body .wd-accordion-content a:focus-visible { text-decoration-thickness: 2px; }