/* ============================================================ Star Medica — Doktor Kartı ("rich" varyant) Bilgiler görselin ALTINDA HTML olarak durur → data-i18n ile çevrilebilir. Metni görsele gömülü eski fotoğraflar bu varyanta GEÇMEZ (clean_photo bayrağı). Kullanan sayfalar: - /doktorlar/index.php (sunucu tarafında render) - /bolumler/*.html (assets/js/dept-doctors.js ile render) Bilerek Tailwind'den bağımsız: derlenmiş tailwind.css purge'lü ve PHP/JS'ten gelen sınıfları içermiyor (bkz. LOG: dhs-style / dm-* deseni). Bu dosya .htaccess ile 1 yıl cache'lenir → DEĞİŞTİRİRSEN ?v=N ARTIR. Referanslar: doktorlar/index.php + assets/js/dept-doctors.js ============================================================ */ /* Eski kartlar sabit oranlı (3/4) — grid stretch'i onlarda alt boşluk yaratır, o yüzden yukarı hizalanırlar. Rich kartlar stretch olsun ki aynı satırdaki isimler 1 veya 2 satıra sarsa bile butonlar aynı hizada kalsın. */ .doc-card:not(.doc-card--rich) { align-self: start; } .doc-card--rich { background: #fff; display: flex; flex-direction: column; } /* 4/5 — kaynak fotoğrafların oranı (1080x1350). Kırpma olmaz, alttaki logo şeridi tam görünür. */ .dc-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #f0eeea; } .dc-media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); } /* aspect-ratio yoksa (Safari < 15 / iOS < 15) .dc-media 0 yükseklik alır ve fotoğraf hiç görünmez. Eski padding-hack'i yedek olarak veriyoruz. */ @supports not (aspect-ratio: 4 / 5) { .dc-media { height: 0; padding-top: 125%; /* 5/4 */ } .dc-media img { position: absolute; top: 0; left: 0; } } .doc-card--rich:hover .dc-media img { transform: scale(1.06); } .dc-body { display: flex; flex-direction: column; flex: 1; /* kart yüksekliğini doldur → .dc-appt margin-top:auto ile dibe iner */ padding: 18px 18px 20px; } .dc-name { font-weight: 700; font-size: 1rem; line-height: 1.35; color: #001b57; letter-spacing: -0.01em; } .dc-dept { margin-top: 4px; font-size: 0.82rem; line-height: 1.45; color: #6b6d78; } /* Alt ünvan — branşın altında, ondan bir tık daha silik ve küçük ("Medikal Estetik Sertifikalı Hekim" gibi kayıt başına serbest metin) */ .dc-sub { margin-top: 3px; font-size: 0.74rem; line-height: 1.4; color: #8b8d98; } .dc-rule { display: block; width: 36px; height: 3px; margin: 14px 0 16px; border-radius: 2px; background: #001b57; opacity: 0.85; } .dc-appt { margin-top: auto; /* satırdaki tüm kartlarda buton aynı hizada */ display: block; text-align: center; background: #001b57; color: #fff; font-weight: 600; font-size: 0.8rem; padding: 10px 14px; border-radius: 9999px; text-decoration: none; transition: background 0.2s; } .dc-appt:hover { background: #032e84; } /* Bölüm sayfalarında kartlar dar bir kolonda (lg:col-span-3 içinde 4 sütun) */ .dept-doctors-rich .dc-body { padding: 14px 14px 16px; } .dept-doctors-rich .dc-name { font-size: 0.9rem; } .dept-doctors-rich .dc-dept { font-size: 0.75rem; } .dept-doctors-rich .dc-sub { font-size: 0.7rem; } .dept-doctors-rich .dc-rule { margin: 12px 0 14px; } @media (max-width: 640px) { .dc-body { padding: 14px 14px 16px; } .dc-name { font-size: 0.92rem; } .dc-dept { font-size: 0.76rem; } }