/* ============================================================ Akademik tema katmanı — custom.css'in ÜZERİNE yüklenir Palet: lacivert #0C447C / koyu #042C53 / bağlantı #185FA5 Logo mavisi (#378ADD) yalnızca logoda kalır. ============================================================ */ :root { --zc-navy: #0C447C; --zc-navy-dark: #042C53; --zc-link: #185FA5; --zc-light: #E6F1FB; --zc-serif: Georgia, 'Palatino Linotype', 'Times New Roman', serif; /* Gövde yazısı: uygulamalarla aynı (Source Sans 3). Yüklenemezse işletim sisteminin kendi arayüz yazısına düşer. */ --zc-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* ═══════════════════════════════════════════════════════════════════════════ Yazı tipi tutarlılığı — 24.08.2026 Ölçümde sayfada üç ayrı gövde yazısı çıkıyordu. Sebebi temanın yazı listesindeki iki yazım hatasıydı: "BlinkMaxSystemFont" (doğrusu BlinkMacSystemFont) ve "Seoge UI" (doğrusu Segoe UI). Windows'ta Segoe UI hiç eşleşmiyor, sıra Arial'e düşüyordu; Mac'te -apple-system tuttuğu için San Francisco geliyordu. Benim eklediğim bölümler ise Source Sans 3 istiyordu ama yazı hiçbir sayfada yüklenmiyordu. Artık tek kaynak var: gövde --zc-sans, başlıklar --zc-serif. Aşağıdaki kural gövdeyi kurar; başlıkların serif kuralları bundan SONRA geldiği için onlar bozulmaz. Simge yazıları (FontAwesome) dışarıda bırakıldı. ═══════════════════════════════════════════════════════════════════════════ */ body, .ed-element, .ed-text, .ed-text p, .ed-text span, .ed-text li, .ed-text td, .ed-text th, .ed-headline, .ed-menu, .ed-menu a, .ed-button, .button, input, select, textarea, button, table, blockquote { font-family: var(--zc-sans); } /* Menü bağlantıları tema önayarında daha özgül bir kuralla geliyor; ölçümde tek başlarına eski yazıda kalmışlardı. */ .ed-menu a.button, .ed-menu a, a.button { font-family: var(--zc-sans) !important; } /* Simge yazı tipleri kendi ailelerinde kalmalı. */ .ed-icon, .ed-icon *, [class*="fa-"], [class^="icon-"], .zc-rozet svg { font-family: inherit; } /* --- Ana renk: parlak mavi -> lacivert --- */ .bg-primary { background: var(--zc-navy-dark) !important; } /* --- Başlıklar: serifli, lacivert --- */ .ed-headline h1, .ed-headline h2, .ed-headline h3, .ed-text h1, .ed-text h2, .ed-text h3, .ed-text h4 { font-family: var(--zc-serif); letter-spacing: 0.01em; } .ed-headline h1, .ed-headline h2, .ed-headline h3 { color: var(--zc-navy); } /* Sayfa başlığı ortalansın. Editör her sayfaya "#ed-XXXXXXXXX h2 { text-align: center; }" yazıyor, ama başlık

olarak çıktığı için seçici hiç eşleşmiyordu. Kuralı burada bir kez, sınıf üzerinden veriyoruz. */ .ed-headline h1.h2 { text-align: center; } /* --- Menü: hap butonlar yerine düz metin + aktifte alt çizgi --- */ .ed-menu.wv-custom a.button, .ed-element.ed-menu.wv-custom button a.button { background: transparent !important; color: var(--zc-navy) !important; border: none !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; box-shadow: none !important; font-weight: 500; } .ed-menu.wv-custom a.button:hover, .ed-menu.wv-custom a.button.active, .ed-element.ed-menu.wv-custom button a.button:hover, .ed-element.ed-menu.wv-custom button a.button.active { background: transparent !important; color: var(--zc-navy-dark) !important; border-bottom-color: var(--zc-navy-dark) !important; } /* Açılır menüler: beyaz zemin, lacivert bağlantı */ .ed-menu .menu-sub .sub, .ed-menu .sub ul, .ed-menu ul.sub { background: #ffffff !important; border: 1px solid #dfe5ec; box-shadow: 0 4px 14px rgba(4, 44, 83, 0.10); } .ed-menu .sub a, .ed-menu .sub a.button, .ed-menu .menu-sub .menu-level-1 a:not(.button) { color: var(--zc-navy) !important; background: transparent !important; } .ed-menu .sub a:hover, .ed-menu .sub a.button:hover { background: var(--zc-light) !important; color: var(--zc-navy-dark) !important; border-bottom-color: transparent !important; } /* Açılır menüler klavyeyle de açılsın (WCAG 2.1.1, Seviye A). Tema alt menüyü yalnızca ":hover" ile açıyordu; fare kullanamayan ziyaretçi menü altındaki 15 sayfaya hiç ulaşamıyordu. Aşağıdaki kural temanın açma kuralının birebir eşi, yalnızca ":focus-within" ile — aynı özgüllükte ve daha sonra yüklendiği için kapalı durumu yener. */ .ed-element.preset-menu-v2-default .ed-menu .menu-sub:focus-within > .sub > ul, .ed-element.preset-menu-v2-border .ed-menu .menu-sub:focus-within > .sub > ul { visibility: visible; opacity: 1; transform: translate3d(0, 0, 0); pointer-events: all; } /* Klavyeyle gezerken odağın nerede olduğu görünsün. */ .ed-menu a:focus-visible, .ed-menu .sub a:focus-visible, .ed-language a:focus-visible { outline: 2px solid var(--zc-link); outline-offset: 2px; border-radius: 2px; } /* Üst bardaki dil seçici: beyaz kutu yerine şeffaf zemin */ .ed-container.preset-language-v2-default, .ed-container.preset-language-v2-default > .inner, .ed-container.preset-language-v2-default .inner { background: transparent !important; } .ed-language a.language { color: #cfe3f7; } .ed-language a.language.active { color: #ffffff; font-weight: 500; } /* Mobil menü düğmesinin dokunma alanı — 18.08.2026. Kutu 30x25px ama asıl tıklanabilir öğe (button.menu-trigger-inner) yalnızca 30x3px'lik orta çizgiydi; çizgilerin arasına basınca menü açılmıyordu. Kutuya görünmez 44x44'lük bir dokunma alanı seriliyor (WCAG 2.5.5 önerisi) ve tıklama işleyicisi custom.js'te kutuya taşındı. Kutunun kendi ölçüsü değişmediği için başlık düzeni aynı kalıyor. */ .menu-trigger .menu-trigger-box { cursor: pointer; } .menu-trigger .menu-trigger-box::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; } /* Menü ayraç çizgisi ince kalsın */ .ed-separator hr.bg-primary { height: 2px !important; } /* --- Gövde metni: iki yana yaslı yerine sola hizalı --- */ .ed-text p[style*="justify"], .ed-text div[style*="justify"] { text-align: left !important; } /* --- Bağlantı rengi --- */ .ed-text a { color: var(--zc-link); } /* --- Haber/Duyuru tabloları: ağır çerçeve yerine sade liste görünümü --- */ .ed-text table thead th { background: var(--zc-navy) !important; } .ed-text table thead h4 { color: #ffffff; margin: 0; } .preset-table-v3-border-full .ed-text table, .preset-table-v3-border-full .ed-text table td, .preset-table-v3-border-full .ed-text table th { border-color: #dfe5ec !important; } /* --- Tüm içerik görselleri: yumuşak köşe, hale ve gölge --- */ .ed-image img, .ed-text img { border-radius: 14px; box-shadow: 0 0 0 5px var(--zc-light), 0 8px 22px rgba(4, 44, 83, 0.16); } /* Akordeon (kitap kapağı vb.) görselleri: tema border-radius:0 dayatmasını ez */ /* --- Özgeçmiş fotoğrafı: yumuşak köşe, hale ve gölge (TR + EN) --- */ .float-container-image { text-shadow: none !important; width: fit-content !important; max-width: 48%; } .float-container-image img { border: none !important; border-radius: 14px; box-shadow: 0 0 0 5px var(--zc-light), 0 8px 22px rgba(4, 44, 83, 0.16); margin: 8px 22px 14px 8px; } /* ============================================================ Ana sayfa tanıtım bölümü (zc-hero) ============================================================ */ .zc-hero { max-width: 1080px; margin: 28px auto 4px; padding: 0 20px; } .zc-hero-inner { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .zc-hero-photo { /* Arapça ana sayfadaki kırpma daha iyi duruyordu: object-position top yüzünü üst kenara yapıştırıyor, ortalanınca daha dengeli. Ölçü de oradaki gibi 118 px. */ width: 118px; height: 118px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .zc-hero-text { flex: 1; min-width: 260px; } .zc-hero-name-row { display: flex; align-items: center; gap: 12px; } /* Monogram kaldırıldı — 19.08.2026 Hero'da fotoğrafın yanında bir "ZCA" monogramı duruyordu. İki sebeple gitti: (1) monogram adın yerine geçen bir işarettir, oysa adın kendisi hemen yanında H1 olarak yazılı ve yüz de zaten orada — üçü aynı şeyi söylüyordu; (2) açık mavisi sitenin lacivert paletine (#042C53, #0C447C, #185FA5) uymuyordu. Kuralın içindeki `opacity:.95; filter:saturate(.85)` bunu bastırma denemesiydi; uymayan rengi kısmak yerine öğe kaldırıldı. Aynı monogram ar/ ve fa/ ana sayfalarından da alındı. */ .zc-hero-name { font-family: var(--zc-serif); font-size: 1.7rem; color: var(--zc-navy-dark); margin: 0; line-height: 1.2; text-decoration: none; border-bottom: none; } .zc-hero-subtitle { font-size: 0.9rem; color: #5f6b78; margin: 4px 0 10px; } .zc-hero-intro { font-size: 0.95rem; color: #333; line-height: 1.6; margin: 0 0 12px; } .zc-hero-badges { display: flex; gap: 8px; flex-wrap: wrap; } .zc-hero-badges a { font-size: 0.78rem; background: var(--zc-light); color: var(--zc-navy) !important; padding: 4px 14px; border-radius: 12px; text-decoration: none; transition: background 0.15s; } .zc-hero-badges a:hover { background: #d2e6f9; } @media screen and (max-width: 575px) { .zc-hero-inner { justify-content: center; text-align: center; } .zc-hero-name-row { justify-content: center; } .zc-hero-badges { justify-content: center; } } /* ============================================================ DERS SAYFASI — 19.08.2026 Ders sayfaları "dokümanlar" adını taşıyordu ama içlerinde tek bir doküman yoktu: üçü de yalnızca uygulama bağlantısı listeliyordu. Uygulamalar portala taşınınca liste iyice anlamsız kaldı. Sayfa artık dersin kendi bilgisini taşıyor: değerlendirme sistemi tabloyla açık açık, uygulamalar ise tıklanabilir kartlarla. Doldurulamayan bölüm SAYFAYA HİÇ KONMUYOR. "İzlence hazırlanıyor" yazan bir başlık, öğrenciye bilgi vermeyip yalnızca eksiği duyurur. ============================================================ */ .ders-ust { margin-bottom: 28px; } .ders-ad { font-family: var(--zc-serif); font-size: 1.9rem; color: var(--zc-navy-dark); margin: 0; line-height: 1.15; } .ders-bolum { margin-top: 34px; } .ders-bolum h2 { font-family: var(--zc-serif); font-size: 1.15rem; color: var(--zc-navy-dark); margin: 0 0 6px; padding-bottom: 8px; border-bottom: 1px solid #dfe5ec; } .ders-aciklama { font-size: 0.92rem; color: #4f5b68; margin: 10px 0 16px; max-width: 62ch; } /* Değerlendirme tablosu */ .ders-not { color: #6b7787; font-weight: 400; } .ders-gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Uygulama kartları — portaldaki kartın aynı mantığı: kartın tamamı bağlantı */ .ders-tumu { margin-top: 14px; font-size: 0.88rem; } @media (max-width: 560px) { .ders-ad { font-size: 1.5rem; } } /* ═══════════════════════════════════════════════════════════════════════════ Canlı sayfa ölçümünden çıkan düzeltmeler — 23.08.2026 Aşağıdaki üç madde tarayıcıda ölçülerek bulundu, kaynak okunarak değil. ═══════════════════════════════════════════════════════════════════════════ */ /* Menü şeridi. İKİ SORUN: (1) Şerit sayfayla birlikte kayıp gidiyordu; 80 px yer kaplayan gezinme, ilk ekrandan sonra tamamen kayboluyordu. (2) Şeridin iç genişliği 960 px, içeriğinki 976 px'ti; menü içeriğe göre 8 px kayıktı. Göz bunu "biraz eğri" diye okur, sebebini bulamaz. İkisi de burada. */ .ed-element.menu-wrapper { position: sticky; top: 0; z-index: 50; background: #ffffff; box-shadow: 0 1px 0 rgba(12, 68, 124, 0.12); } .ed-element.menu-wrapper > .inner { max-width: 976px; padding-left: 16px; padding-right: 16px; } /* Haber/Duyuru panel başlıkları. Dolu lacivert zemin + 24 px serif + harf aralığı ile sayfanın en ağır iki öğesiydiler; işaretlemede h4, ekranda ise 27 px'lik H1 ile yarışıyorlardı. Ziyaretçinin gözü önce "HABERLER"e, sonra sayfa sahibinin adına gidiyordu — akademik bir sayfada olması gerekenin tersi. Şerit kaldırıldı, yerine lacivert metin + ince alt çizgi. */ .ed-text table thead th { background: transparent !important; border-bottom: 2px solid var(--zc-navy) !important; padding: 0 0 8px !important; } .ed-text table thead h4 { color: var(--zc-navy) !important; font-size: 18px !important; font-weight: 600; letter-spacing: 0; } /* ═══════════════════════════════════════════════════════════════════════════ Telefon düzeltmeleri — 23.08.2026, canlı sayfa 375 px'te ölçülerek Öğrenciler ve ziyaretçiler siteye ağırlıkla telefondan giriyor. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 975px) { /* Menü şeridi 80 px'ti ve yapışkan olduğu için bu yükseklik kalıcıydı — 812 px'lik bir ekranın onda biri. İçinde de yalnızca sağdaki hamburger vardı; sol taraf bomboştu. Yüksekliği sayfa içi tema stili kimlik seçicisiyle (#ed-… { height: 80px }) dayatıyor, o yüzden !important gerekiyor. */ .menu-wrapper { height: auto !important; } /* Dolgu !important olmadan yazilinca temanin 16 px'lik kurali kazaniyor ve serit yine 80 px'e cikiyor (48 px icerik + 16 + 16). */ .menu-wrapper > .inner { padding-top: 8px !important; padding-bottom: 8px !important; } /* Boş sol tarafa ad geliyor: şerit yapışkan olduğu için sayfa kaydıkça kullanıcı nerede olduğunu görmeye devam ediyor. */ .menu-wrapper .mobile-cont::before { content: "Zeynep Cevahir Altıntaş"; margin-right: auto; align-self: center; font-family: var(--zc-serif); font-size: 15px; font-weight: 600; color: var(--zc-navy); white-space: nowrap; } /* Ayraç çizgisi şeridin ortasından geçiyor ve hiçbir şeyi ayırmıyordu. */ .menu-wrapper .ed-separator { display: none; } /* Hamburger 30×3 px'lik bir dokunma alanıydı. Dikkat: düğmenin KENDİSİ ortadaki çizgi (background ile çiziliyor); büyütünce koyu bir bloğa dönüşüyor. Zemin şeffaflaşıyor, üç çizgi tek sözde öğeyle çiziliyor. Seçici .menu-trigger-box ile başlıyor: temanın kuralı daha özgül ve tek sınıfla yazılan kuralı eziyordu. */ .menu-trigger-box .menu-trigger-inner { min-width: 44px !important; min-height: 44px !important; background: transparent !important; position: relative !important; border: 0 !important; padding: 0 !important; } .menu-trigger-box .menu-trigger-inner::before { content: "" !important; position: absolute !important; left: 50% !important; top: 50% !important; width: 26px !important; height: 3px !important; margin: -1.5px 0 0 -13px !important; background: var(--zc-navy-dark) !important; border-radius: 2px !important; box-shadow: 0 -8px 0 var(--zc-navy-dark), 0 8px 0 var(--zc-navy-dark) !important; } .menu-trigger-box .menu-trigger-inner::after { display: none !important; } .menu-trigger-box { display: flex; align-items: center; justify-content: flex-end; } /* Açılan menü tam ekranı kaplıyor ve temanın varsayılan gök mavisiyle (#3A9BD5) geliyordu — sitede hiçbir yerde kullanılmayan bir renk. Denetim raporunun "dördüncü mavi" dediği ton tam olarak burada görünüyordu. Menü artık sitenin laciverti, yazılar beyaz. */ .ed-element.preset-menu-v2-default .ed-menu.wv-custom { background: var(--zc-navy-dark) !important; } .ed-element.preset-menu-v2-default .ed-menu.wv-custom a.button { color: #ffffff !important; } .ed-element.preset-menu-v2-default .ed-menu.wv-custom .sub { background: transparent !important; border-color: rgba(255, 255, 255, 0.28) !important; } .ed-element.preset-menu-v2-default .ed-menu.wv-custom .sub a.button { color: rgba(255, 255, 255, 0.82) !important; } .ed-language a.language { min-width: 44px; } } /* ═══════════════════════════════════════════════════════════════════════════ Birleştirilmiş sayfalar — 23.08.2026 Yayınlar, Akademik Faaliyetler ve Ders Materyalleri artık tek sayfa; alt sayfalar bölüm oldu. Menüdeki üç açılır liste (4+7+3 madde) kalktı. NEDEN: Telefonda açılır menü iki dokunuş istiyor ve yedi maddelik liste tek ekrana sığmıyordu; masaüstünde de menü gereksiz derinleşmişti. ═══════════════════════════════════════════════════════════════════════════ */ /* Bölüm şeridi: sayfa kaydıkça üstte kalır, hangi bölümde olunduğunu ve nereye geçilebileceğini gösterir. Menü şeridi 64 px olduğu için altına yapışıyor. */ .zc-bolum-serit { position: sticky; top: 64px; z-index: 40; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; max-width: 976px; margin: 0 auto 32px; padding: 10px 16px; background: #F7FAFD; border: 1px solid #E6F1FB; border-radius: 10px; } .zc-bolum-serit a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 999px; background: var(--zc-light); color: var(--zc-navy); font-size: 14px; text-decoration: none; } .zc-bolum-serit a:hover, .zc-bolum-serit a:focus-visible { background: var(--zc-link); color: #ffffff; } .zc-bolum { scroll-margin-top: 124px; } /* menü + bölüm şeridi kadar */ .zc-bolum-baslik { max-width: 976px; margin: 44px auto 4px; padding: 0 16px; font-family: var(--zc-serif); font-size: 21px; font-weight: 600; color: var(--zc-navy); } .zc-bolum-baslik::after { content: ""; display: block; height: 2px; background: var(--zc-light); margin-top: 10px; } .zc-basa-don { max-width: 976px; margin: 8px auto 0; padding: 0 16px; text-align: right; font-size: 13px; } @media (max-width: 975px) { /* Dar ekranda şerit yatay kayar; sarmalanıp üç satır olmasındansa tek satırda kalıp kaydırmak daha derli toplu duruyor. */ .zc-bolum-serit { top: 56px; flex-wrap: nowrap; overflow-x: auto; border-radius: 0; border-left: 0; border-right: 0; margin-bottom: 24px; } .zc-bolum-serit a { white-space: nowrap; min-height: 44px; } .zc-bolum { scroll-margin-top: 116px; } .zc-bolum-baslik { margin-top: 32px; font-size: 19px; } } /* Süreklilik taşıyan görevler tek kayıt. Dergi editörlüğü her sayı için ayrı satır olarak yazılıyordu (beş kez "Dergiabant – Alan Editörü, Cilt …"); görev sürekli, her sayı ayrı bir başarı değil. Sayı bağlantıları korunuyor ki erişim kaybolmasın. */ .zc-gorev { max-width: 976px; margin: 0 auto; padding: 20px 16px; border: 1px solid var(--zc-light); border-radius: 10px; } .zc-gorev-ad { margin: 0 0 6px; font-family: var(--zc-serif); font-size: 19px; font-weight: 600; color: var(--zc-navy-dark); } .zc-gorev-rol { margin: 0 0 8px; font-size: 16px; color: #1B2A4A; } .zc-gorev-not { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: #5A6C86; } .zc-gorev-sayilar { margin: 0; font-size: 14px; color: #5A6C86; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .zc-gorev-sayilar a { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px; border-radius: 6px; background: var(--zc-light); color: var(--zc-navy); text-decoration: none; } .zc-gorev-sayilar a:hover { background: var(--zc-link); color: #ffffff; } /* Kitap tanıtım videoları. Sayfanın yarısını kaplıyorlardı; oysa kayıt künyesi asıl içerik, video ek. Küçük ve 16:9 oranında duruyor, oynatıcının kendi tam ekran düğmesi isteyene büyütüyor. */ .zc-bolum .ed-youtube { max-width: 320px; margin-left: 0; } .zc-bolum .ed-youtube .iframe-holder, .zc-bolum .ed-youtube iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 6px; } @media (max-width: 560px) { /* Telefonda 320 px zaten ekranın büyük kısmı; tam genişlik daha okunaklı. */ .zc-bolum .ed-youtube { max-width: 100%; } } /* Her hesabın küçük bir harf rozeti var: iD, GS, RG, GH, DP, YÖK… NEDEN HARF, MARKA İKONU DEĞİL: ORCID, ResearchGate, GitHub ve Google Scholar'ın hazır ikonları var; YÖK Akademik, BAİBÜ, DergiPark, Zenodo ve Academia'nınkiler yok. Karışık kullanmak, denetimde "tek altbilgide dört ikon ailesi" diye işaretlenen duruma geri dönmek olurdu. Tek sistem: aynı boyut, aynı biçim, aynı renk. */ .zc-rozet { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 20px; margin-right: 8px; padding: 0 5px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); color: #ffffff; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════════════════ Yayın kartları ve atıf kutusu — 23.08.2026 Liste yayinlar.bib'ten üretiliyor; künye, atıf biçimleri ve liste tek kaynaktan geliyor. Atıf kutusu
öğesi: JavaScript çalışmasa da açılıp kapanıyor, kopyalama düğmesi ek kolaylık. ═══════════════════════════════════════════════════════════════════════════ */ .zc-yayin-listesi { max-width: 976px; margin: 0 auto; padding: 0 16px; display: flex; flex-direction: column; gap: 14px; } .zc-yayin { border: 1px solid var(--zc-light); border-radius: 10px; padding: 18px 20px; } .zc-yayin-baslik { margin: 0 0 8px; font-family: var(--zc-serif); font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--zc-navy-dark); } .zc-yayin-kunye { margin: 0 0 10px; font-size: 14px; line-height: 1.65; color: #5A6C86; } .zc-yayin-baglantilar { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 8px; } .zc-yayin-baglantilar a, .zc-kunye-etiket { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border-radius: 6px; background: var(--zc-light); color: var(--zc-navy); font-size: 13px; text-decoration: none; } .zc-yayin-baglantilar a:hover { background: var(--zc-link); color: #fff; } /* "Atıf" düğmesi kendi satırında ve komşu etiketlerden bir ölçü büyük duruyordu; künye etiketleriyle aynı satıra ve aynı ölçüye alındı. Kutu açılınca tam satıra geçiyor, böylece metin daralmıyor. */ .zc-yayin-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .zc-yayin-eylem .zc-yayin-baglantilar { display: contents; } .zc-atif { flex: 0 0 auto; } .zc-atif[open] { flex: 1 0 100%; } .zc-atif > summary { /* summary temada content-box: min-height 32'ye 8 dolgu + 2 kenarlık ekleniyor, düğme 42 px oluyordu; etiketler 32 px. Aynı ölçü için kutu modeli eşitlendi. */ box-sizing: border-box; display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border-radius: 6px; background: #ffffff; border: 1px solid #CFE1F5; color: var(--zc-navy); font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; } .zc-atif > summary::-webkit-details-marker { display: none; } .zc-atif > summary::before { content: "❞"; margin-right: 6px; opacity: .7; } .zc-atif[open] > summary { background: var(--zc-light); } .zc-atif-ic { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; } .zc-atif-ust { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .zc-atif-ad { font-size: 13px; font-weight: 600; color: var(--zc-navy); letter-spacing: .02em; } .zc-kopyala { min-height: 32px; padding: 4px 12px; border: 1px solid #CFE1F5; border-radius: 6px; background: #fff; color: var(--zc-link); font-family: inherit; font-size: 13px; cursor: pointer; } .zc-kopyala:hover { background: var(--zc-link); color: #fff; border-color: var(--zc-link); } .zc-kopyala[data-kopyalandi] { background: #F0FAF3; color: #14532D; border-color: #16A34A; } .zc-atif-metin { margin: 0; padding: 12px 14px; background: #F7FAFD; border: 1px solid var(--zc-light); border-radius: 6px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.6; color: #1B2A4A; white-space: pre-wrap; word-break: break-word; } .zc-bib-indir { max-width: 976px; margin: -20px auto 28px; padding: 0 16px; font-size: 13px; } @media (max-width: 560px) { .zc-yayin { padding: 14px 16px; } .zc-yayin-baslik { font-size: 17px; } .zc-atif-metin { font-size: 12px; } } /* ═══════════════════════════════════════════════════════════════════════════ Özgeçmiş: iki görünüm — 24.08.2026 Aynı bilgi iki biçimde: ANLATI okunmak, KRONOLOJİ taranmak için. Seçim radio + CSS ile yapılıyor; JavaScript kapalı olsa da çalışır. ═══════════════════════════════════════════════════════════════════════════ */ .zc-ozgecmis { max-width: 976px; margin: 0 auto; padding: 0 16px; } .zc-gorunum-secim { display: inline-flex; gap: 4px; margin: 0 0 28px; padding: 4px; background: #F7FAFD; border: 1px solid var(--zc-light); border-radius: 999px; } .zc-ozgecmis > input[name="zc-gorunum"] { position: absolute; opacity: 0; pointer-events: none; } .zc-gorunum-secim label { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 6px 20px; border-radius: 999px; font-size: 15px; color: var(--zc-navy); cursor: pointer; } #zc-gorunum-anlati:checked ~ .zc-gorunum-secim label[for="zc-gorunum-anlati"], #zc-gorunum-kronoloji:checked ~ .zc-gorunum-secim label[for="zc-gorunum-kronoloji"] { background: var(--zc-link); color: #ffffff; font-weight: 600; } #zc-gorunum-anlati:focus-visible ~ .zc-gorunum-secim label[for="zc-gorunum-anlati"], #zc-gorunum-kronoloji:focus-visible ~ .zc-gorunum-secim label[for="zc-gorunum-kronoloji"] { outline: 2px solid var(--zc-navy); outline-offset: 2px; } /* Profil fotoğrafı eski metin bloğundaydı; blok silinince anlatının başına taşındı. Metnin yanında, sağa yaslı duruyor; dar ekranda üste geçiyor. */ /* Fotoğraf anlatının içinde: metnin başında, sola yaslı, yazı etrafından akıyor. Kronoloji görünümünde anlatı gizlendiği için fotoğraf da kendiliğinden kalkıyor — zaman çizgisinin yanında asılı kalmıyor. */ .zc-ozgecmis-foto img { width: 100%; height: auto; border-radius: 10px; display: block; } .zc-kron-sarmal { display: none; } #zc-gorunum-kronoloji:checked ~ .zc-kron-sarmal { display: block; } #zc-gorunum-kronoloji:checked ~ .zc-anlati { display: none; } /* 24.08.2026 — fotoğraf metnin içinde: ızgara denendi ama fotoğrafın altındaki sütun boş kalıyordu ve metin sağda dar bir blok gibi duruyordu. Akışa dönüldü: fotoğraf sola yaslı, metin etrafından dönüp altından devam ediyor. Ölçü 820 px'te tutuluyor — 944 px'lik sütunun tamamı satır başına 100 karaktere çıkıyor, okuması yoruyor. */ .zc-anlati { max-width: 830px; } .zc-anlati p { margin: 0 0 18px; font-size: 17px; line-height: 1.8; color: #1B2A4A; } .zc-ozgecmis-foto { float: left; width: 196px; margin: 4px 26px 14px 0; shape-outside: inset(0 round 10px); } @media (max-width: 620px) { .zc-ozgecmis-foto { width: 140px; margin: 0 18px 10px 0; } } .zc-anlati em { font-style: italic; } .zc-kronoloji { list-style: none; margin: 0; padding: 0; position: relative; } /* Dikey ray: yıl işaretlerinin ortasından geçer. */ .zc-kronoloji::before { content: ""; position: absolute; left: 43px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--zc-light), #CFE1F5 40%, var(--zc-light)); } .zc-kron-yil { position: relative; display: grid; grid-template-columns: 88px 1fr; gap: 24px; padding: 0 0 26px; } .zc-kron-isaret { position: relative; display: flex; justify-content: center; } .zc-kron-yil-ad { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 68px; height: 34px; border-radius: 999px; background: var(--zc-navy-dark); color: #ffffff; font-family: var(--zc-serif); font-size: 16px; font-weight: 600; box-shadow: 0 0 0 5px #ffffff; } .zc-kron-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .zc-kron-oge { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border: 1px solid var(--zc-light); border-radius: 10px; background: #ffffff; } /* Beliriş animasyonu OPT-IN: kartlar varsayılan olarak görünür. Saydamlığı yalnızca JavaScript .zc-animasyonlu sınıfını ekleyince başlatıyoruz. NEDEN: ilk sürümde kartlar CSS'te opacity:0 ile başlıyordu ve görünür olmaları JavaScript'e bağlıydı; betik çalışmazsa kronoloji bomboş görünüyordu. Süs, içeriğin önüne geçmemeli. */ .zc-kronoloji.zc-animasyonlu .zc-kron-oge { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; } .zc-kronoloji.zc-animasyonlu .zc-kron-oge.zc-gorunur { opacity: 1; transform: none; } .zc-kron-tur { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; /* "Bilimsel Etkinlik" en uzun etiket; hepsi aynı genişlikte dursun diye ölçü ona göre. Dar ekranda etiket üste geçtiği için orada serbest. */ min-width: 142px; padding: 4px 10px; border-radius: 6px; background: var(--zc-light); color: var(--zc-navy); font-size: 12px; font-weight: 600; } .zc-kron-ikon { display: inline-flex; } .zc-kron-ikon svg { width: 15px; height: 15px; } .zc-kron-metin { font-size: 15px; line-height: 1.6; color: #1B2A4A; padding-top: 2px; } /* Tür renkleri: aynı ailenin tonları, birbirini bastırmadan ayrışsın. */ .zc-tur-yayin .zc-kron-tur { background: #DCE9F8; } .zc-tur-gorev .zc-kron-tur { background: var(--zc-navy-dark); color: #ffffff; } .zc-tur-ogretim .zc-kron-tur { background: #EFF5FB; } .zc-tur-etkinlik .zc-kron-tur { background: #F2F7FC; } @media (prefers-reduced-motion: reduce) { .zc-kronoloji.zc-animasyonlu .zc-kron-oge { opacity: 1; transform: none; transition: none; } } @media (max-width: 560px) { .zc-anlati p { font-size: 16px; line-height: 1.7; } /* Dar ekranda ray sola yapışır, yıl rozetiyle hizalanır. */ .zc-kronoloji::before { left: 15px; } .zc-kron-yil { grid-template-columns: 1fr; gap: 12px; padding-bottom: 20px; } .zc-kron-isaret { justify-content: flex-start; } .zc-kron-yil-ad { min-width: 60px; height: 30px; font-size: 15px; } .zc-kron-liste { padding-left: 4px; } .zc-kron-oge { flex-direction: column; gap: 8px; padding: 12px 14px; } .zc-kron-tur { align-self: flex-start; } } /* Hesap işaretleri — 24.08.2026 ORCID, GitHub, ResearchGate, Google Scholar, Academia ve Zenodo'nun RESMÎ marka işaretleri kullanılıyor (tek renkli, 24×24 çerçeve; simple-icons). YÖK Akademik, BAİBÜ ve DergiPark'ın böyle bir tek renkli işareti olmadığı için onlar harf rozetinde kalıyor. İkisi de aynı kutunun içinde durduğu için sıra tek sistem gibi okunuyor: aynı ölçü, aynı köşe, aynı hiza. */ .zc-rozet-ikon { padding: 0; min-width: 24px; } .zc-rozet svg { width: 14px; height: 14px; fill: currentColor; display: block; } /* YÖK Akademik, BAİBÜ ve DergiPark'ın tek renkli vektör işareti yok; resmî site simgeleri (favicon) kullanılıyor. Renkli oldukları için lacivert zeminde beyaz bir daire içine alınıyorlar — böylece diğer işaretlerle aynı ağırlıkta duruyorlar. */ .zc-rozet-gorsel { padding: 0; min-width: 22px; width: 22px; height: 22px; border-radius: 50%; background: #ffffff; } .zc-rozet-gorsel img { width: 16px; height: 16px; object-fit: contain; display: block; } /* Ana sayfa haber paneli — 24.08.2026 Duyurular paneli kaldırılınca yanındaki Haberler paneli 928 px'e yayıldı; tek başına bu genişlikte satırlar okumak için fazla uzun ve bölüm "yarısı eksik kalmış" gibi duruyordu. Panel ortalanıp okunaklı bir ölçüye çekildi. */ /* ═══════════════════════════════════════════════════════════════════════════ ALTBİLGİ — 24.08.2026, sıfırdan Tema altbilgisi dört kat sarmalayıcı, sayfaya gömülü kimlik kuralları (#ed-… > .inner{align-items:flex-end}) ve sıra numarasına bağlı seçicilerle geliyordu; her düzeltme başka bir yeri bozuyordu. Bütün işaretleme atıldı, yerine tek bir