/* ============================================================================= TEMA — Mehmet Tankül kişisel sitesi ============================================================================= Bu dosya BİZİM. BootstrapMade'in `main.css` dosyası tamamen atıldı, onun yerine bu yazıldı; altbilgideki künye şartı da bu yüzden kalktı. Bootstrap'in kendisi de atıldı: ızgara, düğme ve kart bileşenlerinin hepsi burada, CSS Grid ile. Dışarıdan kalan iki kütüphane MIT (künye şartı yok): Bootstrap Icons · GLightbox Belirme animasyonu, sayaçlar, mobil menü ve yapışkan başlık bizim `tema.js` dosyamızda — AOS ve PureCounter da atıldı. Renk paleti kullanıcının seçimi: petrol mavisi-turkuaz. ============================================================================= */ :root { --petrol: #0d7c8a; /* ana vurgu */ --petrol-acik: #12a3b5; /* imleç üstünde */ --petrol-koyu: #095c66; --murekkep: #14313a; /* başlıklar */ --murekkep-derin:#05212a; /* koyu bölüm zemini */ --yuzey: #ffffff; --zemin: #ffffff; --zemin-yumusak: #f2f8f9; /* açık bölüm zemini */ --metin: #414b4f; --metin-soluk: #6b777c; --cizgi: #dde7e9; /* Yapışkan başlık şeridi — yarı saydam, arkasını bulanıklaştırıyor. */ --ust-zemin: rgba(255, 255, 255, .92); /* Sınav haftası satırı (izlence) ve "kopyalandı" durumu. */ --sinav-zemin: #fff8f0; --basari-renk: #1a7f4b; --golge-kucuk: 0 2px 8px rgba(20, 49, 58, .05); --golge-orta: 0 10px 28px rgba(20, 49, 58, .10); --golge-buyuk: 0 18px 44px rgba(20, 49, 58, .14); --yazi: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --yazi-baslik: "Sora", var(--yazi); --kose: 14px; --kose-kucuk: 10px; --gecis: .28s cubic-bezier(.4, 0, .2, 1); } /* --- Karanlık tema ------------------------------------------------------ * * Üç durum var: * 1. Ziyaretçi seçim yapmamış → işletim sisteminin tercihi (`prefers-color-scheme`) * 2. Açık seçmiş → `` * 3. Koyu seçmiş → `` * * Sıra önemli: sistem kuralı `:not([data-tema="acik"])` ile korunuyor, * yoksa koyu sistemde "açık" seçen ziyaretçinin tercihi çalışmazdı. * Açık palet çıplak `:root`ta duruyor; burada YALNIZCA değişen belirteçler * yeniden tanımlanıyor. * * Vurgu rengi (petrol) koyu zeminde biraz açılıyor: #0d7c8a koyu zeminde * yeterince ayrışmıyor, bağlantılar okunmuyordu. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) { --petrol: #2aa9b8; --petrol-acik: #4fc7d6; --petrol-koyu: #1b7f8c; --murekkep: #e6f0f2; /* başlık: koyu zeminde açık */ --murekkep-derin:#060f14; /* koyu bölüm, sayfadan da koyu kalmalı */ --yuzey: #141b1f; /* kart zemini */ --zemin: #0d1316; /* sayfa zemini */ --zemin-yumusak: #161e22; /* "açık bölüm"in koyu karşılığı */ --metin: #c2cdd1; --metin-soluk: #8c9a9f; --cizgi: #263136; --ust-zemin: rgba(13, 19, 22, .92); --sinav-zemin: #2a1f14; --basari-renk: #4ec98a; /* Koyu zeminde gri gölge görünmüyor; siyah ve daha derin. */ --golge-kucuk: 0 2px 8px rgba(0, 0, 0, .45); --golge-orta: 0 10px 28px rgba(0, 0, 0, .55); --golge-buyuk: 0 18px 44px rgba(0, 0, 0, .65); } } :root[data-tema="koyu"] { --petrol: #2aa9b8; --petrol-acik: #4fc7d6; --petrol-koyu: #1b7f8c; --murekkep: #e6f0f2; --murekkep-derin:#060f14; --yuzey: #141b1f; --zemin: #0d1316; --zemin-yumusak: #161e22; --metin: #c2cdd1; --metin-soluk: #8c9a9f; --cizgi: #263136; --ust-zemin: rgba(13, 19, 22, .92); --sinav-zemin: #2a1f14; --basari-renk: #4ec98a; --golge-kucuk: 0 2px 8px rgba(0, 0, 0, .45); --golge-orta: 0 10px 28px rgba(0, 0, 0, .55); --golge-buyuk: 0 18px 44px rgba(0, 0, 0, .65); } /* * Tarayıcının kendi arayüzü de temaya uysun: kaydırma çubuğu, form * denetimleri ve otomatik doldurma renkleri buna bakıyor. */ :root { color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) { color-scheme: dark; } } :root[data-tema="koyu"] { color-scheme: dark; } :root[data-tema="acik"] { color-scheme: light; } /* --- Temel ------------------------------------------------------------- */ * { 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; overflow-x: hidden; } h1, h2, h3, h4, h5 { font-family: var(--yazi-baslik); color: var(--murekkep); font-weight: 700; letter-spacing: -0.02em; line-height: 1.22; } a { color: var(--petrol); text-decoration: none; transition: color var(--gecis); } a:hover { color: var(--petrol-acik); } img { max-width: 100%; height: auto; } ::selection { background: var(--petrol); color: #fff; } :focus-visible { outline: 2px solid var(--petrol-acik); outline-offset: 3px; border-radius: 4px; } /* * Açılış: kahraman + şapka kartları TEK EKRAN. * * Sarmal bir ekran yüksekliğinde; şapka bölümü kendi içeriği kadar yer * alıyor (`flex: 0 0 auto` — küçülürse kartlar taşar), kahraman kalanı * dolduruyor. Ekran kartların hemen altında az bir boşlukla bitiyor, * çalışma alanı balonları kaydırınca görünüyor. * * Kısa ekranlarda (860px'in altı) kural devrede değil: orada kahraman * metnine yer kalmıyor, blok doğal yüksekliğinde kalıp kayıyor. */ .acilis { display: flex; flex-direction: column; min-height: 100svh; } /* * `height` DEĞİL `min-height`: sabit yükseklik verilince kısa ekranda * kahramana ayrılan yer metinden az kalıyor ve `overflow: hidden` yüzünden * düğmeler kırpılıyordu. Bu hâlde içerik sığmazsa blok büyüyor, ekran * biraz kayıyor — kesilmiş metin göstermektense kaydırmak yeğ. * * Şapka bölümü `flex: 0 0 auto`: esnek öğelerin varsayılan `flex-shrink: 1` * değeri kartları sıkıştırıp bölümün dışına taşırıyordu. */ /* * `min-height: auto` — kahramanın kendi `min-height: 74svh` kuralını EZİYOR. * O kural burada geçerli olsaydı kahraman ekranın %74'ünü alır, kartlar * aşağı taşardı. `auto` esnek öğeyi içeriğinden küçültmüyor: uzun ekranda * kahraman büyüyüp boşluğu dolduruyor, kısa ekranda metin kadar kalıp * bloğun kaymasına izin veriyor. */ .acilis .kahraman { flex: 1 1 auto; min-height: auto; } .acilis .bolum { flex: 0 0 auto; padding-top: 38px; padding-bottom: 28px; } \/* Bölüm başlığı ile kartlar arası: ekranın kartlarla bitmesi için daraltıldı. *\/ .acilis .bolumBasi { margin-bottom: 26px; } /* Balonlar kendi bölümünde; üstteki kartlarla arası fazla açılmasın. */ .bolumUzmanlik { padding-top: 34px; } .bolum { padding: 76px 0; } /* Ana sayfada kahramanin hemen altindaki bolum: dolgu dar, cunku altindaki sayac bandinin ilk ekranda gorunmesi gerekiyor. */ .bolum-yumusak { background: var(--zemin-yumusak); } .bolum-koyu { background: var(--murekkep-derin); color: #d8e6e9; } .bolum-koyu h1, .bolum-koyu h2, .bolum-koyu h3, .bolum-koyu h4 { color: #fff; } /* --- Kapsayıcı --------------------------------------------------------- */ .kapsayici { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; } .kapsayici-dar { max-width: 860px; } @media (max-width: 575px) { .kapsayici { padding: 0 18px; } } /* --- Bölüm başlığı ----------------------------------------------------- */ .bolumBasi { text-align: center; margin-bottom: 44px; } .bolumBasi .ustEtiket { display: inline-block; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--petrol); margin-bottom: 10px; } .bolumBasi h2 { font-size: clamp(26px, 3.4vw, 34px); margin: 0 0 10px; } .bolumBasi p { color: var(--metin-soluk); margin: 0; max-width: 620px; margin-inline: auto; } /* Başlığın altındaki kısa çizgi. */ .bolumBasi h2::after { content: ""; display: block; width: 52px; height: 3px; margin: 14px auto 0; border-radius: 3px; background: linear-gradient(90deg, var(--petrol), var(--petrol-acik)); } /* --- Üst bant ---------------------------------------------------------- */ .ust { position: sticky; top: 0; z-index: 900; background: var(--ust-zemin); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid transparent; transition: box-shadow var(--gecis), border-color var(--gecis), background var(--gecis); } .ust.kaydi { box-shadow: var(--golge-kucuk); border-bottom-color: var(--cizgi); } /* * Ana sayfada başlık kahramanın ÜSTÜNE biniyor. * * `sticky` bırakılamıyordu: sticky öğe akışta yer kapladığı için başlık * kahramanın üstünde değil ÖNÜNDE duruyor, beyaz zeminde beyaz yazı * görünmez oluyordu (kullanıcı bildirdi: "scroll en üstteyken üst menü * çıkmıyor"). `fixed` ile kahraman başlığın altından başlıyor; * `.kahramanIc` üst boşluğu zaten başlığı geçecek kadar. */ body.anasayfa .ust { position: fixed; top: 0; left: 0; right: 0; background: transparent; backdrop-filter: none; } body.anasayfa .ust .ad, body.anasayfa .ust .menu > li > a { color: #fff; } body.anasayfa .ust .ad small { color: rgba(255, 255, 255, .72); } body.anasayfa .ust.kaydi { background: var(--ust-zemin); backdrop-filter: saturate(160%) blur(10px); } body.anasayfa .ust.kaydi .ad { color: var(--murekkep); } body.anasayfa .ust.kaydi .ad small { color: var(--metin-soluk); } body.anasayfa .ust.kaydi .menu > li > a { color: var(--murekkep); } .ustIc { display: flex; align-items: center; gap: 20px; /* * YALNIZCA dikey boşluk. `padding` kısayolu kullanılırsa `.kapsayici` * ile aynı öğede olduğu için onun yatay boşluğunu sıfırlıyor ve dar * ekranda ad ekranın soluna yapışıyor. */ padding-top: 14px; padding-bottom: 14px; } .ad { font-family: var(--yazi-baslik); font-size: 18px; font-weight: 700; color: var(--murekkep); line-height: 1.2; margin-right: auto; white-space: nowrap; } .ad small { display: block; font-family: var(--yazi); font-size: 11.5px; font-weight: 500; color: var(--metin-soluk); letter-spacing: .02em; margin-top: 2px; } .menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .menu > li { position: relative; } .menu > li > a { display: block; padding: 8px 13px; font-size: 14.5px; font-weight: 500; color: var(--murekkep); border-radius: 8px; transition: color var(--gecis), background var(--gecis); } .menu > li > a:hover { color: var(--petrol); } .menu > li > a.etkin { color: var(--petrol); } /* Etkin bağlantının altındaki çizgi. */ .menu > li > a.etkin::after { content: ""; display: block; height: 2px; margin-top: 4px; border-radius: 2px; background: var(--petrol); } /* Açılır menü */ .menu .altMenu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 190px; padding: 8px; list-style: none; margin: 0; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--kose-kucuk); box-shadow: var(--golge-orta); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis); } .menu > li:hover > .altMenu, .menu > li:focus-within > .altMenu { opacity: 1; visibility: visible; transform: translateY(0); } .altMenu a { display: block; padding: 8px 12px; border-radius: 7px; font-size: 14.5px; color: var(--murekkep); } .altMenu a:hover { background: var(--zemin-yumusak); color: var(--petrol); } /* --- Dil değiştirici ---------------------------------------------------- */ .dilSecici { display: flex; align-items: center; gap: 2px; margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--cizgi); flex: none; } .dilSecici a { padding: 5px 9px; border-radius: 7px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--metin-soluk); transition: color var(--gecis), background var(--gecis); } .dilSecici a:hover { color: var(--petrol); background: var(--zemin-yumusak); } .dilSecici a.etkin { color: var(--petrol); background: color-mix(in srgb, var(--petrol), transparent 90%); } /* Ana sayfada üst bant saydam; yazı beyaz olmalı. */ body.anasayfa .ust .dilSecici { border-left-color: rgba(255,255,255,.25); } body.anasayfa .ust .dilSecici a { color: rgba(255,255,255,.72); } body.anasayfa .ust .dilSecici a.etkin { color: #fff; background: rgba(255,255,255,.14); } body.anasayfa .ust.kaydi .dilSecici { border-left-color: var(--cizgi); } body.anasayfa .ust.kaydi .dilSecici a { color: var(--metin-soluk); } body.anasayfa .ust.kaydi .dilSecici a.etkin { color: var(--petrol); background: color-mix(in srgb, var(--petrol), transparent 90%); } @media (max-width: 991px) { /* Hamburger düğmesinin soluna alınıyor; menü panelinin içinde kaybolmasın. */ .dilSecici { margin-left: auto; margin-right: 4px; padding-left: 10px; } } .menuDugme { display: none; background: none; border: 0; cursor: pointer; font-size: 26px; line-height: 1; color: var(--murekkep); padding: 4px 6px; } body.anasayfa .menuDugme { color: #fff; } body.anasayfa .ust.kaydi .menuDugme { color: var(--murekkep); } /* --- Düğmeler ---------------------------------------------------------- */ .dugme { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 50px; font-size: 15px; font-weight: 600; font-family: var(--yazi); border: 1.5px solid transparent; cursor: pointer; transition: transform var(--gecis), box-shadow var(--gecis), background var(--gecis), color var(--gecis); } .dugme:hover { transform: translateY(-2px); } .dugme-dolu { background: var(--petrol); color: #fff; box-shadow: 0 6px 18px rgba(13, 124, 138, .28); } .dugme-dolu:hover { background: var(--petrol-acik); color: #fff; box-shadow: 0 10px 26px rgba(13, 124, 138, .34); } .dugme-cizgi { border-color: var(--cizgi); color: var(--murekkep); background: var(--yuzey); } .dugme-cizgi:hover { border-color: var(--petrol); color: var(--petrol); } .bolum-koyu .dugme-cizgi, .kahraman .dugme-cizgi { border-color: rgba(255,255,255,.45); color: #fff; background: transparent; } .bolum-koyu .dugme-cizgi:hover, .kahraman .dugme-cizgi:hover { border-color: #fff; background: rgba(255,255,255,.12); color: #fff; } /* --- Kahraman ---------------------------------------------------------- */ /* * Kahraman: fotoğraf TAM ZEMİN, metin onun üstünde. * * Arka planı silinmiş boy fotoğrafını sağda figür olarak denedik ve * kullanıcı beğenmedi ("kahraman alanı çok büyük oldu, yazılar arkada * kaldı"); ilk tasarıma geri dönüldü. Fotoğrafın üstüne petrol perde * iniyor — metnin okunurluğu hangi fotoğraf konursa konsun bozulmuyor. */ .kahraman { position: relative; /* * Bant EKRANIN TAMAMI DEĞİL, %70'i. * * `100svh` iken bant 1290px'lik bir ekranda 1290px oluyordu ve figür de * onun %88'i kadar (~1135px) büyüyordu; fotoğraf gereğinden uzun * görünüyor, ziyaretçi ilk ekranda altındaki bölümü hiç görmüyordu. * Kullanıcının isteği: "100 cm ise 70 cm'e çekelim, kahraman bandının * yüksekliği de inmiş olsun." * * Figür yüksekliği bandın yüzdesi olduğu için bu tek değişiklikle * fotoğraf da aynı oranda (%70) küçülüyor. */ /* * Ekranın tamamı değil, çoğu. Kahraman + şapka bölümünün başlığı ilk * ekranda; çalışma alanı balonları kaydırınca görünüyor — üçünü birden * tek ekrana sıkıştırmak "çok sıkışık" duruyordu. */ min-height: 74svh; display: flex; align-items: center; color: #fff; background: var(--murekkep-derin); overflow: hidden; } .kahramanGorsel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .34; } /* Fotoğrafın üstüne petrol perde: metin her fotoğrafta okunur kalsın. */ .kahraman::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(5,33,42,.94) 0%, rgba(5,33,42,.72) 46%, rgba(5,33,42,.42) 100%), radial-gradient(70% 90% at 88% 15%, rgba(18,163,181,.28), transparent 62%); } /* Yatay boşluk `.kapsayici`den geliyor; kısayol kullanılmıyor (bkz. .ustIc). */ .kahramanIc { position: relative; z-index: 2; /* * Üst boşluk sabit başlık şeridini geçecek kadar (şerit ~72px), fazlası * değil: bandın yüksekliği kısa ekranda `min-height`ten değil bu iki * dolgudan geliyordu. Alttaki "Birden çok şapka" bölümü ilk ekranda * görünsün diye ikisi de daraltıldı. */ padding-top: 80px; padding-bottom: 30px; } /* * Sağdaki figür (arka planı silinmiş boy fotoğrafı). * * Mutlak konumlu: metnin yerleşimini etkilemiyor ve bölümün yüksekliğini * değiştirmiyor — kullanıcının şartı "bu yüksekliği koruyarak". * Perdenin (::after) üstünde, metnin (z-index 2) altında duruyor. */ .kahramanFigur { position: absolute; /* Ekranın sağ kenarına yakın; kapsayıcı sınırına DEĞİL. Kapsayıcıya hizalandığında geniş ekranda sağda 150px boşluk kalıyordu. */ right: clamp(0px, 3vw, 48px); bottom: 0; z-index: 1; height: 88%; display: flex; align-items: flex-end; pointer-events: none; /* metin seçimini engellemesin */ } /* Figürün arkasındaki yumuşak halka — fotoğraf zeminden kopmasın. */ .kahramanFigur::before { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 118%; aspect-ratio: 1 / 1; max-height: 72%; border-radius: 50%; background: radial-gradient(circle, rgba(18,163,181,.26) 0%, rgba(18,163,181,.08) 46%, transparent 70%); } .kahramanFigur picture { display: block; height: 100%; } .kahramanFigur img { position: relative; display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 22px 42px rgba(0, 0, 0, .5)); } /* * Figür varken metin onun altına girmesin. * * `max-width` KULLANILMIYOR: `.kapsayici` zaten `margin: 0 auto` taşıyor, * dar bir max-width metni ortalıyor ve sağa kaydırıp figürle çakıştırıyordu. * Onun yerine sağdan iç boşluk veriliyor — kutu genişliğini koruyor, * metin sol kenarda kalıyor. */ .kahraman.figurlu .kahramanIc { padding-right: 42%; } @media (max-width: 1199px) { .kahramanFigur { height: 76%; right: 16px; } .kahraman.figurlu .kahramanIc { padding-right: 46%; } } @media (max-width: 860px) { /* Dar ekranda figür kaldırılıyor: metnin yanına da altına da sığmıyordu. */ .kahramanFigur { display: none; } /* Sıfır DEĞİL: `.kapsayici`nin yatay boşluğuna geri dönülüyor. */ .kahraman.figurlu .kahramanIc { padding-right: 24px; } } @media (max-width: 575px) { .kahraman.figurlu .kahramanIc { padding-right: 18px; } } .kahramanEtiket { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: #7fd6e2; margin-bottom: 20px; } .kahramanEtiket::before { content: ""; width: 32px; height: 2px; background: var(--petrol-acik); } .kahraman h1 { font-size: clamp(32px, 5vw, 50px); color: #fff; margin: 0 0 12px; letter-spacing: -0.035em; } .kahramanRol { font-size: 17px; color: #b9d3d8; margin: 0 0 14px; } .kahramanGiris { font-size: 18px; color: #cfe2e5; max-width: 620px; margin: 0 0 24px; } .kahramanDugmeler { display: flex; flex-wrap: wrap; gap: 12px; } /* --- Sayaçlar ---------------------------------------------------------- */ .sayaclar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .sayacKutu { display: block; text-align: center; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--kose); padding: 28px 16px; transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis); } .sayacKutu:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--petrol), transparent 55%); box-shadow: var(--golge-orta); } .sayacKutu .sayi { display: block; font-family: var(--yazi-baslik); font-size: 42px; font-weight: 700; line-height: 1; color: var(--petrol); font-variant-numeric: tabular-nums; /* sayarken satır zıplamasın */ } .sayacKutu .etiketAd { display: block; margin-top: 8px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--metin-soluk); } /* --- Kart (ortak) ------------------------------------------------------ */ .kart { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--kose); overflow: hidden; transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis); } /* Üstteki renkli şerit imleçle soldan sağa çiziliyor. */ .kart::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3; background: linear-gradient(90deg, var(--petrol), var(--petrol-acik)); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.4, 0, .2, 1); } .kart:hover { transform: translateY(-7px); border-color: color-mix(in srgb, var(--petrol), transparent 60%); box-shadow: var(--golge-buyuk); } .kart:hover::before { transform: scaleX(1); } .kart.guncel::before { transform: scaleX(1); } .kartGorsel { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--zemin-yumusak); transition: transform .5s cubic-bezier(.4, 0, .2, 1); } .kartGorselKutu { overflow: hidden; } .kart:hover .kartGorsel { transform: scale(1.05); } /* Fotoğrafı olmayan kartta desenli yer tutucu. */ .kartYerTutucu { aspect-ratio: 16 / 10; display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--petrol), transparent 88%), color-mix(in srgb, var(--petrol-acik), transparent 92%)); color: color-mix(in srgb, var(--petrol), transparent 45%); font-size: 40px; } .kartIc { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 20px; } .kartIc h3 { font-size: 18px; margin: 0 0 8px; } .kartIc h3 a { color: var(--murekkep); } .kart:hover .kartIc h3 a { color: var(--petrol); } .kartOzet { color: var(--metin-soluk); font-size: 15px; margin: 0 0 14px; flex: 1; } /* * Kart künyesi: her bilgi AYRI SATIRDA. * Kullanıcının uyarısı: proje kartında kurum bilgisi ile süre bitişikti, * kurum süre satırının üstüne binmiş gibi görünüyordu. */ .kartKunye { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-top: 14px; border-top: 1px solid var(--cizgi); font-size: 13.5px; color: var(--metin-soluk); } .kartKunye .satir { display: flex; align-items: center; gap: 8px; } .kartKunye .satir i { color: var(--petrol); font-size: 15px; flex: none; } .kartKunye .satir span { min-width: 0; overflow-wrap: anywhere; } /* --- Izgara ------------------------------------------------------------ */ .izgara { display: grid; gap: 24px; } .izgara-3 { grid-template-columns: repeat(3, 1fr); } .izgara-2 { grid-template-columns: repeat(2, 1fr); } .izgara-4 { grid-template-columns: repeat(4, 1fr); } /* İçerik + yan sütun (ders ve proje detayı). */ .ikiSutun { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(250px, 1fr); gap: 40px; align-items: start; } @media (max-width: 900px) { .ikiSutun { grid-template-columns: 1fr; gap: 30px; } } /* --- Etiket / pill ----------------------------------------------------- */ .etiket { display: inline-flex; align-items: center; gap: 6px; padding: 4px 13px; border-radius: 50px; font-size: 12.5px; font-weight: 500; line-height: 1.6; color: var(--petrol); background: color-mix(in srgb, var(--petrol), transparent 92%); border: 1px solid color-mix(in srgb, var(--petrol), transparent 80%); transition: background var(--gecis), color var(--gecis), transform var(--gecis); } a.etiket:hover { background: color-mix(in srgb, var(--petrol), transparent 84%); transform: translateY(-2px); } .etiket.dolu { background: var(--petrol); border-color: var(--petrol); color: #fff; } .etiket.sessiz { color: var(--metin-soluk); background: var(--zemin-yumusak); border-color: var(--cizgi); } .etiketler { display: flex; flex-wrap: wrap; gap: 7px; } /* Uzmanlık alanları: etiketten biraz büyük, oval, simgeli. */ /* * Çalışma alanları EŞİT GENİŞLİKTE ızgara hücreleri. * * Önce esnek satır (`flex-wrap`) kullanılıyordu ve balon genişliği metne * göre değişiyordu: Türkçe adlar kısa olduğu için tek satıra sığıyor, * İngilizceleri uzun olduğu için ikinci satıra taşıyordu — aynı bölüm iki * dilde iki farklı yükseklikte görünüyordu. * * `auto-fit` boş sütunları çökerttiği için öğe sayısı kaç olursa olsun * hepsi eşit genişlikte kalıyor; metin sığmazsa balonun içinde alt satıra * geçiyor ve `align-items: stretch` sayesinde bütün balonlar aynı boyda. */ .uzmanlikListe { display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: 8px; align-items: stretch; } .uzmanlik { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 9px 15px; border-radius: 50px; text-align: center; background: var(--yuzey); border: 1px solid var(--cizgi); font-size: 14.5px; font-weight: 600; color: var(--murekkep); line-height: 1.3; box-shadow: var(--golge-kucuk); transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis), color var(--gecis); } .uzmanlik i { flex: none; } .uzmanlik i { color: var(--petrol); font-size: 17px; } .uzmanlik:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--petrol), transparent 55%); box-shadow: var(--golge-orta); color: var(--petrol); } /* --- Üç şapka ---------------------------------------------------------- */ .sapkaKart { display: block; height: 100%; padding: 26px 22px; text-align: center; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--kose); transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis); } .sapkaKart:hover { transform: translateY(-8px); border-color: color-mix(in srgb, var(--petrol), transparent 55%); box-shadow: var(--golge-buyuk); } .sapkaSimge { width: 58px; height: 58px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 18px; font-size: 28px; color: var(--petrol); background: color-mix(in srgb, var(--petrol), transparent 90%); transition: background var(--gecis), color var(--gecis), transform var(--gecis); } .sapkaKart:hover .sapkaSimge { background: var(--petrol); color: #fff; transform: rotate(-6deg) scale(1.06); } .sapkaKart h3 { font-size: 19px; margin: 0 0 10px; } .sapkaKart p { color: var(--metin-soluk); font-size: 14.5px; margin: 0; } /* --- Özgeçmiş kartları ------------------------------------------------- */ .kurumBasi { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; } .kurumLogo { width: 54px; height: 54px; flex: none; object-fit: contain; background: #fff; padding: 5px; border: 1px solid var(--cizgi); border-radius: 12px; } .kurumHarf { width: 54px; height: 54px; flex: none; display: grid; place-items: center; border-radius: 12px; font-family: var(--yazi-baslik); font-size: 24px; font-weight: 700; color: var(--petrol); background: color-mix(in srgb, var(--petrol), transparent 90%); } .kurumBasi h3 { font-size: 17.5px; margin: 0; } .kurumBasi .yer { font-size: 13px; color: var(--metin-soluk); margin: 3px 0 0; } .gorevListe { list-style: none; margin: 14px 0 0; padding: 0; } .gorevListe > li { padding: 13px 0; border-top: 1px solid var(--cizgi); } .gorevListe > li:first-child { border-top: 0; padding-top: 4px; } .gorevUst { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; } .gorevUst strong { font-size: 15.5px; color: var(--murekkep); } .gorevSure { font-size: 13px; color: var(--metin-soluk); white-space: nowrap; } .gorevBirim { font-size: 13.5px; color: var(--metin-soluk); margin: 3px 0 0; } .rozet { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 50px; font-size: 11px; font-weight: 600; letter-spacing: .02em; background: var(--petrol); color: #fff; vertical-align: middle; } /* --- Yayın kartı ------------------------------------------------------- */ .yayinKart { display: flex; gap: 18px; /* * IZGARA PATLAMASINI ENGELLİYOR. * * Kart bir ızgara öğesi ve ızgara öğesinin varsayılan en küçük boyutu * `auto` — yani içindeki en dar hâle sığmayan en geniş içeriğe göre. * Atıf kutusundaki BibTeX bloğu tek satırda 41 yazar yazıyor; bu satırın * en-az-içerik genişliği 6000px çıkıp bütün ızgara sütununu şişiriyordu * (ölçüldü: sayfa 1265px yerine 6199px). `min-width: 0` bu tabanı * kaldırıyor, uzun satır kendi kutusunda kayıyor. * * `
` üzerindeki `overflow-x: auto` tek başına YETMİYOR: o kural
   * öğenin kendi kaydırmasını sağlıyor ama üstteki ızgara öğesinin
   * en-az-içerik hesabına giren katkısını sıfırlamıyor.
   */
  min-width: 0;
  padding: 22px;
  background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.yayinKart:hover {
  transform: translateX(5px);
  border-color: color-mix(in srgb, var(--petrol), transparent 55%);
  box-shadow: var(--golge-orta);
}
.yayinYil {
  flex: none; width: 68px; text-align: center;
  padding: 10px 0; border-radius: var(--kose-kucuk);
  background: color-mix(in srgb, var(--petrol), transparent 92%);
  color: var(--petrol);
  font-family: var(--yazi-baslik); font-weight: 700; font-size: 18px;
  align-self: flex-start;
}
.yayinKart h3 { font-size: 17px; margin: 0 0 7px; line-height: 1.4; }
.yayinYazarlar { font-size: 14px; color: var(--metin); margin: 0 0 5px; }
.yayinYer { font-size: 14px; font-style: italic; color: var(--metin-soluk); margin: 0 0 9px; }

/* --- Oynatma listesi kartı (videolar) ---------------------------------- */

.listeKart {
  position: relative; display: block; height: 100%;
  padding: 26px 24px;
  background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--kose); overflow: hidden;
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.listeKart:hover {
  transform: translateY(-7px);
  border-color: color-mix(in srgb, var(--petrol), transparent 55%);
  box-shadow: var(--golge-buyuk);
}
.listeKartSimge {
  width: 54px; height: 54px; margin-bottom: 16px;
  display: grid; place-items: center; border-radius: 14px;
  font-size: 25px; color: var(--petrol);
  background: color-mix(in srgb, var(--petrol), transparent 90%);
  transition: background var(--gecis), color var(--gecis);
}
.listeKart:hover .listeKartSimge { background: var(--petrol); color: #fff; }
.listeKart h3 { font-size: 18px; margin: 0 0 8px; color: var(--murekkep); }
.listeKartSayi { font-size: 14px; color: var(--metin-soluk); margin: 0; }

/* --- Profil kartı (logolu akademik/sosyal profiller) -------------------- */

.profilIzgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }

.profilKart {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.profilKart:hover {
  transform: translateY(-5px);
  box-shadow: var(--golge-orta);
  border-color: color-mix(in srgb, var(--petrol), transparent 55%);
}
/* Her profilin kendi rengi `--marka` ile geliyor (satır içi stil). */
.profilSimge {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center; border-radius: 12px;
  font-size: 21px; font-weight: 700;
  color: var(--marka, var(--petrol));
  background: color-mix(in srgb, var(--marka, var(--petrol)), transparent 88%);
  transition: background var(--gecis), color var(--gecis);
}
.profilKart:hover .profilSimge { background: var(--marka, var(--petrol)); color: #fff; }
.profilSimge .harf { font-family: var(--yazi-baslik); font-size: 17px; letter-spacing: -0.03em; }
.profilAd { font-weight: 600; color: var(--murekkep); font-size: 15px; display: block; }
.profilAlt { font-size: 12.5px; color: var(--metin-soluk); }

/* --- İletişim kutusu --------------------------------------------------- */

.iletisimKutu {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 22px;
  background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.iletisimKutu:hover {
  transform: translateY(-5px); box-shadow: var(--golge-orta);
  border-color: color-mix(in srgb, var(--petrol), transparent 55%);
}
.iletisimSimge {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center; border-radius: 13px;
  font-size: 21px; color: #fff; background: var(--petrol);
}
.iletisimKutu h3 { font-size: 15px; margin: 0 0 4px; }
.iletisimKutu p { margin: 0; font-size: 15px; }

/* --- Duyuru şeridi ----------------------------------------------------- */

.duyuruKart {
  display: block;
  padding: 20px 22px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-left: 4px solid var(--petrol);
  border-radius: var(--kose-kucuk);
  transition: transform var(--gecis), box-shadow var(--gecis);
}
.duyuruKart:hover { transform: translateX(5px); box-shadow: var(--golge-orta); }
.duyuruKart h3 { font-size: 17px; margin: 0 0 6px; color: var(--murekkep); }
.duyuruKart:hover h3 { color: var(--petrol); }
.duyuruKart .kunye { margin: 0; }

/* --- Birlikte çalışalım (iletişim çağrısı) ------------------------------ */

/*
 * Fotoğraf ARKA PLAN DEĞİL, metnin yanında.
 * Arka plana konsaydı ortalanmış metinle boğuşurdu; yan yana durunca
 * ikisi de okunuyor ve bölüm "tasarlanmış" görünüyor.
 */
/*
 * Fotoğraf KIRPILMIYOR: kaynak 1600×1200, yani tam 4:3. Oran korunuyor,
 * onun yerine SÜTUN DARALTILIYOR — 300px genişlikte yüksekliği ~225px
 * oluyor ve metin sütunuyla aynı boya geliyor. Böylece bölüm, fotoğraf
 * eklenmeden önceki yüksekliğinde (~370px) kalıyor.
 *
 * Geniş bir kesir (.92fr) verilseydi fotoğraf ~500px olur, satır
 * yüksekliğini o belirler ve bölüm ~150px uzardı.
 */
.cagriIzgara {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.cagriGorsel {
  position: relative;
  border-radius: var(--kose);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .34);
}
.cagriGorsel img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;   /* kaynağın kendi oranı — kırpma yok */
  object-fit: cover;
}
/* Hafif petrol perde: fotoğraf koyu zeminden kopmasın. */
.cagriGorsel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(190deg, rgba(5,33,42,.10) 0%, rgba(5,33,42,.46) 100%);
}

.cagriMetin h2 { font-size: clamp(24px, 3.2vw, 32px); margin: 0 0 14px; }
.cagriMetin p { color: #b9d3d8; margin: 0 0 26px; max-width: 46ch; }

@media (max-width: 860px) {
  /* Dar ekranda fotoğraf üstte, metin altında. Oran yine korunuyor. */
  .cagriIzgara { grid-template-columns: 1fr; gap: 28px; }
  .cagriGorsel { max-width: 420px; }
}

/* --- İletişim formu ----------------------------------------------------- */

.formSarmal {
  max-width: 720px; margin: 0 auto;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  padding: 32px;
  box-shadow: var(--golge-kucuk);
}

.formSarmal label {
  display: block;
  font-size: 14px; font-weight: 600; color: var(--murekkep);
  margin-bottom: 7px;
}
.formSarmal .zorunlu { color: #c0392b; font-weight: 400; }

.formSarmal input[type="text"],
.formSarmal input[type="email"],
.formSarmal textarea {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 18px;
  font-family: inherit; font-size: 15px; color: var(--metin);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-kucuk);
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.formSarmal input:focus, .formSarmal textarea:focus {
  outline: none;
  border-color: var(--petrol);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--petrol), transparent 85%);
}
.formSarmal textarea { resize: vertical; min-height: 150px; }

.formIkili { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

.formHata {
  margin: -13px 0 16px;
  font-size: 13.5px; color: #c0392b;
}

.formAlt {
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap; margin-top: 6px;
}
.formAlt .kunye { margin: 0; flex: 1 1 240px; }

/*
 * Bot tuzağı: ekran dışına alınıyor, `display:none` DEĞİL — bazı botlar
 * gizli alanları atlıyor, ekran dışındakini dolduruyor.
 */
.tuzak {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.formSonuc {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px 22px; border-radius: var(--kose);
  font-size: 15.5px;
}
.formSonuc i { font-size: 22px; flex: none; margin-top: 1px; }
.formSonuc.basarili {
  background: color-mix(in srgb, var(--petrol), transparent 92%);
  border: 1px solid color-mix(in srgb, var(--petrol), transparent 78%);
  color: var(--petrol-koyu);
}
.formSonuc.hatali {
  background: #fdf0ee; border: 1px solid #f0c8c2; color: #a03526;
  margin-bottom: 22px;
}

@media (max-width: 600px) {
  .formSarmal { padding: 22px 18px; }
  .formIkili { grid-template-columns: 1fr; }
}

/* --- Hobi kartları ------------------------------------------------------ */

/*
 * Her kart kendi rengini `--hobi` değişkeniyle taşıyor; değer sabit
 * listeden geliyor (bkz. hobi_rengi), serbest metin değil.
 * Sitenin geri kalanı tek renk üzerine kurulu — burası bilinçli olarak
 * renkli, çünkü sayfanın işi kişisel tarafı göstermek.
 */
.hobiIzgara {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.hobiKart {
  position: relative;
  overflow: hidden;
  padding: 30px 26px 26px;
  border-radius: var(--kose);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}

/* Üstteki renkli şerit — kartın kimliği. */
.hobiKart::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--hobi);
}

/* Köşedeki soluk renk lekesi. */
.hobiKart::after {
  content: "";
  position: absolute; top: -40px; right: -40px;
  width: 150px; height: 150px; border-radius: 50%;
  background: var(--hobi);
  opacity: .07;
}

.hobiKart:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--hobi), transparent 55%);
  box-shadow: var(--golge-buyuk);
}

.hobiKart .hobiSimge {
  position: relative; z-index: 1;
  width: 54px; height: 54px; margin-bottom: 16px;
  display: grid; place-items: center; border-radius: 15px;
  font-size: 25px;
  color: var(--hobi);
  background: color-mix(in srgb, var(--hobi), transparent 88%);
  transition: background var(--gecis), color var(--gecis), transform var(--gecis);
}
.hobiKart:hover .hobiSimge { background: var(--hobi); color: #fff; transform: rotate(-6deg); }

.hobiEtiket {
  position: relative; z-index: 1;
  display: inline-block; margin-bottom: 8px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--hobi);
}

.hobiKart h3 { position: relative; z-index: 1; font-size: 19px; margin: 0 0 10px; }
.hobiKart p  { position: relative; z-index: 1; margin: 0; color: var(--metin-soluk); font-size: 15px; }

/* Öne çıkan hobi iki sütun kaplıyor. */
.hobiKart.genis { grid-column: span 2; }

@media (max-width: 900px) {
  .hobiIzgara { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .hobiIzgara { grid-template-columns: 1fr; }
  .hobiKart.genis { grid-column: auto; }
}

/* --- Dünya haritası (seyahatname) --------------------------------------- */

/*
 * Boyama tamamen CSS ile. SVG'nin kendi `fill="#B9B9B9"` nitelikleri
 * *sunum niteliği* olduğu için buradaki kurallar onları eziyor —
 * dosyayı temizlemeye gerek kalmıyor.
 */
.harita { width: 100%; }
.harita svg { width: 100%; height: auto; display: block; }

/* Zemin ve okyanus sayfa rengine uyuyor. */
.harita #World, .harita #Ocean { fill: transparent; stroke: none; }

/* Gidilmemiş ülkeler: soluk, geri planda. */
.harita g path {
  fill: #dde7e9;
  stroke: var(--zemin);
  stroke-width: .6;
  transition: fill .2s ease;
}

/* Gidilen ülkeler. */
.harita g.gidildi path { fill: var(--petrol); }
.harita g.yasadim path { fill: var(--murekkep); }

/* İmleç üstündeyken belirginleşiyor; `` ipucunu tarayıcı gösteriyor. */
.harita g.gidildi:hover path { fill: var(--petrol-acik); }
.harita g.yasadim:hover path { fill: var(--petrol-koyu); }

/*
 * Türkiye haritası. SVG'de hiç renk tanımı yok (yollar çıplak), üstteki
 * `.harita g path` kuralı varsayılan rengi de veriyor. Burada yalnızca
 * ölçü ve çizgi kalınlığı ayarlanıyor: iller ülkelere göre küçük şekiller,
 * ince çizgide birbirine yapışıyorlar.
 */
.haritaTurkiye { max-width: 820px; margin: 0 auto; }
.haritaTurkiye g path { stroke: var(--zemin); stroke-width: 1.1; }

.haritaAnahtar {
  display: flex; justify-content: center; gap: 22px; flex-wrap: wrap;
  margin-top: 20px; font-size: 14px; color: var(--metin-soluk);
}
.haritaAnahtar span { display: inline-flex; align-items: center; gap: 8px; }
.haritaKutu {
  width: 15px; height: 15px; border-radius: 4px; display: inline-block;
}
.haritaKutu.gidildi { background: var(--petrol); }
.haritaKutu.yasadim { background: var(--murekkep); }

@media (prefers-reduced-motion: reduce) {
  .harita g path { transition: none; }
}

/* --- Sayfa başlığı şeridi ---------------------------------------------- */

.sayfaBasi {
  background: var(--murekkep-derin);
  color: #fff;
  padding: 118px 0 42px;
  position: relative; overflow: hidden;
}
.sayfaBasi::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(64% 90% at 84% 12%, rgba(18,163,181,.30), transparent 60%);
}

/*
 * Fotoğraflı başlık şeridi (örn. Hakkımda).
 * Fotoğrafın üstüne koyu perde iniyor: başlık hangi fotoğrafta olursa
 * olsun okunur kalsın.
 */
.sayfaBasi.gorselli { padding: 138px 0 52px; }
.sayfaBasiGorsel {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 32%;
  opacity: .30;
}
.sayfaBasi.gorselli::after {
  background:
    linear-gradient(100deg, rgba(5,33,42,.92) 0%, rgba(5,33,42,.70) 52%, rgba(5,33,42,.46) 100%),
    radial-gradient(64% 90% at 84% 12%, rgba(18,163,181,.26), transparent 60%);
}

/*
 * Başlık şeridindeki figür (arka planı silinmiş portre).
 *
 * Mutlak konumlu: şeridin yüksekliğini ve başlığın yerini DEĞİŞTİRMİYOR.
 * Kahramandaki figürle aynı kural — orada ızgara sütunu yapılınca metin
 * sıkışmıştı, o hata burada tekrarlanmıyor.
 */
.sayfaBasiFigur {
  position: absolute;
  right: max(16px, calc(50vw - 560px));
  /* %90 ve alttan %5: figür şeridin üst ve alt kenarına değmiyor. */
  bottom: 5%;
  z-index: 2;
  /* %100 verilince baş ve omuzlar kenara değiyordu; %90 nefes payı bırakıyor.
     Daha büyüğünde ise başın üstü kırpılıyor (overflow: hidden). */
  height: 90%;
  display: flex; align-items: flex-end;
  pointer-events: none;
}
.sayfaBasiFigur picture { display: block; height: 100%; }
.sayfaBasiFigur img {
  display: block;
  height: 100%; width: auto;
  object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .42));
}

/*
 * Başlık ve açıklama figürün altına girmesin.
 * %34 fazlaydı: açıklama iki satıra sarıp kırıntı yoluna yapışıyordu.
 * Figür ~195px genişlikte, kapsayıcı kenarına ~200px uzakta; %22 yeterli.
 */
.sayfaBasi.figurlu .sayfaBasiIc { padding-right: 20%; }

@media (max-width: 991px) {
  .sayfaBasiFigur { height: 88%; right: 12px; }
  .sayfaBasi.figurlu .sayfaBasiIc { padding-right: 30%; }
}

@media (max-width: 700px) {
  /* Dar ekranda figür kaldırılıyor: başlığa yer bırakmıyordu. */
  .sayfaBasiFigur { display: none; }
  .sayfaBasi.figurlu .sayfaBasiIc { padding-right: 24px; }
}
.sayfaBasiIc { position: relative; z-index: 2; }
.sayfaBasi h1 { color: #fff; font-size: clamp(28px, 4vw, 40px); margin: 0 0 10px; }
.sayfaBasi p { color: #b9d3d8; margin: 0; max-width: 680px; }

/*
 * Figürlü şeritte açıklamanın 680px sınırı kalkıyor: sınır yüzünden metin
 * iki satıra sarıp kırıntı yoluna yaklaşıyordu. Figürden uzak durmayı
 * zaten `padding-right` sağlıyor, ayrıca genişlik sınırı gerekmiyor.
 */
.sayfaBasi.figurlu .sayfaBasiIc p { max-width: none; }

.kirinti { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; font-size: 13.5px; }
.kirinti li { color: rgba(255,255,255,.62); }
.kirinti li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.kirinti a { color: #9fd4dd; }
.kirinti a:hover { color: #fff; }

/* --- Künye / yardımcı --------------------------------------------------- */

.kunye { font-size: 13.5px; color: var(--metin-soluk); }
.kunye a { color: var(--metin-soluk); text-decoration: underline; text-underline-offset: 2px; }
.kunye a:hover { color: var(--petrol); }

.bos {
  padding: 56px 24px; text-align: center;
  border: 1px dashed var(--cizgi); border-radius: var(--kose);
  color: var(--metin-soluk);
}

.ortaDugme { text-align: center; margin-top: 40px; }

/* --- İçerik gövdesi (yazı, sayfa metni) -------------------------------- */

/* --- Paylaşım bağlantıları ---------------------------------------------- */

/*
 * Yazının altındaki paylaşım şeridi. Platformların hazır düğmeleri yerine
 * düz bağlantılar; her düğme kendi marka rengini `--marka` ile alıyor ve
 * yalnızca fareyle üzerine gelince o renge boyanıyor — şerit sakin dursun.
 */
.paylas {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px;
  margin-top: 34px; padding-top: 22px;
  border-top: 1px solid var(--cizgi);
}
.paylasEtiket {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 600; color: var(--metin-soluk);
}
.paylasDugmeler { display: flex; flex-wrap: wrap; gap: 8px; }

.paylasDugme {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 50px;
  border: 1px solid var(--cizgi); background: var(--yuzey);
  font-size: 13.5px; font-weight: 600; font-family: inherit;
  color: var(--metin); cursor: pointer; text-decoration: none;
  transition: color var(--gecis), border-color var(--gecis), background var(--gecis);
}
.paylasDugme i { font-size: 15px; }
.paylasDugme:hover {
  color: var(--marka);
  border-color: color-mix(in srgb, var(--marka), transparent 60%);
  background: color-mix(in srgb, var(--marka), transparent 94%);
}
.paylasDugme.kopyalandi { color: var(--petrol); border-color: var(--petrol); }

@media (max-width: 575px) {
  /* Dar ekranda etiket metinleri gizleniyor; simgeler tek satıra sığsın. */
  .paylasDugme span { display: none; }
  .paylasDugme { padding: 9px 12px; }
}

.icerikGovde { max-width: 760px; font-size: 16.5px; line-height: 1.82; }
.icerikGovde > *:first-child { margin-top: 0; }

/*
 * Metin hizalama ve girinti — panelde zengin metin düzenleyiciden geliyor.
 *
 * Sınıf adları bizim (bkz. IZINLI_SINIFLAR); düzenleyicinin kendi
 * `ql-align-*` adları kaydederken bunlara çevriliyor, böylece içerik
 * kütüphaneye bağlı kalmıyor. Sola yaslı varsayılan olduğu için sınıfı yok.
 */
.metinOrta { text-align: center; }
.metinSag { text-align: right; }
.metinIkiYana { text-align: justify; text-justify: inter-word; }

.metinGirinti1 { padding-left: 2.4em; }
.metinGirinti2 { padding-left: 4.8em; }
.metinGirinti3 { padding-left: 7.2em; }

/* Girintili liste öğesi zaten içeride; ikinci kez kaydırılmasın. */
.icerikGovde li.metinGirinti1 { padding-left: 1.2em; }
.icerikGovde li.metinGirinti2 { padding-left: 2.4em; }
.icerikGovde li.metinGirinti3 { padding-left: 3.6em; }

@media (max-width: 575px) {
  /* Telefonda derin girinti satırı okunmaz hâle getiriyor. */
  .metinGirinti1 { padding-left: 1.2em; }
  .metinGirinti2 { padding-left: 2.2em; }
  .metinGirinti3 { padding-left: 3.2em; }
}
.icerikGovde p { margin: 0 0 1.2rem; }
.icerikGovde h2 { font-size: 25px; margin: 2.1rem 0 .9rem; }
.icerikGovde h3 { font-size: 20px; margin: 1.8rem 0 .8rem; }
.icerikGovde img { border-radius: var(--kose); margin: 1.6rem 0; display: block; }
.icerikGovde ul, .icerikGovde ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.icerikGovde li { margin-bottom: .45rem; }
.icerikGovde blockquote {
  margin: 1.7rem 0; padding: .4rem 0 .4rem 1.3rem;
  border-left: 4px solid var(--petrol); color: var(--metin-soluk); font-style: italic;
}
.icerikGovde pre {
  background: var(--zemin-yumusak); border: 1px solid var(--cizgi);
  padding: 1.1rem 1.2rem; border-radius: var(--kose-kucuk);
  overflow-x: auto; font-size: 14px; line-height: 1.65;
}
.icerikGovde code {
  font-size: 14.5px; background: var(--zemin-yumusak);
  padding: .12rem .4rem; border-radius: 5px; color: var(--petrol-koyu);
}
.icerikGovde pre code { background: none; padding: 0; color: inherit; }
.icerikGovde hr { border: 0; border-top: 1px solid var(--cizgi); margin: 2.4rem 0; }
/* Tablo dar ekranda sayfayı değil kendini kaydırsın. */
.icerikGovde table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.icerikGovde th, .icerikGovde td { border: 1px solid var(--cizgi); padding: .6rem .8rem; text-align: left; }
.icerikGovde th { background: var(--zemin-yumusak); }

/* --- Görsel kaydırağı (proje galerisi) --------------------------------- */

/*
 * Soldan sağa kayan görsel şeridi.
 *
 * Kütüphane kullanılmıyor: yatay kaydırmayı tarayıcının kendisi yapıyor
 * (`overflow-x`), `tema.js` yalnızca kendiliğinden ilerletiyor ve okları
 * bağlıyor. JS çalışmazsa şerit hâlâ elle kaydırılabilir durumda kalıyor.
 */
.kaydirak { position: relative; }

.kaydirakSerit {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 2px 14px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--petrol), transparent 40%) transparent;
}
.kaydirakSerit::-webkit-scrollbar { height: 7px; }
.kaydirakSerit::-webkit-scrollbar-track { background: var(--zemin-yumusak); border-radius: 6px; }
.kaydirakSerit::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--petrol), transparent 45%);
  border-radius: 6px;
}

.kaydirakOge {
  flex: 0 0 auto;
  width: min(420px, 78vw);
  scroll-snap-align: start;
  margin: 0;
}

.kaydirakOge a {
  display: block;
  overflow: hidden;
  border-radius: var(--kose);
  border: 1px solid var(--cizgi);
  background: var(--zemin-yumusak);
}
.kaydirakOge img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.kaydirakOge a:hover img { transform: scale(1.05); }
.kaydirakOge figcaption { margin-top: 10px; font-size: 13.5px; color: var(--metin-soluk); }

/* Oklar: şeridin dışına değil üstüne biniyor. */
.kaydirakOk {
  position: absolute; top: calc(50% - 30px);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--cizgi); border-radius: 50%;
  background: var(--ust-zemin);
  color: var(--murekkep); font-size: 22px; cursor: pointer;
  box-shadow: var(--golge-orta);
  transition: background var(--gecis), color var(--gecis), opacity var(--gecis);
  z-index: 3;
}
.kaydirakOk:hover { background: var(--petrol); color: #fff; border-color: var(--petrol); }
.kaydirakOk.geri { left: -10px; }
.kaydirakOk.ileri { right: -10px; }
.kaydirakOk[disabled] { opacity: .35; cursor: default; }
.kaydirakOk[disabled]:hover { background: rgba(255,255,255,.94); color: var(--murekkep); border-color: var(--cizgi); }

@media (max-width: 767px) {
  /* Dar ekranda oklar yer kaplamasın; parmakla kaydırmak zaten doğal. */
  .kaydirakOk { display: none; }
  .kaydirakOge { width: 84vw; }
}

/* --- Video gömme ------------------------------------------------------- */

.videoCerceve {
  position: relative; padding-bottom: 56.25%; height: 0;
  overflow: hidden; border-radius: var(--kose); margin-bottom: 1.6rem;
  background: var(--murekkep-derin);
}
.videoCerceve iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Sayfalama --------------------------------------------------------- */

.sayfalama { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; margin-top: 44px; }
.sayfalama a, .sayfalama span {
  min-width: 40px; text-align: center;
  padding: 9px 14px; border-radius: 10px;
  border: 1px solid var(--cizgi); font-size: 14.5px; color: var(--metin);
  transition: all var(--gecis);
}
.sayfalama a:hover { border-color: var(--petrol); color: var(--petrol); }
.sayfalama .etkin { background: var(--petrol); border-color: var(--petrol); color: #fff; }

/* --- Altbilgi ---------------------------------------------------------- */

.alt { background: var(--murekkep-derin); color: #a9c4c9; padding: 60px 0 28px; font-size: 14.5px; }
.alt h4 { color: #fff; font-size: 15px; margin: 0 0 16px; letter-spacing: .01em; }
.alt a { color: #a9c4c9; }
.alt a:hover { color: #7fd6e2; }
.alt .altAd { font-family: var(--yazi-baslik); font-size: 19px; font-weight: 700; color: #fff; display: block; margin-bottom: 12px; }
.alt ul { list-style: none; margin: 0; padding: 0; }
.alt ul li { margin-bottom: 9px; }
.altSosyal { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.altSosyal a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 10px; font-size: 17px;
  background: rgba(255,255,255,.07); color: #cfe2e5;
  transition: background var(--gecis), color var(--gecis), transform var(--gecis);
}
.altSosyal a:hover { background: var(--petrol); color: #fff; transform: translateY(-3px); }
.altKapanis {
  margin-top: 44px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: 13.5px; color: #7f9aa0;
  /* Telif solda, sayaç sağda; dar ekranda alt alta ve ortalanmış. */
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: center; gap: 8px 18px;
}

/* Tek öğe varken (sayaç henüz sıfırsa) ortada dursun. */
.altKapanis > :only-child { margin-inline: auto; }

.altSayac { display: inline-flex; align-items: center; gap: 7px; }
.altSayac i { font-size: 15px; opacity: .8; }

@media (max-width: 575px) {
  .altKapanis { justify-content: center; text-align: center; }
}

/* --- Yukarı çık -------------------------------------------------------- */

.yukari {
  position: fixed; right: 20px; bottom: 20px; z-index: 800;
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--petrol); color: #fff; font-size: 22px;
  box-shadow: var(--golge-orta);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--gecis), visibility var(--gecis), transform var(--gecis), background var(--gecis);
}
.yukari.gorunur { opacity: 1; visibility: visible; transform: translateY(0); }
.yukari:hover { background: var(--petrol-acik); color: #fff; }

/* --- Belirme animasyonu ------------------------------------------------ */

/*
 * `tema.js` görünür olan öğeye `.icerde` ekliyor (IntersectionObserver).
 * JS çalışmazsa öğe zaten görünür kalıyor — `.belir` yalnızca JS varken
 * gizliyor (bkz. tema.js'in ilk satırı: <html> etiketine `js` sınıfı).
 */
.js .belir { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.4,0,.2,1); }
.js .belir.icerde { opacity: 1; transform: none; }

/* --- Dar ekran --------------------------------------------------------- */

@media (max-width: 991px) {
  .izgara-3, .izgara-4 { grid-template-columns: repeat(2, 1fr); }
  .sayaclar { grid-template-columns: repeat(2, 1fr); }
  .bolum { padding: 60px 0; }

  .menuDugme { display: block; }

  .menu {
    position: fixed; inset: 0 0 0 auto;
    width: min(320px, 84vw);
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 88px 20px 30px;
    background: var(--yuzey); box-shadow: -8px 0 40px rgba(20,49,58,.18);
    transform: translateX(100%);
    transition: transform var(--gecis);
    overflow-y: auto; z-index: 950;
  }
  body.menuAcik .menu { transform: translateX(0); }
  body.anasayfa .ust .menu > li > a { color: var(--murekkep); }

  .menu > li > a { padding: 12px 14px; font-size: 16px; }
  .menu > li > a.etkin::after { display: none; }
  .menu > li > a.etkin { background: color-mix(in srgb, var(--petrol), transparent 92%); }

  /* Açılır menü mobilde hep açık: fareyle üzerine gelme yok. */
  .menu .altMenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; padding: 0 0 0 14px; min-width: 0;
  }

  /* Menü açıkken arka planı karart. */
  .menuPerde {
    position: fixed; inset: 0; z-index: 940;
    background: rgba(5,33,42,.5);
    opacity: 0; visibility: hidden; transition: opacity var(--gecis), visibility var(--gecis);
  }
  body.menuAcik .menuPerde { opacity: 1; visibility: visible; }
  body.menuAcik { overflow: hidden; }

  .menuDugme { z-index: 960; position: relative; }
  body.menuAcik .menuDugme { color: var(--murekkep); }

  /*
   * Dil seçici eklenince üst bantta yer kalmadı ve hamburger düğmesi
   * ekranın dışına taşındı: ad + uzun alt başlık + TR/EN sığmıyordu.
   * Dar ekranda alt başlık gizleniyor — aynı bilgi kahraman bölümünde
   * ve Hakkımda sayfasında zaten yazıyor.
   */
  .ad { font-size: 17px; }
  .ad small { display: none; }
  .dilSecici { margin-left: 0; }
}

@media (max-width: 400px) {
  /* En dar telefonlarda ad da kısalıyor ki üç öge tek satıra sığsın. */
  .ad { font-size: 15px; }
  .dilSecici { padding-left: 8px; }
  .dilSecici a { padding: 5px 7px; font-size: 12px; }
}

@media (max-width: 767px) {
  .izgara-3, .izgara-4, .izgara-2 { grid-template-columns: 1fr; }
  /* Yine yalnızca dikey: kısayol `.kapsayici`nin yatay boşluğunu siliyordu. */
  .kahramanIc { padding-top: 110px; padding-bottom: 70px; }
  .sayfaBasi { padding: 104px 0 34px; }
  .yayinKart { flex-direction: column; gap: 12px; }
  .yayinYil { width: auto; align-self: flex-start; padding: 6px 16px; }
  .kahramanDugmeler .dugme { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 575px) {
  .sayaclar { gap: 12px; }
  .sayacKutu { padding: 20px 10px; }
  .sayacKutu .sayi { font-size: 32px; }
}

/* Hareket azaltma tercihi olan ziyaretçide animasyon yok. */
@media (prefers-reduced-motion: reduce) {
  .js .belir { opacity: 1; transform: none; transition: none; }
  * { transition: none !important; animation: none !important; }
}

/* ===========================================================================
   DERS SAYFASI SEKMELERİ VE İZLENCE
   =========================================================================== */

/*
 * Paneller sunucudan GÖRÜNÜR geliyor; sekmeye çevirme işini `tema.js`
 * yapıyor. JS kapalıyken üçü de alt alta okunuyor, çubuk çıpa gibi
 * çalışıyor — içerik gizlenmiyor.
 */
.dersSekmeler {
  display: flex;
  gap: 4px;
  margin: 0 0 26px;
  padding: 4px;
  background: var(--zemin-yumusak);
  border: 1px solid var(--cizgi);
  border-radius: 12px;
  /* Dar ekranda çubuk kendi içinde kaysın, sayfa yana kaymasın. */
  overflow-x: auto;
  scrollbar-width: none;
}

.dersSekmeler::-webkit-scrollbar { display: none; }

.dersSekme {
  flex: 0 0 auto;
  padding: 9px 18px;
  border-radius: 9px;
  font-family: var(--yazi-baslik);
  font-size: 14px;
  font-weight: 600;
  color: var(--metin-soluk);
  text-decoration: none;
  white-space: nowrap;
  transition: var(--gecis);
}

.dersSekme:hover { color: var(--murekkep); }

.dersSekme.aktif {
  background: var(--yuzey);
  color: var(--petrol);
  box-shadow: var(--golge-kucuk);
}

/* Panel başlıkları yalnızca JS KAPALIYKEN gerekli: sekme çubuğu
   çalışmadığında hangi bölümün nerede başladığı görünsün diye. */
.dersPanel { margin-bottom: 40px; }
.dersPanelBaslik { font-size: 22px; margin: 0 0 18px; }
.js .dersPanel { margin-bottom: 0; }
.js .dersPanelBaslik { display: none; }

/* --- İzlence künyesi --- */

.izlenceKunye {
  display: grid;
  /* `minmax(0, 1fr)`: uzun değer hücreyi taşırıp ızgarayı patlatmasın. */
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 1px;
  background: var(--cizgi);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  overflow: hidden;
  margin-bottom: 32px;
}

.izlenceKunyeHucre {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px 16px;
  background: var(--yuzey);
  min-width: 0;
}

.izlenceKunyeEtiket {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--metin-soluk);
}

.izlenceKunyeDeger {
  font-family: var(--yazi-baslik);
  font-size: 16px;
  font-weight: 600;
  color: var(--murekkep);
  overflow-wrap: anywhere;
}

/* --- İzlence bölümleri --- */

.izlenceBolum { margin-bottom: 34px; }

.izlenceBolum h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 18px;
  margin: 0 0 14px;
  color: var(--murekkep);
}

.izlenceBolum h3 i { color: var(--petrol); font-size: 17px; }

.izlenceMetin { margin: 0; line-height: 1.75; color: var(--metin); }

.izlenceCikti {
  margin: 0;
  padding-left: 0;
  list-style: none;
  counter-reset: cikti;
}

.izlenceCikti li {
  counter-increment: cikti;
  position: relative;
  padding: 9px 0 9px 40px;
  line-height: 1.65;
  border-top: 1px solid var(--cizgi);
}

.izlenceCikti li:first-child { border-top: 0; }

.izlenceCikti li::before {
  content: counter(cikti);
  position: absolute;
  left: 0;
  top: 10px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--zemin-yumusak);
  color: var(--petrol);
  font-family: var(--yazi-baslik);
  font-size: 12.5px;
  font-weight: 700;
}

.izlenceKaynak { margin: 0; padding-left: 20px; }
.izlenceKaynak li { padding: 6px 0; line-height: 1.65; }

/* --- Haftalık konu tablosu --- */

/*
 * Tablo kendi kutusunda kayıyor. Doğrudan sayfaya bırakılsaydı uzun konu
 * satırları dar ekranda gövdeyi yana kaydırırdı (proje geneli kural).
 */
.izlenceTabloKutu {
  overflow-x: auto;
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  background: var(--yuzey);
}

.izlenceTablo {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}

.izlenceTablo th {
  padding: 12px 16px;
  text-align: left;
  font-family: var(--yazi-baslik);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--metin-soluk);
  background: var(--zemin-yumusak);
  border-bottom: 1px solid var(--cizgi);
  white-space: nowrap;
}

.izlenceTablo td {
  padding: 12px 16px;
  border-top: 1px solid var(--cizgi);
  line-height: 1.55;
  vertical-align: top;
}

.izlenceTablo tbody tr:first-child td { border-top: 0; }
.izlenceTablo .sag { text-align: right; }

.izlenceHaftaNo {
  width: 62px;
  font-family: var(--yazi-baslik);
  font-weight: 700;
  color: var(--petrol);
  text-align: center;
}

.izlenceKonu { color: var(--murekkep); font-weight: 500; }
.izlenceKonu.bos { color: var(--metin-soluk); font-weight: 400; }

/* Sınav haftası vurgulu: öğrenci tabloyu okumadan sınavı görsün. */
.izlenceSatir.tur-sinav { background: var(--sinav-zemin); }
.izlenceSatir.tur-sinav .izlenceKonu { font-weight: 700; }
.izlenceSatir.tur-tatil { background: var(--zemin-yumusak); }
.izlenceSatir.tur-tatil .izlenceKonu { color: var(--metin-soluk); }

.izlenceEtiket {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #f0a24a;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  vertical-align: middle;
}

.izlenceEtiket.sonuk { background: var(--cizgi); color: var(--metin-soluk); }

.izlenceHazirlik {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: var(--metin-soluk);
}

.izlenceOlcut tfoot td {
  border-top: 2px solid var(--cizgi);
  font-weight: 700;
  color: var(--murekkep);
  background: var(--zemin-yumusak);
}

.izlenceKaynakNot {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 13px 15px;
  border-radius: var(--kose-kucuk);
  background: var(--zemin-yumusak);
  font-size: 13px;
  color: var(--metin-soluk);
  line-height: 1.6;
}

.izlenceKaynakNot i { color: var(--petrol); margin-top: 2px; }
.izlenceKaynakNot a { color: var(--petrol); }

@media (max-width: 575px) {
  .izlenceTablo { font-size: 13.5px; }
  .izlenceTablo td, .izlenceTablo th { padding: 10px 12px; }
  .izlenceHaftaNo { width: 46px; }
  .dersSekme { padding: 8px 14px; font-size: 13.5px; }
}

/* Yazdırırken sekmeler anlamsız: paneller alt alta ve tamamı açık. */
@media print {
  .dersSekmeler { display: none; }
  .js .dersPanel[hidden] { display: block !important; }
  .js .dersPanelBaslik { display: block; }
  .izlenceTabloKutu { overflow: visible; }
  .izlenceSatir.tur-sinav { background: #f4f4f4; }
}

/* ===========================================================================
   ATIF KUTUSU (yayın kartı)
   =========================================================================== */

/*
 * `<details>` olduğu için açılıp kapanması JavaScript istemiyor; betik
 * kapalıyken de çalışıyor. Kopyala düğmesi ise JS'siz işe yaramadığı için
 * sunucudan `hidden` basılıp yalnızca pano varsa açılıyor.
 */
.atifKutu {
  margin-top: 14px;
  border-top: 1px solid var(--cizgi);
  padding-top: 12px;
}

.atifKutu > summary {
  display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 600; color: var(--metin-soluk);
  padding: 5px 12px; border: 1px solid var(--cizgi); border-radius: 999px;
  transition: var(--gecis);
  user-select: none;
}

.atifKutu > summary::-webkit-details-marker { display: none; }
.atifKutu > summary:hover { color: var(--petrol); border-color: var(--petrol); }
.atifKutu[open] > summary { color: var(--petrol); border-color: var(--petrol); margin-bottom: 14px; }

.atifBlok { margin-bottom: 14px; }
.atifBlok:last-child { margin-bottom: 0; }

.atifBaslik {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}

.atifBaslik > span {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--metin-soluk);
}

.metinKopyala {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 1px solid var(--cizgi); border-radius: 7px;
  background: var(--yuzey); color: var(--metin-soluk);
  font: inherit; font-size: 12px; cursor: pointer;
  transition: var(--gecis);
}

.metinKopyala:hover { color: var(--petrol); border-color: var(--petrol); }
.metinKopyala.kopyalandi { color: var(--basari-renk); border-color: var(--basari-renk); }

.atifMetin {
  margin: 0; padding: 12px 14px;
  background: var(--zemin-yumusak); border-radius: var(--kose-kucuk);
  font-size: 13.5px; line-height: 1.65; color: var(--metin);
  /* Uzun DOI adresleri kutuyu taşırmasın. */
  overflow-wrap: anywhere;
}

.atifKod {
  margin: 0; padding: 12px 14px;
  background: var(--murekkep-derin); color: #cfe2e5;
  border-radius: var(--kose-kucuk);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12.5px; line-height: 1.6;
  /* Kendi kutusunda kayıyor: 42 yazarlı satır sayfayı yana kaydırmasın. */
  overflow-x: auto;
  white-space: pre;
  tab-size: 2;
}

/* ===========================================================================
   SİTE İÇİ ARAMA
   =========================================================================== */

/*
 * Başlıktaki arama düğmesi dil seçicinin solunda. Ana sayfada başlık
 * saydam ve kahramanın üstünde durduğu için renk oradaki kurala uyuyor
 * (bkz. `.dilSecici` — aynı gerekçe: beyaz zeminde beyaz yazı olmasın).
 */
.aramaDugme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px;
  color: var(--metin-soluk); font-size: 17px;
  transition: var(--gecis);
}

.aramaDugme:hover { color: var(--petrol); background: var(--zemin-yumusak); }

body.anasayfa .ust:not(.kaydi) .aramaDugme { color: rgba(255,255,255,.85); }
body.anasayfa .ust:not(.kaydi) .aramaDugme:hover { color: #fff; background: rgba(255,255,255,.12); }

/* --- Arama formu --- */

.aramaFormu {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 30px;
  padding: 8px 8px 8px 16px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi); border-radius: 999px;
  box-shadow: var(--golge-kucuk);
}

.aramaFormu > i { color: var(--metin-soluk); font-size: 17px; flex: 0 0 auto; }

.aramaFormu input {
  flex: 1 1 auto;
  /* `min-width: 0` olmadan uzun yer tutucu metni düğmeyi dışarı itiyor. */
  min-width: 0;
  border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 16px; color: var(--murekkep);
  padding: 8px 0;
}

.aramaFormu input::placeholder { color: var(--metin-soluk); }
.aramaFormu:focus-within { border-color: var(--petrol); }
.aramaFormu .dugme { flex: 0 0 auto; }

/* --- Sonuçlar --- */

.aramaSayi { margin: 0 0 16px; color: var(--metin-soluk); font-size: 14px; }

.aramaListe { display: grid; gap: 12px; }

.aramaSonuc {
  display: block; text-decoration: none;
  /* Uzun başlık kartı taşırmasın (ızgara öğesi). */
  min-width: 0;
  padding: 18px 20px;
  background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}

.aramaSonuc:hover {
  transform: translateX(5px);
  border-color: color-mix(in srgb, var(--petrol), transparent 55%);
  box-shadow: var(--golge-orta);
}

.aramaUst {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px;
}

.aramaUst .kunye { margin: 0; font-size: 12.5px; }

.aramaSonuc h3 {
  font-size: 17px; margin: 0 0 6px; line-height: 1.4; color: var(--murekkep);
  overflow-wrap: anywhere;
}

.aramaSonuc p {
  margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--metin-soluk);
  overflow-wrap: anywhere;
}

/* Eşleşen kelime işaretleniyor; tarayıcının sarı vurgusu paletle çakışıyor. */
.aramaSonuc mark {
  background: color-mix(in srgb, var(--petrol), transparent 82%);
  color: inherit;
  border-radius: 3px; padding: 0 2px;
}

.aramaBos {
  text-align: center; padding: 50px 20px;
  border: 1px dashed var(--cizgi); border-radius: var(--kose);
  background: var(--zemin-yumusak);
}

.aramaBos i { font-size: 34px; color: var(--metin-soluk); opacity: .5; }
.aramaBos p { margin: 12px 0 0; }

@media (max-width: 575px) {
  .aramaFormu { padding-left: 13px; gap: 8px; }
  .aramaFormu input { font-size: 15px; }
  .aramaFormu .dugme { padding-inline: 14px; }
}

/* --- Tema düğmesi ------------------------------------------------------ */

/*
 * Arama düğmesiyle aynı ölçü ve davranış; ikisi dil seçicinin solunda
 * yan yana duruyor. Sunucudan `hidden` geliyor, `tema.js` açıyor —
 * JavaScript yoksa çalışmayan bir düğme görünmesin.
 */
.temaDugme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 9px; background: transparent;
  color: var(--metin-soluk); font-size: 16px; cursor: pointer;
  transition: var(--gecis);
}

.temaDugme:hover { color: var(--petrol); background: var(--zemin-yumusak); }

body.anasayfa .ust:not(.kaydi) .temaDugme { color: rgba(255,255,255,.85); }
body.anasayfa .ust:not(.kaydi) .temaDugme:hover { color: #fff; background: rgba(255,255,255,.12); }

/*
 * KOYU TEMADA GÖRSELLER.
 *
 * Kart kapakları ve galeri görselleri koyu zeminde fazla parlak duruyor.
 * Hafif karartma göz yormasını engelliyor; imleç üstündeyken tam parlaklığa
 * dönüyor ki ziyaretçi görselin gerçek hâlini görebilsin.
 *
 * Portre ve harita HARİÇ: kimliği anlatan fotoğrafın soluk görünmesi
 * ve haritanın soluklaşması istenmiyor.
 */
:root[data-tema="koyu"] .kartGorsel,
:root[data-tema="koyu"] .buyut img {
  filter: brightness(.88);
  transition: filter var(--gecis);
}

:root[data-tema="koyu"] .kart:hover .kartGorsel,
:root[data-tema="koyu"] .buyut:hover img { filter: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .kartGorsel,
  :root:not([data-tema="acik"]) .buyut img {
    filter: brightness(.88);
    transition: filter var(--gecis);
  }

  :root:not([data-tema="acik"]) .kart:hover .kartGorsel,
  :root:not([data-tema="acik"]) .buyut:hover img { filter: none; }
}

/*
 * TEMA DEĞİŞİRKEN GEÇİŞLER KAPALI.
 *
 * İki nedeni var:
 *
 *   1. Chromium'da bir `transition` listesindeki özelliğin değeri `var()`
 *      ile geliyorsa, değişken değiştiğinde hesaplanan değer YENİLENMİYOR.
 *      Başlık şeridi bu yüzden koyu temada beyaz kalıyordu (ölçüldü:
 *      geçiş açıkken rgba(255,255,255,.92), kapalıyken rgba(13,19,22,.92)).
 *   2. Kapatılmasaydı tema değişince sayfadaki her renk aynı anda solup
 *      açılırdı; düğmeye basınca anında değişmesi daha derli toplu.
 *
 * Sınıf yalnızca değişim anında duruyor; `tema.js` bir sonraki karede
 * kaldırıyor, böylece normal imleç geçişleri bozulmuyor.
 */
:root.temaGecisi,
:root.temaGecisi *,
:root.temaGecisi *::before,
:root.temaGecisi *::after {
  transition: none !important;
}

/* --- Seyahatname: ülke ızgarası ---------------------------------------- */

/*
 * Ülkeler büyük kart yerine sıkı kutularda. Gerekçe görünüm dosyasında
 * yazılı; özeti: 13 ülke büyük kartlarla sayfanın üçte birini alıyordu ve
 * kartların içi çoğunlukla boştu.
 */
.ulkeIzgara {
  display: grid;
  /*
   * En küçük sütun 160px: 390px genişliğinde telefonda (kenar boşlukları
   * düşünce ~350px kalıyor) iki sütun sığıyor. 190px olsaydı tek sütuna
   * düşüp 13 ülke 13 satır olurdu — ölçüldü, 1406px yapıyordu.
   * `min(...)` çok dar ekranda taşmayı engelliyor.
   */
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
  gap: 10px;
}

.ulkeKutu {
  min-width: 0;
  padding: 13px 15px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-kucuk);
  transition: transform var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
}

.ulkeKutu:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--petrol), transparent 55%);
  box-shadow: var(--golge-kucuk);
}

/* Yaşanan ülke soldaki şeritle ayrılıyor — rozet zaten altta duruyor. */
.ulkeKutu.yasadigim { border-left: 3px solid var(--petrol); }

.ulkeUst {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 5px;
}

.ulkeAd {
  font-family: var(--yazi-baslik);
  font-size: 15px; font-weight: 600; color: var(--murekkep);
  overflow-wrap: anywhere;
}

.ulkeKod {
  flex: 0 0 auto;
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  color: var(--metin-soluk);
}

.ulkeAlt {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--metin-soluk);
}

.ulkeKez::before { content: "· "; }

.ulkeRozet {
  padding: 1px 7px; border-radius: 999px;
  background: var(--petrol); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
}

.ulkeNot {
  margin: 7px 0 0; font-size: 12.5px; line-height: 1.5;
  color: var(--metin-soluk);
}

@media (max-width: 575px) {
  .ulkeIzgara { gap: 8px; }
  .ulkeKutu { padding: 11px 13px; }
}

/* --- Sayfalama kutusu -------------------------------------------------- */

/*
 * Sayfa numaraları ve sayfa başı seçici birlikte. Tamamı bağlantı;
 * JavaScript kapalıyken de çalışıyor.
 */
.sayfalamaKutu {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin-top: 36px; padding-top: 26px;
  border-top: 1px solid var(--cizgi);
}

.sayfaBasi {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  justify-content: center;
  font-size: 13px; color: var(--metin-soluk);
}

.sayfaBasiEtiket { font-weight: 600; }

.sayfaBasiSecenek {
  padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--cizgi);
  color: var(--metin-soluk); text-decoration: none;
  transition: var(--gecis);
}

.sayfaBasiSecenek:hover { color: var(--petrol); border-color: var(--petrol); }

.sayfaBasiSecenek.etkin {
  background: var(--petrol); border-color: var(--petrol); color: #fff;
  font-weight: 600;
}

/* Toplam sayı ayırıcıyla: seçeneklerin devamı sanılmasın. */
.sayfaBasiToplam::before { content: "· "; }
.sayfaBasiToplam { color: var(--metin-soluk); opacity: .8; }

@media (max-width: 575px) {
  .sayfaBasiEtiket { width: 100%; text-align: center; }
}