/* Renk tokenları. Palet Oxford Üniversitesi sitesinden esinli (kullanıcı seçimi, 2026-10-12): açıkta #F2F0F0 sıcak kırık beyaz zemin, beyaz kart, #E2EDF8 açık mavi bölüm, #002147 Oxford laciverti düğme. Koyuda zemin ve kartlar nötr kömür (#111317, #1B1E24): her yer lacivert olunca katmanlar ayrılmıyordu. Lacivert koyuda yalnızca bantta (üst çubuk, altbilgi) ve ikincil dolgularda, #5BC8F2 camgöbeği ana eylemde. Altbilgi iki temada da lacivert bant (--bant-*). Tüm yazı/zemin çiftleri en az 4.5:1. */ :root { --birincil: #002147; --birincil-uzerinde: #ffffff; --birincil-metin: #1d3c8c; --birincil-kap: #d6e4f5; --birincil-kap-uzerinde: #002147; --yuzey: #f2f0f0; --yuzey-kap: #e2edf8; --yuzey-kap-dusuk: #ffffff; --yuzey-uzerinde: #161b26; --yuzey-uzerinde-ikincil: #4b5263; --cizgi: #d5d1d1; --vurgu: #1d3c8c; --baslik: #002147; --ust-zemin: #ffffff; --bant: #002147; --bant-uzerinde: #ffffff; --bant-ikincil: #c3d0e4; --bant-vurgu: #5bc8f2; --bant-cizgi: #1c3a66; --hata: #b3261e; --uyari-zemin: #fde7e6; --uyari-yazi: #8c1d18; --onizleme-zemin: #fff4e5; --onizleme-yazi: #5c3b00; --onizleme-cizgi: #f0c27a; --golge: 0 1px 2px rgb(0 0 0 / .08), 0 1px 3px 1px rgb(0 0 0 / .04); /* Boşluk ölçeği: 4px tabanlı. Sayfa düzeni (kart, panel, bölüm, ızgara, düğme) bu adımları kullanır; form denetimlerinin iç dolguları (9-14px) sabit yüksekliğe göre ayarlı, ölçeğin dışında kalabilir. */ --a-1: 4px; --a-2: 8px; --a-3: 12px; --a-4: 16px; --a-5: 20px; --a-6: 24px; --a-8: 32px; --a-10: 40px; --a-12: 48px; --kose: 8px; /* kart, panel, harita */ --kose-orta: 6px; /* düğme, giriş, sekme, çip */ --kose-kucuk: 4px; /* rozet, sayaç */ --font-baslik: "Source Serif 4", Georgia, "Times New Roman", serif; --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Hareket (Material 3): kısa geri bildirim, orta durum değişimi, uzun sahne değişimi. */ --hiz-kisa: 120ms; --hiz-orta: 220ms; --hiz-uzun: 360ms; --egri: cubic-bezier(.2, 0, 0, 1); /* standart */ --egri-gelis: cubic-bezier(.05, .7, .1, 1); /* vurgulu yavaşlayan: ekrana giren */ --egri-gidis: cubic-bezier(.3, 0, .8, .15); /* vurgulu hızlanan: ekrandan çıkan */ --golge-yukari: 0 2px 6px rgb(0 0 0 / .10), 0 8px 24px rgb(0 0 0 / .08); color-scheme: light dark; } /* Koyu mod: sistem ayarını izler; üst çubuktaki düğmeyle açık ya da koyu sabitlenebilir (arayuz.js). Aynı koyu değerler iki yerde: sistem koyuyken (açık seçilmediyse) ve koyu seçildiğinde. light-dark() kullanılmadı: Safari 17.4 ve öncesi (eski iPhone'lar) tanımıyor. */ :root[data-tema="acik"] { color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) { --birincil: #5bc8f2; --birincil-uzerinde: #002147; --birincil-metin: #7fd4f6; --birincil-kap: #173a6b; --birincil-kap-uzerinde: #e2edf8; --yuzey: #111317; --yuzey-kap: #272b33; --yuzey-kap-dusuk: #1b1e24; --yuzey-uzerinde: #eceef2; --yuzey-uzerinde-ikincil: #a9b0bd; --cizgi: #323844; --vurgu: #7fd4f6; --baslik: #ffffff; --ust-zemin: #002147; --bant: #002147; --bant-uzerinde: #ffffff; --bant-ikincil: #c3d0e4; --bant-vurgu: #5bc8f2; --bant-cizgi: #1c3a66; --hata: #ffb4ab; --uyari-zemin: #5c1a15; --uyari-yazi: #ffdad6; --onizleme-zemin: #3a2a10; --onizleme-yazi: #ffdcae; --onizleme-cizgi: #7a5520; color-scheme: dark; } } :root[data-tema="koyu"] { --birincil: #5bc8f2; --birincil-uzerinde: #002147; --birincil-metin: #7fd4f6; --birincil-kap: #173a6b; --birincil-kap-uzerinde: #e2edf8; --yuzey: #111317; --yuzey-kap: #272b33; --yuzey-kap-dusuk: #1b1e24; --yuzey-uzerinde: #eceef2; --yuzey-uzerinde-ikincil: #a9b0bd; --cizgi: #323844; --vurgu: #7fd4f6; --baslik: #ffffff; --ust-zemin: #002147; --bant: #002147; --bant-uzerinde: #ffffff; --bant-ikincil: #c3d0e4; --bant-vurgu: #5bc8f2; --bant-cizgi: #1c3a66; --hata: #ffb4ab; --uyari-zemin: #5c1a15; --uyari-yazi: #ffdad6; --onizleme-zemin: #3a2a10; --onizleme-yazi: #ffdcae; --onizleme-cizgi: #7a5520; color-scheme: dark; } /* Başlık yazı tipi: Source Serif 4 (SIL OFL, static/fonts/OFL.txt), sunucudan sunulur, dışarıya istek yok. Değişken ağırlık; latin + latin-ext (ğ, ş, İ latin-ext'te). Yüklenene kadar Georgia görünür. */ @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("../fonts/source-serif-4-latin.c1c9c07dd7b6.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("../fonts/source-serif-4-latin-ext.6e8fa9a55c20.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font: 400 1.0625rem/1.6 var(--font); color: var(--yuzey-uzerinde); background: var(--yuzey); } a { color: var(--birincil-metin); text-underline-offset: .15em; } h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; } h1, h2 { font-family: var(--font-baslik); color: var(--baslik); } h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.15; } h2 { font-size: 1.625rem; font-weight: 600; letter-spacing: -.005em; } h3 { font-size: 1.0625rem; font-weight: 650; margin-top: 1.25em; } /* İkonlar (templatetags/ikon.py): yazı boyutunda, rengi yazıdan. Metnin önündeki ikon `once`, arkasındaki `sonra` sınıfı alır ({% ikon "sag" "sonra" %}); :first-child metin düğümlerini saymadığı için sınıfla. */ .ikon { display: inline-block; flex: none; width: 1.1em; height: 1.1em; vertical-align: -.2em; } .ikon.once { margin-right: .35em; } .ikon.sonra { margin-left: .3em; } .sayfalama .ikon, .etiket .ikon { width: 1em; height: 1em; vertical-align: -.15em; } :focus-visible { outline: 3px solid var(--birincil-metin); outline-offset: 2px; border-radius: 4px; } .kap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 max(var(--a-4), env(safe-area-inset-right)) 0 max(var(--a-4), env(safe-area-inset-left)); } /* yatay iPhone'da çentik */ main.kap { padding-top: var(--a-6); padding-bottom: var(--a-12); flex: 1 0 auto; } /* Altbilgi kısa sayfalarda da pencerenin dibinde dursun. */ body { display: flex; flex-direction: column; min-height: 100vh; } .gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .atla { position: absolute; left: -999px; top: 8px; background: var(--birincil); color: var(--birincil-uzerinde); padding: 8px 12px; border-radius: var(--kose-orta); z-index: 10; } .atla:focus { left: 8px; } /* Üst çubuk. Arka plan bulanıklığı (backdrop-filter) bilerek yok: yapışkan öğede WebKit bulanıklığı her kaydırma karesinde yeniden hesaplar ve Safari'de (iPhone'daki Chrome dahil) kaydırma takılır. */ .ust { position: sticky; top: 0; z-index: 1000; background: var(--ust-zemin); border-bottom: 1px solid var(--cizgi); } .ust-ic { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; } /* Logo görseldir (static/marka, kaynak Datas/Assets): açık temada koyu yazılı, koyu temada açık yazılı sürüm. Tema simgesi gibi 'dan seçilir; ilk boyamada doğru sürüm görünür. */ .logo { display: block; line-height: 0; } .logo img { height: 32px; width: auto; } .logo .logo-koyu { display: none; } :root[data-tema="koyu"] .logo .logo-acik { display: none; } :root[data-tema="koyu"] .logo .logo-koyu { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .logo .logo-acik { display: none; } :root:not([data-tema="acik"]) .logo .logo-koyu { display: block; } } .menu { display: flex; gap: 4px; } .menu a { padding: 8px 12px; border-radius: var(--kose-orta); text-decoration: none; color: var(--yuzey-uzerinde-ikincil); font-weight: 550; font-size: .95rem; } .menu a:hover { background: var(--yuzey-kap); color: var(--yuzey-uzerinde); } /* Vitrin ve arama */ .vitrin { padding: 32px 0 8px; max-width: 720px; } .vitrin p { color: var(--yuzey-uzerinde-ikincil); font-size: 1.125rem; margin: 0 0 20px; } .arama { display: flex; gap: 8px; max-width: 640px; margin-bottom: 8px; } .arama input { flex: 1; min-width: 0; font: inherit; padding: 14px 20px; border-radius: var(--kose-orta); border: 1px solid var(--cizgi); background: var(--yuzey-kap-dusuk); color: inherit; } .arama input:focus { outline: 2px solid var(--birincil-metin); border-color: transparent; } .arama button, .dugme { font: inherit; font-weight: 600; padding: var(--a-3) var(--a-6); border-radius: var(--kose-orta); border: 0; cursor: pointer; background: var(--birincil); color: var(--birincil-uzerinde); text-decoration: none; display: inline-block; } .dugme.ikincil { background: var(--birincil-kap); color: var(--birincil-kap-uzerinde); } /* Bölümler ve kartlar */ .bolum { margin-top: var(--a-10); } .izgara { display: grid; gap: var(--a-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); } .kart { display: flex; flex-direction: column; gap: var(--a-1); padding: var(--a-4) var(--a-5); border-radius: var(--kose); background: var(--yuzey-kap-dusuk); border: 1px solid var(--cizgi); color: inherit; text-decoration: none; } .kart strong { font-size: 1.0625rem; } .kart-ust { font-size: .8rem; font-weight: 600; color: var(--birincil-metin); letter-spacing: .02em; } .kart-metin { font-size: .925rem; color: var(--yuzey-uzerinde-ikincil); } .kart-alt { margin-top: auto; padding-top: 6px; font-size: .85rem; color: var(--yuzey-uzerinde-ikincil); } /* Şehir kartında hızlı bakış (kira, kış, ulaşım): ikonlu kısa satırlar, sabit seçeneklerden. */ .kart-bilgiler { display: flex; flex-wrap: wrap; gap: var(--a-1) var(--a-3); margin-top: var(--a-2); font-size: .85rem; color: var(--yuzey-uzerinde-ikincil); } .kart-bilgiler .ikon, .kart-alt .ikon { color: var(--birincil-metin); } .iz { font-size: .9rem; color: var(--yuzey-uzerinde-ikincil); margin-bottom: 12px; } .sayfa-bas { max-width: 760px; } .giris { font-size: 1.125rem; color: var(--yuzey-uzerinde-ikincil); } .kunye { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--yuzey-uzerinde-ikincil); margin: 0 0 12px; } .etiket { display: inline-block; font-size: .8rem; font-weight: 600; padding: 2px 10px; border-radius: var(--kose-kucuk); background: var(--birincil-kap); color: var(--birincil-kap-uzerinde); } .baglantilar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } /* Üniversite başlığı: telefonda üç düğme (takip, resmi site, karşılaştır) tek satırda, içeriğe göre paylaşılmış genişlikte. "✓ Takip ediliyor" orada "✓ Takipte" olur; uzun hâli 320px'te sığmaz. */ .dar-metin { display: none; } @media (max-width: 520px) { .uni-bas .baglantilar { gap: 6px; } .uni-bas .baglantilar > * { flex: 1 1 auto; } /* sığmazsa düğme kesilmez, alt satıra iner */ .uni-bas .baglantilar > form { display: flex; } /* takip formu genişliğini düğmesinden alsın */ .uni-bas .baglantilar .dugme { flex: 1; padding: var(--a-3) var(--a-2); font-size: .9375rem; text-align: center; white-space: nowrap; } .uni-bas .genis-metin { display: none; } .uni-bas .dar-metin { display: inline; } } @media (max-width: 360px) { .uni-bas .baglantilar .dugme { padding: 10px 8px; font-size: .875rem; } } } .metin { max-width: 70ch; } .metin p { margin: 0 0 1em; } /* Katlanır maddeler (şehir sayfası, bicim.katlanir_html): kapalıyken başlık + ilk cümle, gerisi tıklayınca açılır.
olduğundan JS'siz çalışır; içerik kapalıyken de sayfada (arama motoru). */ .maddeler { border-top: 1px solid var(--cizgi); } .madde { border-bottom: 1px solid var(--cizgi); } .madde > summary, div.madde { display: block; padding: 14px 0; } .madde > summary { position: relative; padding-right: 32px; cursor: pointer; list-style: none; } .madde > summary::-webkit-details-marker { display: none; } .madde > summary::after { content: ""; position: absolute; right: 8px; top: 22px; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; color: var(--yuzey-uzerinde-ikincil); transform: rotate(45deg); transition: transform .2s ease; } .madde[open] > summary::after { transform: translateY(4px) rotate(225deg); } .madde-baslik { display: block; font-weight: 650; } .madde-kisa { display: block; margin-top: 2px; color: var(--yuzey-uzerinde-ikincil); } .madde[open] .madde-kisa { color: var(--yuzey-uzerinde); } .madde > summary:hover .madde-baslik { color: var(--birincil-metin); } .madde-govde { padding-bottom: 14px; } .madde-govde > :last-child { margin-bottom: 0; } .madde-govde ul { margin: 0; padding-left: 1.2em; } .madde-govde li + li { margin-top: 6px; } .not, .bos { color: var(--yuzey-uzerinde-ikincil); font-size: .925rem; } /* Liste süzgeci (şehirler, üniversiteler, taban puanları sekmesi): arama kutusunun hap biçimini izler. Seçili kutu dolgulu olur (menüdeki bulunulan bölüm gibi). JS varken seçim anında uygulanır, "Uygula" gizlenir (suzgec.js). */ .suzgec { margin: 20px 0 16px; } .suzgec-alanlar { display: flex; flex-wrap: wrap; gap: 8px; } .suzgec-ara { position: relative; flex: 1 1 16rem; display: flex; } .suzgec-ara svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--yuzey-uzerinde-ikincil); pointer-events: none; } .suzgec-ara input, .secim select { font: inherit; font-size: 1rem; min-height: 44px; border-radius: var(--kose-orta); border: 1px solid var(--cizgi); background: var(--yuzey-kap-dusuk); color: var(--yuzey-uzerinde); } .suzgec-ara input { flex: 1; min-width: 0; padding: 9px 18px 9px 44px; } .suzgec-ara input::placeholder { color: var(--yuzey-uzerinde-ikincil); opacity: 1; } .secim { position: relative; display: inline-flex; } .secim select { -webkit-appearance: none; appearance: none; width: 100%; padding: 9px 40px 9px 18px; font-weight: 550; cursor: pointer; } .secim::after { content: ""; position: absolute; right: 18px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); color: var(--yuzey-uzerinde-ikincil); pointer-events: none; } .secim.dolu select { background: var(--birincil-kap); color: var(--birincil-kap-uzerinde); border-color: transparent; } .secim.dolu::after { color: var(--birincil-kap-uzerinde); } .suzgec-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin-top: 12px; } .suzgec-sayi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; color: var(--yuzey-uzerinde-ikincil); font-size: .925rem; } .suzgec-sayi strong { color: var(--yuzey-uzerinde); font-variant-numeric: tabular-nums; } .suzgec-sirala { display: inline-flex; align-items: center; gap: 2px; color: var(--yuzey-uzerinde-ikincil); font-size: .925rem; } .secim.sade select { min-height: 40px; border-color: transparent; background: transparent; padding-left: 12px; font-weight: 600; } .secim.sade::after { color: var(--yuzey-uzerinde); } .secim.sade select:hover { background: var(--yuzey-kap); } html.js .suzgec-uygula { display: none; } .kart[hidden], .suzgec-bos[hidden] { display: none; } /* Çok seçimli süzgeç (şehir listesi: bölge + kira, kış, KYK, ulaşım): arama tam satır, seçimler alt satırı eşit paylaşır; yoksa beşinci kutu ikinci satırda tek başına kalıyordu. */ .suzgec-cok .suzgec-ara { flex-basis: 100%; } @media (min-width: 481px) { .suzgec-cok .suzgec-alanlar .secim { flex: 1 1 0; min-width: 9rem; } } /* telefonda iki sütun kuralı geçerli */ .suzgec-bos { margin-top: 8px; } @media (max-width: 480px) { .suzgec-ara { flex-basis: 100%; } .suzgec-alanlar .secim { flex: 1 1 calc(50% - 4px); min-width: 0; } .suzgec-alanlar .secim select { padding: 9px 32px 9px 14px; text-overflow: ellipsis; } .suzgec-alanlar .secim::after { right: 14px; } } /* Puanlar */ .puanlar { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; max-width: 640px; } .puanlar li { display: grid; grid-template-columns: 9rem 1fr auto; align-items: center; gap: 12px; } .puan-cubuk { height: 8px; border-radius: 999px; background: var(--yuzey-kap); overflow: hidden; } .puan-cubuk span { display: block; height: 100%; background: var(--birincil); border-radius: inherit; } .puan-deger { font-weight: 700; font-variant-numeric: tabular-nums; } .puan-deger small { font-weight: 400; color: var(--yuzey-uzerinde-ikincil); margin-left: 2px; } .puan-yok { grid-column: 2 / 4; color: var(--yuzey-uzerinde-ikincil); font-size: .925rem; } @media (max-width: 480px) { .puanlar li { grid-template-columns: 1fr auto; } .puan-ad { grid-column: 1 / -1; } .puan-yok { grid-column: 1 / -1; } } /* Harita ve yerler */ .harita { height: 360px; border-radius: var(--kose); border: 1px solid var(--cizgi); background: var(--yuzey-kap); isolation: isolate; } /* isolation: Leaflet katmanları (z-index 400-1000) haritanın içinde kalır; üst çubuğun ve telefondaki alt menünün üstüne çıkmaz. */ .yerler, .hesaplar { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .yerler li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 14px; border-radius: var(--kose-orta); background: var(--yuzey-kap-dusuk); } .yerler li span:not(.etiket) { color: var(--yuzey-uzerinde-ikincil); font-size: .925rem; } .yerler li a { margin-left: auto; font-size: .9rem; } .hesaplar { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .yazi { max-width: 70ch; } /* Yazı kapakları: kartta üstten taşar (kartın kenarlarına yaslanır), yazı sayfasında başlığın altında. */ .yazi-kapak { margin: 4px 0 20px; } .yazi-kapak img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--kose); background: var(--yuzey-kap); } .yazi-kapak figcaption { margin-top: 6px; font-size: .85rem; color: var(--yuzey-uzerinde-ikincil); } /* overflow: hidden yerine köşeler görselin kendisinde: kartın gölge katmanı (::after) kart dışına taşar, kesilmemeli. */ .kart-gorsel { display: block; width: calc(100% + 36px); max-width: none; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin: calc(-1 * var(--a-4)) calc(-1 * var(--a-5)) var(--a-2); border-radius: calc(var(--kose) - 1px) calc(var(--kose) - 1px) 0 0; background: var(--yuzey-kap); } /* Altbilgi: lacivert bant (Oxford'daki gibi), üç sütun; dar ekranda marka üstte, iki sütun. */ .alt { margin-top: auto; background: var(--bant); color: var(--bant-ikincil); font-size: .925rem; padding: 40px 0 24px; } .alt a { color: var(--bant-uzerinde); text-decoration: none; } .alt a:hover { text-decoration: underline; } .alt-izgara { display: grid; gap: var(--a-8) var(--a-10); grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); } /* Altbilgi iki temada da lacivert bant: hep açık yazılı logo. */ .alt .alt-marka { margin: 0 0 var(--a-4); line-height: 0; } .alt-marka img { height: 36px; width: auto; } .alt p { margin: 0; line-height: 1.55; max-width: 40ch; } .alt h2 { font-family: var(--font); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bant-ikincil); margin: 0 0 10px; } .alt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .alt .alt-son { max-width: none; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--bant-cizgi); font-size: .85rem; } @media (max-width: 720px) { .alt-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } .alt-izgara > :first-child { grid-column: 1 / -1; } } /* Biçimli metin */ .metin h2 { font-size: 1.25rem; margin-top: 1.5em; } .metin h3, .metin h4 { font-size: 1.0625rem; margin-top: 1.25em; } .metin ul, .metin ol { padding-left: 1.4em; margin: 0 0 1em; } .metin li { margin-bottom: .25em; } .metin blockquote { margin: 0 0 1em; padding: 4px 16px; border-left: 4px solid var(--birincil-kap); color: var(--yuzey-uzerinde-ikincil); } .metin code { font-size: .9em; background: var(--yuzey-kap); padding: 1px var(--a-1); border-radius: 4px; } .metin pre { overflow-x: auto; background: var(--yuzey-kap); padding: 12px; border-radius: var(--kose-kucuk); } /* Videolar: tıklanana kadar yalnızca kapak görseli */ .videolar { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); } .video { margin: 0; display: flex; flex-direction: column; gap: 10px; } .video-kapak, .video-cerceve { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--kose); overflow: hidden; background: #000; border: 0; } .video-kapak img { width: 100%; height: 100%; object-fit: cover; display: block; } .video-oynat { position: absolute; inset: 0; margin: auto; width: 64px; height: 44px; border-radius: var(--kose-kucuk); background: rgb(0 0 0 / .72); transition: background-color .15s; } .video-oynat::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; transform: translateX(2px); } .video-kapak:hover .video-oynat, .video-kapak:focus-visible .video-oynat { background: #c00; } .video figcaption { display: flex; flex-direction: column; gap: 2px; } .video-kaynak { font-size: .875rem; color: var(--yuzey-uzerinde-ikincil); } .video-ozet { font-size: .95rem; margin-top: 4px; } .video-ozet p { margin-bottom: .5em; } .sayfalama { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 32px; } .sayfalama a { padding: 8px 16px; border-radius: var(--kose-orta); background: var(--birincil-kap); color: var(--birincil-kap-uzerinde); text-decoration: none; font-weight: 600; } .onizleme { padding: 12px 16px; border-radius: var(--kose-orta); background: var(--onizleme-zemin); color: var(--onizleme-yazi); border: 1px solid var(--onizleme-cizgi); } /* Formlar ve hesap sayfaları */ .dar { max-width: 640px; } .form { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; } .form label { font-weight: 600; } .form input[type=email], .form input[type=text], .form textarea { font: inherit; color: inherit; width: 100%; padding: 12px 14px; border-radius: var(--kose-orta); border: 1px solid var(--cizgi); background: var(--yuzey-kap-dusuk); } .form textarea { resize: vertical; min-height: 7.5em; } .form input[type=file] { font: inherit; font-size: .95rem; max-width: 100%; color: var(--yuzey-uzerinde-ikincil); } .form input[type=file]::file-selector-button { font: inherit; font-weight: 600; margin-right: 12px; padding: 10px 18px; border-radius: var(--kose-orta); border: 0; cursor: pointer; background: var(--birincil-kap); color: var(--birincil-kap-uzerinde); } .form .alan .not { margin: 0; } .form input:focus, .form textarea:focus { outline: 2px solid var(--birincil-metin); border-color: transparent; } .form .dugme { align-self: flex-start; margin-top: 6px; } .form .alan { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; } .hata { color: var(--hata); font-size: .925rem; margin: 0; } .uyari { padding: 10px 14px; border-radius: var(--kose-orta); background: var(--uyari-zemin); color: var(--uyari-yazi); } .uyari p { margin: 0; } .dugme.tehlike { background: #b3261e; color: #fff; } .onay-kutusu { display: flex; align-items: center; gap: 8px; font-weight: 400 !important; } .mesajlar { margin-bottom: 16px; } .mesaj { margin: 0 0 8px; padding: 10px 14px; border-radius: var(--kose-orta); background: var(--birincil-kap); color: var(--birincil-kap-uzerinde); } .mesaj.error { background: var(--uyari-zemin); color: var(--uyari-yazi); } .rol-secimi { display: grid; gap: 12px; margin-top: 16px; } button.kart { font: inherit; text-align: left; cursor: pointer; } .dugme.kucuk { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 16px; font-size: .9rem; } /* Hesabım: kimlik başlığı, sayı şeridi, panellere ayrılmış bölümler. Takipler kart ızgarası; kartın tamamı üniversiteye gider (adın ::after katmanı kartı kaplar), alttaki bağlantı ve düğme onun üstünde. */ .hesap { max-width: 760px; } .hesap-bas { display: flex; align-items: center; gap: var(--a-4); padding-top: 8px; } .hesap-avatar { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--kose-orta); background: var(--birincil); color: var(--birincil-uzerinde); font-size: 2rem; font-weight: 700; } .hesap-kimlik { min-width: 0; } .hesap-kimlik h1 { margin: 0; } .hesap-eposta { margin: 2px 0 8px; color: var(--yuzey-uzerinde-ikincil); overflow-wrap: anywhere; } .hesap-rozetler { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: .9rem; } .etiket-dogru { background: var(--birincil); color: var(--birincil-uzerinde); } .hesap-sayilar { margin-top: 20px; } .hesap-panel { margin-top: var(--a-5); padding: var(--a-5) var(--a-6); border-radius: var(--kose); background: var(--yuzey-kap-dusuk); border: 1px solid var(--cizgi); scroll-margin-top: 80px; } .hesap-panel-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .hesap-panel-bas h2 { margin: 0; font-size: 1.1875rem; } .hesap-panel-bas form { margin: 0; } .hesap-panel .form { margin-bottom: 0; } .hesap-panel .form input[type=email] { background: var(--yuzey); } .hesap-aciklama { margin: 0 0 12px; color: var(--yuzey-uzerinde-ikincil); } .hesap-panel .onizleme { margin: 0 0 12px; font-size: .925rem; } .takip-izgara { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); } .takip-kart { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: var(--kose-orta); background: var(--yuzey); border: 1px solid var(--cizgi); } @media (hover: hover) { .takip-kart:hover { border-color: var(--birincil-metin); } } .takip-ad { color: var(--yuzey-uzerinde); font-weight: 650; line-height: 1.35; text-decoration: none; } .takip-ad::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .takip-ad:focus-visible { outline: none; } .takip-ad:focus-visible::after { outline: 3px solid var(--birincil-metin); outline-offset: 2px; } .takip-alt { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; font-size: .9rem; } .takip-alt form { margin: 0; } .takip-alt .metin-dugme { color: var(--yuzey-uzerinde-ikincil); } .ayar-satir { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--cizgi); } .ayar-satir div { display: flex; flex-direction: column; gap: 2px; flex: 1 1 18rem; } .ayar-satir span { font-size: .9rem; color: var(--yuzey-uzerinde-ikincil); line-height: 1.45; } .hesap-bos { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .hesap-bos p { margin: 0; color: var(--yuzey-uzerinde-ikincil); } .dogrulama-tamam { display: flex; align-items: flex-start; gap: 12px; margin: 0; } .dogrulama-tamam > span:first-child { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--kose-kucuk); background: var(--birincil-kap); color: var(--birincil-kap-uzerinde); } .dogrulama-tamam > span:first-child .ikon { width: 18px; height: 18px; margin: 0; } .dogrulama-tamam small { color: var(--yuzey-uzerinde-ikincil); font-size: .875rem; overflow-wrap: anywhere; } .yazi-satirlari { list-style: none; margin: 0; padding: 0; } .yazi-satirlari li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; } .yazi-satirlari li + li { border-top: 1px solid var(--cizgi); } .yazi-satirlari li > div { display: flex; flex-direction: column; min-width: 0; } .yazi-satirlari li > div > span { font-size: .85rem; color: var(--yuzey-uzerinde-ikincil); } .yazi-satirlari .etiket { flex: none; } .etiket.durum-taslak { background: var(--yuzey-kap); color: var(--yuzey-uzerinde); } .etiket.durum-incelemede { background: var(--onizleme-zemin); color: var(--onizleme-yazi); } .etiket.durum-reddedildi { background: var(--uyari-zemin); color: var(--uyari-yazi); } .hesap-tehlike h3 { margin: 4px 0 6px; font-size: 1rem; color: var(--hata); } @media (max-width: 520px) { .hesap-bas { gap: 14px; } .hesap-avatar { width: 56px; height: 56px; font-size: 1.5rem; } .hesap-panel { padding: 16px; } .ayar-satir .dugme { width: 100%; } .dugme.kucuk { min-height: 44px; } } /* Puanlama formu */ .puan-alani { border: 1px solid var(--cizgi); border-radius: var(--kose); padding: 12px 16px 8px; margin: 0 0 4px; } .puan-alani legend { display: flex; flex-direction: column; padding: 0 4px; } .puan-secenekleri { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .puan-secenek { position: relative; } .puan-secenek input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .puan-secenek span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: var(--kose-orta); border: 1px solid var(--cizgi); font-weight: 600; font-weight: 600; } .puan-secenek.bilmiyorum span { font-weight: 400; color: var(--yuzey-uzerinde-ikincil); } .puan-secenek input:checked + span { background: var(--birincil); color: var(--birincil-uzerinde); border-color: var(--birincil); } .puan-secenek input:focus-visible + span { outline: 3px solid var(--birincil-metin); outline-offset: 2px; } .olcek { display: flex; justify-content: space-between; max-width: 340px; font-size: .8rem; color: var(--yuzey-uzerinde-ikincil); margin: 4px 0 0; } /* Tepkiler */ .tepki-formu { display: flex; flex-wrap: wrap; gap: 8px; } .tepki { font: inherit; font-size: .95rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; min-height: 44px; border-radius: var(--kose-orta); border: 1px solid var(--cizgi); background: var(--yuzey-kap-dusuk); color: inherit; } .tepki[aria-pressed="true"] { background: var(--birincil-kap); border-color: var(--birincil); color: var(--birincil-kap-uzerinde); } .tepki-sayi { font-weight: 700; font-variant-numeric: tabular-nums; } /* Üniversite ve şehir sayfası sekmeleri (üniversite: bilgiler, kampüs ve barınma, ulaşım, taban puanları; şehir: bilgiler, üniversiteler, ulaşım ve harita, maliyet ve iklim). Her biri ayrı adres; telefonda kısa adlarla tek satır (hemen aşağıda). Geniş ekranda sığmazsa yana kaydırılır; sayfa geçişinde başlık ve sekme çubuğu yerinde kalır, yalnızca altındaki içerik değişir. */ .uni-bas { view-transition-name: uni-bas; } .uni-sekmeler { view-transition-name: uni-sekmeler; display: flex; gap: 4px; margin: 24px 0 8px; border-bottom: 1px solid var(--cizgi); overflow-x: auto; scrollbar-width: none; } .uni-sekmeler::-webkit-scrollbar { display: none; } .uni-sekmeler a { flex: none; padding: 12px 16px; min-height: 48px; display: inline-flex; align-items: center; margin-bottom: -1px; border-bottom: 3px solid transparent; border-radius: var(--kose-orta) var(--kose-orta) 0 0; color: var(--yuzey-uzerinde-ikincil); font-weight: 600; text-decoration: none; white-space: nowrap; transition: color var(--hiz-orta) var(--egri), border-color var(--hiz-orta) var(--egri), background-color var(--hiz-kisa) var(--egri); } .uni-sekmeler a:hover { background: var(--yuzey-kap-dusuk); color: var(--yuzey-uzerinde); } .uni-sekmeler a[aria-current="page"] { color: var(--birincil-metin); border-bottom-color: var(--birincil-metin); } /* Telefonda kısa adlarla dördü kaydırmadan tek satırda, genişliği paylaşır (temel kurallardan sonra gelmeli, yoksa yukarıdaki flex: none ve dolgu bunu ezer). */ @media (max-width: 520px) { .uni-sekmeler { gap: 0; overflow-x: visible; } .uni-sekmeler a { flex: 1 1 auto; justify-content: center; padding: 12px 6px; font-size: .9375rem; } .uni-sekmeler .genis-metin { display: none; } .uni-sekmeler .dar-metin { display: inline; } } @media (max-width: 360px) { .uni-sekmeler a { padding: 12px 4px; font-size: .875rem; } } .uni-ozet { margin-top: 24px; max-width: 62ch; } .bos-sekme { margin-top: 32px; color: var(--yuzey-uzerinde-ikincil); } /* Taban puanları sekmesi: puan türüne göre bir tablo. Dar ekranda da üç sütun sığar; fakülte ve kontenjan program adının altında küçük satırda durur. */ .taban-kaynak { margin-top: 24px; max-width: 70ch; } .bolum h2 .sayi { font-weight: 400; font-size: .9rem; color: var(--yuzey-uzerinde-ikincil); } .taban-tablo { width: 100%; border-collapse: collapse; font-size: .95rem; } .taban-tablo th, .taban-tablo td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--cizgi); } .taban-tablo thead th { font-size: .85rem; color: var(--yuzey-uzerinde-ikincil); font-weight: 600; } .taban-tablo tbody th { font-weight: 400; } .taban-tablo tbody th a { font-weight: 600; } .taban-tablo .program-alt { display: block; margin-top: 2px; font-size: .85rem; color: var(--yuzey-uzerinde-ikincil); } .taban-tablo td, .taban-tablo thead th:not(:first-child) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .taban-tablo td:last-child, .taban-tablo thead th:last-child { padding-right: 0; } .taban-grup[hidden], .taban-tablo tr[hidden] { display: none; } /* Bölüm sayfası (/bolum//): veriden kurulan özet ve tercih robotuna kısa yol (puan türü ve bölüm hazır gider, aday yalnızca sırasını yazar). Tablo ve süzgeç taban sekmesininkiyle aynı. */ .bolum-ozet { max-width: 72ch; } .bolum-robot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a-3) var(--a-6); margin: var(--a-5) 0 0; padding: var(--a-4) var(--a-5); border-radius: var(--kose); background: var(--yuzey-kap-dusuk); border: 1px solid var(--cizgi); } .bolum-robot label { flex: 1 1 18rem; display: flex; flex-direction: column; gap: 2px; } .bolum-robot label span { color: var(--yuzey-uzerinde-ikincil); font-size: .925rem; } .bolum-robot-alan { display: flex; gap: var(--a-2); flex: 0 1 20rem; } .bolum-robot input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; font: inherit; font-size: 1rem; border-radius: var(--kose-orta); border: 1px solid var(--cizgi); background: var(--yuzey); color: inherit; } .bolum-robot input:focus { outline: 2px solid var(--birincil-metin); border-color: transparent; } .bolum-robot .dugme { height: 46px; padding-top: 0; padding-bottom: 0; } .bolum-tumu { margin-top: var(--a-10); } /* Hazır şehir listeleri (/sehirler//): çipler liste başlığının altında, ölçüt notu kartların üstünde. */ .secki-cipleri { margin: 0 0 var(--a-4); } .secki-olcut { max-width: 72ch; margin: 0 0 var(--a-5); } @media (max-width: 480px) { .taban-tablo { font-size: .9rem; } .taban-tablo th, .taban-tablo td { padding-right: 8px; } } /* Karşılaştırma. Geniş ekranda klasik tablo (ilk sütun satır adı); dar ekranda her satırın adı kendi satırına çıkar, değerler altında yan yana sütunlar olur (--sutun: seçili üniversite sayısı). Sütun en az 10rem: 360px'te iki üniversite sığar, üçüncüsü yana kaydırılır; satır adı solda sabit kalır. */ .karsilastir-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 12px; align-items: end; margin: 16px 0 8px; } .karsilastir-form .alan { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .925rem; } .karsilastir-form select { font: inherit; font-weight: 400; width: 100%; height: 46px; padding: 0 14px; border-radius: var(--kose-orta); border: 1px solid var(--cizgi); background: var(--yuzey-kap-dusuk); color: inherit; } .karsilastir-form select:focus { outline: 2px solid var(--birincil-metin); border-color: transparent; } .karsilastir-form .dugme { height: 46px; padding-top: 0; padding-bottom: 0; } /* yanındaki kutularla aynı boy */ /* Üniversite sayfası ilk sekme: kısa bilgi şeridi (veriden), artı/dikkat kartları, tanıtım. Artı ve dikkat tanıtımın içinden ayrıştırılıp üste alınır (karsilastirma.artisiz_tanitim). */ .kisa-bilgiler { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .kisa-bilgiler a { display: flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: var(--kose-orta); min-height: 40px; background: var(--yuzey-kap-dusuk); border: 1px solid var(--cizgi); color: var(--yuzey-uzerinde-ikincil); text-decoration: none; font-size: .9rem; } .kisa-bilgiler a:hover { border-color: var(--birincil-metin); } .kisa-bilgiler strong { color: var(--yuzey-uzerinde); font-size: 1.0625rem; font-variant-numeric: tabular-nums; } .hizli-bakis { margin-top: 20px; } /* Kaynaklı rakamlar (models.Rakam): etiket solda, değer ve kaynak satırı sağda; dar ekranda alt alta. */ .rakamlar h3 { margin: var(--a-6) 0 var(--a-2); font-size: 1rem; } .rakam-listesi { margin: 0; border: 1px solid var(--cizgi); border-radius: var(--kose); background: var(--yuzey-kap-dusuk); } .rakam { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--a-2) var(--a-4); padding: var(--a-3) var(--a-4); } .rakam + .rakam { border-top: 1px solid var(--cizgi); } .rakam dt { color: var(--yuzey-uzerinde-ikincil); } .rakam dd { margin: 0; } .rakam strong { font-variant-numeric: tabular-nums; } .rakam-not { color: var(--yuzey-uzerinde-ikincil); font-size: .925rem; } .rakam-kaynak { display: block; margin-top: var(--a-1); color: var(--yuzey-uzerinde-ikincil); font-size: .85rem; } @media (max-width: 520px) { .rakam { grid-template-columns: minmax(0, 1fr); } } .hizli-bakis strong { font-size: 1rem; } .arti-dikkat { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 12px; margin-top: 24px; } .arti-dikkat-kart { padding: var(--a-4) var(--a-5); border-radius: var(--kose); background: var(--yuzey-kap-dusuk); border: 1px solid var(--cizgi); } .arti-dikkat-kart h2 { font-family: var(--font); display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 1rem; } .arti-dikkat-ikon { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: var(--kose-kucuk); } .arti-dikkat-ikon .ikon { width: 16px; height: 16px; margin: 0; } .arti h2 { color: var(--birincil-metin); } .arti .arti-dikkat-ikon { background: var(--birincil-kap); color: var(--birincil-kap-uzerinde); } .dikkat h2 { color: var(--uyari-yazi); } .dikkat .arti-dikkat-ikon { background: var(--uyari-zemin); color: var(--uyari-yazi); } .arti-dikkat-kart ul { margin: 0; padding-left: 1.1em; } .arti-dikkat-kart li { line-height: 1.5; } .arti-dikkat-kart li + li { margin-top: 6px; } .uni-tanitim .metin p:last-child { margin-bottom: 0; } /* Oy yokken puan bölümü tek cümle. */ .puan-bos-metin { margin: 0 0 6px; max-width: 70ch; color: var(--yuzey-uzerinde-ikincil); } .puan-bos .not { margin-top: 0; } /* Tercih robotu. Form bir panelde: geniş ekranda beş alan tek sırada, dar ekranda iki sütun (bölüm araması tam satır). Sonuç satırları tablo değil liste: dar ekranda program, üniversite ve sayılar alt alta akar. Aralık renkleri yalnızca mevcut token'lardan. */ .tercih-form { margin: var(--a-5) 0 0; padding: var(--a-5); border-radius: var(--kose); background: var(--yuzey-kap-dusuk); border: 1px solid var(--cizgi); } .tercih-alanlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; } .tercih-alanlar .alan-genis { grid-column: 1 / -1; } /* Beş sütun 1000px'ten itibaren: altında seçim kutuları ~80px kalıyor, "Tüm şehirler" bile sığmıyordu. */ @media (min-width: 1000px) { .tercih-alanlar { grid-template-columns: 1fr 1fr 1.4fr 1fr 1fr; } .tercih-alanlar .alan-genis { grid-column: auto; } } .tercih-form .alan { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-weight: 600; font-size: .9rem; } .tercih-form .alan small { font-weight: 400; font-size: .8rem; color: var(--yuzey-uzerinde-ikincil); } .tercih-form select, .tercih-form input:not([type=checkbox]) { font: inherit; font-weight: 400; font-size: 1rem; width: 100%; height: 46px; padding: 0 14px; border-radius: var(--kose-orta); border: 1px solid var(--cizgi); background: var(--yuzey); color: inherit; text-overflow: ellipsis; } .tercih-form select:focus, .tercih-form input:focus { outline: 2px solid var(--birincil-metin); border-color: transparent; } /* Safari arama kutusuna kendi yuvarlak biçimini ve iç boşluğunu verir; diğer alanlarla aynı görünsün. */ .tercih-form input[type=search] { -webkit-appearance: none; appearance: none; } .tercih-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--cizgi); } .tercih-secenekler { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .925rem; color: var(--yuzey-uzerinde-ikincil); } .tercih-secenekler .onay-kutusu { min-height: 32px; cursor: pointer; } .tercih-secenekler input { width: 18px; height: 18px; margin: 0; accent-color: var(--birincil); } .tercih-form .hata { margin-top: 12px; } @media (max-width: 520px) { .tercih-form { padding: 16px 14px; margin-right: -4px; margin-left: -4px; } .tercih-alt .dugme { width: 100%; } } /* Form seçim kutusu (tercih robotu, karşılaştır): tarayıcının oku yerine liste süzgecindeki (.secim) çizilmiş ok. Chrome yerleşik oku iç boşluğu saymadan kutunun kenarına yapıştırıyordu, Safari kendi biçimini çiziyordu. Formların select kurallarından sonra durmalı (aynı özgüllük; sağ boşluğu bu kural verir). */ .ok-kutu { position: relative; display: block; } .ok-kutu select { -webkit-appearance: none; appearance: none; padding-right: 34px; cursor: pointer; } .ok-kutu::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); color: var(--yuzey-uzerinde-ikincil); pointer-events: none; } .tercih-sonuc { scroll-margin-top: 76px; } .tercih-sonuc-bas { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; } .tercih-sonuc-bas h2 { margin: 0; } .tercih-sonuc-bas .not { margin: 0; } .aralik-ozet { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; } .aralik-cip { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 6px 6px 14px; border-radius: var(--kose-orta); border: 1px solid var(--cizgi); color: var(--yuzey-uzerinde); text-decoration: none; font-weight: 600; font-size: .925rem; } .aralik-cip::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity var(--hiz-orta) var(--egri); pointer-events: none; } .aralik-cip:hover::before { opacity: .08; } .aralik-cip:active::before { opacity: .14; } .aralik-cip[aria-current] { background: var(--birincil); color: var(--birincil-uzerinde); border-color: transparent; } /* Sayı rozeti satırlardaki aralık etiketiyle aynı renkte: çip hem süzgeç hem renk açıklaması. */ .aralik-sayi { min-width: 28px; padding: 2px 8px; border-radius: var(--kose-kucuk); font-size: .8rem; font-weight: 650; text-align: center; font-variant-numeric: tabular-nums; } .aralik-cip[aria-current] .aralik-sayi { box-shadow: 0 0 0 2px var(--birincil-uzerinde); } .tercih-liste { list-style: none; margin: 8px 0 0; padding: 0; } .tercih-satir { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 24px; padding: 16px 0; border-bottom: 1px solid var(--cizgi); } .tercih-ana { display: flex; flex-direction: column; gap: var(--a-1); min-width: 0; flex: 1 1 22rem; } .tercih-program { font-weight: 650; font-size: 1.0625rem; color: var(--yuzey-uzerinde); text-decoration: none; } .tercih-program:hover { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); } .dis-bag { width: .8em; height: .8em; margin-left: 4px; vertical-align: -.05em; color: var(--yuzey-uzerinde-ikincil); } .tercih-uni { font-size: .95rem; } .tercih-uni a { color: var(--birincil-metin); text-decoration: none; font-weight: 550; } .tercih-uni a:hover { text-decoration: underline; } .tercih-ana .program-alt { font-size: .85rem; color: var(--yuzey-uzerinde-ikincil); } .tercih-sayilar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-2) var(--a-4); font-variant-numeric: tabular-nums; white-space: nowrap; } .tercih-sayi { display: inline-flex; align-items: baseline; gap: var(--a-1); } .tercih-sayi small { color: var(--yuzey-uzerinde-ikincil); font-size: .8rem; } .tercih-sayi strong { font-size: 1.0625rem; } @media (min-width: 720px) { .tercih-sayilar { flex: none; display: grid; grid-template-columns: auto 6.5rem 5.5rem; justify-items: end; padding-top: 2px; } } .aralik-etiket { display: inline-block; font-size: .8rem; font-weight: 650; padding: var(--a-1) var(--a-2); border-radius: var(--kose-kucuk); white-space: nowrap; } .aralik-zorlayici { background: var(--uyari-zemin); color: var(--uyari-yazi); } .aralik-sinirda { background: var(--onizleme-zemin); color: var(--onizleme-yazi); } .aralik-rahat { background: var(--birincil); color: var(--birincil-uzerinde); } .aralik-dolmadi { border: 1px solid var(--cizgi); color: var(--yuzey-uzerinde-ikincil); } .tercih-kaynak { margin-top: 20px; } .tercih-nasil { max-width: 760px; } .aralik-aciklama { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; } .aralik-aciklama li { display: grid; grid-template-columns: 6rem 1fr; align-items: baseline; gap: 12px; font-size: .95rem; color: var(--yuzey-uzerinde-ikincil); } .aralik-aciklama .aralik-etiket { justify-self: start; } /* Ana sayfadaki tercih robotu kartı: arama çiplerinden ayrı duran, tek satırlık davet. */ a.kart.tercih-davet { flex-direction: row; align-items: center; gap: 14px; max-width: 640px; margin-top: 24px; padding: 14px 16px; } .tercih-davet-ikon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--kose-orta); background: var(--birincil); color: var(--birincil-uzerinde); } .tercih-davet-ikon svg { width: 24px; height: 24px; } .tercih-davet-metin { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .tercih-davet-metin strong { font-size: 1.0625rem; } .tercih-davet-metin span { font-size: .925rem; color: var(--yuzey-uzerinde-ikincil); line-height: 1.4; } .tercih-davet-ok { flex: none; width: 22px; height: 22px; color: var(--birincil-metin); transition: transform var(--hiz-orta) var(--egri-gelis); } a.kart.tercih-davet:hover .tercih-davet-ok { transform: translateX(3px); } .karsilastirma { margin-top: 24px; } .karsilastir-tablo { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .95rem; } .karsilastir-tablo th, .karsilastir-tablo td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--cizgi); } .karsilastir-tablo thead td:first-child, .karsilastir-tablo tbody th { width: 11rem; } .karsilastir-tablo thead th { font-size: 1.0625rem; position: sticky; top: 61px; background: var(--yuzey); z-index: 1; } .karsilastir-tablo thead th a { color: var(--yuzey-uzerinde); text-decoration: none; } .karsilastir-tablo tbody th { font-weight: 600; color: var(--yuzey-uzerinde-ikincil); } .karsilastir-tablo ul { margin: 0; padding-left: 1.1em; } .karsilastir-tablo li + li { margin-top: 4px; } .karsilastir-tablo .devam { display: block; width: fit-content; margin-top: 6px; font-size: .875rem; } .karsilastir-tablo .ara-baslik th { padding-top: var(--a-8); color: var(--birincil-metin); font-size: 1rem; } @media (max-width: 720px) { .karsilastir-form { grid-template-columns: 1fr; } .karsilastir-form .dugme { justify-self: start; } .karsilastirma { overflow-x: auto; margin-right: -16px; padding-right: 16px; } .karsilastir-tablo, .karsilastir-tablo thead, .karsilastir-tablo tbody { display: block; } .karsilastir-tablo { width: max(100%, calc(var(--sutun) * 10rem + (var(--sutun) - 1) * 12px)); } .karsilastir-tablo tr { display: grid; grid-template-columns: repeat(var(--sutun), minmax(0, 1fr)); column-gap: 12px; border-bottom: 1px solid var(--cizgi); } .karsilastir-tablo th, .karsilastir-tablo td { border: 0; padding: 4px 0; width: auto; } .karsilastir-tablo tbody tr { padding: 8px 0 12px; } .karsilastir-tablo thead td:first-child { display: none; } .karsilastir-tablo thead th { position: static; } .karsilastir-tablo tbody th { grid-column: 1 / -1; justify-self: start; position: sticky; left: 0; width: auto; font-size: .875rem; } .karsilastir-tablo .ara-baslik { border-bottom: 0; } .karsilastir-tablo td { font-size: .9rem; overflow-wrap: break-word; } } /* Sıralama sekmeleri */ .sekmeler { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 8px; } .sekmeler a { padding: 8px 14px; border-radius: var(--kose-orta); text-decoration: none; color: var(--yuzey-uzerinde-ikincil); font-weight: 550; } .sekmeler a[aria-current="page"] { background: var(--birincil-kap); color: var(--birincil-kap-uzerinde); } /* Tema düğmesi: sistem → açık → koyu. JS yoksa gizli (site sistem ayarını izler). */ .menu { margin-left: auto; } .tema-dugme { display: none; flex: none; width: 40px; height: 40px; border-radius: var(--kose-orta); border: 0; padding: 0; background: transparent; color: var(--yuzey-uzerinde-ikincil); cursor: pointer; place-items: center; } html.js .tema-dugme { display: inline-grid; } .tema-dugme:hover { background: var(--yuzey-kap); color: var(--yuzey-uzerinde); } .tema-dugme svg { width: 20px; height: 20px; } .tema-dugme [data-ikon] { display: none; } /* Simge 'dan seçilir: o öznitelik CSS'ten önce satır içi betikle konduğu için yeni sayfa ilk karede doğru simgeyle çizilir (JS'nin düğmeyi sonradan güncellemesini beklerse sayfa geçişinde simge bir an "sistem"e dönüp geri gelir). */ :root:not([data-tema]) .tema-dugme [data-ikon="sistem"], :root[data-tema="acik"] .tema-dugme [data-ikon="acik"], :root[data-tema="koyu"] .tema-dugme [data-ikon="koyu"] { display: block; } /* Telefonda menü ekranın altına sabitlenir: ikonlu beş sekme, başparmak erişiminde (uygulamalardaki alt çubuk gibi). Üst çubukta logo ve tema düğmesi kalır. Masaüstünde ikonlar gizli, menü eskisi gibi yazı. Aynı