/* ============================================================================= Anamed Hastanesi — tema ============================================================================= MANTIKSAL ÖZELLİKLER KURALI — bu dosyada tartışmasız: margin-left YERİNE margin-inline-start padding: 0 24px YERİNE padding-inline: 24px text-align: left YERİNE text-align: start left / right YERİNE inset-inline-start / inset-inline-end border-left YERİNE border-inline-start Sebep: site Arapça da yayınlanacak ve Arapça sağdan sola akıyor. Mantıksal özellikler yönü `` özniteliğinden alıyor; tek stil dosyası iki yönde de doğru çalışıyor. Ayna bir dosya tutmak iki kat bakım demekti ve ikisi kaçınılmaz olarak birbirinden ayrı düşerdi. İSTİSNA: gerçekten fiziksel olan şeyler. Gölgenin aşağı düşmesi (`box-shadow: 0 2px ...`) yöne bağlı değildir, `top`/`bottom` da öyle. ============================================================================= */ :root { /* Renkler hastanenin kurumsal kimliği belli olunca değişecek. Şimdilik okunur ve nötr bir sağlık paleti. */ --murekkep: #12303a; --metin: #3d4a50; --metin-soluk: #6b777c; --cizgi: #dde6e9; --zemin: #ffffff; --zemin-soluk: #f4f8f9; --vurgu: #0e7c86; --vurgu-acik: #14a3b0; /* * HIZLI İŞLEM KUTUSUNUN KENDİ RENGİ — VİŞNE ÇÜRÜĞÜ. * * Kullanıcı isteği: "site çok yeşil ağırlıklı oldu, bu kısımda dikkat * çekecek renk olsun." Kutu sayfanın en çok tıklanması istenen yeri; * marka turkuazıyla boyandığında sayfadaki öteki turkuaz öğelerin * arasında kayboluyordu. * * SİNYAL KIRMIZISI DEĞİL. `#7d2233` koyu ve mat; acil servis uyarısı * gibi okunmuyor. Sitede acil kutusu (`.acilUyari`) zaten kırmızı * kullanmıyor, yani bir anlam çakışması da yok. * * Beyaz yazıyla kontrast 9.8:1 — WCAG AA'nın (4.5:1) iki katından * fazlası; hover tonunda 7.2:1. */ --hizli-vurgu: #7d2233; --hizli-acik: #98304a; --kose: 12px; --kose-kucuk: 8px; --gecis: .18s ease; --yazi: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* * ARAPÇA YAZI TİPİ — henüz eklenmedi. * * Sistem yazı tipleri Arap harflerini gösterir ama kurumsal bir görünüm * vermez. Gerçek aile (Noto Sans Arabic / IBM Plex Sans Arabic / Cairo) * seçilip YERELDE barındırılacak — site kuralı gereği CDN yok. * Seçilince burada `:root:lang(ar)` altında tanımlanacak. */ :root:lang(ar) { /* Arap harfleri aynı punto değerinde daha küçük görünür; satır yüksekliği de harflerin altına inen uzantılar için biraz açılıyor. */ --yazi: system-ui, "Segoe UI", Tahoma, sans-serif; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--yazi); font-size: 16px; line-height: 1.7; color: var(--metin); background: var(--zemin); -webkit-font-smoothing: antialiased; /* * `clip`, `hidden` DEĞİL: kökte `hidden` bir kaydırma kabı oluşturur ve * `position: sticky` başlığın dayanağını değiştirir (bkz. TUZAKLAR 2.4). */ overflow-x: clip; } html { overflow-x: clip; } :lang(ar) body { line-height: 1.9; } h1, h2, h3 { color: var(--murekkep); line-height: 1.25; margin-block: 0 .6em; } a { color: var(--vurgu); text-decoration: none; transition: color var(--gecis); } a:hover { color: var(--vurgu-acik); } :focus-visible { outline: 2px solid var(--vurgu-acik); outline-offset: 3px; border-radius: 4px; } /* Klavye kullanıcısı menüyü atlayıp içeriğe geçebilsin. */ .atlaBagi { position: absolute; inset-block-start: -100px; inset-inline-start: 12px; z-index: 100; padding: 10px 16px; background: var(--vurgu); color: #fff; border-radius: var(--kose-kucuk); transition: inset-block-start var(--gecis); } .atlaBagi:focus { inset-block-start: 12px; color: #fff; } .kapsayici { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 24px; } /* --- Üst bant ------------------------------------------------------------ */ /* * ÜST MENÜ — GÖLGE, SAÇ ÇİZGİSİ DEĞİL. * * Kullanıcı sözü: "üst menü biraz cılız duruyor, orayı daha belirgin * yapsak." Ölçüldü: başlık 93px yüksekliğindeydi ama altında yalnızca * 1px çizgi vardı ve bağlantılar 14.5px'ti — geniş bir alanda küçük * yazı, sayfadan ayrılmayan bir şerit. * * Çizgi duruyor (gölgeyi göstermeyen ekranlarda sınır kaybolmasın), * üstüne yumuşak bir gölge geliyor: başlık sayfanın üstünde DURUYOR, * sayfaya karışmıyor. */ /* * YAPIŞKANLIK SARMALAYICIDA, BAŞLIKTA DEĞİL. * * Üst ince bant eklenince ikisi birlikte yapışması gerekti (kullanıcı * isteği: "scrollu aşağı indirdiğimizde bant görünmeye devam etsin"). * Bant `top: 0`, başlık `top: ` diye ayrı ayrı da * kurulabilirdi ama o yükseklik sabit değil — yazı tipi ölçeği, dil ve * dar ekrandaki boşluk değiştirir, aradan içerik sızardı. Sarmalayıcı * o sayıyı bilmek zorunda değil. */ .ustSarmal { position: sticky; inset-block-start: 0; z-index: 90; } .ust { background: rgba(255, 255, 255, .92); border-block-end: 1px solid var(--cizgi); box-shadow: 0 2px 14px rgb(18 48 58 / .10); } .ustIc { display: flex; align-items: center; gap: 24px; /* Yalnızca dikey: `padding` kısayolu `.kapsayici`nin yatay boşluğunu sıfırlar ve ad dar ekranda kenara yapışır. */ padding-block: 14px; } .marka { font-weight: 700; font-size: 18px; color: var(--murekkep); /* Kalan boşluğu yiyip menüyü uca itiyor — yöne duyarlı. */ margin-inline-end: auto; /* * `flex` + `line-height: 0`: bağlantı bir satır kutusu olduğu için * görselin altında yazı tipinin taban çizgisi kadar boşluk bırakıyordu * ve logo dikeyde ortalı durmuyordu. */ display: flex; align-items: center; line-height: 0; } .menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } /* * BAĞLANTILAR KOYU MÜREKKEPTE, VURGU RENGİNDE DEĞİL. * * Bütün maddeler turkuazken seçili olan öne çıkmıyordu: vurgu rengi her * yerde kullanılınca hiçbir yerde vurgu olmuyor. Artık turkuaz yalnızca * SEÇİLİ maddeye ait. * * `white-space: nowrap` ZORUNLU: 15.5px'e çıkınca "Ana sayfa" ve "Hasta * Rehberi" iki satıra sarıyordu (1440px'de ölçüldü). Ağırlık 600'de * kalıyor; 650'de menü yine taşıyor. */ /* * BÜYÜK HARF — 13.5px, 15.5px DEĞİL. * * Ölçüldü: yedi madde büyük harfe çevrilince menü 824px'den 966px'e * çıkıyor ve 1440px'lik ekranda bile 100px TAŞIYOR. Okunur boyutta * büyük harf bu etiketlerle sığmıyor. * * küçük harf 15.5px → 824px sığıyor * BÜYÜK harf 15.5px → 966px 100px taşıyor * BÜYÜK harf 14px → 879px 13px taşıyor * BÜYÜK harf 13.5px → 841px sığıyor * * Harf aralığı büyük harfte zorunlu: sıkışık büyük harf blokları * okunmuyor. */ .menu a { display: block; padding: 8px 9px; border-radius: var(--kose-kucuk); color: #17323a; font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; transition: background var(--gecis), color var(--gecis); } .menu a:hover { background: var(--zemin-soluk); color: var(--vurgu-koyu, #0a5c64); } /* * SEÇİLİ SAYFA DOLU TURKUAZ KUTUDA (kullanıcı seçimi: D). * * Soluk zeminli hâli, hemen altındaki banttan ayırt edilmiyordu. * Dolu kutu "buradayım" işaretini tartışmasız yapıyor. */ .menu a.etkin { background: var(--vurgu); color: #fff; font-weight: 700; } .menu a.etkin:hover { background: var(--vurgu-koyu, #0a5c64); color: #fff; } /* --- Açılır menü (Kurumsal) ---------------------------------------------- */ /* * BETİK OLMADAN DA AÇILIYOR. * * `:hover` fareyi karşılıyor. Tıklama ve klavye normalde betikteki * `.acik` sınıfıyla yürüyor; betik gelmezse `:focus-within` devreye * girip klavye kullanıcısını kurtarıyor. * * ODAK YEDEĞİ BETİK VARKEN KAPALI (`html:not(.betikli)`). İkisi birden * açıkken düğmeye ikinci kez basmak menüyü kapatmıyordu — ayrıntı * aşağıdaki kuralın başında. */ /* * Hamburger düğmesi GENİŞ EKRANDA HİÇ YOK. Dar ekran kuralı onu * `html.betikli` koşuluyla gösteriyor. */ .menuAcDugme { display: none; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; border: 1px solid var(--cizgi); border-radius: var(--kose-kucuk); background: none; color: var(--murekkep); font-size: 22px; cursor: pointer; transition: background var(--gecis), color var(--gecis); } .menuAcDugme:hover { background: var(--zemin-soluk); color: var(--vurgu); } .menuAcDugme[aria-expanded="true"] { background: var(--zemin-soluk); color: var(--vurgu); } .menuAcilir { position: relative; } /* Açılır başlık, bağlantılarla aynı ölçüde: ikisi tek sırada duruyor. */ .menuDugme { display: inline-flex; align-items: center; gap: 6px; padding: 8px 9px; border: 0; border-radius: var(--kose-kucuk); background: none; color: #17323a; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; transition: background var(--gecis), color var(--gecis); } .menuDugme:hover { background: var(--zemin-soluk); color: var(--vurgu-koyu, #0a5c64); } .menuDugme.etkin { background: var(--vurgu); color: #fff; font-weight: 700; } /* * ARAPÇADA HARF ARALIĞI YOK. * * Arap yazısı bitişik: harf arasını açmak bağlı harfleri birbirinden * koparıyor ve sözcük dağılmış görünüyor. `text-transform` zaten Arap * harflerinde karşılıksız (büyük/küçük harf ayrımı yok), yine de * açıkça kapatılıyor ki bir gün Latin bir sözcük geçerse şaşırtmasın. */ html[lang="ar"] .menu a, html[lang="ar"] .menuDugme { letter-spacing: normal; text-transform: none; font-size: 14.5px; } .menuOk { font-size: 11px; transition: transform var(--gecis); } .altMenu { position: absolute; /* Yöne duyarlı: Arapçada menü sağ kenara hizalanıyor. */ inset-inline-start: 0; inset-block-start: calc(100% + 6px); z-index: 95; min-width: 250px; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--cizgi); border-radius: var(--kose); box-shadow: 0 12px 32px rgb(18 48 58 / .13); /* * `display: none` DEĞİL: geçiş animasyonu uygulanamaz ve açılış * ani görünürdü. `visibility` hem tıklamayı hem klavye odağını * engelliyor — yalnızca `opacity: 0` bırakılsaydı görünmeyen * bağlantılar sekmeyle gezilebilir kalırdı. */ opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis); } .altMenu li { margin: 0; } /* * ALT SEKME İKİNCİ SEVİYE GİBİ DURMALI. * * Ölçüldü: alt madde 14.5px, üstündeki ana sekme 13.5px — yani alt * madde ana sekmeden BÜYÜKTÜ. Ana sekme yalnızca büyük harf ve 700 * kalınlıkta olduğu için baskın görünüyordu; punto sıralaması * hiyerarşiyi tersine çeviriyordu. * * Üç işaret birlikte çalışıyor: ana sekme BÜYÜK HARF + 700 + 13.5px, * alt madde küçük harf + 400 + 13px. Renk DEĞİŞTİRİLMEDİ — soluk bir * gri hiyerarşiyi güçlendirirdi ama gezinme bağlantısında kontrast * düşürmek okunabilirliği bozar; boyut ve kalınlık zaten yetiyor. * * Dikey boşluk da daraldı (9px → 7px): ikinci seviye listenin daha sık * bir ritmi olur, açılır kutu da kısalıp menüden taşmaz. */ .altMenu a { display: block; padding: 7px 12px; border-radius: var(--kose-kucuk); color: var(--metin); font-size: 13px; line-height: 1.4; } .altMenu a:hover { background: var(--zemin-soluk); color: var(--vurgu); } .altMenu a.etkin { background: var(--zemin-soluk); color: var(--vurgu); font-weight: 600; } /* * ARAPÇADA ALT MADDE BİR TIK DAHA BÜYÜK. * * Latin alfabesinde hiyerarşiyi üç işaret taşıyor: BÜYÜK HARF, kalınlık * ve punto. Arap yazısında büyük/küçük harf ayrımı OLMADIĞI için o * işaret yok; geriye kalınlık ve punto kalıyor. * * Latin ölçüsü (13px) Arap yazısında fazla küçük düşüyor: harfler * bitişik ve ayırt edici ayrıntıları daha ince. 13.5px hem okunuyor hem * ana sekmenin 14.5px'inin altında kalıyor, yani hiyerarşi korunuyor. * * KURAL EZDİĞİ KURALDAN SONRA. Özgüllüğü zaten yüksek olduğu için önce * de yazılabilirdi ama o zaman dosyayı okuyan "bu nasıl kazanıyor?" * diye durup bakmak zorunda kalırdı. */ html[lang="ar"] .altMenu a { font-size: 13.5px; } /* * ODAK YEDEĞİ YALNIZCA BETİK YOKKEN. * * `html.betikli` sınıfını site.js koyuyor. Betik varken menüyü açan tek * şey `.acik` sınıfı; yoksa klavye odağı açıyor. * * İkisi birlikte çalışırken düğmeye ikinci kez basmak menüyü * kapatmıyordu: betik `.acik`ı kaldırıyor ama düğme hâlâ odakta olduğu * için `:focus-within` menüyü açık tutuyordu (bkz. TUZAKLAR 2.9). * * Yedek "ezilmiyor", KOŞULLANDIRILIYOR. Ezme yoluna gidilseydi * fareyle üstünde durup aynı anda odaklanılan menüyü kapatırdı. */ html:not(.betikli) .menuAcilir:focus-within > .altMenu, .menuAcilir.acik > .altMenu { opacity: 1; visibility: visible; transform: none; } html:not(.betikli) .menuAcilir:focus-within .menuOk, .menuAcilir.acik .menuOk { transform: rotate(180deg); } /* * Fareyle açılma YALNIZCA GERÇEK FARE VARSA. * * Dokunmatik ekranda `:hover` bir dokunuşla takılı kalıyor ve menü * kapanmıyordu; orada işi betikteki `.acik` sınıfı yapıyor. */ @media (hover: hover) { .menuAcilir:hover > .altMenu { opacity: 1; visibility: visible; transform: none; } .menuAcilir:hover .menuOk { transform: rotate(180deg); } } /* --- Üst ince bant ------------------------------------------------------- */ /* * Ana menünün ÜSTÜNDEKİ dar şerit: kısa yollar, sosyal simgeler, çağrı * merkezi ve dil seçici. * * `.ust` yapışkan; bu şerit DEĞİL. Bir kez görünüp yukarıda kalıyor, * kaydırma boyunca yer kaplamıyor. Bu yüzden `
`in dışında * duruyor (bkz. site-ustbant.php). * * Zemin marka renginin koyusu: şerit başlıktan ayrışsın, ikisi tek bir * kalın bant gibi görünmesin. */ .ustBant { background: var(--vurgu-koyu, #0a5c64); color: rgb(255 255 255 / .92); font-size: 13px; } /* * TEK SATIR, DAR EKRANDA YATAY KAYIYOR. * * Sarmalamak yerine kaydırmak bilinçli: sarmalasaydı şeridin yüksekliği * telefonda iki-üç katına çıkar ve içerik aşağı inerdi. Ölçülmüştü, üst * bant 390px'lik bir ekranda zaten 308px yer kaplıyor. * * `justify-content: flex-end` — parçalar sağa yaslı (RTL'de sola). */ .ustBantIc { display: flex; align-items: center; justify-content: flex-end; gap: 18px; padding-block: 7px; overflow-x: auto; /* Kaydırma çubuğu şeridi kalınlaştırmasın. */ scrollbar-width: none; } .ustBantIc::-webkit-scrollbar { display: none; } /* Şeritteki hiçbir parça sıkışıp okunmaz hâle gelmesin. */ .ustBantIc > * { flex: none; } .ustBantBaglar, .ustBantSosyal { display: flex; align-items: center; gap: 4px; } .ustBantBaglar a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; color: rgb(255 255 255 / .92); white-space: nowrap; transition: background var(--gecis), color var(--gecis); } .ustBantBaglar a:hover { background: rgb(255 255 255 / .14); color: #fff; } .ustBantBaglar i { font-size: 14px; } .ustBantSosyal a { display: inline-flex; align-items: center; justify-content: center; inline-size: 26px; block-size: 26px; border-radius: 50%; color: rgb(255 255 255 / .85); font-size: 14px; transition: background var(--gecis), color var(--gecis); } .ustBantSosyal a:hover { background: rgb(255 255 255 / .16); color: #fff; } .ustBantTelefon { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; color: #fff; font-weight: 600; white-space: nowrap; transition: background var(--gecis); } .ustBantTelefon:hover { background: rgb(255 255 255 / .14); color: #fff; } /* * Dil seçici bandın içinde: koyu zeminde açık renk. Ana menüdeki açık * zeminli sürümün renklerini ezmesi gerekiyor, o yüzden ayrı sınıf. */ .ustBantDil { padding-inline-start: 14px; border-inline-start: 1px solid rgb(255 255 255 / .22); } .ustBantDil a, .ustBantDil span { color: rgb(255 255 255 / .85); font-size: 13px; } .ustBantDil a:hover { color: #fff; } .ustBantDil .etkin { background: rgb(255 255 255 / .18); color: #fff; } /* * ────────────────────────────────────────────────────────────────────── * ŞERİT DAR EKRANDA MENÜNÜN İÇİNE İNİYOR * ────────────────────────────────────────────────────────────────────── * * Geniş ekranda `.ustBant-ust` (başlığın üstünde) görünür, * `.ustBant-menu` gizli. 1180px'in altında tam tersi. * * 1180px, hamburger'in çıktığı kırılma noktasının AYNISI. Ayrı bir * değer seçilseydi arada bir aralıkta ya iki şerit birden ya hiçbiri * görünürdü. * * Şerit menünün içinde olduğu için ayrıca gizlemeye gerek yok: menü * kapalıyken `.menuKapsul` zaten `display: none`. Betiksiz tarayıcıda * menü hep açık kalıyor ve şerit de onunla birlikte görünüyor — * hiçbir denetim kaybolmuyor. */ .ustBant-menu { display: none; } @media (max-width: 1180px) { .ustBant-ust { display: none; } /* * ŞERİT MENÜNÜN İÇİNDE TURKUAZ DEĞİL. * * İlk sürümde şerit üstteki hâlini koruyordu: koyu turkuaz, dolu bir * blok. Menü açılınca o blok beyaz listenin ortasında yabancı bir ada * gibi duruyordu — kullanıcının sözü: "çok saçma çıkıyor ama ekranın * ortasında." * * SEBEBİ YAPISAL. Medipol'ün menüsü ekranı kaplayan bir panel * (offcanvas); şerit o panelin DİBİNE oturuyor ve orada dolu bir * blok olması doğru. Bizimki sayfayı aşağı iten açılır liste, yani * şerit listeyle sayfa içeriğinin ARASINA düşüyor. Aynı görünüm iki * yapıda aynı sonucu vermiyor. * * Çözüm şeridi taşımak değil, MENÜNÜN DİLİNE UYDURMAK: zemin beyaz, * satırlar menü maddeleriyle aynı yükseklikte ve aynı ayraçlarla. * Böylece menünün ikinci seviyesi gibi okunuyor, ayrı bir kutu gibi * değil. */ .ustBant-menu { display: block; background: none; color: inherit; } .ustBant-menu .ustBantIc { display: block; padding: 0; overflow: visible; } .ustBant-menu .ustBantBaglar { display: block; } /* * Bağlantılar menü maddeleriyle AYNI kutu ölçüsünde (46px, alt * çizgili) ama ikincil: daha küçük ve soluk. Ana sekmelerle aynı * boyda olsalardı hangisinin asıl gezinme olduğu kaybolurdu. */ .ustBant-menu .ustBantBaglar a { display: flex; align-items: center; gap: 10px; min-block-size: 46px; padding-inline: 4px; border-radius: 0; border-block-end: 1px solid var(--cizgi); color: var(--metin-soluk); font-size: 13px; white-space: normal; } .ustBant-menu .ustBantBaglar a:hover { background: var(--zemin-soluk); color: var(--vurgu); } /* * Sosyal, telefon ve dil tek bir AÇIK KUTUDA, menünün dibinde. * Menü maddelerinden ayrıldığı belli olsun ama sayfadan kopmasın * diye dolu renk değil, soluk zemin. */ .ustBant-menu .ustBantIc > :not(.ustBantBaglar) { background: var(--zemin-soluk); } .ustBant-menu .ustBantSosyal { justify-content: center; gap: 6px; padding-block: 10px 4px; border-radius: var(--kose-kucuk) var(--kose-kucuk) 0 0; margin-block-start: 12px; } .ustBant-menu .ustBantSosyal a { color: var(--metin-soluk); } .ustBant-menu .ustBantSosyal a:hover { background: none; color: var(--vurgu); } .ustBant-menu .ustBantTelefon { display: flex; justify-content: center; min-block-size: 42px; border-radius: 0; color: var(--murekkep); } .ustBant-menu .ustBantTelefon:hover { background: none; color: var(--vurgu); } .ustBant-menu .ustBantDil { display: flex; justify-content: center; gap: 4px; padding-inline-start: 0; border-inline-start: 0; padding-block: 4px 10px; border-radius: 0 0 var(--kose-kucuk) var(--kose-kucuk); } .ustBant-menu .ustBantDil a, .ustBant-menu .ustBantDil span { color: var(--metin-soluk); } .ustBant-menu .ustBantDil .etkin { background: var(--vurgu); color: #fff; } } @media (max-width: 700px) { /* * Telefonda parçalar sola yaslanıyor: `flex-end` ile kaydırılabilir * bir kutuda içerik SOLDAN taşar ve ilk maddeler görünmez başlar. * (Yalnızca üstteki şerit için; menü içindeki zaten dikey.) */ .ustBant-ust .ustBantIc { justify-content: flex-start; gap: 12px; padding-block: 5px; } .ustBant-ust { font-size: 12.5px; } .ustBant-ust .ustBantSosyal a { inline-size: 24px; block-size: 24px; font-size: 13px; } } .dilSecici { display: flex; align-items: center; gap: 2px; padding-inline-start: 14px; border-inline-start: 1px solid var(--cizgi); } /* Dil kısaltmaları da koyulaştı: 13px soluk grilikte okunmuyordu. */ .dilSecici a, .dilSecici span { padding: 4px 8px; border-radius: 6px; font-size: 13.5px; font-weight: 600; color: #17323a; } .dilSecici .etkin { background: var(--zemin-soluk); color: var(--vurgu); } /* --- Bölüm --------------------------------------------------------------- */ .bolum { padding-block: 56px; } .giris { font-size: 18px; color: var(--metin-soluk); max-width: 62ch; } .dugme { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; background: var(--vurgu); color: #fff; font-weight: 600; transition: background var(--gecis); } .dugme:hover { background: var(--vurgu-acik); color: #fff; } /* Geçici durum kutusu — iskelet doğrulaması. Gerçek içerik gelince gider. */ .durumKutu { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; max-width: 520px; margin-block-start: 28px; padding: 18px 20px; border: 1px solid var(--cizgi); border-radius: var(--kose); background: var(--zemin-soluk); font-size: 14px; } .durumKutu dt { font-weight: 600; color: var(--murekkep); } .durumKutu dd { margin: 0; color: var(--metin-soluk); } /* ============================================================================= Birim ve hekim sayfaları ============================================================================= Yön duyarlı hiçbir fiziksel özellik yok: ızgara ve mantıksal boşluklar Arapçada kendiliğinden aynalanıyor. ========================================================================== */ /* --- Ortak ---------------------------------------------------------------- */ h1 { font-size: 30px; line-height: 1.25; color: var(--murekkep); margin-block: 0 10px; } h2 { font-size: 21px; color: var(--murekkep); } .bosMetin { color: var(--metin-soluk); } .grupBaslik { margin-block: 38px 14px; padding-block-end: 8px; border-block-end: 1px solid var(--cizgi); font-size: 17px; } .grupBaslik a { color: inherit; } .grupBaslik a:hover { color: var(--vurgu); } .ustYol { margin-block-end: 18px; font-size: 14px; } .ustYol a { color: var(--metin-soluk); } .ustYol a:hover { color: var(--vurgu); } .altBolum { margin-block-start: 44px; } /* Eksik çeviri / bilgi notu. Renk şeridi yöne duyarlı olmalı. */ .bildirimKutu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-block-end: 26px; padding: 14px 18px; border: 1px solid var(--cizgi); border-inline-start: 3px solid var(--vurgu); border-radius: var(--kose-kucuk); background: var(--zemin-soluk); font-size: 14.5px; } .bildirimKutu p { margin: 0; flex: 1 1 320px; } .bildirimKutu .dugme { padding: 7px 15px; font-size: 14px; } /* * SÜZÜLMÜŞ İÇERİK GÖVDESİ. * * Başlık boyutları arasındaki fark belirgin olmalı: ilk sürümde h2 ile * h3 neredeyse aynı ağırlıktaydı ve uzun bir birim metni tek parça duvar * gibi görünüyordu. h2 artık üstünde çizgi taşıyor, h3 daha küçük ve * vurgu renginde. */ .yaziGovde { max-width: 72ch; } .yaziGovde > :first-child { margin-block-start: 0; } .yaziGovde img { max-width: 100%; height: auto; border-radius: var(--kose-kucuk); } /* * BÖLÜM BAŞLIKLARI BELİRGİN. * * Başlığın önünde vurgu renginde kısa bir çubuk var: göz sayfayı * tararken bölümlerin nerede başladığını hemen görüyor. Çubuk * `::before` ile ve MANTIKSAL konumla basılıyor, Arapçada kendiliğinden * sağa geçiyor. */ .yaziGovde h2 { position: relative; margin-block: 42px 16px; padding-block-start: 22px; border-block-start: 1px solid var(--cizgi); font-size: 22px; line-height: 1.3; } .yaziGovde h2::before { content: ""; position: absolute; inset-block-start: -1px; inset-inline-start: 0; width: 46px; height: 3px; border-radius: 2px; background: var(--vurgu); } .yaziGovde > h2:first-child { margin-block-start: 0; } .yaziGovde h3 { margin-block: 26px 8px; font-size: 16.5px; color: var(--vurgu); font-weight: 650; } /* * PARAGRAFLAR İKİ YANA YASLI. * * `hyphens: auto` ŞART: yaslama, satırdaki boşlukları genişleterek * hizalıyor; heceleme kapalıyken uzun Türkçe kelimeler satır içinde * "ırmak" denen beyaz boşluk şeritleri bırakıyor. Heceleme dili * `` özniteliğinden okuyor — Arapça sayfada da doğru çalışıyor. * * `text-align: justify` yön duyarlı değildir; RTL'de de aynı davranır. */ .yaziGovde p { margin-block: 0 14px; text-align: justify; hyphens: auto; -webkit-hyphens: auto; } .yaziGovde ol { margin-block: 0 16px; padding-inline-start: 22px; } .yaziGovde ol li { margin-block-end: 5px; text-align: justify; hyphens: auto; -webkit-hyphens: auto; } /* * MADDE LİSTELERİ İKİ SÜTUN, ONAY İŞARETLİ. * * Birim sayfalarında listeler uzun (20'ye varan madde) ve maddeler kısa. * Tek sütunda sayfa gereksiz uzuyor, satırların sağı bomboş kalıyordu. * İki sütun hem sayfayı kısaltıyor hem "hizmet listesi" görünümü veriyor. * * `break-inside: avoid`: iki satıra taşan bir madde ikiye BÖLÜNMESİN, * sütun değiştirsin. */ .yaziGovde ul { list-style: none; margin-block: 0 18px; padding: 0; columns: 2; column-gap: 30px; } .yaziGovde ul li { position: relative; margin-block-end: 9px; padding-inline-start: 26px; break-inside: avoid; /* Kısa maddelerde yaslama çirkin duruyor; listeler sola yaslı. */ text-align: start; } .yaziGovde ul li::before { content: "\2713"; /* ✓ */ position: absolute; inset-inline-start: 0; inset-block-start: 0; width: 17px; height: 17px; margin-block-start: 3px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--secili, #e8f4f6); color: var(--vurgu); font-size: 10px; font-weight: 700; } @media (max-width: 760px) { .yaziGovde ul { columns: 1; } } /* * İÇ İÇE LİSTE HİYERARŞİDİR, KONTROL LİSTESİ DEĞİL. * * Yukarıdaki iki sütunlu onay işaretli görünüm birbirinden bağımsız * maddeler için doğru. İç içe bir liste ise bir AĞAÇ anlatıyor * (organizasyon şeması gibi): iki sütuna bölününce alt dallar üst * dalından kopup öbür sütuna düşüyor ve yapı okunamaz hâle geliyor. * * `:has()`: alt listesi OLAN dış liste de tek sütuna iniyor. */ .yaziGovde ul:has(ul), .yaziGovde ul ul { columns: 1; } .yaziGovde ul ul { margin-block: 10px 2px; padding-inline-start: 18px; /* Dalları üst düğüme bağlayan dikey çizgi — yöne duyarlı. */ border-inline-start: 2px solid var(--cizgi); } /* * Ağaç maddelerinde ✓ YERİNE NÖTR BİR NOKTA: onay işareti "bu yapıldı" * diyor, oysa buradaki maddeler bir yapının parçalarını sayıyor. */ .yaziGovde ul:has(ul) > li::before, .yaziGovde ul ul li::before { content: ""; width: 7px; height: 7px; margin-block-start: 9px; border-radius: 50%; background: var(--vurgu); } .yaziGovde ul:has(ul) > li { padding-inline-start: 20px; margin-block-end: 16px; } .yaziGovde ul ul li { padding-inline-start: 17px; margin-block-end: 5px; font-size: 15px; } /* Ağacın üst düğümleri koyu ve bir punto büyük. */ .yaziGovde ul:has(ul) > li > strong { color: var(--murekkep); font-size: 16.5px; } .yaziGovde a { color: var(--vurgu); } /* * İçerik tabloları. `icerik_bicimle()` her tabloyu `.tabloKaydir` içine * sarıyor: taşan tablo KENDİ kutusunda kayıyor, sayfa gövdesi kaymıyor. */ .tabloKaydir { overflow-x: auto; margin-block: 0 22px; /* Kaydırılabilir alan klavyeyle de gezilebilmeli. */ scrollbar-width: thin; } .yaziGovde table { inline-size: 100%; min-inline-size: 460px; border-collapse: collapse; font-size: 15px; } .yaziGovde thead th { text-align: start; padding: 10px 14px; background: var(--zemin-soluk); color: var(--murekkep); font-weight: 700; border-block-end: 2px solid var(--cizgi); } .yaziGovde tbody td { padding: 10px 14px; border-block-end: 1px solid var(--cizgi); vertical-align: top; } /* İlk sütun ölçüt sütunu oluyor (derece aralığı, tarih); dar ve vurgulu. */ .yaziGovde tbody td:first-child { white-space: nowrap; font-weight: 600; color: var(--murekkep); } .yaziGovde tbody tr:last-child td { border-block-end: 0; } /* * TELEFONDA DA İKİ YANA YASLI — KULLANICI KARARI. * * Burada `@media (max-width: 600px) { .yaziGovde p, li { text-align: * start } }` duruyordu; gerekçesi "dar sütunda boşluklar açılır" idi. * Kullanıcı telefonda metnin sağa yaslanmadığını fark etti ve yaslı * olmasını istedi; kural kaldırıldı. * * ÖLÇÜM NOTU — gerekçe büsbütün yersiz değildi: 390px genişlikte iki * sürüm yan yana çekildi, yaslı sürümde bazı satırlarda kelime araları * gözle görülür biçimde açılıyor. `hyphens: auto` yukarıda tanımlı ama * çekimde SATIR SONU TİRESİ HİÇ ÇIKMADI: tarayıcının o dil için * heceleme sözlüğü yoksa özellik sessizce hiçbir şey yapmıyor. Yani * heceleme boşlukları toparlamaya güvenilemez; bu, kabul edilen bir * ödünç. * * `ul` maddeleri sola yaslı KALIYOR (yukarıda): kısa maddelerde yaslama * iki kelimeyi satırın iki ucuna itiyor. */ /* --- Kart ızgarası -------------------------------------------------------- */ .kartIzgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 14px; list-style: none; margin-block: 26px 0; padding: 0; } /* --- Birim kartı ---------------------------------------------------------- */ /* * SİMGE ÖNCE, METİN SONRA. * * İlk sürüm sola yaslı bir metin kartıydı: küçük simge, ad, iki satır * özet. On dokuz tanesi yan yana gelince sayfa paragraf duvarına * dönüyordu. Bu sayfada ziyaretçi okumuyor, arıyor — o yüzden kart * ortalandı, simge büyüdü, özet kaldırıldı. */ .birimIzgara { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 16px; } .birimKart { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; padding: 26px 16px 20px; border: 1px solid var(--cizgi); border-radius: 16px; background: var(--zemin); color: var(--metin); text-align: center; overflow: hidden; transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis); } /* * Kartın üstünde, simgenin arkasında yumuşak bir renk yayılımı. * `::before` ile basılıyor: fazladan bir öğe eklemeden zemin veriyor * ve `overflow: hidden` sayesinde köşelerden taşmıyor. */ .birimKart::before { content: ""; position: absolute; inset-block-start: -60px; inset-inline: 0; height: 170px; background: radial-gradient(circle at 50% 100%, rgb(56 200 200 / .16) 0%, rgb(136 200 136 / .10) 45%, transparent 72%); transition: opacity var(--gecis); opacity: .9; } .birimKart:hover { border-color: var(--vurgu); box-shadow: 0 10px 26px rgb(18 48 58 / .10); transform: translateY(-3px); } .birimKart:hover::before { opacity: 1.6; } /* Simge kabı — yayılımın üstünde kalsın diye konumlandırılıyor. */ .birimKartSimge { position: relative; display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; margin-block-end: 12px; font-size: 46px; line-height: 1; color: var(--vurgu); } /* * YÜKLENEN GÖRSEL BÜYÜK BASILIYOR. * * Kütüphane simgesi tek renk ve kalın çizgili; küçükken de okunuyor. * Yüklenen simgeler ince çizgili ve açık renkli — küçükken soluk birer * leke gibi duruyorlardı. */ .birimSimge { width: 88px; height: 88px; object-fit: contain; display: block; } .birimSimgeBuyuk { width: 56px; height: 56px; object-fit: contain; display: block; } .birimKartAd { position: relative; font-weight: 650; color: var(--murekkep); font-size: 15.5px; line-height: 1.35; transition: color var(--gecis); } .birimKart:hover .birimKartAd { color: var(--vurgu); } .birimKartSayi { position: relative; margin-block-start: auto; padding-block-start: 10px; font-size: 12.5px; color: var(--metin-soluk); font-weight: 600; } /* --- Sayfa tanıtım bandı -------------------------------------------------- */ /* * Tam genişlikte renkli bant. Başlık gövdeyle aynı dar sütunda küçük bir * satır olduğunda sayfa doğrudan metinle başlıyor ve nerede olunduğu * belirsiz kalıyordu. */ .sayfaBandi { background: var(--zemin-soluk); border-block-end: 1px solid var(--cizgi); padding-block: 22px 34px; } /* --- Kapak görselli bant -------------------------------------------------- */ /* * Görsel varken bant hastanenin renginde bir filtre taşıyor ve yazı * beyaza dönüyor. Filtre YÖNE DUYARLI: metin tarafında koyu, görsel * tarafında saydam. Arapçada `inset-inline` sayesinde kendiliğinden * aynalanıyor, ayrı bir kural gerekmiyor. */ /* * Görselli bant DAHA YÜKSEK. * * Kapak görselleri 2:1 yatay; bandın yüksekliği 255px kaldığında * fotoğraftan çok ince bir dilim görünüyordu ve konu (alet masası) * kırpılıyordu. Ölçtüm: 340px'te dilim %49'a çıkıyor ve fotoğraf * anlaşılır hâle geliyor. */ .bandiGorselli { position: relative; border-block-end: 0; padding-block: 40px 52px; min-height: 340px; display: flex; flex-direction: column; justify-content: center; /* Görsel yüklenene kadar arkada marka rengi dursun, beyaz yazı kaybolmasın. */ background: var(--vurgu-koyu, #0a5c64); overflow: hidden; /* Yeni yığın bağlamı: filtre ve yazı katmanları dışarı sızmasın (TUZAKLAR 2.1). */ isolation: isolate; } .bandiGorsel { position: absolute; inset: 0; z-index: 0; } .bandiResim { width: 100%; height: 100%; object-fit: cover; display: block; /* * Bant geniş ve alçak; fotoğraftan ince bir yatay dilim görünüyor. * Hangi dilim? Ölçtüm: %30'da yalnızca tavan ve bulanık arka plan * kalıyordu, konuyu anlatan kısım kırpılıyordu. * * BURADAKİ DEĞER YALNIZCA YEDEK: gerçek kadraj kayıttan geliyor ve * şablonda stil özniteliği olarak basılıyor (bkz. `birim_kadraji()`), * çünkü doğru dilim fotoğrafa göre değişiyor ve panelden seçiliyor. */ object-position: center 70%; } /* * RENK FİLTRESİ. * * Solda (yazının olduğu taraf) neredeyse tam kapalı, sağda saydam. * Böylece başlık her fotoğrafta okunuyor ama fotoğraf da görünüyor. * Sadece karartma kullansaydık site kurumsal kimliğini kaybederdi. */ .bandiFiltre { position: absolute; inset: 0; background: linear-gradient(to right, rgb(10 92 100 / .95) 0%, rgb(10 92 100 / .84) 32%, rgb(14 124 134 / .44) 62%, rgb(14 124 134 / .10) 100%); } .bandiKapsayici { position: relative; z-index: 1; } .bandiGorselli .ustYol a { color: rgb(255 255 255 / .72); } .bandiGorselli .ustYol a:hover { color: #fff; } .bandiGorselli h1 { color: #fff; font-size: 38px; letter-spacing: -.01em; text-shadow: 0 1px 2px rgb(0 0 0 / .18); } .bandiGorselli .giris { color: rgb(255 255 255 / .9); max-width: 54ch; } /* Görselli bantta simge kutusu saydam, kenarı beyaz. */ .bandiGorselli .bandiSimge { background: rgb(255 255 255 / .14); border-color: rgb(255 255 255 / .3); color: #fff; box-shadow: none; backdrop-filter: blur(2px); } /* * Yüklenen simge GÖRSELİ koyu zeminde kaybolabiliyor; beyaz bir kutuya * alınıyor. Kütüphane simgesi (bir ``) zaten beyaz basılıyor. */ .bandiGorselli .bandiSimge img { background: #fff; border-radius: 8px; padding: 4px; } .bandiIc { display: flex; align-items: flex-start; gap: 22px; } .bandiSimge { flex: none; display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 18px; background: var(--zemin); border: 1px solid var(--cizgi); color: var(--vurgu); font-size: 40px; box-shadow: 0 2px 10px rgb(18 48 58 / .05); } .bandiYazi { min-width: 0; } .bandiYazi h1 { margin-block: 2px 8px; } .bandiYazi .giris { margin: 0; max-width: 68ch; } /* --- İçerik + yan sütun --------------------------------------------------- */ /* * `minmax(0, …)`: ızgara öğesinin en küçük boyutu içeriğidir; uzun bir * bağlantı ya da tablo ana sütunu taşırırdı (TUZAKLAR 2.3). */ .icerikDuzen { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 46px; align-items: start; } /* * Yan sütunsuz sayfa: gövde tam genişlik. * * `icerikDuzen` yerine bu sınıf basılıyor (bkz. sayfa görünümündeki * `yan_sutun`). Izgara kurup ikinci sütunu boş bırakmak, geniş ekranda * sağda açıklanamayan bir boşluk bırakırdı. */ .icerikTek { display: block; } .icerikTek .yaziGovde { max-width: 82ch; } .icerikAna { min-width: 0; } .yanSutun { display: grid; gap: 16px; position: sticky; top: 20px; } .yanKart { padding: 18px 20px; border: 1px solid var(--cizgi); border-radius: var(--kose); background: var(--zemin); } .yanKartVurgu { background: var(--zemin-soluk); border-color: #cfe4e6; } .yanBaslik { display: block; margin-block-end: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--murekkep); } .yanMetin { margin-block: 0 14px; font-size: 14px; line-height: 1.6; } .yanDugme { width: 100%; justify-content: center; font-size: 15px; } /* * E-RANDEVU — İKİNCİL DÜĞME. * * Telefon düğmesi dolu, bu çerçeveli. İkisi de dolu olsaydı hangisinin * asıl yol olduğu belirsiz kalırdı; hastane için asıl yol çağrı merkezi, * e-randevu kendi kendine halletmek isteyen ziyaretçi için. * * Ölçüler mantıksal: Arapçada simge ve ok kendiliğinden yer değiştiriyor. */ .yanDugmeIkincil { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-block-start: 8px; padding: 11px 16px; border: 1px solid var(--vurgu); border-radius: 10px; background: #fff; color: var(--vurgu-koyu, #0a5c64); font-size: 15px; font-weight: 600; text-decoration: none; transition: background var(--gecis), border-color var(--gecis); } .yanDugmeIkincil:hover { background: var(--secili, #e8f4f6); } .yanDugmeIkincil:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; } /* Dış bağlantı oku: küçük, sessiz, ama yeni sekmeyi haber veriyor. */ .yanDis { font-size: 12px; opacity: .6; } .yanBag { display: inline-flex; align-items: center; gap: 7px; margin-block-start: 12px; color: var(--vurgu); font-weight: 600; font-size: 14px; text-decoration: none; } .yanBag:hover { text-decoration: underline; } .yanListe { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; } .yanListe a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin-inline: -8px; border-radius: var(--kose-kucuk); color: var(--metin); text-decoration: none; font-size: 14px; line-height: 1.35; transition: background var(--gecis), color var(--gecis); } .yanListe a:hover { background: var(--zemin-soluk); color: var(--vurgu); } .yanListeSimge { flex: none; width: 20px; text-align: center; color: var(--vurgu); font-size: 15px; } .yanSimge { width: 18px; height: 18px; object-fit: contain; display: block; margin-inline: auto; } /* Hekimler başlığı bölümü ayırıyor. */ .bolumBasligi { margin-block: 0 4px; padding-block-end: 10px; border-block-end: 2px solid var(--cizgi); } /* --- Hekim kartı ---------------------------------------------------------- */ /* * DİKEY KART. * * İlk sürüm yatay şeritti: küçük vesikalık, yanında ad. Tek hekimle * ızgarada yalnız bir çubuk gibi duruyordu ve "kart" okunmuyordu. * Hastane sitelerindeki yerleşik biçim dikey: üstte fotoğraf, altında * ad ve birim. Fotoğraf kartın tam genişliğini kaplıyor. */ /* * SÜTUN SAYISI SABİT, `auto-fill` DEĞİL. * * Önce `minmax(212px, 1fr)` ile kendiliğinden yerleşiyordu; 1132px'lik * içerik alanına beş kart sığıyor ve kartlar dar kalıyordu. Sabit dört * sütunda kart 270px'e çıkıyor, fotoğraf da onunla büyüyor. * * `minmax(0, 1fr)` — düz `1fr` DEĞİL: ızgara öğesinin en küçük boyutu * içeriğidir ve uzun bir hekim adı sütunu taşırırdı (TUZAKLAR 2.3). */ .hekimIzgara { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } @media (max-width: 1000px) { .hekimIzgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Yan sütun alta iniyor; ana metin tam genişliğe çıkıyor. */ .icerikDuzen { grid-template-columns: minmax(0, 1fr); gap: 30px; } .yanSutun { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .yaziGovde { max-width: none; } } /* * İkiye düşüş 700px'de, sitenin genel 860px kırılmasında DEĞİL. * * Önce 860'taydı ve ölçtüğümde 760px genişlikte kart 343px'e, fotoğraf * 454px'e çıkıyordu — tablette iki dev kart. Üç sütun 700'e kadar * rahat sığıyor (orada kart ~205px). */ @media (max-width: 700px) { .hekimIzgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .hekimKartBilgi { padding: 11px 12px 13px; } .hekimKartAd { font-size: 14.5px; } } /* * TELEFONDA TEK SÜTUN. * * Kullanıcı sözü: "mobil görünümde hekimler sayfasında 2 hekim yan yana * çıkıyor, tek hekim göstersek?" * * Ölçüldü: iki sütunda kart 360px'lik ekranda 150px, 390px'de 165px * kalıyor. O genişlikte fotoğraf küçülüyor, unvan ve birim adı iki-üç * satıra bölünüyor — hekim seçmeye çalışan ziyaretçi için en kötü * yerleşim. 520px sınırı ölçümle seçildi: orada iki sütun hâlâ 230px * veriyor ve okunuyor, altında vermiyor. */ @media (max-width: 520px) { .hekimIzgara { grid-template-columns: minmax(0, 1fr); gap: 14px; } .hekimKartAd { font-size: 16px; } } .hekimKart { display: flex; flex-direction: column; height: 100%; padding: 0; overflow: hidden; border: 1px solid var(--cizgi); border-radius: var(--kose); background: var(--zemin); color: var(--metin); transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis); } .hekimKart:hover { border-color: var(--vurgu); box-shadow: 0 8px 22px rgb(18 48 58 / .09); transform: translateY(-2px); } /* * `aspect-ratio` ile sabit oran: fotoğraflar farklı boyutlarda yüklense * de kartlar aynı hizada duruyor. Yükseklik yazıya göre değişmiyor. */ .hekimKartFoto { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 3 / 4; background: var(--zemin-soluk); border-block-end: 1px solid var(--cizgi); overflow: hidden; } .hekimKartFoto picture { display: block; width: 100%; height: 100%; } .hekimFoto { width: 100%; height: 100%; object-fit: cover; display: block; } /* * VARSAYILAN GÖRSEL KÜÇÜK BASILIYOR. * * Kutuyu doldurduğunda (`contain` + %100) logo, gerçek bir fotoğraf * yerine geçmeye çalışıyor gibi duruyordu: altında ve üstünde kocaman * boşluk kalıyor, kart bozuk görünüyordu. Küçük ve soluk basılınca * "fotoğraf yok" hâli okunuyor — kırpılmıyor da. */ .hekimFotoVarsayilan { width: 68%; height: auto; max-height: 58%; object-fit: contain; display: block; opacity: .55; } .hekimFotoYok { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--zemin-soluk); color: var(--cizgi); font-size: 52px; } /* `min-width: 0` OLMADAN uzun ad ızgara hücresini taşırır (TUZAKLAR 2.3). */ .hekimKartBilgi { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 14px 16px 16px; } .hekimKartAd { font-weight: 650; color: var(--murekkep); line-height: 1.35; font-size: 15.5px; } .hekimKartBirim { font-size: 13.5px; color: var(--metin-soluk); } /* --- Hekim sayfası bandı -------------------------------------------------- */ /* * Hekim sayfası birim sayfasının düzenini paylaşıyor; farkı, simge * kutusunun yerini hekimin fotoğrafının alması. */ .hekimBandi .bandiIc { align-items: center; gap: 28px; } .hekimBandiFoto { flex: none; line-height: 0; } /* Görselli bantta fotoğrafın kenarı belli olsun. */ .hekimBandi.bandiGorselli .hekimBuyukFoto { border: 3px solid rgb(255 255 255 / .85); box-shadow: 0 6px 20px rgb(0 0 0 / .18); } /* Birim rozetleri: bantta beyaz, düz zeminde vurgu renginde. */ .hekimBirimleri { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin-block: 12px 0; padding: 0; } .hekimBirimleri li a, .hekimBirimleri li span { display: inline-block; padding: 5px 14px; border-radius: 999px; background: var(--zemin-soluk); color: var(--vurgu); font-size: 13.5px; font-weight: 600; transition: background var(--gecis), color var(--gecis); } .hekimBirimleri li a:hover { background: var(--vurgu); color: #fff; } .hekimBirimleri li span { color: var(--metin-soluk); } .bandiGorselli .hekimBirimleri li a, .bandiGorselli .hekimBirimleri li span { background: rgb(255 255 255 / .16); color: #fff; backdrop-filter: blur(2px); } .bandiGorselli .hekimBirimleri li a:hover { background: #fff; color: var(--vurgu-koyu, #0a5c64); } /* --- Yapılandırılmış özgeçmiş --------------------------------------------- */ .ozgecmisBolum { margin-block-start: 30px; } .ozgecmisBolum h3 { margin-block: 0 12px; font-size: 16.5px; color: var(--vurgu); font-weight: 650; } .ozgecmisListe { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-width: 72ch; } .ozgecmisListe li { position: relative; padding-block: 7px; padding-inline-start: 18px; border-block-end: 1px solid var(--cizgi); } .ozgecmisListe li:last-child { border-block-end: 0; } /* * İşaret `::before` ile ve MANTIKSAL konumla: Arapçada kendiliğinden * sağa geçiyor, ayrı bir kural gerekmiyor. */ .ozgecmisListe li::before { content: ""; position: absolute; inset-block-start: 15px; inset-inline-start: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--vurgu); opacity: .55; } /* * İLGİ ALANLARI KART OLARAK. * * Kısa ve tek konu oldukları için göz bir arada tarayabiliyor; alt alta * madde listesi olsaydı sayfa gereksiz uzardı. Bandaki birim rozetiyle * aynı görsel dil. */ .ilgiKartlari { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; } .ilgiKartlari li { padding: 8px 16px; border-radius: 999px; background: var(--zemin-soluk); border: 1px solid var(--cizgi); color: var(--murekkep); font-size: 14px; font-weight: 600; } /* --- Yan sütundaki hekim listesi ------------------------------------------ */ .yanHekimler { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .yanHekimler a { display: flex; align-items: center; gap: 11px; padding: 7px 8px; margin-inline: -8px; border-radius: var(--kose-kucuk); color: var(--metin); text-decoration: none; font-size: 14px; line-height: 1.35; transition: background var(--gecis), color var(--gecis); } .yanHekimler a:hover { background: var(--zemin-soluk); color: var(--vurgu); } .yanHekimFoto { flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: var(--zemin-soluk); color: var(--cizgi); font-size: 17px; } .yanHekimResim { width: 100%; height: 100%; object-fit: cover; display: block; } /* --- Hekim fotoğrafının büyük hâli ---------------------------------------- */ .hekimBuyukFoto { width: 150px; height: 200px; object-fit: cover; border-radius: var(--kose); display: block; background: var(--zemin-soluk); } /* Varsayılan görsel kırpılmıyor; çerçevesi belli olsun diye ince kenar. */ .hekimBuyukFoto.varsayilan { object-fit: contain; border: 1px solid var(--cizgi); } /* Hiç görsel yokken: kart içindeki silüetin büyük hâli. */ .hekimFotoYok.buyuk { width: 150px; height: 200px; font-size: 62px; border-radius: var(--kose); border: 1px solid var(--cizgi); } /* * `.hekimBasi` / `.hekimBirimleri`nin İKİNCİ TANIMI BURADAN SİLİNDİ. * * Hekim sayfası bantlı düzene geçince işaretleme değişti (`.hekimBirimleri` * artık doğrudan bir liste, içinde ayrı `
    ` ve etiket yok). Eski kurallar * dosyada aşağıda kaldığı için yenisini eziyordu — aynı sınıf adının iki * yerde tanımlanması (bkz. docs/TUZAKLAR.md 2.7). */ /* --- İletişim sayfası ----------------------------------------------------- */ .iletisimIzgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; } .iletisimKutu { padding: 24px 22px; border: 1px solid var(--cizgi); border-radius: var(--kose); background: var(--zemin); } .iletisimSimge { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-block-end: 14px; border-radius: 12px; background: var(--zemin-soluk); color: var(--vurgu); font-size: 21px; } .iletisimBaslik { display: block; margin-block-end: 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--murekkep); } .iletisimListe { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .iletisimListe li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; } .iletisimListe a { font-size: 16px; font-weight: 600; } .iletisimEtiket { font-size: 12.5px; color: var(--metin-soluk); } .iletisimAdres { margin: 0; font-style: normal; line-height: 1.7; } /* * ACİL UYARISI. * * Renk şeridi YÖNE DUYARLI (`border-inline-start`): Arapçada kendiliğinden * sağa geçiyor. Sarı değil vurgu rengi kullanıldı — kırmızı/sarı uyarı * kutusu panik çağrıştırıyor, burada amaç bilgilendirmek. */ .acilUyari { display: flex; align-items: flex-start; gap: 16px; margin-block-start: 26px; padding: 20px 22px; border: 1px solid var(--cizgi); border-inline-start: 3px solid var(--vurgu); border-radius: var(--kose); background: var(--zemin-soluk); } .acilUyari p { margin: 6px 0 0; max-width: 70ch; } .acilSimge { flex: none; color: var(--vurgu); font-size: 22px; line-height: 1.2; } /* --- Yüzen araç sütunu (erişilebilirlik + yukarı) ------------------------- */ /* * TEK SÜTUN, TEK KONUM HESABI. * * Üç yüzen öğe olunca (hızlı kutu, yukarı oku, erişilebilirlik) her * birinin kendi konumunu hesaplaması sürdürülemezdi. İkisi bu sütunda; * sütun hızlı kutuya göre BİR KEZ konumlanıyor. * * Konumlar ölçümle belirlendi (bkz. site-yuzen.php): dar ekranda hızlı * kutu üç konumda da alt ortada hapa dönüşüyor ve mobilde genişliğin * neredeyse tamamını kaplıyor, o yüzden sütun hapın ÜSTÜNE çıkıyor. */ .yuzenSutun { position: fixed; inset-block-end: 118px; inset-inline-end: 16px; z-index: 85; display: flex; flex-direction: column; align-items: center; gap: 10px; } /* Hızlı kutu kapalıysa kaçacak bir şey yok. */ .yuzen-yok { inset-block-end: 24px; } @media (min-width: 861px) { .yuzenSutun { inset-block-end: 24px; } /* Sağ kenarı hızlı kutu tutuyorsa sütun karşı kenara geçiyor. */ .yuzen-sag, .yuzen-sag_alt { inset-inline-end: auto; inset-inline-start: 24px; } } .yuzenDugme { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--vurgu); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 8px 22px rgb(14 124 134 / .38); transition: background var(--gecis), transform var(--gecis), box-shadow var(--gecis); } .yuzenDugme:hover { background: var(--vurgu-koyu, #0a5c64); transform: translateY(-3px); box-shadow: 0 12px 28px rgb(14 124 134 / .46); } .yuzenDugme:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } /* * `hidden` ÖZNİTELİĞİ TEK BAŞINA YETMİYOR: yukarıdaki `display` * bir YAZAR kuralı ve tarayıcının `[hidden]{display:none}` kuralını * eziyor. Aynı tuzağa toplu işlem çubuğunda da düşülmüştü. */ .yuzenDugme[hidden] { display: none; } /* Erişilebilirlik düğmesi ayrı renkte: evrensel simgeyle tanınıyor. */ .erisAc { background: #1d4ed8; box-shadow: 0 8px 22px rgb(29 78 216 / .38); } .erisAc:hover { background: #1e40af; box-shadow: 0 12px 28px rgb(29 78 216 / .46); } .erisAc[aria-expanded="true"] { background: #1e40af; } /* --- Erişilebilirlik paneli ----------------------------------------------- */ .erisMenu { position: fixed; inset-block-end: 24px; inset-inline-end: 84px; z-index: 96; width: min(360px, calc(100vw - 32px)); max-height: min(78vh, 720px); overflow-y: auto; padding: 16px; border-radius: 16px; background: #fff; color: var(--murekkep); box-shadow: 0 18px 50px rgb(18 48 58 / .28); } .erisMenu[hidden] { display: none; } /* * Sütun karşı kenardaysa panel de o yandan açılıyor. * * SEÇİCİ `~` DEĞİL, İÇ İÇE: panel `.yuzenSutun`un KARDEŞİ değil ÇOCUĞU * (bkz. site-erisilebilirlik.php). Kardeş seçiciyle yazılmıştı ve * hiç eşleşmiyordu — ölçüldü: sütun solda x=24'teyken panel sağda * x=996'da açılıyordu, yani düğmeyle bağı kopuktu. */ .yuzen-sag .erisMenu, .yuzen-sag_alt .erisMenu { inset-inline-end: auto; inset-inline-start: 84px; } @media (max-width: 860px) { /* Dar ekranda panel ortalanıyor: kenardan açılınca taşıyordu. */ .erisMenu { inset-inline: 16px; inset-block-end: 96px; width: auto; max-height: 70vh; } } .erisBaslik { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-block-end: 12px; font-size: 15px; } .erisKapat { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--cizgi); border-radius: 8px; background: none; color: var(--murekkep); cursor: pointer; } .erisKapat:hover { background: var(--zemin-soluk); } .erisIzgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .erisOge { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 74px; padding: 10px 8px; border: 1px solid var(--cizgi); border-radius: 12px; background: var(--zemin-soluk); color: var(--murekkep); font: inherit; font-size: 12.5px; font-weight: 600; text-align: center; cursor: pointer; transition: background var(--gecis), border-color var(--gecis), color var(--gecis); } .erisOge i { font-size: 18px; } .erisOge:hover { background: #e8eef0; } .erisOge:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 1px; } /* Açık özellik dolu renkte: hangilerinin etkin olduğu bir bakışta. */ .erisOge.acik { background: var(--vurgu); border-color: var(--vurgu); color: #fff; } .erisKademe { position: absolute; inset-block-start: 5px; inset-inline-end: 7px; padding: 0 5px; border-radius: 99px; background: rgb(255 255 255 / .28); font-size: 10.5px; } .erisKademe[hidden] { display: none; } .erisTemizle { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-block-start: 10px; padding: 11px; border: 1px solid var(--cizgi); border-radius: 12px; background: #fff; color: var(--kirmizi, #a3352a); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .erisTemizle:hover { background: #fdf1ef; } .erisNot { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--silik); } /* ========================================================================= * ÖZELLİKLERİN ETKİLERİ — hepsi `` üzerindeki sınıftan * ========================================================================= */ /* * METİN BÜYÜTME ÜÇ KADEME. `rem` tabanlı olmayan ölçüler de büyüsün * diye kök yazı tipi büyütülüyor; sayfa akışı kendiliğinden uyuyor. */ html.eris-metin-1 { font-size: 112%; } html.eris-metin-2 { font-size: 124%; } html.eris-metin-3 { font-size: 138%; } /* Menünün kendisi büyümüyor: büyürken panel ekrandan taşıyordu. */ html[class*="eris-metin"] .erisMenu { font-size: 14px; } html.eris-satir p, html.eris-satir li, html.eris-satir dd, html.eris-satir td { line-height: 2.1 !important; letter-spacing: .02em; } /* * BAĞLANTI VURGULAMA. Renk körlüğü olan ziyaretçi için bağlantıyı * yalnızca renk değil, zemin ve alt çizgi de gösteriyor. */ html.eris-baglanti a { background: #fff3a3 !important; color: #10202a !important; text-decoration: underline !important; text-underline-offset: 2px; box-shadow: 0 0 0 2px #fff3a3; } html.eris-hizala p, html.eris-hizala li, html.eris-hizala h1, html.eris-hizala h2, html.eris-hizala h3, html.eris-hizala h4 { text-align: start !important; } /* * BÜYÜK İMLEÇ — dosya değil, gömülü SVG. Ayrı bir imleç dosyası * eklemek, CDN yasağıyla birlikte bakımı gereken bir varlık daha * demekti. */ html.eris-imlec, html.eris-imlec * { cursor: url("data:image/svg+xml;utf8,") 4 2, auto !important; } /* * DİSLEKSİ DOSTU — SİSTEM YAZI TİPİ YIĞINI. * * OpenDyslexic gibi özel bir yazı tipi CDN'siz ancak dosya eklenerek * kullanılabilir; site kuralı gereği dışarıdan çekilemiyor. Şimdilik * harfleri birbirinden ayırt etmesi kolay sistem yazı tipleri ve * artırılmış harf/satır aralığı kullanılıyor. Gerçek yazı tipi * istenirse yerele eklenir. */ html.eris-disleksi body, html.eris-disleksi button, html.eris-disleksi input, html.eris-disleksi select, html.eris-disleksi textarea { font-family: "Comic Sans MS", "Trebuchet MS", Verdana, Tahoma, sans-serif !important; letter-spacing: .04em; word-spacing: .12em; } /* * YÜKSEK KONTRAST. Filtre tüm sayfaya uygulanıyor; yüzen katmanlar da * dahil olsun diye `html`e yazılıyor. */ html.eris-kontrast body { filter: contrast(1.45); } html.eris-gri body { filter: grayscale(1); } html.eris-dusukdoy body { filter: saturate(.45); } html.eris-yuksekdoy body { filter: saturate(1.75); } /* Birden çok filtre seçilirse sonuncusu kazanıyor; birleşim okunmaz oluyor. */ /* * GÖRSELLERİ GİZLE. `display:none` DEĞİL `visibility` de değil: * görselin yeri korunuyor ve yerine ince bir çerçeve kalıyor, böylece * sayfa yapısı bozulmuyor ve "burada bir görsel vardı" anlaşılıyor. */ html.eris-gorsel img, html.eris-gorsel picture, html.eris-gorsel video { opacity: 0 !important; } html.eris-gorsel .bandiGorsel, html.eris-gorsel .sayiBolum::after { opacity: .12 !important; } /* --- Okuma kılavuzu ve maskesi -------------------------------------------- */ .erisKilavuz { position: fixed; inset-inline: 0; inset-block-start: 0; height: 3px; background: var(--vurgu); box-shadow: 0 0 0 1px #fff; z-index: 97; pointer-events: none; will-change: transform; } .erisKilavuz[hidden] { display: none; } .erisMaske { position: fixed; inset: 0; z-index: 96; pointer-events: none; } .erisMaske[hidden] { display: none; } .erisMaskeUst, .erisMaskeAlt { position: absolute; inset-inline: 0; background: rgb(8 24 30 / .72); } .erisMaskeUst { inset-block-start: 0; height: var(--erisUst, 0px); } .erisMaskeAlt { inset-block-end: 0; height: var(--erisAlt, 0px); } /* --- Yukarı dön düğmesi --------------------------------------------------- */ /* * KONUM VE GÖRÜNÜM ARTIK `.yuzenSutun`DA. * * Düğme kendi konumunu hesaplıyordu; erişilebilirlik düğmesi gelince * ikisi aynı köşeye oturdu. Yerleşim ortak sütuna taşındı, burada * yalnızca bu düğmeye özel bir şey kalmadı — `.yuzenDugme` yetiyor. */ /* --- Organizasyon şeması -------------------------------------------------- */ /* * TEK HTML, İKİ DÜZEN. Aynı iç içe liste dar ekranda girintili liste, * geniş ekranda kutulu şema olarak görünüyor. İki ayrı işaretleme * tutulsaydı aynı içerik iki kez inerdi ve ekran okuyucu iki kez okurdu. */ .orgYonetim { margin-block-start: 30px; } .orgKademe { list-style: none; margin: 0; padding: 0; } .orgKademe li { position: relative; } .orgKutu { display: inline-flex; flex-direction: column; gap: 2px; padding: 11px 16px; border: 1px solid var(--cizgi); border-radius: 10px; background: var(--zemin-soluk); } .orgAd { font-weight: 650; font-size: 14.5px; color: var(--murekkep); } .orgNot { font-size: 12.5px; color: var(--silik); } /* Dar ekran: girintili liste, çizgi yok — telefonda kutu şeması okunmuyor. */ .orgKademe-2, .orgKademe-3 { margin-inline-start: 16px; padding-inline-start: 16px; border-inline-start: 2px solid var(--cizgi); } .orgKademe li + li { margin-block-start: 8px; } .orgKademe-2 { margin-block-start: 8px; } @media (min-width: 861px) { /* * Geniş ekran: kademeler ortalanıyor ve aralarına bağlantı çizgisi * çiziliyor. Çizgiler `::before` ile; ayrı bir SVG ya da görsel * kullanmak, şema panelden değişince eskiyen bir dosya bırakırdı. */ .orgKademe-1 { text-align: center; } .orgKademe-1 > li > .orgKutu { background: var(--vurgu); border-color: var(--vurgu); } .orgKademe-1 > li > .orgKutu .orgAd { color: #fff; } .orgKademe-2, .orgKademe-3 { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; margin-inline-start: 0; padding-inline-start: 0; border-inline-start: 0; margin-block-start: 26px; } .orgKademe-2 > li, .orgKademe-3 > li { margin-block-start: 0; text-align: center; } /* Üstteki kutuya bağlanan dikey çizgi. */ .orgKademe-2 > li::before, .orgKademe-3 > li::before { content: ""; display: block; width: 2px; height: 18px; margin: -22px auto 4px; background: var(--cizgi); } } .orgBolumler { margin-block-start: 38px; } .orgIzgara { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-block-start: 18px; } .orgKart { border: 1px solid var(--cizgi); border-radius: var(--kose); background: #fff; overflow: hidden; } .orgKartBaslik { display: flex; align-items: center; gap: 10px; padding: 13px 16px; cursor: pointer; background: var(--zemin-soluk); font-weight: 650; font-size: 14.5px; color: var(--murekkep); } /* Sayaç satırın sonuna yaslanıyor; RTL'de kendiliğinden öbür yana geçiyor. */ .orgSayi { margin-inline-start: auto; padding: 1px 9px; border-radius: 99px; background: var(--vurgu); color: #fff; font-size: 11.5px; font-weight: 700; } .orgListe { list-style: none; margin: 0; padding: 10px 16px 14px; font-size: 14px; line-height: 1.5; } .orgListe li { padding-block: 5px; padding-inline-start: 16px; position: relative; } /* Madde işareti mantıksal kenardan: Arapçada sağa geçiyor. */ .orgListe li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 12px; width: 5px; height: 5px; border-radius: 50%; background: var(--vurgu); } .orgListe li + li { border-top: 1px solid var(--cizgi-soluk, #eef2f4); } .orgPdf { margin-block-start: 30px; } /* --- İletişim formu ------------------------------------------------------- */ /* * Bütün ölçüler MANTIKSAL: Arapçada form kendiliğinden sağdan sola * diziliyor, ayna bir stil dosyası tutulmuyor. */ .iletisimForm { margin-block-start: 40px; } .formGiris { margin: 0 0 14px; max-width: 70ch; color: var(--soluk); } .formUyari { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--cizgi); border-inline-start: 3px solid var(--uyari, #bf8215); border-radius: var(--kose); background: var(--zemin-soluk); max-width: 78ch; font-size: 14px; line-height: 1.55; } .formUyari i { flex: none; color: var(--uyari, #bf8215); font-size: 17px; } .formIzgara { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: 760px; } .formAlan { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; } /* Mesaj kutusu, onay satırı ve düğme tam genişlik. */ .formGenis { grid-column: 1 / -1; } .formAlan label { font-size: 13.5px; font-weight: 600; color: var(--murekkep); } .formAlan input[type="text"], .formAlan input[type="email"], .formAlan textarea { width: 100%; padding: 10px 13px; border: 1px solid var(--cizgi); border-radius: 10px; background: #fff; color: var(--murekkep); font: inherit; font-size: 15px; } .formAlan textarea { resize: vertical; min-height: 130px; line-height: 1.6; } .formAlan input:focus-visible, .formAlan textarea:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 1px; border-color: var(--vurgu); } /* Onay satırı: kutucuk ile metin aynı hizada, metin sarmalanınca kaymıyor. */ .formOnay label { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 14px; } .formOnay input { flex: none; margin-block-start: 3px; width: 17px; height: 17px; accent-color: var(--vurgu); } .formOnay a { color: var(--vurgu-koyu); } .formSonuc { margin-block-start: 26px; padding: 14px 18px; border-radius: var(--kose); font-size: 14.5px; } .formBasari { display: flex; align-items: center; gap: 10px; border: 1px solid #bcdcc6; background: #eef7f0; color: #1f5b33; } .formHata { border: 1px solid #f0d4d0; background: #fdf1ef; color: #8d2f22; } .formHata ul { margin: 0; padding-inline-start: 20px; } .formHata li + li { margin-block-start: 4px; } /* * BAL KÜPÜ — `display: none` DEĞİL. * * Bazı robotlar gizlenmiş alanları atlıyor; ekran dışına itilmiş olanı * atlamıyor. Görmeyen ziyaretçi için `aria-hidden` ve `tabindex="-1"` * zaten alanı erişilemez kılıyor (bkz. iletisim.php). */ .formTuzak { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; } /* --- Süzgeç --------------------------------------------------------------- */ .suzgec { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin-block-start: 26px; padding: 18px 20px; border: 1px solid var(--cizgi); border-radius: var(--kose); background: var(--zemin-soluk); } .suzgecAlan { display: flex; flex-direction: column; gap: 5px; flex: 1 1 190px; min-width: 0; } .suzgecAlan label { font-size: 13px; font-weight: 600; color: var(--murekkep); } .suzgec select, .suzgec input { width: 100%; padding: 9px 12px; border: 1px solid var(--cizgi); border-radius: var(--kose-kucuk); background: var(--zemin); color: var(--metin); font-family: inherit; font-size: 14.5px; } .suzgec select:focus, .suzgec input:focus { outline: none; border-color: var(--vurgu); box-shadow: 0 0 0 3px rgb(14 124 134 / .15); } .suzgecDugmeler { display: flex; align-items: center; gap: 14px; } .suzgec .dugme { padding: 10px 22px; } .suzgecTemizle { color: var(--metin-soluk); font-size: 14px; } .suzgecTemizle:hover { color: var(--vurgu); } .sonucSayisi { margin-block: 22px 0; font-size: 14px; color: var(--metin-soluk); } /* --- Altbilgi ------------------------------------------------------------ */ .alt { border-block-start: 1px solid var(--cizgi); background: var(--zemin-soluk); padding-block: 38px 22px; font-size: 13.5px; color: var(--metin-soluk); } .altIzgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px; margin-block-end: 28px; } .altSutun { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; } .altLogo { max-width: 170px; height: auto; display: block; } .altMarka { font-size: 16px; color: var(--murekkep); } .altSlogan { margin-block: 10px 0; max-width: 34ch; } .altBaslik { display: block; margin-block-end: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--murekkep); } .altAdres { margin: 0; font-style: normal; line-height: 1.65; } .altListe { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .altListe li { display: flex; align-items: center; gap: 9px; } .altListe i { color: var(--vurgu); font-size: 15px; flex: none; } .altListe a { color: var(--metin-soluk); text-decoration: none; } .altListe a:hover { color: var(--vurgu); } .altKucuk { font-size: 12px; opacity: .75; } .altSosyal { list-style: none; margin-block: 16px 0; padding: 0; display: flex; gap: 8px; } .altSosyal a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--zemin); border: 1px solid var(--cizgi); color: var(--metin-soluk); font-size: 15px; transition: background var(--gecis), color var(--gecis), border-color var(--gecis); } .altSosyal a:hover { background: var(--vurgu); border-color: var(--vurgu); color: #fff; } .altBag { color: var(--vurgu); text-decoration: none; margin-block-start: 8px; } .altBag:hover { text-decoration: underline; } /* * Satırda artık dört öğe var: telif, güncelleme tarihi, imza, panel. * * `space-between` DEĞİL: dört öğeyi eşit aralıklarla dağıtıyordu ve * güncelleme tarihi telif ile arasında kopuk duruyordu. Soldaki ikisi * bitişik, sağdaki ikisi karşı kenarda — ayrım `margin-inline-start: * auto` ile kuruluyor ve mantıksal olduğu için Arapçada aynalanıyor. */ /* * ÜÇ SÜTUN: telif sol, güncelleme ORTA, künye sağ. * * `flex` ile deneme yapıldı ve ortalamıyordu: dört öğe tek sırada * akarken ortadaki, soldaki metnin uzunluğuna göre kayıyordu. Izgarada * yan sütunlar `1fr` olduğu için orta sütun sayfanın gerçek ortasında * duruyor — soldaki yazı ne kadar uzarsa uzasın. * * `justify-self` mantıksal (`start`/`end`), yani Arapçada kendiliğinden * aynalanıyor. */ .altSatir { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px 18px; padding-block-start: 18px; border-block-start: 1px solid var(--cizgi); font-size: 13px; } .altTelif { justify-self: start; } .altGuncelleme { justify-self: center; text-align: center; } .altKunye { justify-self: end; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .altSatir .altBag { margin-block-start: 0; } /* Künye ibaresi imzadan daha silik: tıklanacak olan ad. */ .altImzaOnek { opacity: .6; } /* * GÜNCELLEME SATIRI RENGİ TONDAN GELİYOR, SABİT DEĞİL. * * Burada `var(--metin-soluk)` yazılıydı ve dört zemin tonunun hiçbirine * bakmıyordu. Ölçüldü — hepsinde WCAG'in 4,5:1 sınırının altındaydı: * * soluk 4,31 · gri 3,92 · koyu 3,02 · marka 1,67 * * Marka tonunda 1,67:1 demek, yazının neredeyse görünmemesi demek. * `inherit` ile altbilginin kendi gövde rengini alıyor; koyu tonlarda * `altKucuk` ile aynı beyaza düşüyor (aşağıda). */ .altGuncelleme { color: inherit; } /* Tarih satır sonunda bölünmesin. */ .altGuncelleme time { white-space: nowrap; } /* * İMZA. Sağ gruba buradan geçiliyor. * * Silik ve küçük: bir geliştirici künyesi, hastanenin kendi bilgisiyle * aynı ağırlıkta durmamalı. */ /* Yerleşim artık ızgarada; burada yalnızca görünüm kalıyor. */ .altImza { color: var(--metin-soluk); opacity: .75; letter-spacing: .02em; } .altImza:hover { color: var(--vurgu); opacity: 1; } /* * DAR EKRANDA TEK SÜTUN, ORTALI. * * Üç sütun 560px'in altında sıkışıyor ve güncelleme tarihi iki satıra * bölünüyordu. Alt alta dizilip ortalanınca hepsi okunuyor. */ @media (max-width: 560px) { .altSatir { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .altTelif, .altGuncelleme, .altKunye { justify-self: center; } .altKunye { justify-content: center; } } /* * ÜST MENÜDEKİ LOGO. * * Yüklenen logo KARE (400x400): işaret üstte, "ANAMED HASTANESİ" yazısı * altında. Önce 42px yüksekliğindeydi — kare olduğu için genişliği de * 42px kalıyordu ve alttaki yazı okunmuyordu. Yatay bir logoda 42px * yeterdi; karede değil. * * `max-width`: ileride ÇOK geniş bir yatay logo yüklenirse menüyü * kenara sıkıştırmasın. */ .markaLogo { height: 64px; width: auto; max-width: 260px; display: block; } /* --- Yönetim kurulu ------------------------------------------------------ */ /* * ALT ALTA, YAN YANA DEĞİL. * * Önce hekim kartları gibi ızgara denendi. Yanlış oldu: yönetim kurulu * listesi hiyerarşiktir, başkan ile üye aynı boyutta yan yana durunca * sıra kayboluyor. Alt alta dizilince okuma sırası panelde verilen * sırayla aynı kalıyor. */ .kurulListe { display: grid; gap: 16px; list-style: none; margin: 0; padding: 0; } .kurulKart { display: flex; align-items: flex-start; gap: 22px; padding: 20px; border: 1px solid var(--cizgi); border-radius: var(--kose); background: var(--zemin); transition: border-color var(--gecis), box-shadow var(--gecis); } .kurulKart:hover { border-color: var(--vurgu-acik); box-shadow: 0 6px 20px rgb(18 48 58 / .06); } .kurulFoto { flex: none; width: 104px; aspect-ratio: 3 / 4; object-fit: cover; display: block; border-radius: var(--kose-kucuk); background: var(--zemin-soluk); } /* ========================================================================= * KOMİTELER — akordiyon liste * * On iki komite, seksene yakın üyelik. Hepsi açık basılsaydı sayfa * ekranlarca sürerdi; kapalı başlıklar hepsini tek ekranda gösteriyor. * ====================================================================== */ .komiteAracLar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-block-end: 12px; } .komiteAramaKutu { position: relative; flex: 1 1 260px; min-width: 0; } .komiteAramaKutu .bi { position: absolute; inset-block-start: 50%; inset-inline-start: 12px; transform: translateY(-50%); color: var(--silik); pointer-events: none; } .komiteArama { width: 100%; padding: 10px 14px; padding-inline-start: 36px; border: 1px solid var(--cizgi); border-radius: var(--kose-kucuk); font: inherit; font-size: 15px; background: #fff; color: var(--metin); } .komiteArama:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 1px; border-color: var(--vurgu); } .komiteDugmeler { display: flex; gap: 6px; flex: none; } .komiteSayac { margin: 0 0 12px; color: var(--silik); font-size: 13.5px; } .komiteBulunamadi { margin: 0 0 12px; color: var(--silik); } .komiteListe { display: grid; gap: 8px; } /* * HER KOMİTEYE KENDİ RENGİ. Renk `--komiteRenk` değişkeniyle satır içi * geliyor (sıraya göre dönüyor); buradaki kurallar onu kullanıyor. * Değişken tanımsız kalırsa marka rengine düşüyor — kart renksiz değil, * eski hâlinde görünüyor. */ .komiteKart { --komiteRenk: var(--vurgu); border: 1px solid var(--cizgi); border-inline-start: 4px solid var(--komiteRenk); border-radius: var(--kose-kucuk); background: #fff; overflow: hidden; } /* Açık kart öne çıksın: hangi komitenin okunduğu belli olsun. */ .komiteKart[open] { border-color: var(--cizgi); border-inline-start-color: var(--komiteRenk); box-shadow: 0 2px 12px rgb(18 48 58 / .09); } .komiteBaslik { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; user-select: none; } /* * Simge kutusu komitenin renginde. `color-mix` desteklenmeyen eski * tarayıcıda `background` ilk değerinde kalıyor ve simge yine okunuyor. */ .komiteSimge { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--zemin-soluk); background: color-mix(in srgb, var(--komiteRenk) 12%, #fff); color: var(--komiteRenk); font-size: 18px; } .komiteKart[open] .komiteSimge { background: var(--komiteRenk); color: #fff; } /* Tarayıcının kendi üçgeni gizleniyor; yerine kendi okumuz var. */ .komiteBaslik::-webkit-details-marker { display: none; } .komiteBaslik::marker { content: ''; } .komiteBaslik:hover { background: var(--zemin-soluk); } .komiteKart:focus-within .komiteBaslik { background: var(--zemin-soluk); } .komiteBaslik:focus-visible { outline: 2px solid var(--vurgu); outline-offset: -2px; } .komiteBaslikYazi { flex: 1; min-width: 0; display: grid; gap: 2px; } .komiteBaslikYazi strong { font-size: 15.5px; color: var(--metin); } .komiteOzet { font-size: 13px; color: var(--silik); } .komiteOk { flex: none; color: var(--silik); transition: transform .18s ease; } .komiteKart[open] .komiteOk { transform: rotate(180deg); } .komiteGovde { padding: 0 16px 16px; border-block-start: 1px solid var(--cizgi); } .komiteUyeler { list-style: none; margin: 0; padding: 0; } /* * Üye satırı: rol · ad · görev. Izgara kullanılıyor ki roller ve adlar * alt alta hizalansın — göz listeyi tarayarak okuyabilsin. */ .komiteUye { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 2px 12px; padding: 9px 0; border-block-end: 1px solid var(--cizgi-soluk, #eef2f4); } .komiteUye:last-child { border-block-end: 0; } .komiteRol { grid-row: span 2; align-self: start; margin-block-start: 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--silik); } .komiteRol-baskan { color: var(--komiteRenk, var(--vurgu)); } .komiteUye-baskan .komiteUyeAd { font-weight: 700; } .komiteUyeAd { font-size: 14.5px; color: var(--metin); } .komiteUyeGorev { font-size: 13px; color: var(--silik); } .komiteAdYok { color: var(--sari, #9a6b00); font-style: italic; } .komiteBilgi { margin-block-start: 12px; padding-block-start: 12px; border-block-start: 1px solid var(--cizgi); display: grid; gap: 5px; } .komiteBilgi p { margin: 0; font-size: 13.5px; color: var(--silik); } .komiteBilgi .bi { color: var(--komiteRenk, var(--vurgu)); margin-inline-end: 4px; } .komiteBilgi strong { color: var(--metin); font-weight: 600; } .komiteAy { display: inline-block; margin-inline-end: 6px; margin-block-start: 4px; padding: 2px 8px; background: var(--zemin-soluk); background: color-mix(in srgb, var(--komiteRenk, var(--vurgu)) 10%, #fff); color: var(--metin); border-radius: 999px; font-size: 12.5px; } /* ========================================================================= * SAYFAYA EKLİ BELGE (PDF) * * ASIL YOL KART. Önizleme yalnızca geniş ekranda: mobil tarayıcıların * çoğu gömülü PDF'i basmıyor, basanlarda da okunmuyor. * ====================================================================== */ /* * Bölüm listesinin giriş metni. Listeden bir çizgiyle ayrılıyor: * anlatı bitti, veri başlıyor. */ .bolumGiris { margin-block-end: 22px; padding-block-end: 18px; border-block-end: 1px solid var(--cizgi); } .belgeBolumu { margin-block-start: 26px; } /* * Sayfanın metni yoksa belge EN ÜSTTE kalıyor; üstündeki boşluk o zaman * gereksiz — kart bandın hemen altına yapışsın. */ .icerikAna > .belgeBolumu:first-child { margin-block-start: 0; } .belgeKart { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--cizgi); border-inline-start: 4px solid var(--vurgu); border-radius: var(--kose-kucuk); background: var(--zemin-soluk); } .belgeSimge { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; background: #fff; color: #b0485f; font-size: 22px; border: 1px solid var(--cizgi); } .belgeYazi { flex: 1; min-width: 160px; display: grid; gap: 2px; } .belgeAd { font-size: 15px; color: var(--metin); } .belgeBilgi { font-size: 12.5px; color: var(--silik); } .belgeDugme { flex: none; } .belgeOnizleme { margin-block-start: 12px; border: 1px solid var(--cizgi); border-radius: var(--kose-kucuk); overflow: hidden; background: var(--zemin-soluk); } .belgeOnizleme iframe { display: block; width: 100%; height: 720px; border: 0; } .belgeNot { margin: 8px 0 0; font-size: 12.5px; color: var(--silik); } @media (max-width: 860px) { /* * DAR EKRANDA ÖNİZLEME YOK. Mobil tarayıcılar gömülü PDF'i ya hiç * basmıyor ya da boş bir kutu gösteriyor; boş kutu sayfanın bozuk * görünmesine yol açıyor. `display:none` + `loading="lazy"` birlikte, * belgenin o ekranlarda hiç indirilmemesini de sağlıyor. */ .belgeOnizleme { display: none; } } @media print { /* Çerçeve kâğıda boş çıkıyor; kart yeterli. */ .belgeOnizleme { display: none; } } /* ========================================================================= * BÖLÜM KALİTE SORUMLULARI — ızgara * * Yirmi altı kişi. Yönetim kurulundaki gibi alt alta geniş kartlar * ekranlarca sürerdi; bunlar birbirinin dengi olduğu için ızgara doğru. * ====================================================================== */ .sorumluIzgara { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .sorumluKart { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--cizgi); border-radius: var(--kose-kucuk); background: #fff; } .sorumluFoto { flex: none; width: 62px; aspect-ratio: 3 / 4; object-fit: cover; display: block; border-radius: var(--kose-kucuk); background: var(--zemin-soluk); } /* * Fotoğrafı olmayanda hastanenin görseli. `contain`: logoda kenara yakın * yazı var, `cover` kırpardı — hekim kartlarındaki sebebin aynısı. */ .sorumluFoto.varsayilan { object-fit: contain; padding: 7px; border: 1px solid var(--cizgi); background: #fff; } .sorumluFoto.sorumluHarf { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--vurgu); font-size: 18px; } .sorumluYazi { min-width: 0; } /* * BÖLÜM ÜSTTE — bilerek. Ziyaretçi bir BÖLÜM arıyor ("laboratuvarın * sorumlusu kim?"), kişi adı aramıyor; aradığı şey kartın en görünür * satırında duruyor. * * Üç satırın üçü de HER KARTTA dolu. Önce "bölüm görevden farklıysa * bas" deniyordu ve liste düzensiz görünüyordu: kartların bir kısmı üç, * bir kısmı iki satırdı. */ .sorumluBolumAdi { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--metin); } .sorumluAd { margin: 4px 0 0; font-size: 13.5px; color: var(--vurgu); font-weight: 600; } .sorumluGorev { margin: 2px 0 0; font-size: 12.5px; color: var(--silik); line-height: 1.35; } @media (max-width: 380px) { /* Çok dar ekranda fotoğraf üstte: 62px + metin sığmıyor. */ .sorumluKart { flex-direction: column; align-items: flex-start; } } /* Planın yılı — listenin üstünde, güncellik bilgisi. */ .komiteYil { margin: 0 0 10px; font-size: 13.5px; color: var(--silik); } .komiteYil .bi { color: var(--vurgu); margin-inline-end: 4px; } @media (max-width: 560px) { /* Dar ekranda rol kendi satırına çıkıyor: 82px sütun adı eziyordu. */ .komiteUye { grid-template-columns: minmax(0, 1fr); gap: 1px; } .komiteRol { grid-row: auto; margin-block-start: 0; } .komiteAracLar { flex-direction: column; align-items: stretch; } .komiteDugmeler { justify-content: flex-start; } } @media print { /* * YAZDIRIRKEN HEPSİ AÇIK. Kalite biriminin bu sayfayı kâğıda basması * olağan; kapalı `
    ` boş bir liste bastırırdı. */ .komiteKart { break-inside: avoid; border-color: #999; } .komiteGovde { display: block !important; } .komiteAracLar, .komiteSayac, .komiteOk { display: none !important; } } /* * Fotoğrafı olmayan kişide hastanenin görseli. `contain` ile basılıyor: * logoda kenara yakın yazı var, `cover` olsaydı kırpardı — hekim * kartlarında da aynı sebeple `contain` kullanılıyor. */ .kurulFoto.varsayilan { object-fit: contain; padding: 10px; border: 1px solid var(--cizgi); background: #fff; } /* * Fotoğrafsız üye: BAŞ HARFLER. Temsilî bir fotoğraf gerçek bir kişiyi * yanlış tanıtırdı, boş kare de bakımsız görünürdü. */ .kurulHarf { display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, var(--vurgu) 0%, var(--vurgu-acik) 100%); color: #fff; font-size: 32px; font-weight: 700; letter-spacing: .02em; } .kurulYazi { min-width: 0; } .kurulAd { margin: 0; font-size: 19px; } .kurulGorev { margin-block: 3px 10px; color: var(--vurgu); font-weight: 600; font-size: 15px; } .kurulTanitim { margin: 0; color: var(--metin-soluk); font-size: 15px; } /* --- Sosyal sorumluluk projeleri ----------------------------------------- */ .projeIzgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; list-style: none; margin: 0; padding: 0; } .projeKart { border: 1px solid var(--cizgi); border-radius: var(--kose); background: var(--zemin); overflow: hidden; transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis); } .projeKart:hover { border-color: var(--vurgu-acik); box-shadow: 0 10px 26px rgb(18 48 58 / .08); transform: translateY(-2px); } /* Kartın tamamı tıklanabilir; `height: 100%` kartları aynı boyda tutuyor. */ .projeBag { display: flex; flex-direction: column; height: 100%; color: inherit; } /* * Görsel alanı görsel OLMASA DA duruyor. * * Yalnızca kapağı olan kartlarda basılsaydı ızgara satırları birbirini * kaydırırdı ve liste dağınık görünürdü. */ .projeGorsel { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--zemin-soluk); border-block-end: 1px solid var(--cizgi); } .projeResim { width: 100%; height: 100%; object-fit: cover; display: block; } .projeSimge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--vurgu); font-size: 38px; opacity: .45; } .projeGovde { display: flex; flex-direction: column; gap: 7px; padding: 18px 20px 20px; flex: 1; } .projeTarih { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vurgu); } .projeBaslik { font-size: 17px; font-weight: 700; color: var(--murekkep); line-height: 1.35; } .projeOzet { font-size: 14.5px; color: var(--metin-soluk); } /* `margin-block-start: auto`: bağlantı kartın altına yapışsın, özet kısa olsa da. */ .projeOku { margin-block-start: auto; padding-block-start: 6px; font-size: 14px; font-weight: 600; color: var(--vurgu); } .projeEtiket { display: inline-flex; align-items: center; gap: 8px; margin-block: 0 18px; font-size: 14px; color: var(--metin-soluk); } /* --- Sağlık Köşesi -------------------------------------------------------- * * * ÖNEK `kose`, `yazi` DEĞİL. `.yaziGovde` yukarıda zaten zengin metin * gövdesinin sınıfı; kart gövdesine de o adı vermek, kartın içine yazı * sayfasının tipografisini taşırdı. Aynı çakışmaya `.kurumLogo` ile bir * kez düşüldü — orada ana sayfadaki logolar ezilmişti. */ .koseIzgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; list-style: none; margin: 0; padding: 0; } .koseKart { border: 1px solid var(--cizgi); border-radius: var(--kose); background: var(--zemin); overflow: hidden; transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis); } .koseKart:hover { border-color: var(--vurgu-acik); box-shadow: 0 10px 26px rgb(18 48 58 / .08); transform: translateY(-2px); } /* Kartın tamamı tıklanabilir; `height: 100%` kartları aynı boyda tutuyor. */ .koseBag { display: flex; flex-direction: column; height: 100%; color: inherit; } /* Görsel alanı görsel OLMASA DA duruyor — yoksa ızgara satırları kayardı. */ .koseGorsel { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--zemin-soluk); border-block-end: 1px solid var(--cizgi); } .koseResim { width: 100%; height: 100%; object-fit: cover; display: block; } .koseSimge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--vurgu); font-size: 38px; opacity: .45; } /* * Kategori rozeti görselin ÜSTÜNDE. `inset-inline-start` kullanılıyor: * Arapçada kendiliğinden sağ alt köşeye geçsin. */ .koseEtiket { position: absolute; inset-block-end: 10px; inset-inline-start: 10px; padding: 4px 10px; border-radius: 999px; background: rgb(255 255 255 / .92); color: var(--vurgu); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } /* Video rozeti karşı köşede: kategoriyle üst üste binmesin. */ .koseVideoRozet { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; display: flex; align-items: center; justify-content: center; inline-size: 34px; block-size: 34px; border-radius: 50%; background: rgb(255 255 255 / .92); color: var(--vurgu); font-size: 20px; } .koseGovde { display: flex; flex-direction: column; gap: 7px; padding: 18px 20px 20px; flex: 1; } .koseUstBilgi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .koseYazar { color: var(--vurgu); } .koseTarih { color: var(--metin-soluk); font-weight: 600; letter-spacing: .04em; } .koseBaslik { font-size: 17px; font-weight: 700; color: var(--murekkep); line-height: 1.35; } .koseOzet { font-size: 14.5px; color: var(--metin-soluk); } /* `margin-block-start: auto`: bağlantı kartın altına yapışsın, özet kısa olsa da. */ .koseOku { margin-block-start: auto; padding-block-start: 6px; font-size: 14px; font-weight: 600; color: var(--vurgu); } /* --- Sağlık Köşesi: tek yazı --------------------------------------------- */ .koseEtiketSatir { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-block: 0 18px; } .koseEtiketDuz { padding: 4px 12px; border-radius: 999px; background: var(--zemin-soluk); color: var(--vurgu); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .koseTarihDuz { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--metin-soluk); } /* Gömme çerçevesi ve kapağı aynı kutuyu paylaşıyor: tıklayınca yer değişmesin. */ .koseVideo { position: relative; aspect-ratio: 16 / 9; margin-block-end: 24px; border-radius: var(--kose); overflow: hidden; background: var(--murekkep); } .koseVideoDugme { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; padding: 0; border: 0; background: none; cursor: pointer; } .koseVideoKapak { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; opacity: .85; } .koseVideoSimge { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; inline-size: 72px; block-size: 72px; border-radius: 50%; background: rgb(255 255 255 / .92); color: var(--vurgu); font-size: 40px; transition: transform var(--gecis), background var(--gecis); } .koseVideoDugme:hover .koseVideoSimge { transform: translate(-50%, -50%) scale(1.06); background: #fff; } .koseVideoCerceve { inline-size: 100%; block-size: 100%; border: 0; display: block; } .koseIlgili { margin-block-start: 40px; } /* * Birim etiketleri METNİN ALTINDA. Başlık satırında kategori ve tarihle * yan yanayken üç birim adı iki satıra taşıyor ve üst bilgi karışıyordu. */ .koseEtiketler { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-block: 30px 0; padding-block-start: 20px; border-block-start: 1px solid var(--cizgi); } .koseEtiketBasi { margin-inline-end: 4px; color: var(--metin-soluk); font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } /* --- Yazı sonu blokları (AI özet + Google tercih edilen kaynak) ---------- */ .yaziBloklari { margin-block-start: 30px; display: flex; flex-direction: column; gap: 14px; } .blokKutu { padding: 16px 18px; border: 1px solid var(--cizgi); border-radius: var(--kose); background: var(--zemin); } .blokKaynak { display: flex; align-items: center; gap: 12px; font-size: 14.5px; } .blokSimge { flex: none; color: var(--metin-soluk); font-size: 18px; } .blokKaynak a { color: var(--vurgu); font-weight: 600; } .blokBaslik { display: block; margin-block-end: 12px; font-size: 14.5px; } .blokDugmeler { display: flex; flex-wrap: wrap; gap: 8px; } /* * Dokunma alanı en az 44px: telefonda parmakla basılan bir düğme * bundan küçükse ıskalanıyor. */ .blokDugme { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 16px; border: 1px solid var(--cizgi); border-radius: 999px; color: var(--murekkep); font-size: 14px; line-height: 1; transition: border-color var(--gecis), color var(--gecis); } .blokDugme:hover { border-color: var(--vurgu); color: var(--vurgu); } .blokDugme:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; } .blokNot { margin-block: 12px 0; color: var(--metin-soluk); font-size: 13px; } /* * YAZDIRMADA GİZLİ. Kâğıda basılmış bir sayfada tıklanamayan beş düğme * yalnızca mürekkep harcar. */ @media print { .yaziBloklari { display: none; } } .koseBirimHekimleri { margin-block: 36px; } /* * SAĞLIK KÖŞESİ BANDI — DAR EKRANDA YATAY KADRAJ. * * Bant geniş ekranda alçak ve enli (1881×340), telefonda neredeyse kare * (375×410). `object-fit: cover` bu iki durumda TERS yönlerde kırpıyor; * ölçüldü: * 1920px → görselin dikeyde %32–%68'i, yatayda TAMAMI görünüyor * 390px → dikeyde tamamı, yatayda yalnızca %27–%73'ü * * Kapak tasarımı kuralımız gereği çizim SAĞDA duruyor (yazı solda beyaz * basılıyor). Sonuç: telefonda çizim büsbütün kadrajın dışında kalıyor, * bant düz turkuaz bir bloğa dönüşüyordu. * * Dar ekranda görsel sağa yaslanıyor; kırpılan taraf artık çizimin değil, * boş arka planın tarafı. * * `!important` ZORUNLU: dikey kadraj kayıttan geldiği için satır içi * stille basılıyor, sınıf kuralı onu tek başına ezemiyor. Kural yalnızca * `.yaziBandi` içinde geçerli — öteki sayfaların bantlarına dokunmuyor. */ @media (max-width: 600px) { .yaziBandi .bandiResim { object-position: 100% center !important; } } /* Birim etiketi — kategori rozetinin yanında, bağlantılı. */ .koseBirimEtiket { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border: 1px solid var(--cizgi); border-radius: 999px; color: var(--metin-soluk); font-size: 13px; transition: border-color var(--gecis), color var(--gecis); } .koseBirimEtiket:hover { border-color: var(--vurgu-acik); color: var(--vurgu); } /* --- Oklu yazı şeridi — KALDIRILDI --------------------------------------- * * Hekim ve birim sayfalarının altındaki şeridin kendi kaydırma kutusu, * okları ve betiği vardı (`.koseSeritBasi`, `.koseOklar`, `.koseOk`, * `.koseKaydir`). Kullanıcı "kart kart kaysın" deyince ana sayfa için * `.kaydirak` yazıldı ve bu üç yer de ona bağlandı. * * Kurallar SİLİNDİ, yorum bırakıldı: iki ayrı kaydırıcının CSS'i yan * yana dursaydı yarın hangisinin canlı olduğu belirsiz kalırdı. Kart * genişliği artık `.koseSerit` üzerinden veriliyor. */ .koseSeritAlt { margin-block: 14px 0; } /* İmza kartı — hekim fotoğrafı yanda, adı yanında. */ .imzaSatir { display: flex; align-items: center; gap: 14px; margin-block-start: 12px; } .imzaFoto { display: flex; align-items: center; justify-content: center; inline-size: 56px; block-size: 56px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; background: var(--zemin-soluk); color: var(--vurgu); font-size: 26px; } .imzaResim { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } .imzaAd { font-weight: 700; color: var(--murekkep); line-height: 1.35; } .imzaAd a { color: inherit; } .imzaAd a:hover { color: var(--vurgu); } /* --- Anlaşmalı kurumlar --------------------------------------------------- */ .listeSayac { margin-block: 0 12px; color: var(--metin-soluk); font-size: 14.5px; } /* --- SGK bandı: süzgeçten bağımsız, hep üstte ---------------------------- */ .sgkBandi { display: flex; align-items: center; gap: 20px; margin-block-end: 26px; padding: 18px 22px; border: 1px solid var(--vurgu-acik); border-radius: var(--kose); background: linear-gradient(135deg, rgb(14 124 134 / .07) 0%, rgb(20 163 176 / .03) 100%); } .sgkLogo { flex: none; display: flex; align-items: center; justify-content: center; width: 104px; height: 64px; padding: 8px; background: #fff; border: 1px solid var(--cizgi); border-radius: var(--kose-kucuk); color: var(--vurgu); font-size: 28px; } .sgkAd { min-width: 0; font-size: 16px; color: var(--murekkep); text-transform: uppercase; letter-spacing: .02em; } /* --- Süzgeç çubuğu ------------------------------------------------------- */ .kurumSuzgec { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-block-end: 18px; padding-block-end: 14px; border-block-end: 1px solid var(--cizgi); } .turSeritleri { display: flex; gap: 6px; flex-wrap: wrap; } .turBag { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--cizgi); border-radius: 999px; background: var(--zemin); color: var(--metin); font-size: 13.5px; font-weight: 600; transition: background var(--gecis), color var(--gecis), border-color var(--gecis); } /* * Şerit etiketi BÜYÜK HARF. Türkçe büyük harf kuralı `` * üzerinden geliyor (i → İ): "SİGORTALARI", "SIGORTALARI" değil. * Ölçüldü — dil özniteliği olmasa tarayıcı İngilizce kurala düşüyor. */ .turAd { text-transform: uppercase; letter-spacing: .04em; } .turBag:hover { border-color: var(--vurgu-acik); color: var(--vurgu); } .turBag.etkin { background: var(--vurgu); border-color: var(--vurgu); color: #fff; } /* Sayı rozeti: boş bir süzgece tıklamayı önlüyor. */ .turSayi { min-width: 20px; padding-inline: 5px; border-radius: 999px; background: var(--zemin-soluk); font-size: 11.5px; font-weight: 700; text-align: center; color: var(--metin-soluk); } .turBag.etkin .turSayi { background: rgb(255 255 255 / .22); color: #fff; } .suzgecSag { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .kurumArama { display: flex; gap: 6px; } .kurumArama input { width: 190px; padding: 8px 12px; border: 1px solid var(--cizgi); border-radius: var(--kose-kucuk); font: inherit; font-size: 14px; } .kurumArama input:focus { border-color: var(--vurgu-acik); outline: none; } /* Görünüm değiştirici — iki durumlu küçük bir anahtar. */ .gorunumSecici { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--cizgi); border-radius: var(--kose-kucuk); background: var(--zemin-soluk); } .gorunumSecici a { display: flex; align-items: center; justify-content: center; width: 34px; height: 30px; border-radius: 6px; color: var(--metin-soluk); font-size: 16px; } .gorunumSecici a:hover { color: var(--vurgu); } .gorunumSecici a.etkin { background: var(--zemin); color: var(--vurgu); box-shadow: 0 1px 3px rgb(18 48 58 / .10); } /* --- Kurum listesi ------------------------------------------------------- */ /* "Tümü" seçiliyken liste türe göre başlıklı bölümlere ayrılıyor. */ /* --- Ana sayfa blokları ------------------------------------------------ */ .bolumBasi { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-block-end: 24px; } /* * ORTALI BAŞLIK. Altında açıklama varken dengeli duruyor; "Tümünü gör" * bağlantısı da o durumda başlığın yanına değil listenin altına iniyor * (bkz. anasayfa-bolum-alt.php). */ .bolumBasiOrta { justify-content: center; text-align: center; } .bolumBasiOrta .bolumBasiYazi { max-inline-size: 720px; } .bolumBasi h2 { margin: 0; font-size: clamp(22px, 2.6vw, 30px); } .bolumAciklama { margin: 10px 0 0; font-size: clamp(14.5px, 1.5vw, 16.5px); line-height: 1.6; color: var(--metin-soluk); } .bolumAlt { margin-block-start: 28px; text-align: center; } .bolumTumu { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; } /* Ok yöne duyarlı: Arapçada sola bakıyor. */ .bolumTumu i { transition: transform var(--gecis); } [dir="rtl"] .bolumTumu i { transform: scaleX(-1); } .bolumTumu:hover i { transform: translateX(3px); } [dir="rtl"] .bolumTumu:hover i { transform: scaleX(-1) translateX(3px); } /* Arka planı hafif ayrışan blok — art arda gelen bloklar birbirine karışmasın. */ .bolumSoluk { background: var(--zemin); } /* * AKAN ŞERİT. * * Liste İKİ KEZ basılıyor ve şerit kendi genişliğinin yarısı kadar * kayıyor; birinci kopya çıkarken ikincisi tam yerine geliyor, dikiş * görünmüyor. Tek kopyayla animasyon başa döndüğünde göz zıplamayı * yakalıyor. * * İkinci kopya HTML'de `aria-hidden` ve bağlantısız: aynı kayıtları iki * kez okutmak ve iki kez sekmeyle gezdirmek gezinmeyi zorlaştırır. */ .akanSerit { display: flex; inline-size: 100%; overflow: hidden; /* Kenarlarda yumuşak geçiş: içerik kesilmiş gibi durmasın. */ mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); } /* * SÜRE PHP'DEN GELİYOR (`--akisSure`), CSS'te sabit değil. * * Sabit süre, kayıt sayısı arttıkça şeridi hızlandırıyordu: 23 hekim * kartı 42 saniyede 126 px/sn, 19 birim kutusu aynı sürede 86 px/sn. * Süre artık "toplam genişlik ÷ hedef hız" olarak hesaplanıyor, hedef * hız da panelden seçiliyor (bkz. anasayfa_akis_suresi). */ .akanSira { display: flex; flex: 0 0 auto; gap: 14px; margin: 0; padding: 0 7px; list-style: none; animation: akis var(--akisSure, 42s) linear infinite; } /* Fare üstündeyken duruyor: ziyaretçi bir logoyu okumak isteyebilir. */ .akanSerit:hover .akanSira, .akanSerit:focus-within .akanSira { animation-play-state: paused; } @keyframes akis { from { transform: translateX(0); } /* Yön duyarlı değil: RTL'de de soldan sağa akması istenen davranış. */ to { transform: translateX(-100%); } } /* * HAREKET AZALTMA. Kendiliğinden hareket eden içerik bazı kullanıcılarda * baş dönmesi yapıyor. Animasyon duruyor, şerit elle kaydırılabilir bir * listeye dönüyor ve ikinci kopya gizleniyor — yoksa liste iki kez * görünürdü. */ @media (prefers-reduced-motion: reduce) { .akanSerit { overflow-x: auto; mask-image: none; } .akanSira { animation: none; } .akanSira[aria-hidden="true"] { display: none; } } /* --- Tıbbi birim kutuları ---------------------------------------------- */ .birimIzgara { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } .birimSerit li { inline-size: 190px; } .birimKutu { display: flex; flex-direction: column; align-items: center; gap: 12px; block-size: 100%; padding: 24px 16px; border: 1px solid var(--cizgi); border-radius: var(--kose); background: var(--kart); color: var(--murekkep); text-align: center; transition: border-color var(--gecis), transform var(--gecis), box-shadow var(--gecis); } a.birimKutu:hover { border-color: var(--vurgu-acik); transform: translateY(-3px); box-shadow: var(--golge); } .birimKutu .birimSimge { font-size: 30px; color: var(--vurgu); line-height: 1; } .birimKutu .birimSimge img { inline-size: 46px; block-size: 46px; object-fit: contain; } .birimAd { font-size: 14.5px; font-weight: 600; line-height: 1.35; } .hekimSerit li { inline-size: 230px; } /* * Sağlık Köşesi şeridi: 300px kart + 14px boşluk = 314px. Kullanıcı * isteği "3'er 3'er akıtalım" — sıradan bir masaüstü genişliğinde aynı * anda üç kart görünüyor. `anasayfa_akis_suresi()`ye de 314 veriliyor; * iki sayı ayrı düşerse şerit yanlış hızda akar. */ .koseSerit li { inline-size: 300px; } /* --- Kurum logo şeridi -------------------------------------------------- */ .kurumSerit li { inline-size: 190px; } /* * KENDİ ADI VAR (`anasayfaLogo`), `.kurumLogo` DEĞİL. * * `.kurumLogo` anlaşmalı kurumlar sayfasının kendi sınıfı ve orada * 76x48px. Aynı adı kullanınca dosyada sonra gelen o kural benimkini * eziyordu; ana sayfadaki logolar küçücük kalıp aralar açılıyordu * (ölçüldü — ekranda 72px'lik kutular, 90px'lik boşluklar). */ .anasayfaLogo { display: grid; place-items: center; block-size: 96px; padding: 16px 20px; border: 1px solid var(--cizgi); border-radius: var(--kose); background: var(--kart); } .anasayfaLogo img { max-inline-size: 100%; max-block-size: 60px; object-fit: contain; } .kurumAnaIzgara { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } /* --- Nöbetçi eczane ------------------------------------------------------ */ .eczanePencere { display: inline-flex; align-items: center; gap: 8px; margin-block: 0 18px; padding: 5px 12px; border-radius: 999px; background: var(--zemin-soluk); color: var(--metin-soluk); font-size: 13.5px; } /* * Ortalı blokta pencere yazısı da ortalanıyor (kullanıcı isteği). * * `text-align: center` İŞE YARAMAZDI: öğenin kendisi `inline-flex`, * yani hizalamayı ÜST öğe belirler ve üstteki `.kapsayici` metin * hizalaması taşımıyor. `fit-content` + `margin-inline: auto` kutuyu * içeriği kadar daraltıp ortalıyor; Arapçada da kendiliğinden doğru. */ .eczanePencereOrta { display: flex; inline-size: fit-content; margin-inline: auto; } .eczaneListe { list-style: none; margin: 0; padding: 0; } /* * DÜĞME SATIRI KARTIN ALTINA YAPIŞIK. * * Adres kartlara göre bir ya da iki satır sürüyor; düğmeler metnin hemen * ardından bastığında üç kartta üç ayrı hizaya düşüyordu (Aydıncık'ın * adresi tek satır olduğu için telefonu ötekilerden 24px yukarıdaydı). * * Izgara zaten kartları eşit yükseklikte tutuyor; eksik olan gövdenin * KARTIN TAMAMINA yayılmasıydı — `align-items: flex-start` gövdeyi * içeriği kadar bırakıyordu. */ .eczaneKart { display: flex; align-items: stretch; gap: 16px; padding: 18px 20px; border: 1px solid var(--cizgi); border-radius: var(--kose); background: var(--zemin); } /* Simge gövdeyle birlikte uzamıyor; kartın üstünde kalıyor. */ .eczaneKart > .eczaneSimge { align-self: flex-start; } /* * VURGU KUTUSU. Gece eczane arayan biri için bu sayfadaki en önemli * bilgi bu; ilk kayıt marka renginde ve daha büyük basılıyor. */ .eczaneVurgu .eczaneKart { border-color: var(--vurgu); background: linear-gradient(135deg, var(--vurgu-koyu, #0a5c64), var(--vurgu)); color: #fff; } .eczaneVurgu .eczaneAd { font-size: 22px; } .eczaneVurgu .eczaneAdres, .eczaneVurgu .eczaneIlce { color: rgb(255 255 255 / .85); } .eczaneVurgu .eczaneSimge { background: rgb(255 255 255 / .16); color: #fff; } .eczaneVurgu .eczaneHarita { color: #fff; border-color: rgb(255 255 255 / .45); } .eczaneVurgu .dugme { background: #fff; color: var(--vurgu-koyu, #0a5c64); border-color: #fff; } .eczaneIzgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-block-start: 16px; } .eczaneSade { display: grid; gap: 10px; } .eczaneSade .eczaneKart { padding: 14px 16px; } .eczaneSimge { flex: none; display: flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; border-radius: 12px; background: var(--zemin-soluk); color: var(--vurgu); font-size: 20px; } .eczaneGovde { min-inline-size: 0; flex: 1; display: flex; flex-direction: column; } .eczaneAd { display: block; font-size: 17px; color: inherit; line-height: 1.3; } .eczaneIlce { display: inline-block; margin-block-start: 2px; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--vurgu); } .eczaneAdres { margin-block: 8px 0; font-size: 14.5px; color: var(--metin-soluk); } /* margin-block-start: auto düğmeleri kartın dibine itiyor — üç kartta aynı hizaya. */ .eczaneIslem { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block-start: auto; padding-block-start: 14px; } .eczaneHarita { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--cizgi); border-radius: 999px; color: var(--metin-soluk); font-size: 13.5px; } .eczaneHarita:hover { border-color: var(--vurgu); color: var(--vurgu); } /* Liste girilmemişken çıkan kutu: bölüm gizlenmiyor, yönlendirme yapılıyor. */ .eczaneYok { margin-block-start: 4px; } .eczaneYok .dugme { margin-block-start: 12px; } /* --- Sayılarla Anamed --------------------------------------------------- */ .sayiBolum.sayiSerit { background: var(--vurgu); color: #fff; padding-block: 28px; } .sayiGiris { margin: 0 auto 20px; max-inline-size: 640px; text-align: center; font-size: clamp(14.5px, 1.5vw, 16.5px); line-height: 1.55; color: rgb(255 255 255 / .88); } /* * SÜTUN SAYISI KUTU SAYISINDAN, `auto-fit`TEN DEĞİL. * * `auto-fit` kutuları sığdığı kadar diziyordu ve dört kutu telefonda * 2+2 yerine 2+1+1 gibi dağılabiliyordu. Kullanıcı tam bunu bildirdi: * "mobilde hiç hoş durmuyor, 2 üstte 1 altta." * * Sayı sınıftan geliyor (`sayi-3`, `sayi-4`), böylece hem yerleşim hem * ayraç çizgileri doğru yerden hesaplanıyor. */ .sayiListe { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(4, minmax(0, 1fr)); } .sayiListe.sayi-1 { grid-template-columns: minmax(0, 1fr); } .sayiListe.sayi-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sayiListe.sayi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sayiListe.sayi-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } /* * AYRAÇ ÇİZGİLERİ. * * Kullanıcı isteği: "burada sütunları çizgilerle ayırsak en azından." * Çizgi `border-inline-start` ile, yani Arapçada kendiliğinden öbür * yana geçiyor. İlk sütunda çizgi yok; `gap: 0` olduğu için çizgiler * kutulara yapışık ve tek sıra hâlinde duruyor. */ .sayiListe > li { display: flex; } .sayiListe > li + li { border-inline-start: 1px solid var(--sayiAyrac, rgb(255 255 255 / .22)); } .sayiKutu { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; inline-size: 100%; block-size: 100%; padding: 22px 14px; color: inherit; text-align: center; } .sayiSerit .sayiKutu { color: #fff; } .sayiSerit .sayiKutu i { font-size: 22px; opacity: .8; } /* * RAKAM BÜYÜTÜLDÜ (kullanıcı isteği: "sayıları belirginleştirsek"). * 30–42px aralığındaydı; 38–56px'e çıktı ve rakamlar tablo hizasına * alındı — `tabular-nums` olmadan 1 rakamı ötekilerden dar duruyor ve * dört kutu birbirine göre kayık görünüyordu. */ .sayiRakam { font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .sayiSerit .sayiRakam { font-size: clamp(38px, 4.6vw, 56px); font-weight: 800; line-height: 1.05; } .sayiSerit .sayiAd { font-size: 14px; opacity: .92; } /* * IZGARA GÖRÜNÜMÜ AÇIK ZEMİNDE: ayraç rengi de açık tona çevriliyor, * yoksa beyaz çizgi beyaz kartın üstünde kayboluyor. */ .sayiIzgara { --sayiAyrac: var(--cizgi); } .sayiIzgara .sayiKutu { padding: 26px 18px; background: var(--kart); } /* Izgarada dış çerçeve listede, kutularda değil: çizgiler tek sıra kalsın. */ .sayiIzgara .sayiListe { border: 1px solid var(--cizgi); border-radius: var(--kose); background: var(--kart); overflow: hidden; } .sayiIzgara .sayiKutu i { font-size: 26px; color: var(--vurgu); } .sayiIzgara .sayiRakam { font-size: clamp(34px, 3.8vw, 48px); font-weight: 800; color: var(--murekkep); } .sayiIzgara .sayiAd { font-size: 14px; color: var(--metin-soluk); } a.sayiKutu:hover .sayiRakam { color: var(--vurgu-acik); } .sayiIzgara a.sayiKutu:hover { background: var(--zemin-soluk); } /* * DAR EKRAN: 2×2. * * Dört kutu tek sırada telefonda okunmuyor; ikişerli iki satır hem * rakamı büyük tutuyor hem de simetrik duruyor. Çizgiler de buna göre * yeniden kuruluyor: sol sütunda dikey çizgi yok, ikinci satırda yatay * çizgi var. */ @media (max-width: 720px) { .sayiListe, .sayiListe.sayi-3, .sayiListe.sayi-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sayiListe.sayi-1 { grid-template-columns: minmax(0, 1fr); } .sayiListe > li + li { border-inline-start: 0; } /* Çift sıradaki her ikinci kutu dikey çizgi alıyor. */ .sayiListe > li:nth-child(2n) { border-inline-start: 1px solid var(--sayiAyrac, rgb(255 255 255 / .22)); } /* İkinci satırdan itibaren üstte yatay çizgi. */ .sayiListe > li:nth-child(n + 3) { border-block-start: 1px solid var(--sayiAyrac, rgb(255 255 255 / .22)); } .sayiKutu { padding: 18px 10px; } .sayiSerit .sayiRakam { font-size: 34px; } .sayiIzgara .sayiRakam { font-size: 32px; } .sayiAd { font-size: 13px; } } /* Tek sütuna düşen çok dar ekranda dikey çizgi anlamsız. */ @media (max-width: 360px) { .sayiListe > li:nth-child(2n) { border-inline-start: 0; } } /* --- Ana sayfa slider'ı ----------------------------------------------- */ /* * KAYDIRMA ŞERİDİ, "slide" ANİMASYONU DEĞİL. * * Slaytlar yan yana duran gerçek kutular; geçiş `scroll-snap` ile * oluyor. Böylece JavaScript kapalıyken de parmakla kaydırılıyor, * klavyeyle gezilebiliyor ve tarayıcının kendi akıcı kaydırması * kullanılıyor. `transform` ile elle animasyon yazmak, bunların * hepsini kendimiz yeniden yapmak demekti. */ .slider { position: relative; margin-block-end: 44px; background: var(--zemin); } .sliderSerit { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; /* Kaydırma çubuğu gizleniyor: aşağıdaki noktalar zaten konumu söylüyor. */ scrollbar-width: none; } .sliderSerit::-webkit-scrollbar { display: none; } /* Tek slaytta kaydırma yok; kutu tam genişlikte duruyor. */ .sliderTek .sliderSerit { overflow-x: hidden; } /* * SABİT ORAN — 5:2. * * İlk sürümde yükseklik sabitti (`clamp(340px, 62vh, 560px)`). Ekran * genişledikçe kutu yassılaşıyor ve görsel ORTADAN kırpılıyordu. * Ölçüldü: 1280px'de %3, 1920px'de %35, 2560px'lik bir monitörde * görselin %52'si gidiyordu — tasarımcının koyduğu şeyin yarısı. * * Oran sabitlenince görselin oranı kutununkiyle aynı oluyor ve kırpma * 2048px'e kadar SIFIR. Üst sınır iki yönlü: ne gereksiz uzasın * (820px) ne de ekranı yutsun (78vh). */ .slaytKutu { position: relative; flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 5 / 2; min-block-size: 380px; /* * 1000px sınırı ölçümle seçildi: 2560px'lik monitörde 5:2 oranı * 1024px istiyor, 820'de kesince kırpma %29'a çıkıyordu. 1000'de * %2'ye iniyor ve o genişlikte 1000px'lik bir tanıtım alanı normal. * `78vh` ikinci sınır: kısa ekranda slider sayfayı yutmasın. */ max-block-size: min(1000px, 78vh); overflow: hidden; } .slaytGorsel, .slaytGorsel img { position: absolute; inset-block: 0; inset-inline: 0; inline-size: 100%; block-size: 100%; } .slaytGorsel img { object-fit: cover; object-position: center; } /* * Karartma filtresi: yüzdesi her slaytta AYRI (panelden). Açık tonlu * sade bir fotoğrafta %20 yetiyor, kalabalık bir fotoğrafta %50 * gerekiyor; tek bir değer slaytların bir kısmında yazıyı okunmaz * bırakıyordu. Yatay geçiş de var: yazının olduğu taraf daha koyu. */ .slaytFiltre { position: absolute; inset-block: 0; inset-inline: 0; background: linear-gradient( to right, rgb(var(--filtreRgb, 8 40 44) / calc(var(--karartma, .4) + .12)), rgb(var(--filtreRgb, 8 40 44) / var(--karartma, .4)) ); } /* * AÇIK GÖRSEL İÇİN KOYU YAZI. * * Kullanıcı ana sayfa slaytını beyaz zeminli hazırladı; beyaz yazı orada * hiç görünmüyordu. Filtreyi koyulaştırmak okunurluğu çözüyor ama * tasarımı griye çeviriyor. Bu yüzden yazı rengiyle birlikte FİLTRENİN * RENGİ de dönüyor: koyu yazının altına beyaz bir tül geliyor. */ .slaytKutu-koyu .slaytFiltre { --filtreRgb: 255 255 255; } .slaytKutu-koyu .slaytYazi { color: var(--murekkep); text-shadow: none; } .slaytKutu-koyu .slaytYazi h2 { color: var(--murekkep); } .slaytKutu-koyu .slaytYazi p { color: var(--metin-soluk); } /* * Noktalar ve durdur düğmesi de zemine göre dönüyor: beyaz noktalar * açık bir slaytın üstünde kayboluyordu. Sınıfı betik takıyor, çünkü * hangi slaytın etkin olduğu CSS'ten bilinemiyor. */ .sliderAlt.altKoyu .sliderNoktalar span { background: rgb(8 40 44 / .28); } .sliderAlt.altKoyu .sliderNoktalar a[aria-current="true"] span { background: var(--vurgu); } .sliderAlt.altKoyu .sliderDurdur { border-color: rgb(8 40 44 / .25); background: rgb(255 255 255 / .6); color: var(--murekkep); } /* Arka plan videosu kapak görselinin tam üstünde, aynı kırpmayla. */ .slaytVideo { position: absolute; inset-block: 0; inset-inline: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; /* Yüklenene kadar görünmüyor: yarım yüklenmiş kare göstermesin. */ opacity: 0; transition: opacity .4s ease; } .slaytVideo.hazir { opacity: 1; } /* YouTube oynat düğmesi — slaytın ortasında. */ .slaytOynat { position: absolute; inset-block: 0; inset-inline: 0; display: grid; place-items: center; z-index: 2; border: 0; background: none; cursor: pointer; } .slaytOynatSimge { display: grid; place-items: center; inline-size: 82px; block-size: 82px; border-radius: 50%; background: rgb(255 255 255 / .92); color: var(--vurgu); font-size: 38px; box-shadow: 0 10px 40px rgb(0 0 0 / .3); transition: transform var(--gecis), background var(--gecis); } .slaytOynat:hover .slaytOynatSimge { transform: scale(1.08); background: #fff; } .slaytOynat:focus-visible .slaytOynatSimge { outline: 3px solid var(--vurgu-acik); outline-offset: 4px; } /* Oynatılınca çerçeve slaytı kaplıyor. */ .slaytCerceve { position: absolute; inset-block: 0; inset-inline: 0; inline-size: 100%; block-size: 100%; border: 0; z-index: 3; background: #000; } @media (max-width: 700px) { .slaytOynatSimge { inline-size: 64px; block-size: 64px; font-size: 30px; } } /* * YAZISIZ SLAYTIN TIKLAMA ÖRTÜSÜ. * * Görselin içine konmuş bir düğme resmin parçası, tıklanabilir değil. * Bu örtü slaytın tamamını bağlantı yapıyor. Görünmez ama odaklanınca * kendini gösteriyor — klavye kullanıcısı nerede olduğunu görmeli. */ .slaytOrtu { position: absolute; inset-block: 0; inset-inline: 0; z-index: 1; } .slaytOrtu:focus-visible { outline: 3px solid var(--vurgu-acik); outline-offset: -6px; } .slaytIcerik { position: relative; block-size: 100%; display: flex; align-items: center; } /* Mantıksal hizalama: Arapçada kendiliğinden aynalanıyor. */ .slaytIcerik-basi { justify-content: flex-start; } .slaytIcerik-orta { justify-content: center; text-align: center; } .slaytIcerik-sonu { justify-content: flex-end; } .slaytYazi { max-inline-size: 620px; color: #fff; text-shadow: 0 2px 18px rgb(0 0 0 / .35); } .slaytIcerik-sonu .slaytYazi { text-align: end; } .slaytYazi h2 { margin: 0 0 12px; font-size: clamp(26px, 4.2vw, 44px); line-height: 1.15; color: #fff; } .slaytYazi p { margin: 0 0 20px; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.55; color: rgb(255 255 255 / .92); } .sliderAlt { position: absolute; inset-block-end: 18px; inset-inline: 0; display: flex; align-items: center; gap: 14px; } .sliderNoktalar { display: flex; gap: 8px; } .sliderNoktalar a { display: block; padding: 6px 3px; /* dokunma alanı: nokta 8px, hedef 20px */ line-height: 0; } /* * NOKTALAR HER ZEMİNDE GÖRÜNÜR. * * Yalnızca beyaz dolguyla çiziliyorlardı ve beyaz zeminli bir slaytta * tamamen kayboluyorlardı — ölçüldü, ana sayfadaki "30 Ağustos" * slaytında hiç görünmüyordu. Renk ayarına bağlamak da çözmüyor: o * slaytta yazı kapalı, yani `yazı rengi` seçimi anlamsız. * * İnce bir koyu çerçeve + yumuşak gölge, açık zeminde noktayı ortaya * çıkarıyor; koyu zeminde ise görünmüyor ve beyaz dolgu işini yapıyor. */ .sliderNoktalar span { display: block; inline-size: 26px; block-size: 5px; border-radius: 999px; background: rgb(255 255 255 / .55); box-shadow: 0 0 0 1px rgb(8 40 44 / .22), 0 1px 3px rgb(0 0 0 / .2); transition: background var(--gecis), inline-size var(--gecis); } .sliderNoktalar a:hover span { background: rgb(255 255 255 / .85); } .sliderNoktalar a[aria-current="true"] span { background: #fff; inline-size: 40px; box-shadow: 0 0 0 1px rgb(8 40 44 / .32), 0 1px 4px rgb(0 0 0 / .25); } .sliderDurdur { margin-inline-start: auto; inline-size: 34px; block-size: 34px; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / .35); border-radius: 50%; background: rgb(8 40 44 / .38); color: #fff; cursor: pointer; /* Noktalarla aynı gerekçe: açık zeminde de seçilebilsin. */ box-shadow: 0 1px 6px rgb(0 0 0 / .25); } .sliderDurdur:hover { background: rgb(8 40 44 / .58); } @media (max-width: 700px) { /* * Telefonda 3:4. 9:16 denenirse kutu ekranın neredeyse tamamını * kaplıyor ve altındaki içerik hiç görünmüyor; 3:4 telefon ekranının * yaklaşık %60'ını alıyor. */ .slaytKutu { aspect-ratio: 3 / 4; min-block-size: 380px; max-block-size: min(620px, 72vh); } /* Telefonda yazı hep ortada: dar ekranda kenara yaslamak yer kazandırmıyor. */ .slaytIcerik { justify-content: center; text-align: center; } .slaytIcerik .slaytYazi { text-align: center; } } /* * HAREKET AZALTMA. Kullanıcı işletim sisteminde "hareketi azalt" * dediyse akıcı kaydırma da kapanıyor; otomatik geçişi betik zaten * hiç başlatmıyor. */ @media (prefers-reduced-motion: reduce) { .sliderSerit { scroll-behavior: auto; } .sliderNoktalar span { transition: none; } } /* --- Dış sistem sayfaları (E-Randevu, E-Sonuç) ------------------------ */ /* * Çerçevenin yüksekliği İÇERİĞE GÖRE AYARLANAMAZ: başka bir alan adı * olduğu için içindeki belgenin boyunu okuyamıyoruz (tarayıcı izin * vermez, doğru olan da bu). Bu yüzden ekranın büyük bölümünü kaplayan * sabit bir yükseklik veriliyor; kısa kalırsa çerçeve kendi içinde * kayıyor. */ .disCerceve { position: relative; block-size: min(1100px, calc(100vh - 160px)); min-block-size: 520px; margin-block-end: 18px; border: 1px solid var(--cizgi); border-radius: var(--kose); overflow: hidden; background: var(--zemin); } .disCerceve iframe { inline-size: 100%; block-size: 100%; border: 0; display: block; } .disDugmeSatiri { margin-block: 0 14px; } .disNot { display: flex; align-items: flex-start; gap: 8px; margin-block: 0; font-size: 13.5px; color: var(--metin-soluk); } .disNot i { margin-block-start: 2px; flex-shrink: 0; } .kurumBolum { margin-block-end: 30px; } .kurumBolum:last-of-type { margin-block-end: 0; } .kurumBaslik { margin-block: 0 14px; padding-block-end: 8px; border-block-end: 1px solid var(--cizgi); font-size: 15px; letter-spacing: .03em; text-transform: uppercase; color: var(--metin-soluk); } .kurumIzgara { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; } /* Kare görünüm: yalnızca logo duvarı. */ .kurumKare { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); } /* * İsimli görünümde SÜTUN SAYISI EKRANA GÖRE. * * İstek "iki sütun" idi ve sebebi sayfanın aşağı doğru uzamasıydı. * Kapsam notu karttan kalkınca kart tek satıra indi; iki sütunda her * kart ~430px genişliğinde ve neredeyse boş duruyordu. `auto-fill` * geniş ekranda üçe çıkıyor, tablette ikide kalıyor — sebep aynı şekilde * karşılanıyor, görüntü daha derli toplu. */ .kurumIsimli { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } .kurumKart { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--cizgi); border-radius: var(--kose); background: var(--zemin); transition: border-color var(--gecis), box-shadow var(--gecis); } .kurumKart:hover { border-color: var(--vurgu-acik); box-shadow: 0 4px 16px rgb(18 48 58 / .06); } .kurumKare .kurumKart { flex-direction: column; justify-content: center; padding: 18px 14px; } /* * Logo kutusu SABİT ÖLÇÜDE ve `contain`. * * Kurum logoları yatay, dikey ve kare geliyor. `cover` olsaydı yazıları * kırpardı; sabit ölçü olmasaydı kartlar birbirinden farklı boyda * dizilirdi. * * BEYAZ ZEMİN: elimizdeki logoların bir kısmı saydam değil, beyaz * zeminli. Kutunun kendisi de beyaz olunca aradaki sınır görünmüyor. */ .kurumLogo { flex: none; display: flex; align-items: center; justify-content: center; width: 76px; height: 48px; padding: 4px; background: #fff; border-radius: 6px; color: var(--vurgu); font-size: 22px; opacity: .9; } .kurumKare .kurumLogo { width: 100%; height: 74px; padding: 6px; } .kurumResim { max-height: 100%; max-width: 100%; object-fit: contain; display: block; } /* * KURUM ADLARI BÜYÜK HARF — CSS İLE, VERİTABANINDA DEĞİL. * * Kullanıcı isteği "adların hepsini büyük harfe çevir". Kayıtları büyük * harfe çevirmek bilgi kaybı: panelde "ALLIANZ SIGORTA" okumak zor ve * Türkçede geri dönüş kusurlu (İstanbul → ISTANBUL mu İSTANBUL mu?). * `text-transform` sayfadaki dil etiketine bakıyor ve Türkçe i → İ * eşlemesini doğru yapıyor; kayıt olduğu gibi kalıyor. */ .kurumAd { min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--murekkep); line-height: 1.3; letter-spacing: .02em; text-transform: uppercase; } .kurumUyari { margin-block-start: 34px; } /* ============================================================================= HIZLI İŞLEM KUTUSU ============================================================================= Sitenin her sayfasında ekranda sabit duran kutu. Konumu panelden seçiliyor: sağ kenar · alt çubuk · açılır düğme. MOBİL ÖNCE YAZILDI. Temel kural ALT ÇUBUK; sağ kenar ve açılır düğme yalnızca geniş ekranda devreye giriyor. Tersi yazılsaydı her konum için bir de dar ekran kopyası gerekirdi ve ikisi zamanla ayrı düşerdi. ============================================================================= */ /* Yalnızca ekran okuyucunun göreceği metin. */ .gizliYazi { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* * YÜZEN HAP. * * Ekranın altına yapışan tam genişlikte bir şerit değil; ortada, * kenarlardan ayrık, yuvarlatılmış küçük bir kutu. Tam genişlik şerit * sayfanın alt kenarını kesiyor ve site iki parçaya bölünmüş gibi * duruyordu. * * `pointer-events`: sarmalayıcı kendisi tıklamayı yutmuyor, yalnızca * kutunun kendisi alıyor. Yoksa hapın iki yanındaki görünmez alan * altındaki bağlantıları engellerdi. */ .hizliKutu { position: fixed; inset-block-end: 16px; /* * ORTALAMA `translateX(-50%)` İLE DEĞİL, OTOMATİK KENAR BOŞLUĞUYLA. * * Önce `inset-inline-start: 50%` + `translateX(-50%)` yazılmıştı. * Arapçada bozuluyordu: mantıksal başlangıç kenarı SAĞ oluyor, ama * `translateX` fiziksel — hap yine sola kayıyor ve ortadan çıkıyordu. * Ölçümde görüldü. * * İki kenarı da sıfırlayıp genişlik vermek ve kenar boşluğunu `auto` * bırakmak iki yönde de ortalıyor; `transform` da animasyona kalıyor. */ inset-inline-start: 0; inset-inline-end: 0; margin-inline: auto; width: 94%; max-width: 470px; /* Üst bandın (90) altında, açılır menünün (95) altında kalıyor. */ z-index: 80; pointer-events: none; } .hizliGovde { display: flex; align-items: center; justify-content: center; gap: 3px; padding: 6px; background: rgb(255 255 255 / .93); border: 1px solid var(--cizgi); border-radius: 20px; box-shadow: 0 10px 34px -6px rgb(18 48 58 / .18), 0 2px 8px rgb(18 48 58 / .07); /* Arkasındaki içerik bulanıklaşınca kutu yüzüyormuş gibi duruyor. */ backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); pointer-events: auto; } /* Hap düzeninde başlık yer kaplıyor; düğmeler daha önemli. */ .hizliBaslik { display: none; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--metin-soluk); } .hizliListe { display: flex; flex: 1; gap: 0; list-style: none; margin: 0; padding: 0; } .hizliListe li { position: relative; flex: 1; min-width: 0; } .hizliDugme { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 100%; padding: 10px 6px; border: 1px solid transparent; border-radius: 14px; background: transparent; color: var(--murekkep); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-align: center; line-height: 1.2; transition: background var(--gecis), color var(--gecis), border-color var(--gecis); } /* * ÜSTÜNE GELİNCE HAFİF VURGU. * * Dolu zemin yerine vurgu renginin soluk bir tonu + aynı renkte kenarlık * ve yazı. Hapın içindeki düğmeler birbirine bitişik olduğu için dolu * zemin komşusunu eziyordu. */ .hizliDugme:hover { background: rgb(14 124 134 / .09); border-color: rgb(14 124 134 / .22); color: var(--hizli-vurgu); } .hizliDugme:active { transform: translateY(1px); } .hizliSimge { flex: none; font-size: 19px; color: var(--hizli-vurgu); transition: color var(--gecis), transform var(--gecis); } .hizliDugme:hover .hizliSimge { color: var(--hizli-vurgu); transform: scale(1.12); } /* * Düğmeler arasında saç teli çizgi. * * `li + li` üzerinde: ilkinin önüne çizgi çizilmiyor, ayrıca * `:last-child` istisnası da gerekmiyor. `inset-inline-start` yöne * duyarlı — Arapçada çizgi öbür yana geçiyor. */ .hizliListe li + li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 22%; width: 1px; height: 56%; border-radius: 2px; background: var(--cizgi); } /* * BİRİNCİL DÜĞME DOLGULU. * * İlk düğme en önemli iş (randevu). Üçü de aynı görünseydi gözün * gideceği bir yer olmazdı. Yanındaki çizgi de kalkıyor: dolgulu kutu * zaten kendi sınırını çiziyor. */ .hizliListe li:first-child .hizliDugme { background: var(--hizli-vurgu); border-color: var(--hizli-vurgu); color: #fff; } .hizliListe li:first-child .hizliSimge { color: #fff; } .hizliListe li:first-child .hizliDugme:hover { background: var(--hizli-acik); border-color: var(--hizli-acik); color: #fff; } .hizliListe li:first-child .hizliDugme:hover .hizliSimge { color: #fff; } .hizliListe li:nth-child(2)::before { display: none; } /* * WHATSAPP DÜĞMESİ KENDİ RENGİNDE. * * WhatsApp yeşili tanınan bir işaret; marka turkuazına boyanmış bir * WhatsApp düğmesi kutudaki öteki düğmelerin arasında kaybolur. * Yalnızca SİMGE yeşil — zemin de yeşil olsaydı ilk düğmedeki (dolgulu * randevu) vurgu ile yarışır ve kutuda iki "birincil" düğme olurdu. * * `#25d366` WhatsApp'ın kendi yeşili. Beyaz zeminde kontrastı 2.2:1 * civarında, yani METİN İÇİN YETMEZ — o yüzden etiket yazısı marka * rengini koruyor, renk yalnızca simgede. */ .hizliDugme-wa .hizliSimge { color: #25d366; } .hizliDugme-wa:hover { border-color: #25d366; } .hizliDugme-wa:hover .hizliSimge { color: #1da851; } /* Dolgulu birinci düğme WhatsApp ise simge beyaz kalıyor: yeşil kaybolurdu. */ .hizliListe li:first-child .hizliDugme-wa .hizliSimge { color: #fff; } .hizliEtiket { min-width: 0; } /* Hap düzeninde ok işaretine yer yok; ekran okuyucu uyarısı duruyor. */ .hizliDis { display: none; } /* * Sayfa açılırken aşağıdan süzülüyor. * * "Hareket azaltılsın" diyen ziyaretçide kapalı: sabit duran bir kutunun * hareketle belirmesi baş dönmesi yapabiliyor. */ @media (prefers-reduced-motion: no-preference) { .hizliKutu { animation: hizliBelir .45s ease-out both; } @keyframes hizliBelir { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } } /* * Sabit çubuk sayfanın sonunu örtüyor: akıştan çıktığı için altbilginin * son satırı arkasında kalıyordu. Akıştaki bu boşluk onu yukarı itiyor. * * Dar ekranda HER KONUM alt çubuğa döndüğü için boşluk hepsinde gerekli; * geniş ekranda yalnızca gerçekten alta yerleşen kipte. */ .hizliBosluk { height: 96px; } /* Açılır düğme dar ekranda yok: orada zaten çubuk var. */ .hizliTetik { display: none; } /* --- Geniş ekran: konum seçimi devreye giriyor --------------------------- */ @media (min-width: 861px) { /* --- Sağ kenarda, dikey --- */ /* * `inset` KISAYOLU KULLANILMIYOR. * * Kısayol FİZİKSEL (top/right/bottom/left) yazıyor; üstüne mantıksal * bir özellik eklenince Arapçada ikisi birden uygulanıp kutu iki * kenara birden yapışıyor ve ekranı boydan boya kaplıyordu. Dört kenar * da tek tek ve mantıksal yazılıyor — ayrıca RTL için ek kural * gerekmiyor, yön kendiliğinden dönüyor. */ .hizli-sag { inset-block-start: 50%; inset-block-end: auto; inset-inline-start: auto; inset-inline-end: 0; /* Temeldeki yatay ortalama iptal: bu kip kenara yaslanıyor. */ transform: translateY(-50%); width: auto; max-width: none; margin-inline: 0; } .hizli-sag .hizliGovde { flex-direction: column; align-items: stretch; gap: 0; width: 124px; max-width: none; margin: 0; padding: 0; border: 1px solid var(--cizgi); border-inline-end: 0; border-start-start-radius: var(--kose); border-end-start-radius: var(--kose); border-end-end-radius: 0; border-start-end-radius: 0; box-shadow: -8px 0 26px rgb(18 48 58 / .12); backdrop-filter: none; -webkit-backdrop-filter: none; overflow: hidden; } /* Dikey şeritte düğmeler bitişik; hap düzeninin çizgileri gereksiz. */ .hizli-sag .hizliListe li + li::before { display: none; } .hizli-sag .hizliBaslik { display: block; padding: 9px 8px; background: var(--hizli-vurgu); color: #fff; font-size: 10.5px; text-align: center; /* * Birincil düğme de vurgu renginde dolgulu; ayraç olmasa başlıkla * tek bir blok gibi görünüyor ve düğmenin tıklanabilir olduğu * anlaşılmıyordu. */ border-block-end: 1px solid rgb(255 255 255 / .28); } .hizli-sag .hizliListe { flex-direction: column; gap: 0; } .hizli-sag .hizliListe li { flex: none; } /* * Dikey kipte düğmeler bitişik: aralarında boşluk ve kendi kenarlığı * olsaydı 124px genişlikte üç ayrı kutu gibi görünürdü, tek bir şerit * gibi değil. */ .hizli-sag .hizliDugme { flex-direction: column; gap: 6px; padding: 14px 8px; border: 0; border-block-end: 1px solid var(--cizgi); border-radius: 0; background: #fff; /* Hapın BÜYÜK HARF görünümü buraya uymuyor: 124px genişlikte "HIZLI RANDEVU AL" üç satıra iniyor ve okunmuyor. */ font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; } /* * ÜSTÜNE GELİNCE ZEMİN DEĞİŞİYOR. * * Bu kural şart: üstteki `.hizli-sag .hizliDugme` ile temeldeki * `.hizliDugme:hover` AYNI ÖZGÜLLÜKTE (ikisi de iki sınıf değerinde) * ve bu blok kaynakta sonra geldiği için zemini beyaza sabitliyordu. * Hover yazıyı beyaza çevirince beyaz üstüne beyaz kalıyor, düğme * okunmuyordu. `:hover` eklenmiş hâli bir basamak daha özgül, yani * sıradan bağımsız kazanıyor. */ .hizli-sag .hizliDugme:hover { background: var(--hizli-vurgu); color: #fff; } .hizli-sag .hizliDugme:hover .hizliSimge { color: #fff; } .hizli-sag .hizliListe li:last-child .hizliDugme { border-block-end: 0; } /* * Simge yuvarlatılmış bir zemine alınıyor: düz bir simge + yazı, 124px * genişlikte bağlantı listesi gibi duruyordu, tıklanacak bir düğme gibi * değil. */ .hizli-sag .hizliSimge { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--zemin-soluk); font-size: 19px; transition: background var(--gecis), color var(--gecis); } .hizli-sag .hizliDugme:hover .hizliSimge { background: rgb(255 255 255 / .2); } /* Birincil (ilk) düğme burada da dolgulu; simge kutusu da ona uyuyor. */ .hizli-sag .hizliListe li:first-child .hizliSimge { background: rgb(255 255 255 / .18); } /* --- Sağ altta, açılıp kapanan --- */ .hizli-sag_alt { inset-block-start: auto; inset-block-end: 24px; inset-inline-start: auto; inset-inline-end: 24px; /* Temeldeki hap ölçüleri ve yatay ortalama iptal. */ width: auto; max-width: none; margin-inline: 0; transform: none; /* * `column-reverse`: belgede önce tetik düğmesi var (klavye sırası * için doğru olan bu) ama görünümde altta durmalı. * * `flex-end` sütun yerleşiminde ÇAPRAZ EKSENE bakıyor, o da yazı * yönü — Arapçada kendiliğinden sola hizalanıyor. */ display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 12px; } .hizliTetik { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%; background: var(--hizli-vurgu); color: #fff; font-size: 23px; cursor: pointer; box-shadow: 0 8px 24px rgb(14 124 134 / .38); transition: background var(--gecis), transform var(--gecis); /* * `pointer-events: auto` ZORUNLU, SÜS DEĞİL. * * Sarmalayıcı `.hizliKutu` tıklamayı yutmasın diye `none` alıyor ve * `.hizliGovde` bunu `auto` ile geri açıyordu — ama bu düğme için * karşılığı yazılmamıştı. Sonuç: "sağ altta açılıp kapanan düğme" * kipinde gövde `.acik` sınıfı gelene kadar `visibility: hidden`, * o sınıfı ekleyen tek şey de bu düğme. Yani kutu FAREYLE HİÇ * AÇILMIYORDU; yalnızca klavyeyle (Tab + Enter) açılıyordu. * * Ekran görüntüsü alınırken tıklama zaman aşımına uğrayınca * fark edildi; gözle bakarken düğme gayet yerinde duruyor. */ pointer-events: auto; } .hizliTetik:hover { background: var(--hizli-acik); transform: scale(1.05); } /* * Simge takası: kapalıyken şimşek, açıkken çarpı. * * Odak yedeği yalnızca betik yokken (bkz. `html.betikli`, TUZAKLAR 2.9). */ .hizliTetikKapat { display: none; } .hizli-sag_alt.acik .hizliTetikSimge, html:not(.betikli) .hizli-sag_alt:focus-within .hizliTetikSimge { display: none; } .hizli-sag_alt.acik .hizliTetikKapat, html:not(.betikli) .hizli-sag_alt:focus-within .hizliTetikKapat { display: block; } .hizli-sag_alt .hizliGovde { flex-direction: column; align-items: stretch; gap: 6px; width: 232px; max-width: none; margin: 0; padding: 12px; border: 1px solid var(--cizgi); border-radius: var(--kose); box-shadow: 0 14px 36px rgb(18 48 58 / .16); /* * `display: none` DEĞİL: geçiş uygulanamaz ve açılış ani olurdu. * `visibility` hem tıklamayı hem klavye odağını engelliyor — * yalnızca `opacity: 0` bırakılsaydı görünmeyen bağlantılar * sekmeyle gezilebilir kalırdı (açılır menüdeki kuralın aynısı). */ opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis); } .hizli-sag_alt.acik .hizliGovde, html:not(.betikli) .hizli-sag_alt:focus-within .hizliGovde { opacity: 1; visibility: visible; transform: none; } .hizli-sag_alt .hizliBaslik { display: block; padding-inline: 4px; } .hizli-sag_alt .hizliListe { flex-direction: column; gap: 6px; } .hizli-sag_alt .hizliListe li { flex: none; } .hizli-sag_alt .hizliListe li + li::before { display: none; } /* Açılır listede satırlar yan yana okunuyor; büyük harf gerekmiyor. */ .hizli-sag_alt .hizliDugme { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 10px 12px; border-color: var(--cizgi); text-align: start; font-size: 13.5px; font-weight: 600; text-transform: none; letter-spacing: 0; } .hizli-sag_alt .hizliDis { display: inline; font-size: 11px; opacity: .55; } /* --- Alt ortada, yatay hap --- */ /* * `width: fit-content` ŞART, `auto` DEĞİL. * * İki kenar da sıfırken `width: auto` "iki kenara da yapış" demek ve * hap ekranı boydan boya kaplar. `fit-content` içeriği kadar * büyütüyor, `margin-inline: auto` da ortalıyor. */ .hizli-alt { inset-block-end: 24px; width: fit-content; max-width: 95vw; } /* * Geniş ekranda hap yatay: simge ve yazı yan yana, düğmeler daha ferah. * Başlık burada da basılmıyor — hapın tamamı zaten "hızlı işlem" * demek; başlık yalnızca yer kaplıyordu. */ .hizli-alt .hizliGovde { gap: 4px; padding: 8px; border-radius: 22px; } .hizli-alt .hizliListe { flex: none; } .hizli-alt .hizliListe li { flex: none; } .hizli-alt .hizliDugme { flex-direction: row; gap: 9px; padding: 13px 22px; border-radius: 16px; font-size: 12.5px; letter-spacing: .05em; } .hizli-alt .hizliSimge { font-size: 20px; } .hizli-alt .hizliListe li + li::before { inset-block-start: 20%; height: 60%; } /* Geniş ekranda yalnızca alt hap sayfayı örtüyor; ötekiler örtmüyor. */ .hizliBosluk-sag, .hizliBosluk-sag_alt { height: 0; } .hizliBosluk-alt { height: 104px; } } /* * DÖRT DÜĞME, DAR EKRAN. * * Kutuya WhatsApp eklenince (kullanıcı isteği) dördüncü düğme geldi ve * ÖLÇÜLDÜ: 320px'de her düğmeye 68px kalıyor, "HIZLI RANDEVU AL" ÜÇ * SATIRA iniyordu. Yatay taşma yok ama çubuk gereksiz yükseliyor. * * En çok yeri BÜYÜK HARF ve HARF ARALIĞI yiyor: aynı metin küçük harfle * belirgin biçimde daha dar. Dar ekranda ikisi de bırakılıyor; geniş * ekranda hap görünümü olduğu gibi duruyor. */ @media (max-width: 420px) { .hizliDugme { padding-inline: 3px; font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; } .hizli-alt .hizliDugme { padding: 10px 4px; } } /* --- Ust menu: toplanma esigi ------------------------------------------- */ /* * MENU 1140px ALTINDA HAMBURGERE DONUSUYOR, 860px DEGIL. * * Esik olculerek secildi. Menu yazisi 15.5px'e cikinca sekiz madde dar * pencerede sigmiyor ve tasiyordu: * * 14.5px ile tasma 861-901px (3 genislik) * 15.5px ile tasma 861-1121px (14 genislik) * * Yani tasma ONCEDEN DE VARDI ama kucuktu; yazi buyuyunce genisledi. * Yaziyi kucultmek yerine esigi tasima kararini verdik: tabletde sikisik * bir menu okumak, hamburgerden fazlasini vermiyor. * * BU BLOK YALNIZCA BASLIGA AIT. Icerik yerlesimi (baslik boyutlari, * izgaralar, kartlar) asagidaki 860px blogunda kaliyor — tablet * icerigi hala iki sutun gorebilsin. */ @media (max-width: 1180px) { .ustIc { flex-wrap: wrap; gap: 12px; } .marka { margin-inline-end: 0; } /* Dar ekranda logo menüyle aynı satırda; biraz küçülüyor. */ .markaLogo { height: 50px; } .menu { order: 3; width: 100%; flex-wrap: wrap; } .menuKapsul { order: 3; width: 100%; } .dilSecici { margin-inline-start: auto; order: 2; } /* * ────────────────────────────────────────────────────────────────── * DAR EKRANDA LOGO ORTADA, MENÜ TUŞU SAĞ KENARDA * ────────────────────────────────────────────────────────────────── * * Kullanıcı isteği. Önce ikisi yan yanaydı ve logo sola yaslıydı. * * TUŞ MUTLAK KONUMDA. Akışta bırakılıp logoya `margin: auto` * verilseydi logo, tuşun kapladığı 44px kadar sola kayardı — yani * sayfaya değil, kalan boşluğa ortalanırdı. Mutlak konum tuşu * akıştan çıkarıyor, logo gerçekten sayfa ortasına geliyor. * * DİKEY KONUM SABİT, ORTALANMIŞ DEĞİL. `top: 50%` denenemez: menü * açıldığında `.ustIc` bütün panel kadar uzuyor ve tuş panelin * ortasına kayardı. Sabit değer logo satırına kilitliyor — * 14px üst boşluk + (50px logo − 44px tuş) / 2 = 17px. * * `inset-inline-end` yöne duyarlı: Arapçada tuş sol kenara geçiyor. */ .ustIc { position: relative; justify-content: center; } .marka { margin-inline: auto; order: 1; } html.betikli .menuAcDugme { position: absolute; /* `.kapsayici`nin yatay boşluğuyla aynı: tuş içerik kenarına hizalı. */ inset-inline-end: 24px; inset-block-start: 17px; order: 0; } /* * HAMBURGER — ama YALNIZCA BETİK VARSA. * * Ölçüldü: 390px'lik telefonda üst bant 308px yer kaplıyordu, yani * ekranın %36'sı; içerik ancak onun altında başlıyordu. Toplanan * menüyle bu 90px'e iniyor. * * `html.betikli` kapısı bilinçli: menüyü kapatacak betik yokken * "aç/kapa" düğmesi göstermek, ekran okuyucuya çalışmayan bir denetim * vaat etmek olurdu. Betiksiz tarayıcıda menü bugünkü gibi açık * kalıyor — uzun ama çalışır (aynı gerekçe: TUZAKLAR 2.9). */ html.betikli .menuAcDugme { display: inline-flex; order: 2; } html.betikli .menuKapsul { display: none; } html.betikli .ust.menuAcik .menuKapsul { display: block; } /* Açık menüde maddeler alt alta ve dokunmaya uygun yükseklikte. */ html.betikli .ust.menuAcik .menu { flex-direction: column; gap: 0; } html.betikli .ust.menuAcik .menu > li { width: 100%; } html.betikli .ust.menuAcik .menu > li > a, html.betikli .ust.menuAcik .menuDugme { display: flex; align-items: center; min-block-size: 46px; inline-size: 100%; padding-inline: 4px; border-block-end: 1px solid var(--cizgi); } /* * Dar ekranda açılır menü AKIŞA GİRİYOR, üstte yüzmüyor. * * 250px genişliğinde havada duran bir kutu telefonda ekranın yarısını * kaplıyor ve arkasındaki menüyü örtüyordu. Burada listeyi aşağı * itiyor; sayfa uzuyor ama hiçbir şey gizlenmiyor. */ .menuAcilir { position: static; width: 100%; } .menuDugme { width: 100%; justify-content: space-between; } .altMenu { position: static; min-width: 0; width: 100%; margin-block-start: 4px; padding-inline-start: 10px; border: 0; border-inline-start: 2px solid var(--cizgi); border-radius: 0; box-shadow: none; transform: none; /* * Akıştaki kutuda `visibility: hidden` YER KAPLAR: kapalı menü * altındaki bağlantıları aşağı iterdi. Burada gerçekten gizleniyor. */ display: none; opacity: 1; visibility: visible; } /* * DAR EKRANDA ALT MADDE KÜÇÜK KALIYOR AMA DOKUNULABİLİR. * * Punto 13px'e indirilince (ikinci seviye hissi için) dolgu ile * birlikte dokunma alanı ~32px'e düşüyordu; parmak için az. Ana * maddelere zaten `min-block-size: 46px` veriliyor, aynı gözetim * buraya da gerekli. * * Çözüm punto BÜYÜTMEK DEĞİL, kutuyu yükseltmek: hiyerarşi yazıdan * geliyor, dokunulabilirlik kutudan. 44px yaygın alt sınır; ana * maddenin 46px'inin altında kaldığı için sıralama da bozulmuyor. */ .altMenu a { display: flex; align-items: center; min-block-size: 44px; } /* Odak yedeği burada da yalnızca betik yokken (bkz. TUZAKLAR 2.9). */ html:not(.betikli) .menuAcilir:focus-within > .altMenu, .menuAcilir.acik > .altMenu { display: block; } } /* --- Dar ekran ----------------------------------------------------------- */ @media (max-width: 860px) { h1 { font-size: 25px; } .bandiIc { gap: 14px; } .bandiSimge { width: 60px; height: 60px; font-size: 28px; border-radius: 14px; } .bandiGorselli h1 { font-size: 27px; } /* * Dar ekranda filtre YUKARIDAN AŞAĞI açılıyor: yazı ile fotoğraf yan * yana değil alt alta olduğu için yatay geçiş metni koruyamıyor. */ .bandiFiltre { background: linear-gradient(to bottom, rgb(10 92 100 / .93) 0%, rgb(10 92 100 / .86) 60%, rgb(14 124 134 / .6) 100%); } .birimSimgeBuyuk { width: 32px; height: 32px; } .suzgecAlan { flex-basis: 100%; } .hekimBuyukFoto, .hekimFotoYok.buyuk { width: 128px; height: 170px; } /* Yönetim kurulu kartı: fotoğraf küçülüyor ama yan yana kalıyor — alt alta geçince kart çok uzuyor ve liste okunmaz hâle geliyor. */ .kurulKart { gap: 16px; padding: 16px; } .kurulFoto { width: 78px; } .kurulHarf { font-size: 25px; } .kurulAd { font-size: 17px; } .projeIzgara { grid-template-columns: minmax(0, 1fr); } .koseIzgara { grid-template-columns: minmax(0, 1fr); } /* Dar ekranda isimli görünüm tek sütuna iniyor; iki sütunda ad sığmıyor. */ .kurumIsimli { grid-template-columns: minmax(0, 1fr); } .kurumKare { grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); } .sgkBandi { flex-direction: column; align-items: flex-start; gap: 14px; } .kurumSuzgec { align-items: stretch; } .suzgecSag { justify-content: space-between; } .kurumArama { flex: 1; } .kurumArama input { width: 100%; } } /* * DAR PENCERE + FARE. * * Yukarıdaki dar ekran kuralı açılır menüyü `display: none` yaptığı için * genel `:hover` kuralındaki `visibility` artık yetmiyor. Bu durum * telefonda değil, MASAÜSTÜNDE PENCERE KÜÇÜLTÜLDÜĞÜNDE yaşanıyor — * kendi ölçüm düzeneğimiz de tam olarak böyle çalışıyor. */ @media (max-width: 1180px) and (hover: hover) { .menuAcilir:hover > .altMenu { display: block; } } /* ============================================================================= SAĞLIK HESAPLAYICILARI ============================================================================= Kullanıcı isteği: medipol.com.tr ana sayfasındaki "Hesaplayıcılar" alanının benzeri. Kartlar araca götürüyor, hesap kendi sayfasında. MANTIKSAL ÖZELLİKLER: `margin-inline-start`, `text-align: start`, `inset-inline` — Arapça sürümde düzen kendiliğinden aynalanıyor. ========================================================================== */ /* --- Kart ızgarası ------------------------------------------------------- */ .hesapIzgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; } .hesapListe { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .hesapKart { margin: 0; } .hesapKartIc { display: flex; align-items: center; gap: 14px; height: 100%; padding: 16px 18px; border: 1px solid var(--cizgi); border-radius: var(--kose); background: var(--zemin); color: inherit; text-decoration: none; transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis); } a.hesapKartIc:hover { border-color: var(--vurgu); box-shadow: 0 6px 18px rgba(18, 48, 58, .09); transform: translateY(-2px); } /* Klavyeyle gezen için odak halkası görünür kalmalı. */ a.hesapKartIc:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 3px; } .hesapSimge { flex: none; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--zemin-soluk); color: var(--vurgu); font-size: 21px; } .hesapKartGovde { display: block; min-width: 0; flex: 1; } .hesapKartAd { display: block; font-size: 15.5px; color: var(--murekkep); } .hesapKartOzet { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--metin-soluk); } /* * Ok RTL'de kendiliğinden dönmüyor (Bootstrap Icons sabit bir çizim). * Arapçada yansıtılıyor — "ileri" oku sağdan sola okunan sayfada sola * bakmalı. */ .hesapOk { flex: none; color: var(--metin-soluk); font-size: 15px; } [dir="rtl"] .hesapOk { transform: scaleX(-1); } /* Şeritte kart genişliği sabit: akış hızı bu ölçüye göre hesaplanıyor. */ .hesapSerit .hesapKart { width: 300px; flex: none; } /* Yan sütundaki liste daha sıkışık; simge küçülüyor. */ .hesapYanListe .hesapKartIc { padding: 10px 12px; gap: 10px; } .hesapYanListe .hesapSimge { width: 34px; height: 34px; font-size: 16px; } .hesapYanListe .hesapKartAd { font-size: 14px; } /* --- Araç ---------------------------------------------------------------- */ .hesapArac { padding: 20px; border: 1px solid var(--cizgi); border-radius: var(--kose); background: var(--zemin-soluk); } .hesapAlanlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; } .hesapAlan label { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; color: var(--murekkep); } .hesapOlcu { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--metin-soluk); } .hesapAlan input, .hesapAlan select { width: 100%; padding: 11px 12px; border: 1px solid var(--cizgi); border-radius: var(--kose-kucuk); background: var(--zemin); color: var(--metin); font-family: inherit; font-size: 15px; } .hesapAlan input:focus, .hesapAlan select:focus { outline: 2px solid var(--vurgu); outline-offset: 1px; border-color: var(--vurgu); } .hesapDugmeler { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } /* * İKİNCİL DÜĞME. * * Temanın `.dugme` kuralı zaten dolu bir düğme (turkuaz zemin + beyaz * yazı). Yalnızca zemini beyaza çekmek yazıyı beyaz bırakıyordu ve * düğme BOŞ görünüyordu — ekran görüntüsünde yakalandı. Metin rengi de * birlikte değişmeli. * * "Temizle" bilerek silik: yanındaki "Hesapla" asıl eylem, ikisi aynı * ağırlıkta olsaydı hangisine basılacağı bir an düşündürürdü. */ .hesapTemizle, .hesapTemizle:hover { background: var(--zemin); color: var(--metin); box-shadow: inset 0 0 0 1px var(--cizgi); } .hesapTemizle:hover { color: var(--murekkep); box-shadow: inset 0 0 0 1px var(--vurgu); } /* --- Sonuç --------------------------------------------------------------- */ /* * `` varsayılan olarak satır içi; ızgara olması için açıkça * bildiriliyor. `[hidden]` bir tarayıcı kuralı ve bu bildirim onu * yenerdi — bu yüzden gizlilik ayrıca `[hidden]` ile geri alınıyor. */ .hesapSonuc { display: grid; gap: 8px; margin-top: 18px; padding: 18px; border-radius: var(--kose); border: 1px solid var(--cizgi); border-inline-start: 4px solid var(--vurgu); background: var(--zemin); text-align: start; } .hesapSonuc[hidden] { display: none; } .hesapBaslik { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--metin-soluk); } .hesapDeger { font-size: 30px; line-height: 1.15; color: var(--murekkep); } /* * SINIF YAZISININ RENGİ SONUCU TEKRARLIYOR. * * "Obezite (1. derece)" marka turkuazıyla basıldığında "her şey yolunda" * gibi okunuyordu (ekran görüntüsünde yakalandı). Renk tek başına bilgi * taşımıyor — sınıfın adı zaten yazıyor — ama yanlış yöne işaret * etmemeli. */ .hesapEk { font-size: 15px; font-weight: 600; color: var(--vurgu); } .hesap-iyi .hesapEk { color: #15653c; } .hesap-orta .hesapEk { color: #8a5c0a; } .hesap-dikkat .hesapEk { color: #8c2f26; } .hesapSatir { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding-top: 8px; border-top: 1px solid var(--cizgi); font-size: 14px; color: var(--metin); } .hesapSatir strong { color: var(--murekkep); } .hesapNot { font-size: 12.5px; line-height: 1.5; color: var(--metin-soluk); } .hesapUyari { font-size: 14.5px; color: var(--murekkep); } /* * SONUCUN RENGİ BİLGİ VERİYOR AMA TEK BAŞINA DEĞİL. * * Sınıf adı sonucun metninde de yazıyor ("Fazla kilolu"); renk yalnızca * pekiştiriyor. Renk körü bir ziyaretçi ya da gri basılmış bir çıktıda * bilgi kaybolmuyor. */ .hesapSonuc.hesap-iyi { border-inline-start-color: #15653c; } .hesapSonuc.hesap-orta { border-inline-start-color: #a8730f; } .hesapSonuc.hesap-dikkat { border-inline-start-color: #8c2f26; } .hesapSonuc.hesap-hata { border-inline-start-color: #8c2f26; background: #fdf6f5; } /* --- Gizlilik ve sorumluluk notları -------------------------------------- */ .hesapGizlilik { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 0; padding: 12px 14px; border-radius: var(--kose-kucuk); background: var(--zemin-soluk); font-size: 13.5px; line-height: 1.55; color: var(--metin); } .hesapGizlilik i { flex: none; margin-top: 2px; color: var(--vurgu); font-size: 16px; } .hesapUyariKutu { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--cizgi); border-radius: var(--kose-kucuk); border-inline-start: 4px solid var(--metin-soluk); background: var(--zemin); } .hesapUyariKutu strong { display: block; margin-bottom: 6px; font-size: 13.5px; color: var(--murekkep); } .hesapUyariKutu p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--metin-soluk); } .hesapBirimBag { margin-top: 18px; } @media (max-width: 560px) { /* Dar ekranda tek sütun: 190px'lik iki kutu yan yana sıkışıyordu. */ .hesapAlanlar { grid-template-columns: 1fr; } .hesapDugmeler .dugme { flex: 1; justify-content: center; } .hesapDeger { font-size: 26px; } } /* ============================================================================= BEKLEME GÖSTERGESİ ============================================================================= Kullanıcı isteği: "bir şey açmaya çalışırken bekleme oluyor; ekranda kalp grafiği gibi bir şey göstersek sistemin loading ettiğini anlar, aksi takdirde ölü link düşünebilir." ========================================================================== */ .yuklemeKatmani { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; /* * `[hidden]` bir TARAYICI kuralı ve buradaki `display` onu yenerdi — * gösterge kapalıyken de ekranı kaplardı. Bir kez düşülen tuzak. */ } .yuklemeKatmani[hidden] { display: none; } /* * TIKLAMA GEÇMİYOR. * * Katman ekranı kapladığı için altındaki bağlantılar tıklanamaz olurdu; * yeni sayfa gelene kadar geçen bir saniyede ziyaretçi başka bir şeye * basmak isterse engellenmemeli. Kutunun kendisi de tıklanacak bir şey * taşımıyor. */ .yuklemeKatmani, .yuklemeKutu, .yuklemeCubuk { pointer-events: none; } /* --- Kalp atışı (EKG) --------------------------------------------------- */ .yukleme-kalp { background: rgba(18, 48, 58, .28); } .yuklemeKutu { display: grid; justify-items: center; gap: 6px; padding: 22px 30px 18px; border-radius: var(--kose); background: var(--zemin); box-shadow: 0 18px 44px rgba(18, 48, 58, .22); /* Katman bir anda belirince sıçrama gibi duruyordu; kısa bir giriş. */ animation: yuklemeGir .18s ease-out; } @keyframes yuklemeGir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .ekg { display: block; width: 190px; height: 40px; } .ekgIz { fill: none; stroke: var(--vurgu); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; /* * Çizgi kesik kesik boyanıp kaydırılıyor: nabız ekranda soldan sağa * "çiziliyormuş" gibi görünüyor. Uzunluk yolun gerçek uzunluğundan * büyük tutuldu ki tek bir iz aksın, tekrar eden nokta dizisi değil. */ stroke-dasharray: 90 400; animation: ekgAk 1.4s linear infinite; } @keyframes ekgAk { from { stroke-dashoffset: 490; } to { stroke-dashoffset: 0; } } .yuklemeYazi { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--metin-soluk); } /* --- İnce çubuk --------------------------------------------------------- */ .yukleme-cizgi { align-items: flex-start; justify-content: stretch; background: none; } .yuklemeCubuk { position: relative; overflow: hidden; width: 100%; height: 3px; background: rgba(14, 124, 134, .18); } .yuklemeDolgu { position: absolute; inset-block: 0; /* Mantıksal özellik: Arapçada çubuk sağdan sola akıyor. */ inset-inline-start: 0; width: 40%; background: var(--vurgu); animation: yuklemeKay 1.1s ease-in-out infinite; } @keyframes yuklemeKay { from { transform: translateX(-100%); } to { transform: translateX(350%); } } [dir="rtl"] .yuklemeDolgu { animation-name: yuklemeKayRtl; } @keyframes yuklemeKayRtl { from { transform: translateX(100%); } to { transform: translateX(-350%); } } /* * HAREKET AZALTILMIŞSA ÇİZGİ OYNAMIYOR. * * Sürekli yinelenen hareket vestibüler rahatsızlığı olan ziyaretçide * baş dönmesi yapabiliyor. Gösterge büsbütün kaldırılmıyor — asıl iş * "sistem çalışıyor" demek; duran bir çizgi ve yazı bunu söylüyor. */ @media (prefers-reduced-motion: reduce) { .ekgIz { animation: none; stroke-dasharray: none; } .yuklemeDolgu { animation: none; width: 100%; } .yuklemeKutu { animation: none; } } /* --- Nöbetçi eczane bandı (seçenek D) ------------------------------------ * * Kullanıcı isteği: "sitede yeşil fazla; acaba eczane kırmızıyla * yakıştırılır. Koyu bir kırmızı ya da vişne çürüğü gibi bu yeşile * uyacak bir kırmızı mı kullansak bu bölgede." * * DÖRT SEÇENEK GÖSTERİLDİ, D SEÇİLDİ: açık vişne çürüğü zemin. * Boydan boya KOYU bordo şerit (C) da denenmişti; hızlı işlem çubuğu * artık koyu bordo olduğu için ikisi sayfada birbiriyle yarışıyordu. * Açık zemin bölümü ayırmaya yetiyor, vurguyu çubuğa bırakıyor. * * YENİ BİR RENK EKLENMİYOR. Vurgu, hızlı işlem kutusunun `--hizli-vurgu` * değeriyle aynı; sitede üçüncü bir kırmızı olsaydı hangisinin ne * anlama geldiği belirsizleşirdi. Zemin o rengin çok açık bir tonu. * * SİNYAL KIRMIZISI DEĞİL: eczane bilgisi acil uyarı değil, hizmet. */ :root { /* #7d2233'ün beyazla açılmış hâli; ölçüldü, kart beyazından ayrışıyor. */ --eczane-zemin: #fbf2f4; } .eczaneBolum { background: var(--eczane-zemin); } /* * Başlık ve kartlar zeminden ayrışsın diye ince bir çizgi; bölüm * komşularıyla aynı beyaz zemine oturmadığı için kenarı belli olmalı. */ .eczaneBolum { border-block: 1px solid #f0dfe3; } /* * SİMGE KUTUSU BEYAZA ÇEKİLİYOR. Varsayılanı `--zemin-soluk` (açık * turkuaz-gri) ve bordo zeminin üstünde kirli bir leke gibi duruyordu. */ .eczaneBolum .eczaneSimge { background: #fff; color: var(--hizli-vurgu); } .eczaneBolum .eczaneIlce { color: var(--hizli-vurgu); } .eczaneBolum .eczanePencere { background: #fff; } .eczaneBolum .eczaneKart { border-color: #f0dfe3; } .eczaneBolum .eczaneHarita:hover { border-color: var(--hizli-vurgu); color: var(--hizli-vurgu); } .eczaneBolum .dugme { background: var(--hizli-vurgu); border-color: var(--hizli-vurgu); } .eczaneBolum .dugme:hover { background: var(--hizli-acik); border-color: var(--hizli-acik); } /* * VURGU KARTI DA BORDO. Turkuaz kalsaydı bandın içinde tek başına * yeşil bir kutu olur, "bu neden farklı" sorusunu doğururdu. */ .eczaneBolum .eczaneVurgu .eczaneKart { border-color: var(--hizli-vurgu); background: linear-gradient(135deg, #6a1b2b, var(--hizli-vurgu)); } .eczaneBolum .eczaneVurgu .eczaneSimge { background: rgb(255 255 255 / .16); color: #fff; } /* * VURGU KARTININ İÇİNDE İLÇE ETİKETİ BEYAZ KALMALI. * * Üstteki `.eczaneBolum .eczaneIlce` kuralıyla `.eczaneVurgu .eczaneIlce` * AYNI ÖZGÜLLÜKTE (0,2,0); bandınki dosyada sonra geldiği için kazanıyor * ve "ANAMUR" bordo kartın üstünde bordo basılıyordu — ekran * görüntüsünde yakalandı, okunmuyordu. Üç sınıflı kural ikisini de * geçiyor. */ .eczaneBolum .eczaneVurgu .eczaneIlce { color: rgb(255 255 255 / .85); } .eczaneBolum .eczaneVurgu .dugme, .eczaneBolum .eczaneVurgu .dugme:hover { background: #fff; color: var(--hizli-vurgu); border-color: #fff; } /* * Bölümün "Tümünü gör" bağlantısı ve alt düğmesi de bandın rengine * uyuyor; marka turkuazı bandın içinde yabancı duruyordu. */ .eczaneBolum .bolumTumu { color: var(--hizli-vurgu); } /* --- Renkli hesaplayıcı kartları ve ana sayfa bandı ---------------------- * * Kullanıcı isteği: "Medipol'deki gibi her kutunun renkli olmasını * istiyorum; zira bizim site hep yeşil oldu. Ayrıca eczanedeki gibi * zemine de bant şeklinde bir renk koyalım." * * RENK SINIFTAN DEĞİL, SATIR İÇİ ÖZEL DEĞİŞKENDEN. On beş modülün her * biri için ayrı sınıf yazmak yeni hesaplayıcıda iki dosya değiştirmek * demekti; renk artık tanımın yanında duruyor (hesaplayici.php). * Değişken gelmezse marka rengine düşüyor — kart renksiz kalmıyor. */ .hesapKart { --kartRenk: var(--vurgu); --kartZemin: var(--zemin-soluk); --kartKoyu: var(--vurgu); } /* * SİMGE DAİRESİ DOLU CANLI RENK, SİMGE BEYAZ. * * Kullanıcı sözü: "bizdeki hâlâ soluk renkler gibi." Haklıydı: renk * yalnızca açık bir zeminde ve metinde duruyordu, hiçbir yerde doygun * hâliyle görünmüyordu. Dolu daire rengin kendisini gösteriyor; * kartın geri kalanı sakin kalabildiği için sayfa da boğulmuyor. * * Beyaz simgenin dolu renk üstündeki kontrastı ayrıca ölçülüyor * (grafik öğe sınırı 3:1). */ .hesapSimge { background: var(--kartRenk); color: #fff; } /* * KARTIN İÇİ KENDİ RENGİNİN AÇIK TONU. * * Üç seçenek denendi ve kullanıcı bunu seçti: (A) beyaz kart + yan * renk şeridi, (B) açık renkli zemin, (C) dolu renk + beyaz yazı. * A'da renk fark edilmiyordu; C on beş doygun kutuyla ana sayfayı * boya kartelasına çeviriyordu. * * Zemin sunucuda üretiliyor (bkz. hesaplayici_zemini): %91 beyaz. * Başlık kartın kendi renginde, açıklama koyu gri — böylece renk belli * oluyor ama okunan metin kontrastını kaybetmiyor (ölçüldü). */ .hesapKartIc { position: relative; background: var(--kartZemin); border-color: transparent; } /* Başlık rengin KOYU tonunda: canlı ton metin olarak okunmuyordu. */ .hesapKartAd { color: var(--kartKoyu); } /* * SİMGE DAİRESİ BEYAZ. Zemin artık renkli olduğu için dairenin de * renkli olması ikisini birbirine karıştırıyordu; beyaz daire simgeyi * öne çıkarıyor. */ a.hesapKartIc:hover { border-color: var(--kartRenk); } a.hesapKartIc:focus-visible { outline-color: var(--kartRenk); } .hesapKartIc:hover .hesapOk { color: var(--kartRenk); } /* * ZEMİN BANDI YOK — KULLANICI KARARI. * * Beş bant tonu denendi (kurşuni, açık nötr, sıcak kum, kırık beyaz, * beyaz) ve kullanıcı bandı hiç istemedi. Sebebi ölçümde de görünüyordu: * bant açıldıkça kartların açık renkli zeminleri içinde eriyor, * koyulaştıkça da sayfanın geri kalanından kopuyordu. * * Bölüm artık öteki bölümlerle aynı beyaz zeminde; kartları ayıran şey * kendi renkleri. Sınıf duruyor — ileride bir bant istenirse tek * yerden açılabilsin. * * Nöbetçi eczanenin vişne çürüğü bandı YERİNDE: orada tek bir konu var * ve bant onu ayırmaya yarıyor. Burada on altı ayrı renk zaten ayırıyor. */ .hesapBolum { background: none; } /* --- Yeni sonuç öğeleri --------------------------------------------- */ /* * UYARI KUTUSU. Aşı takvimi ve kan grubu kalıtımı yanlış okunmaya açık * sonuçlar veriyor; notları sıradan bir dipnot olarak basmak yetmezdi. */ .hesapDikkat { display: block; margin-block-start: 4px; padding: 10px 12px; border-radius: var(--kose-kucuk); border-inline-start: 3px solid #a8730f; background: #fdf8ec; font-size: 12.5px; line-height: 1.55; color: var(--metin); } .hesapListeKutu { display: grid; gap: 2px; margin-block: 4px; } .hesapListeSatir { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 8px 10px; border-radius: 6px; background: var(--zemin-soluk); font-size: 13.5px; } .hesapListeSol { min-inline-size: 0; } .hesapListeSag { font-variant-numeric: tabular-nums; color: var(--metin-soluk); } .hesapDoz, .hesapAy { font-size: 11.5px; color: var(--metin-soluk); } .hesapAy { white-space: nowrap; } /* * AŞI SATIRLARININ DURUMU. Renk tek başına bilgi taşımıyor — tarih her * satırda yazıyor; renk yalnızca gözün hızlıca "nerede kaldık" * sorusunu cevaplaması için. */ .hesapListeSatir.hl-gecti { opacity: .55; } .hesapListeSatir.hl-simdi { background: #eef7f1; box-shadow: inset 3px 0 0 #15653c; } .hesapListeSatir.hl-sirada { background: var(--zemin-soluk); } [dir="rtl"] .hesapListeSatir.hl-simdi { box-shadow: inset -3px 0 0 #15653c; } /* --- Kare kutu görünümü -------------------------------------------------- * * Kullanıcı isteği: "hesaplayıcı görünümlerine kare kutular koysak * görünüm daha farklı olabilir." * * Simge üstte, ad altta, açıklama yok. `aspect-ratio` kutuları gerçekten * kare tutuyor; içerik uzunluğuna göre boy değişseydi ızgara dalgalanır * ve "kare" iddiası kalmazdı. */ /* * SÜTUN SAYISI SABİT, `auto-fill` DEĞİL. * * Kullanıcı isteği: "16 kutu olur, 4x4 olarak gösteririz, kutular * azıcık büyür, aralarını da biraz daha açarız." * * `auto-fill minmax()` sütun sayısını ekran genişliğine bırakıyordu ve * geniş ekranda 5 sütuna çıkıp son satırı tek kutuyla bırakıyordu. * Sabit sütunla 16 modül tam 4x4 oturuyor. * * Mobilden başlanıyor: dar ekranda 2, orta ekranda 3, geniş ekranda 4. */ .hesapKareler { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; } /* * KUTUYA GENİŞLİK TAVANI + IZGARA ORTALI. * * Kullanıcı isteği: "karelerin boyutunu azıcık daha küçültsek boşluklar * biraz daha artar." * * Sütunlar `1fr` iken kutular kapsayıcıyı tamamen dolduruyordu ve * küçültmenin tek yolu boşluğu büyütmekti — boşluk büyüdükçe kutu da * aynı oranda küçülüyor, kazanç az oluyordu. `minmax(0, …)` ile tavan * konunca kutu sabit kalıyor, artan yer ızgaranın iki yanına dağılıyor * ve düzen ferahlıyor. */ @media (min-width: 680px) { .hesapKareler { grid-template-columns: repeat(3, minmax(0, 225px)); justify-content: center; gap: 26px; } } @media (min-width: 1000px) { /* 16 modül burada tam dört satır. */ .hesapKareler { grid-template-columns: repeat(4, minmax(0, 225px)); gap: 30px; } } .hesapKareler .hesapKartIc { flex-direction: column; align-items: center; justify-content: center; gap: 12px; /* * Kare, ama çok dar ekranda kendini zorlamıyor: `min-block-size` ile * birlikte içerik taşarsa kutu uzayabiliyor. */ aspect-ratio: 1; min-block-size: 170px; padding: 22px 18px; text-align: center; } .hesapKareler .hesapSimge { /* * Daire büyütüldü: rengin doygun hâli kartta ne kadar yer kaplarsa * düzen o kadar canlı okunuyor. Kullanıcı iki kez "hâlâ silik soluk" * dedikten sonra 52px'ten 64px'e çıkarıldı. */ inline-size: 64px; block-size: 64px; font-size: 29px; } .hesapKareler .hesapKartGovde { flex: none; } .hesapKareler .hesapKartAd { font-size: 14.5px; line-height: 1.32; } /* * AÇIKLAMA İKİ SATIRDA KIRPILIYOR. * * Açıklamalar bir ile üç satır arasında değişiyor; kırpılmasaydı kimi * kutu taşar, `aspect-ratio` bozulur ve "kare" iddiası kalmazdı. * Kırpma GÖRSEL: metnin tamamı belgede duruyor, ekran okuyucu hepsini * okuyor ve kartın gittiği sayfada zaten tam hâli var. */ .hesapKareler .hesapKartOzet { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin-block-start: 5px; font-size: 12.5px; line-height: 1.4; } /* Ok kare kutuda basılmıyor: kutunun tamamı zaten bir bağlantı. */ .hesapKareler .hesapOk { display: none; } @media (max-width: 560px) { .hesapKareler .hesapKartIc { min-block-size: 150px; padding: 14px 10px; } .hesapKareler .hesapSimge { inline-size: 44px; block-size: 44px; font-size: 20px; } .hesapKareler .hesapKartAd { font-size: 13px; } /* Telefonda kare dar; üç satır metin taşırdı. */ .hesapKareler .hesapKartOzet { font-size: 11.5px; -webkit-line-clamp: 2; line-clamp: 2; } } /* * DIŞ KAYNAK KUTUSU. * * Sorumluluk uyarısından ayrı duruyor: o bir uyarı, bu bir yönlendirme. * İkisi aynı görünseydi ziyaretçi ikincisini de uyarı sanıp atlardı. */ .hesapKaynak { margin-block-start: 18px; padding: 16px 18px; border: 1px solid var(--cizgi); border-radius: var(--kose); background: var(--zemin-soluk); } .hesapKaynak strong { display: block; margin-block-end: 6px; color: var(--murekkep); font-size: 14.5px; } .hesapKaynak p { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--metin); } /* --- Duyurular, haberler ve basında biz --------------------------------- */ .duyuruIzgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } .duyuruKart { margin: 0; } .duyuruKartIc { display: flex; flex-direction: column; block-size: 100%; border: 1px solid var(--cizgi); border-radius: var(--kose); background: var(--zemin); color: inherit; text-decoration: none; overflow: hidden; transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis); } a.duyuruKartIc:hover { border-color: var(--vurgu); box-shadow: 0 6px 18px rgb(18 48 58 / .09); transform: translateY(-2px); } a.duyuruKartIc:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 3px; } /* * GÖRSEL ALANI HER KARTTA AYNI YÜKSEKLİKTE. Oranı serbest bırakılsaydı * kartlar farklı boyda çıkar, ızgara dalgalanırdı (eczane kartlarında * düğme hizası için öğrenilen şeyin aynısı). */ .duyuruGorsel { position: relative; display: block; block-size: 170px; background: var(--zemin-soluk); overflow: hidden; } .duyuruResim { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } /* Görseli olmayan kartta türün simgesi. */ .duyuruSimge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--vurgu); font-size: 40px; opacity: .55; } .duyuruGovde { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; } .duyuruUst { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-block-end: 8px; } .duyuruTur { padding: 2px 9px; border-radius: 999px; background: var(--zemin-soluk); color: var(--vurgu); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .duyuruTarih { font-size: 12.5px; color: var(--metin-soluk); } .duyuruBaslik { display: block; font-size: 16px; line-height: 1.35; color: var(--murekkep); } .duyuruOzet { display: block; margin-block-start: 8px; font-size: 13.5px; line-height: 1.5; color: var(--metin-soluk); } /* Dışa açılan kart nereye gittiğini söylüyor; sessiz yönlendirme şaşırtır. */ .duyuruKaynak { display: inline-flex; align-items: center; gap: 6px; margin-block-start: auto; padding-block-start: 12px; font-size: 12.5px; color: var(--vurgu); } /* Şeritte kart genişliği sabit: akış hızı bu ölçüye göre hesaplanıyor. */ .duyuruSerit .duyuruKart { inline-size: 300px; flex: none; } /* --- Tek duyuru sayfası --- */ .duyuruEtiket { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-block: 0 18px; font-size: 13.5px; color: var(--metin-soluk); } .duyuruKaynakBag { margin-block-start: 24px; } .duyuruKaynakYazi { margin-block-start: 24px; padding: 12px 14px; border-radius: var(--kose-kucuk); background: var(--zemin-soluk); font-size: 13.5px; } @media (max-width: 560px) { .duyuruGorsel { block-size: 150px; } } /* * HESAPLAYICILAR BANDI — DAR EKRANDA SAĞA YASLI. * * Bant dar ekranda YATAY kırpıyor ve ortadan kesiyor. Bu bölümün * kapağındaki çizim sağ tarafta duruyor (x %58–90 arası); ortadan * kesilince telefonda bant düz turkuaz bir bloğa dönüyordu — ölçüldü, * 390px'te görselin yalnızca x %22–78 aralığı görünüyor. * * `100% center` sağ kenarı sabitliyor, yani en sağdaki %56 görünüyor * (x %44–100) ve çizimin tamamı kadraja giriyor. * * KURAL YALNIZCA BU BÖLÜME BAĞLI. Öteki sayfaların kapaklarında çizim * başka yerde olabilir; hepsini birden sağa kaydırmak onları bozardı. * Aynı gerekçeyle yazı bandında da ayrı bir kural var. * * `!important` gerekli: yatay konum satır içi `style` ile geliyor * (dikey kadraj panelden seçiliyor) ve satır içi stil normalde kazanır. */ @media (max-width: 600px) { .bant-hesaplayici .bandiResim { object-position: 100% center !important; } } /* * SAĞLIK KÖŞESİ LİSTE BANDI — AYNI GEREKÇE. * * Liste sayfası artık bölümün ortak kapağını basıyor (`saglik_kapagi()`), * yani yazıların bandındaki görselin aynısını. O çizim de sağda duruyor * (kitap ve yapraklar x %70–95 arası), dolayısıyla dar ekranda ortadan * kesilince tamamı kadrajın dışında kalıyordu. * * Yazı bandında bu düzeltme `.yaziBandi` ile zaten vardı; liste sayfası * o sınıfı taşımadığı için kural ona uygulanmıyordu. Aynı görsel, aynı * sorun, aynı çözüm. */ @media (max-width: 600px) { .bant-saglik .bandiResim { object-position: 100% center !important; } } /* * DAR EKRANDA FİLTRE DİKEY ÇEVRİLDİ, SONRA GERİ ALINDI — ÖLÇÜM YÜZÜNDEN. * * Fikir şuydu: filtre soldan sağa karartıyor, dar ekranda yazı bandın * tamamını kapladığı için çizimi de yutuyor; geçişi yukarıdan aşağıya * çevirirsek alt bölüm açılır ve çizim görünür. * * Denendi ve ÖLÇÜLDÜ: metin gizlenip zemin örneklendiğinde bandın alt * kısmında beyaz metnin kontrastı 4,35:1 ve 3,59:1'e düşüyordu (sınır * 4,5:1). Özet metni tam o bölgeye geliyor. Bir hastane sitesinde * okunabilirliği görsellik için feda etmek yanlış olurdu. * * Yatay geçiş duruyor. Dar ekranda kapak silik bir doku olarak kalıyor; * bu bilinçli bir kabul, eksiklik değil. */ /* ============================================================================= KAYDIRAK — kart kart kayan şerit ============================================================================= Kullanıcı isteği: "soldan sağa kaymayı kart kart yapsak; bir er kart sola kayıyor her seferinde." SÜREKLİ AKAN ŞERİTTEN (`.akanSerit`) FARKI DURAKLARI: kart kayıp gitmiyor, durup bekliyor. Kaydırma tarayıcının kendi kaydırması — betik kapalıyken de parmakla ve klavyeyle geziliyor. ========================================================================== */ .kaydirak { position: relative; display: flex; align-items: center; gap: 6px; } .kaydirakPencere { flex: 1; min-inline-size: 0; overflow-x: auto; overflow-y: hidden; /* * DURAKLAR. Elle kaydıran ziyaretçi yarım kartla kalmasın diye her * kart bir durağa oturuyor. `proximity` değil `mandatory`: kullanıcı * isteği "bir er kart kaysın", yani ara konum olmamalı. */ scroll-snap-type: inline mandatory; scroll-behavior: smooth; /* Kaydırma çubuğu gizleniyor; gezinme oklarla ve parmakla. */ scrollbar-width: none; /* Odak halkası kartların üstüne taşmasın. */ border-radius: var(--kose); } .kaydirakPencere::-webkit-scrollbar { display: none; } .kaydirakPencere:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; } .kaydirakSira { display: flex; gap: 14px; margin: 0; padding: 4px 0; list-style: none; } .kaydirakSira > * { flex: none; scroll-snap-align: start; } /* --- Oklar --------------------------------------------------------------- */ .kaydirakOk { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: 40px; block-size: 40px; border: 1px solid var(--cizgi); border-radius: 50%; background: var(--zemin); color: var(--murekkep); font-size: 18px; cursor: pointer; transition: border-color var(--gecis), color var(--gecis), opacity var(--gecis); } .kaydirakOk:hover { border-color: var(--vurgu); color: var(--vurgu); } .kaydirakOk:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; } /* * Sondaki ok SÖNÜK ama SEKME SIRASINDA KALIYOR (`disabled` değil). * `disabled` düğmeyi odaktan düşürüyor ve klavyeyle gezen kişi nerede * olduğunu şaşırıyor. */ .kaydirakOk.kaydirakSonik { opacity: .35; cursor: default; } .kaydirakOk.kaydirakSonik:hover { border-color: var(--cizgi); color: var(--murekkep); } /* Kaydırılacak yer yoksa oklar hiç görünmesin. */ .kaydirakTek .kaydirakOk { display: none; } /* * RTL'de oklar kendiliğinden yer değiştiriyor (flex yönü) ama simgeler * sabit çizim; yansıtılıyorlar. */ [dir="rtl"] .kaydirakOk i { transform: scaleX(-1); } @media (max-width: 700px) { /* * Telefonda oklar kalkıyor: parmakla kaydırmak zaten doğal yol ve * iki düğme dar ekranda kartlardan yer çalıyor. */ .kaydirak .kaydirakOk { display: none; } .kaydirakSira { gap: 10px; } } /* ============================================================================= SAYFA ALTI — zemin tonları ve kurum logoları ============================================================================= Kullanıcı isteği: "aşağıdaki footer'ın arka plan rengini de belirginleştirelim. Bir de buraya anlaşmalı kurumları ekleyelim. Burayı da dinamik hale getirmeye çalışalım admin panelde." Ton panelden seçiliyor; sınıf beyaz listeden geçiyor (bkz. site-alt.php). ========================================================================== */ /* * AÇIK TONLAR. Varsayılan `soluk` sayfanın beyazına çok yakındı ve * altbilgi ayrı bir alan gibi durmuyordu; `gri` belirgin bir sınır * çiziyor. */ .alt-gri { background: #e9edf1; border-block-start-color: #dce3e9; } /* * KOYU TONLAR — yazılar beyaza dönüyor. * * Renkler TEK TEK değil, değişkenler üzerinden çevriliyor: altbilgide * bağlantı, başlık, silik yazı ve simge ayrı renkler kullanıyor ve * hepsini elle saymak biri unutulunca okunmaz bir satır bırakırdı. */ .alt-koyu, .alt-marka { color: rgb(255 255 255 / .82); border-block-start-color: transparent; } .alt-koyu { background: #12303a; } .alt-marka { background: #0a5c64; } .alt-koyu .altMarka, .alt-marka .altMarka, .alt-koyu .altBaslik, .alt-marka .altBaslik { color: #fff; } .alt-koyu .altAdres, .alt-marka .altAdres, .alt-koyu .altSlogan, .alt-marka .altSlogan, .alt-koyu .altKucuk, .alt-marka .altKucuk, .alt-koyu .altGuncelleme, .alt-marka .altGuncelleme { color: rgb(255 255 255 / .72); } .alt-koyu a, .alt-marka a { color: #fff; } .alt-koyu .altBag, .alt-marka .altBag { color: rgb(255 255 255 / .9); } /* * SOSYAL SİMGELER BEYAZ ÜSTÜNE BEYAZ KALIYORDU. * * Temel kural zemini `var(--zemin)` yani BEYAZ veriyor; koyu altbilgide * yalnızca yazı rengini beyaza çevirince daire beyaz, simge beyaz oldu * ve hiçbir şey görünmedi — ekran görüntüsünde yakalandı. Zemin de * saydama çekiliyor. */ .alt-koyu .altSosyal a, .alt-marka .altSosyal a { background: transparent; /* * KENARLIK %28'DEN %55'E. Ölçüldü: %28 beyaz koyu zeminde 2,44:1 ve * marka zemininde 1,97:1; %45'e çıkarınca marka zemini hâlâ 2,85:1'de * kalıyordu. %55 ikisini de geçiriyor. Sınır 3:1 (WCAG 1.4.11): * daire olduğunu gösteren tek işaret bu çizgi, seçilmezse düğme de yok. */ border-color: rgb(255 255 255 / .45); color: #fff; } .alt-koyu .altSosyal a:hover, .alt-marka .altSosyal a:hover { border-color: #fff; background: rgb(255 255 255 / .1); } .alt-koyu .altSatir, .alt-marka .altSatir { border-block-start-color: rgb(255 255 255 / .16); } /* * HASTANE LOGOSU DA KOYU ZEMİNDE KAYBOLUYORDU. * * Logo koyu çizimli ve beyaz zemin için yapılmış; koyu altbilgide * neredeyse görünmez oluyordu (ekran görüntüsünde yakalandı). Ayrı bir * "beyaz logo" ayarı eklemek yerine logo kendi beyaz kutusuna alınıyor — * kurum logolarında da aynı çözüm kullanılıyor ve panelde ikinci bir * dosya yüklemek gerekmiyor. */ .alt-koyu .altLogo, .alt-marka .altLogo { background: #fff; padding: 10px 14px; border-radius: var(--kose-kucuk); box-sizing: content-box; } /* --- Anlaşmalı kurumlar bağlantısı --------------------------------------- */ /* * TEK SATIR, TEK BAĞLANTI — sayfanın adı. * * Buraya önce kayan logo şeridi, sonra sabit logo ızgarası konmuştu; * ikisi de istenmemişti. Logolar ana sayfadaki kurumlar bloğunda zaten * var, altbilgide tekrarlamak ziyaretçinin asıl aradığı telefon ve * adresin önüne geçiyordu. */ .altKurumBag { margin-block: 4px 22px; padding-block-start: 18px; border-block-start: 1px solid var(--cizgi); font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; } .alt-koyu .altKurumBag, .alt-marka .altKurumBag { border-block-start-color: rgb(255 255 255 / .16); } /* * AÇIK TONLARDA GÖVDE METNİ VE BAĞLANTI KOYULAŞTIRILDI. * * Ölçüldü: altbilginin gövde metni `--metin-soluk` (#6b777c) ile * varsayılan zeminde 4,31:1, kurşuni zeminde 3,92:1 veriyordu; sınır * 4,5:1. Marka turkuazı bağlantı da kurşuni zeminde 4,20:1'e düşüyordu. * * Altbilgi sitenin en küçük puntolu yeri; "silik dursun" diye başlamıştı * ama silikliğin bedeli okunmamak olmamalı. Tonlar bir kademe * koyulaştırıldı, hiyerarşi bozulmadı. * * ────────────────────────────────────────────────────────────────────── * KURAL AÇIK TONLARA BAĞLI — `.alt`e DEĞİL * ────────────────────────────────────────────────────────────────────── * * Burada `.alt { color: #5a666c }` yazıyordu ve yukarıdaki * `.alt-koyu, .alt-marka { color: beyaz }` kuralını EZİYORDU: ikisi de * tek sınıf seçici, dosyada sonra gelen kazanıyor. * * Sonuç, kendi ton karşılığı olmayan her öğenin koyu zeminde soluk gri * kalmasıydı. Ölçüldü — telif satırı koyu tonda 2,35:1, marka tonunda * 1,30:1. Kendi karşılığı olan öğeler (adres, liste) iki sınıflı * seçicilerle kurtuluyordu, yani kusur yalnızca sınıfsız metinlerde * görünüyordu ve gözden kaçması kolaydı. * * Kuralı açık tonlara bağlamak kökten çözüyor: ileride altbilgiye * eklenecek sınıfsız bir metin de doğru rengi alacak. */ .alt-soluk, .alt-gri { color: #5a666c; } .alt-soluk .altBag, .alt-gri .altBag, .alt-soluk a, .alt-gri a { color: var(--vurgu-koyu, #0a5c64); }