/* sonersismanoglu.com - tek stil dosyasi, build adimi yok.
   Degistirdiginizde config/app.php icindeki asset_version degerini artirin.

   PIKSEL / TERMINAL ESTETIGI
   - Keskin koseler: border-radius HICBIR YERDE yok, bir test bunu koruyor.
     Profil rozetinin yuvarlak gorunumu piksel basamagiyla cizilir.
   - Golge, gradient, gecis (transition) ve animasyon yok.
     Tek istisna: dekoratif kesikli seritlerde repeating-linear-gradient
     (gecissiz hard-stop).
   - Butun yapisal kenarliklar 2px solid ink. Iki istisna: yayin kayitlari
     arasi hair, rozetler accent.
   - BUYUK HARF CSS ILE YAPILMAZ. text-transform yok; cevirme veri
     katmaninda Turkce kuraliyla yapilir (App\Core\Site::upper).
   - VT323 fontunda ok isareti (→) YOKTUR; ok yalnizca IBM Plex Mono ile
     basilan dugmelerde kullanilir. */

/* --- Fontlar: KENDI SUNUCUMUZDAN --- */
/* Google Fonts'tan CEKILMEZ. Iki sebep: gizlilik (ziyaretcinin IP'si ucuncu
   tarafa gitmesin; Almanya'da mahkeme kararina konu olmustu) ve hiz (ayri bir
   sunucuya baglanti maliyeti). Dosyalar public/assets/fonts/ altinda, repoda.

   Her aile icin iki alt kume: latin ve latin-ext. Turkce ikisine birden
   dagilmis - 'i' (U+0131) latin icinde, 'S G I' (U+015E, U+011E, U+0130)
   latin-ext icinde. Biri eksik olursa Turkce metin yedek fonta duser.

   Ikisi de SIL Open Font License 1.1 ile dagitilir; lisans metinleri ayni
   klasorde durur (OFL-*.txt). */

/* IBM Plex Mono 400 - latin-ext */
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Mono 400 - latin */
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-mono-400-latin.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;
}

/* IBM Plex Mono 500 - latin-ext */
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Mono 500 - latin */
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-mono-500-latin.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;
}

/* IBM Plex Mono 600 - latin-ext */
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Mono 600 - latin */
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-mono-600-latin.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;
}

/* IBM Plex Mono 700 - latin-ext */
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-mono-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Mono 700 - latin */
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-mono-700-latin.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;
}

/* VT323 400 - latin-ext */
@font-face {
    font-family: 'VT323';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/vt323-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* VT323 400 - latin */
@font-face {
    font-family: 'VT323';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/vt323-400-latin.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;
}

/* --- Tema A: kehribar terminal (varsayilan) --- */
:root {
    --bg:       #F5F0E6;
    --ink:      #241C14;
    /* KOYULASTIRILDI: #B8620E (L %39) -> #98510C (L %32).
       Sebep kontrast, estetik degil. Eski deger acik zemin uzerinde
       3.86:1 veriyordu; WCAG AA kucuk metin icin 4.5:1 ister ve buyuk
       metin muafiyeti (3:1) ancak >=18.66px kalin metinde gecerli.
       Etkilenenler yalnizca rozetler degildi: baglantilar (13.5-15px),
       kunye rozetleri (11.5px, yayinlar sayfasinda 188 adet) ve unvan
       etiketi hep esigin altindaydi.
       Yeni deger: zeminde 5.26:1, panelde 4.77:1. Ton ve doygunluk
       AYNI kaldi, yalnizca aciklik indi - yeni renk eklenmedi.
       Ayni renk bin/make-favicon.php ve bin/make-og-card.php icinde de
       yazili; ucu birlikte degisir. */
    --accent:   #98510C;
    --panel:    #EDE5D6;
    --dim:      #6E5F4A;
    --hair:     #CFC2A8;
    --stripe:   #D9CDB4;
    --onAccent: #F5F0E6;

    /* Yapiskan menu cubugunun yuksekligi. Yapiskan yil basligi buna gore
       konumlanir; elle yazilsaydi cubugun dolgusu degistiginde sessizce
       ayrisir ve yil basligi cubugun altinda kalirdi (bir kez oldu).
       Olculdu: ≤560'ta 70px, ustunde 82px (≥861'de 81px, fark onemsiz). */
    --nav-h: 82px;

    /* Yan bosluk TEK DEGISKENDE: yapiskan yil basligi kendi kabinin disina
       tasip tam genislige yayilmak icin bu degeri negatif marjda kullaniyor.
       Iki yerde ayri ayri yazilsaydi dar ekranda 16px'e inince ayrisirdi. */
    --gutter: 28px;

    --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    /* YALNIZCA PROFIL IKONLARININ HARFLERI ICIN. Sitenin ucuncu yazi
       tipi ve tek kullanim yeri burasi; govde metnine bulasmaz.
       ORCID'in "iD" harflerine yakin geometrik bir grotesk istendi,
       IBM Plex Mono esit genislikli oldugu icin o isi goremiyordu.
       Tek agirlik (600), iki alt kume: Turkce "İ" latin-ext'te. */
    --brand: 'Montserrat', 'IBM Plex Mono', ui-monospace, sans-serif;
    --term: 'VT323', 'IBM Plex Mono', ui-monospace, monospace;

    /* Baslik modu: block (varsayilan) */
    --heading-family: var(--mono);
    --heading-weight: 700;
    --logo-size:      31px;
    --logo-track:     0.10em;
    --h1-home-size:   44px;
    --h1-home-track:  0.08em;
    --h1-size:        38px;
    --h1-track:       0.08em;

    /* OZGECMISIN ADI KENDI OLCEGINI KULLANIR, --h1-size'i degil.
       Sebep sutun: .cv 78ch ile sinirli (masaustunde 702px), oysa sayfa
       basliklari tam genislikte akiyor. Ayni punto iki yerde ayni yeri
       kaplamiyor.

       BASLIKTA ARTIK YALNIZCA AD VAR (unvan bir alt satirda; bkz.
       views/pages/cv.php). Ad iki dilde de 16 karakter, yani olcu
       Ingilizceye gore kisilmak zorunda degil: onceki hal "Assoc. Prof.
       Dr. Soner Sismanoglu" idi ve 33 karakterdi.

       Olculdu: 38px'te ad + ust simge 493px, sutunda 209px pay var. */
    --cv-name-size:   38px;
    --cv-name-track:  0.06em;
    --h2-size:        21px;
    --h2-track:       0.08em;
}

/* --- Tema B: murekkep mavisi --- */
[data-theme="ink"] {
    --bg:       #FFFFFF;
    --ink:      #0F1520;
    --accent:   #1B3A6B;
    --panel:    #F2F5FA;
    --dim:      #586274;
    --hair:     #CBD3E0;
    --stripe:   #DCE3EE;
    --onAccent: #FFFFFF;
}

/* --- Baslik modu: terminal --- */
[data-heading="terminal"] {
    --heading-family: var(--term);
    --heading-weight: 400;
    --logo-size:      46px;
    --logo-track:     0.04em;
    --h1-home-size:   68px;
    --h1-home-track:  0.03em;
    --h1-size:        58px;
    --h1-track:       0.03em;
    --h2-size:        32px;
    --h2-track:       0.03em;
    --cv-name-size:   58px;
    --cv-name-track:  0.03em;
}

/* Montserrat 600 - latin-ext (Turkce "İ" burada) */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/montserrat-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Montserrat 600 - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/montserrat-600-latin.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;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--mono);
    font-size: 15px;
    line-height: 1.65;
    text-wrap: pretty;
}

::selection { background: var(--accent); color: #FFFFFF; }

a { color: var(--accent); }
a:hover { color: var(--ink); background: var(--panel); }

img { max-width: 100%; height: auto; display: block; }

p { margin: 0 0 12px; }

.wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.skip-link {
    position: absolute;
    left: -9999px;
}

.skip-link:focus {
    left: 28px;
    top: 14px;
    z-index: 10;
    background: var(--ink);
    color: var(--bg);
    padding: 8px 12px;
}

/* --- Dekoratif kesikli serit: 10px dolu / 10px bos --- */
.rule-strip {
    height: 10px;
    background: repeating-linear-gradient(90deg, var(--accent) 0 10px, transparent 10px 20px);
}

/* --- Basliklar --- */
h1, h2, h3 {
    font-family: var(--heading-family);
    font-weight: var(--heading-weight);
}

.brand {
    display: inline-block;
    font-family: var(--heading-family);
    font-weight: var(--heading-weight);
    font-size: var(--logo-size);
    letter-spacing: var(--logo-track);
    line-height: 1.05;
    color: var(--ink);
    text-decoration: none;
}

.brand:hover { background: none; color: var(--ink); }

/* Ad ardindaki ust simge (DDS, PhD). vertical-align yerine position/top
   kullaniliyor: tasarim sistemi konumu em cinsinden veriyor. */
.creds {
    position: relative;
    vertical-align: baseline;
    font-family: var(--mono);
    font-weight: 500;
    font-size: 0.30em;
    letter-spacing: 0.10em;
    color: var(--dim);
    padding-left: 0.5em;
    top: -0.85em;
    /* "DDS," ile "PhD" AYRILMASIN; dar ekranda logo sararken ikisi ayri
       satira dusuyordu. Ozgecmisteki .cv__creds ile ayni kural. */
    white-space: nowrap;
}

.hero__name .creds {
    font-size: 0.24em;
    top: -1.25em;
}

.page-title {
    font-size: var(--h1-size);
    letter-spacing: var(--h1-track);
    line-height: 1.05;
    margin: 0 0 10px;
}

.section__title {
    font-size: var(--h2-size);
    letter-spacing: var(--h2-track);
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--ink);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.section__note {
    font-family: var(--mono);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--dim);
}

.section { margin-top: 48px; }
.section__body { padding-top: 18px; }
.section__more { margin: 18px 0 0; }

/* --- Header --- */
.site-header { padding-top: 26px; padding-bottom: 0; }

/* Dil degistirici sag ust kosede, menu satirindan ayri: menu ogeleri dile
   gore farkli uzunlukta, ayni satirda olsalardi dugme yer degistirirdi. */
.site-header__top {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    justify-content: space-between;
}

.site-header__brand { min-width: 0; }

.site-header__unit {
    margin: 4px 0 0;
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--dim);
}

/* MENU CUBUGU: YAPISKAN.
   102 yayinlik listede gezinmeyi kolaylastirmak icin. Olculdu: kapali
   cubuk masaustunde 45px (ekranin %5,0'i), mobilde 46px (%5,7). Ucuz.

   Cubuk header'in DISINDA ve body seviyesinde (bkz. views/partials/nav.php):
   sticky ancak kapsayicisi ekrandayken yapisir, header icinde kalsaydi
   birkac yuz piksel sonra birakirdi.

   Zemin SEFFAF DEGIL: cubuk icerigin uzerinde yuzuyor, altindaki metin
   gorunmemeli. Alt kenarlik eski .nav-rule'un yerini aliyor. */
.nav-bar {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bg);
    border-bottom: 2px solid var(--ink);
    padding: 18px 0;
}

/* GENIS EKRAN: acilir menunun kabugu yok sayilir. <details> kapaliyken bile
   liste gosterilir; summary ve ev dugmesi gizlenir. */
.nav { margin-top: 0; }

.nav__menu { display: block; }

/* GENIS EKRAN kurallari BILEREK min-width sorgusunda: medya sorgusu
   ozgullik eklemedigi icin, buradaki kurallar sorgusuz yazilsaydi dar
   ekran kurallarini ezerdi. Ayrica dar ekranda <details> dogal davranisiyla
   kalmali - display'i ezersek kapaliyken de gorunur. */
@media (min-width: 801px) {
    /* Acilir menu kabugu yok sayilir: <details> acik durur (markup'ta open),
       yalnizca dugmeleri gizleriz. */
    .nav .nav__toggle,
    .nav .btn--home { display: none; }
}

.icon { display: block; flex: none; }

.nav__list, .lang-switch {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* MENU DUGMELERI GENEL .btn'DEN DAHA SIKI.
   Menude yedi oge var ve Turkce etiketler uzun; varsayilan 14px dolgu ve
   0.14em harf araligiyla Turkce menu 920px istiyor, oysa masaustu duzeni
   861px'te basliyor, yani 861-919 arasinda iki satira sariyordu. Cubuk
   yapiskan oldugu icin bu kalici bir serit demek. Olculen degerler ve
   tablet araligindaki ikinci daraltma: CLAUDE.md > Duyarli davranis. */
.nav__list .btn {
    padding: 9px 10px;
    letter-spacing: 0.10em;
}

.lang-switch { gap: 0; flex: none; }
.lang-switch li + li .btn { border-left: 0; }

/* Menu panelindeki dil satiri VARSAYILAN OLARAK GIZLI; yalnizca ≤700px'te
   gorunur. Genis ekranda dil degistirici header'in sag ust kosesindedir
   (bkz. views/partials/nav.php). Gizli kopya erisilebilirlik agacinda da
   yer almaz, yani ekran okuyucu tek bir dil listesi gorur. */
.nav__lang { display: none; }

/* --- Dugmeler --- */
.btn {
    display: inline-block;
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    padding: 9px 14px;
    border: 2px solid var(--ink);
    background: var(--bg);
    color: var(--ink);
    text-decoration: none;
}

.btn:hover { background: var(--panel); color: var(--ink); }

.btn--on, .btn--on:hover {
    background: var(--ink);
    color: var(--bg);
}

.btn--lang {
    font-size: 12px;
    letter-spacing: 0.12em;
    padding: 7px 12px;
}

.btn--ghost {
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 0.12em;
    padding: 6px 11px;
}

/* SAYFANIN TEK EYLEMI (bugun yalnizca ozgecmisteki yazdir dugmesi).
   .btn--ghost'un tersi: sistemin en hafif varyanti degil, en agiri.

   TURUNCU DOLGU BILEREK KULLANILMADI. Bu sitede dolu turuncu KIMLIK
   rengidir (.badge-title, .link-icon); eylem rengine cevirmek anlamini
   bulandirirdi. Ustelik turuncu zemin uzerindeki metnin kontrasti
   3.86:1, yani 12.5px'lik bir etiket icin WCAG AA'nin altinda kalir;
   boyle birakinca 14.78:1 duruyor.

   Uzerine gelince murekkebe doner: .link-icon:hover ile ayni davranis.
   Dokunmatikte hover yok, orada gorunurlugu 3px kenarlik ve 600 agirlik
   tasiyor. */
.btn--action {
    border-width: 3px;
    padding: 11px 18px;
}

.btn--action:hover {
    background: var(--ink);
    color: var(--bg);
}

/* --- Yayin detay sayfasi --- */

/* LISTEDEKI BASLIK BAGLANTISI. Renk DEVRALINIR: 102 basligin accent'e
   donmesi yayinlar sayfasinin gorunumunu bastan degistirirdi. Uzerine
   gelince accent olur, yani islev belli olur, gorunum korunur. */
.pub__link {
    color: inherit;
    text-decoration: none;
}

.pub__link:hover {
    color: var(--accent);
    text-decoration: underline;
}

.crumbs {
    margin: 0 0 18px;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--dim);
}

/* Kunye blogu: olcu 78ch, biyografiyle ayni. Esit genislikli fontta daha
   uzun satir yoruyor (bkz. .prose). */
.paper { max-width: 78ch; }

/* BASLIK KENDI OLCEGINI KULLANIR, --h1-size'i (38px) degil.
   Bilimsel yayin basliklari uzun: olculdu, 702px'lik sutunda bu sayfanin
   basligi 38px'te 274px (alti satir), 30px'te 180px (dort satir) yer
   kapliyor. Ilk ekranin dortte biri tek bir baslik oluyordu.
   Ozgecmis sayfasindaki .cv__name ile ayni gerekce. */
.paper__title {
    margin: 0 0 14px;
    font-size: 30px;
    letter-spacing: 0.01em;
    line-height: 1.25;
}

.paper__authors { margin: 0 0 6px; }

.paper__venue {
    margin: 0 0 12px;
    color: var(--dim);
}

.paper__meta {
    margin: 0 0 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.paper__link { margin: 0 0 26px; }

.paper__section {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 2px solid var(--hair);
}

.paper__heading {
    margin: 0 0 10px;
    font-size: var(--h2-size);
    letter-spacing: var(--h2-track);
}

.paper__body {
    margin: 0 0 12px;
    text-wrap: pretty;
}

.paper__keywords { margin: 0; }

/* Icerigi hazir olmayan sayfa. Sayfa zaten noindex; bu satir yalnizca
   insan ziyaretci icin. Cerceveli, cunku kunyeden ayri bir sey soyluyor. */
.paper__pending {
    margin: 26px 0 0;
    padding: 14px 16px;
    border: 2px solid var(--hair);
    color: var(--dim);
}

.paper__back { margin: 30px 0 0; }

/* Konu ve ilgili yayin listeleri. Isaretleyici yok, sistemde hicbir
   listede yok; ayirici olarak ince cizgi kullaniliyor. */
.paper__topics,
.paper__related,
.topic__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.paper__topics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}

.paper__related li {
    padding: 10px 0;
    border-bottom: 1px solid var(--hair);
}

.paper__related li:last-child { border-bottom: 0; }

.paper__related-venue {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--dim);
}

/* --- Konu sayfasi --- */
.topic__count {
    margin: 0 0 22px;
    font-size: 12.5px;
    letter-spacing: 0.08em;
    color: var(--dim);
}

.topic__others {
    margin-top: 40px;
    padding-top: 18px;
    border-top: 2px solid var(--ink);
}

.topic__others-title {
    margin: 0 0 12px;
    font-size: var(--h2-size);
    letter-spacing: var(--h2-track);
}

.topic__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}

/* Arastirma sayfasindaki karttan konu sayfasina gecis. */
.card__more {
    margin: 10px 0 0;
    font-size: 12.5px;
}


/* --- Hero --- */
.hero {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    padding-top: 26px;
}

/* PASPARTU KALDIRILDI (2026-08-24). Once dis kutu (2px kenarlik + 8px
   dolgu + panel zemin) ve GORUNTUNUN KENDI kenarligi vardi, yani iki cizgi
   ic ice. ≤700px'te ic cizgi zaten kaldiriliyordu (kucuk boyda gurultu gibi
   duruyordu); ikonlar sol sutuna eklenince masaustunde de fazlalik oldu:
   uc ayri gorsel katman (dis kutu, ic kenarlik, ikon sirasi) ust uste
   biniyordu.

   CERCEVESIZ BIRAKILMADI. Sistemde her yapisal blok 2px murekkep
   kenarlikla cevrili; portre tek kenarliksiz kutle kalsa "yuzer" gorunurdu.
   Simdi tek cizgi: goruntunun kendi kenarligi. */
.portrait {
    border: 2px solid var(--ink);
}

.portrait__img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
}

.portrait__empty {
    padding: 10px;
    aspect-ratio: 4 / 5;
    border: 2px solid var(--ink);
    background: repeating-linear-gradient(45deg, var(--stripe) 0 6px, transparent 6px 12px);
    display: flex;
    align-items: flex-end;
}

.portrait__label {
    font-size: 10.5px;
    letter-spacing: 0.10em;
    color: var(--dim);
    background: var(--bg);
    padding: 3px 6px;
}

/* PROFIL IKONLARI: portrenin ALTINDA bes yuvarlak.
   Once cerceveli bir metin listesiydi (220px'lik sutunda 232px yer
   kapliyordu), sonra metin rozeti satiri oldu (~100px). Simdi ikon:
   5 x 40px + 4 x 5px = 220px, yani portrenin TAM genisligi.

   YUVARLAKLIK SISTEMDEKI TEK ISTISNA. Sitede baska hicbir yerde
   border-radius yok - favicon'dan menu dugmesine kadar her sey keskin
   kose. Bu sira bilerek disarida birakildi; karar Soner'in, gerekcesi
   ikonlarin "rozet" degil "isaret" olarak okunmasi.
   Ayrinti: CLAUDE.md > Profil ikonlari */
.side-links {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    /* Dar ekranda kendi satirina duser ve zaten sigar; sarma yine de
       birakildi cunku listeye altinci bir profil eklenebilir. */
    flex-wrap: wrap;
    gap: 5px;
}

/* DOKUNMA ALANI. Boyanan daire icteki .link-icon__mark; ikisi ayri
   cunku 44px kurali daireyi unvan rozetinden iri yapardi. */
.link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 44px;
    text-decoration: none;
}

.link-icon__mark {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.link-icon__mark--text {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #FFFFFF;
    /* Beyaz, --onAccent degil: turuncu uzerinde 5.74:1 veriyor,
       onAccent (#F5F0E6) ise 5.26:1. Kucuk punto icin fark onemli. */
    font-family: var(--brand);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-sizing: border-box;
}

/* Uzerine gelince murekkebe doner; sistemin .btn--on kaliniyla ayni.
   Gecis/animasyon yok, sistem kurali. SVG ikonun zemini dosyada
   gomulu oldugu icin renk degistiremez; onun yerine sonuyor. */
.link-icon:hover .link-icon__mark--text {
    background: var(--ink);
    color: var(--bg);
}

.link-icon:hover img.link-icon__mark { opacity: 0.72; }

.link-icon:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* UNVAN ROZETI. Adin ALTINDA ve kurum satiriyla AYNI SATIRDA akar; kendi
   blogu degil, kurum cumlesinin basindaki bir isarettir.
   Once adin ustunde tek basina duruyordu ve sayfaya girer girmez karsilayan
   sey oydu: unvan addan once okunuyordu. */
.badge-title {
    display: inline-block;
    margin: 0 8px 0 0;
    padding: 4px 10px;
    background: var(--accent);
    color: var(--onAccent);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    /* Satir icinde: kurum metninin satir yuksekligini buyutmesin. */
    line-height: 1.2;
    vertical-align: 1px;
}

.hero__name {
    margin: 0;
    font-size: var(--h1-home-size);
    letter-spacing: var(--h1-home-track);
    line-height: 1.05;
}

.hero__affiliation {
    margin: 10px 0 24px;
    font-size: 14px;
    letter-spacing: 0.02em;
    color: var(--dim);
    /* Rozet satir icinde durdugu icin satirlar biraz aciliyor; sarma
       oldugunda rozetli satir ile devami cakismasin. */
    line-height: 1.8;
}

/* Satir uzunlugu: tasarim belgesi biyografi icin sinir koymuyordu, ama
   1440px'te satirlar 84 karaktere ciktigi icin okuma sinirinda kaliyordu.
   Bilincli sapma. */
.hero__bio { margin: 0 0 16px; max-width: 78ch; }
.hero__bio:last-of-type { margin-bottom: 4px; }

.hero__more { margin: 12px 0 0; font-size: 13.5px; }

/* Duz paragraf blogu (Hakkimda sayfasi, grup metinleri). */
.prose { max-width: 74ch; }
.prose p { margin: 0 0 16px; }
.prose p:last-child { margin-bottom: 0; }

.hero__actions {
    margin: 20px 0 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* --- Metrik paneli --- */
.metrics {
    margin-top: 36px;
    border: 2px solid var(--ink);
    background: var(--panel);
}

.metrics--page { margin-top: 24px; }

.metrics__strip {
    margin: 0;
    padding: 7px 12px;
    display: flex;
    gap: 12px;
    align-items: center;
    background: var(--ink);
    color: var(--bg);
    border-bottom: 2px solid var(--ink);
    font-size: 11px;
    letter-spacing: 0.16em;
}

.metrics__cursor {
    background: var(--bg);
    color: var(--ink);
    padding: 0 3px;
}

/* Hucreler arasi 2px cizgiler IZGARA BOSLUKLARINDAN gelir: bosluk ink
   zeminini gosterir, hucreler panel zeminiyle ustunu kapatir. Boylece kac
   sutun olursa olsun cizgi kalinligi hep 2px kalir; hucreye kenarlik
   verilseydi panelin dis kenarligiyla ust uste binip 4px olurdu. */
.metrics__grid {
    display: grid;
    grid-template-columns: repeat(var(--cells, 5), 1fr);
    gap: 2px;
    background: var(--ink);
}

/* Hucre sayisi SINIFTAN gelir. Once satir ici stil ozniteligiyle
   (style="--cells: 4") basiliyordu; o oznitelik kati bir CSP altinda
   style-src 'unsafe-inline' istiyordu ve nonce ozniteliklere uygulanmaz.
   Sayi kapali bir kume, o yuzden alti satir CSS yeterli oldu. */
.metrics--cells-1 { --cells: 1; }
.metrics--cells-2 { --cells: 2; }
.metrics--cells-3 { --cells: 3; }
.metrics--cells-4 { --cells: 4; }
.metrics--cells-5 { --cells: 5; }
.metrics--cells-6 { --cells: 6; }

.metric {
    padding: 16px 12px;
    background: var(--panel);
}

.metrics--page .metric { padding: 14px 12px; }

.metric__label {
    margin: 0;
    font-size: 10.5px;
    letter-spacing: 0.10em;
    color: var(--dim);
}

.metric__value {
    margin: 4px 0 0;
    font-family: var(--term);
    font-size: 48px;
    line-height: 0.9;
    color: var(--accent);
}

.metrics--page .metric__value { font-size: 40px; }

.metric__sub {
    margin: 0;
    font-size: 10.5px;
    letter-spacing: 0.10em;
    color: var(--dim);
}

.metric__second {
    margin: 10px 0 0;
    padding-top: 8px;
    border-top: 2px solid var(--hair);
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.metric__second-value {
    font-family: var(--term);
    font-size: 26px;
    line-height: 0.9;
    color: var(--accent);
}

/* --- Cipler (arastirma alanlari) --- */
.chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.chip {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 13px;
    border: 2px solid var(--ink);
    font-size: 13.5px;
    letter-spacing: 0.03em;
}

.chip__mark {
    display: block;
    width: 8px;
    height: 8px;
    background: var(--accent);
    flex: none;
}

.chips--small .chip { font-size: 12.5px; padding: 6px 10px; }

/* --- Yayin listesi --- */
.pub-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pub {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 2px solid var(--hair);
}

.pub--page {
    grid-template-columns: 70px 1fr;
    padding: 20px 0;
}

.pub:last-child { border-bottom: 0; }

.pub__no {
    font-family: var(--term);
    font-size: 26px;
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--accent);
}

.pub--page .pub__no { font-size: 28px; }

.pub__body { min-width: 0; }

.pub__title {
    margin: 0;
    padding: 5px 0 3px;
    font-size: 15.5px;
    font-weight: 500;
    max-width: 78ch;
}

.pub--page .pub__title { font-size: 16px; max-width: 80ch; }

.pub__authors {
    margin: 0;
    font-size: 14.5px;
}

.pub__authors strong { font-weight: 700; }

.pub__venue {
    margin: 0;
    font-size: 13.5px;
    color: var(--dim);
}

.pub__meta {
    margin: 0;
    padding-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

/* Yayin rozeti: dizin adi + kaynak baglantisi tek parca. Baglantisi
   olmayan rozet AYNI gorunur, sadece tiklanmaz - ayni bilgiyi veren iki
   rozeti farkli gostermek yanlis anlam yaratir. */
.pub__badge {
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.10em;
    padding: 4px 8px;
    border: 2px solid var(--accent);
    color: var(--accent);
    text-decoration: none;
}

a.pub__badge:hover { background: var(--panel); color: var(--ink); }

/* Liste ustundeki kucuk ara baslik. .year yayin listesinde yil, .sublabel
   ders gruplari icin (Lisans / Lisansüstü) - ayni bicim, iki kullanim. */
.year,
.sublabel {
    margin: 18px 0 0;
    padding-top: 4px;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--dim);
}

.jumplinks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 22px 0 4px;
}

.jumplinks ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.jumplinks__label {
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--dim);
    padding-right: 6px;
}

.jumplinks__count { color: var(--dim); padding-left: 6px; }

/* --- Ortak metin ogeleri --- */
.lede {
    font-size: 14px;
    color: var(--dim);
    max-width: 74ch;
    margin: 0 0 24px;
}

.muted { color: var(--dim); font-size: 12px; }

.notice {
    padding: 18px 20px;
    background: var(--ink);
    color: var(--bg);
    font-size: 14px;
}

.tag {
    display: inline-block;
    padding: 3px 8px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.10em;
    border: 2px solid var(--ink);
    color: var(--ink);
}

/* --- Kartlar ve listeler (arastirma, dersler, faaliyetler, iletisim) --- */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 16px;
}

.card {
    padding: 16px 18px;
    border: 2px solid var(--ink);
    background: var(--panel);
}

.card h3 {
    margin: 0 0 8px;
    font-size: 15px;
    letter-spacing: 0.04em;
}

.entry-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.entry {
    padding: 16px 0;
    border-bottom: 2px solid var(--hair);
}

.entry:last-child { border-bottom: 0; }

.entry__title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 500;
    font-family: var(--mono);
}

.entry__meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12.5px;
    color: var(--dim);
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 24px;
}

.contact-list, .profile-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* --- Iletisim --- */
/* E-posta HTML'e "kullanici (at) alan" olarak girer; site.js onu birlestirip
   mailto baglantisina cevirir. JS kapaliysa bu hali ekranda kalir ve
   okunur - o yuzden bicim iki durumda da ayni. */
.contact-mail {
    margin: 0 0 8px;
    font-size: 16px;
    letter-spacing: 0.02em;
}

.contact-mail__at { color: var(--dim); }

.contact-mail__link { color: var(--accent); }

/* Adresin altindaki tercih cumlesi govde metnidir, teknik not degil:
   .muted degil, normal punto ve normal renk. Teknik not (JS'siz duruma ait,
   site.js onu kaldirir) bunun altinda ve soluk durur. */
.contact-mail__prefer { margin: 0 0 8px; }

.contact-address {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.7;
}

/* --- Kariyer kronolojisi --- */
/* Yil sutunu + aciklama. Yil bicimi yayin listesindeki .year ile AYNI
   ailedendir (terminal fontu, accent): iki yerde de yil ayni okunmali.
   Satirlar arasi hair, yayin kayitlarindaki ayirici ile ayni. */
.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.timeline__row {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 16px;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid var(--hair);
}

.timeline__row:last-child { border-bottom: 0; }

.timeline__year {
    font-family: var(--term);
    font-size: 26px;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--accent);
}

.timeline__text {
    font-size: 15px;
    line-height: 1.55;
}

/* --- 404 --- */
/* Buyuk sayi sayfanin tek hareketli ogesi degil, tek IRI ogesi: terminal
   fontu ve vurgu rengi, yani yayin listesindeki yapiskan yil basliginin
   ayni ailesi. Yeni bir gorsel dil icat edilmedi.

   Dekoratiftir (aria-hidden): sayfanin h1'i basliktir. */
.notfound__code {
    margin: 0;
    font-family: var(--term);
    font-size: 132px;
    line-height: 0.82;
    letter-spacing: 0.04em;
    color: var(--accent);
}

.notfound__hint {
    margin: 26px 0 0;
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--dim);
}

.notfound__links {
    margin: 10px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* --- Footer --- */
.site-footer {
    margin-top: 60px;
    padding: 18px var(--gutter) 34px;
    border-top: 2px solid var(--ink);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: baseline;
    justify-content: space-between;
    font-size: 12px;
    color: var(--dim);
}

.site-footer__copy { margin: 0; }

/* Son guncelleme damgasi: cron'un status.json'a yazdigi last_success.
   Etiket footer'in geri kalani gibi soluk; tarih bir tik daha koyu,
   cunku satirdaki tek bilgi o. Damga yoksa satir hic basilmaz. */
.site-footer__updated { margin: 0; }
.site-footer__updated time { color: var(--ink); }

.site-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

main.wrap { padding-top: 26px; padding-bottom: 60px; }

/* --- Dar ekran --- */
/* Kirilma noktalari NIYETE gore: 861+ masaustu kompozisyonu, 561-860 tablet
   kendi duzeni, 560- telefon. Onceki halde 860'in altindaki her sey ayni
   kurallari aliyordu, yani tablet telefon gibi davraniyordu. */

/* Dokunmatik ekranlarda tiklanabilir her seyin yuksekligi en az 44px olmali;
   rozetler gercek baglanti, parmakla vurulamiyorsa islevsizler. */
@media (max-width: 860px) {
    .btn,
    .pub__badge,
    .link-icon,
    .contact-mail__link,
    .activity-link,
    /* Bu ikisi listede YOKTU ve sessizce 18px kaliyordu: ana sayfadaki
       "Devamı →" ve ozgecmisteki arastirmaci kimlik baglantilari
       (ORCID, Scopus, WoS...). Ikisi de tiklanmasi beklenen baglanti. */
    .hero__more a,
    .cv__ids a,
    /* Yayin detay ve konu sayfalarindaki gezinme baglantilari: konu
       rozetleri, ilgili yayin basliklari, diger konular listesi. */
    .paper__topics a,
    .topic__list a,
    .paper__related a,
    .card__more a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* LOGO AYRI COZULUR. min-height verilseydi basligin kendisi 19px
       buyurdu (olculdu: 25px -> 44px) ve bu HER sayfada, her kaydirmada
       yer kaybi demekti. Bunun yerine dokunma alani dolguyla buyutulup
       negatif marjla geri aliniyor: hedef 45px, duzen 25px'te kaliyor.
       .link-icon'daki ayrimin aynisi - dokunma alani boyanan ogeden
       buyuk olabilir. Ustteki dekoratif serit ve alttaki unvan satiri
       tiklanabilir degil, yani calinan tik yok. */
    .brand {
        display: inline-block;
        /* 11px, 10px degil: ≤374'te logo 22px'e iniyor ve satir kutusu
           23px kaliyor; 10px dolguyla hedef 43px'te takiliyordu. */
        padding: 11px 0;
        margin: -11px 0;
    }

    /* Bag 44px, boyanan daire 40px: aradaki 4px dokunma payi. Satir
       araligi sifirlanmazsa o payin ustune gap biniyor ve sarma olan
       genisliklerde iki satir arasi gereksiz aciliyordu. Yatay aralik
       durur; orada boyle bir pay yok. */
    .side-links { row-gap: 0; }

    /* YAPISKAN YIL BASLIGI.
       102 kaydin icinde hicbir isaret yoktu: telefonda 36 ekranlik kaydirma
       "neredeyim" sorusunu cevaplamiyordu. Yil kaydirirken ustte asili kalir.
       Gruplama ZATEN vardi (Repository::byYear), eklenen tek sey yapiskanlik.

       Sira numarasi ≤560'ta gizlendigi icin (bkz. .pub__no) yil onun gorsel
       rolunu devralir: ayni terminal fontu, ayni accent rengi.

       Negatif marj + esit dolgu: baslik kabinin disina tasip tam genislige
       yayilir. Yoksa yan bosluklardan icerik akip gecerken gorunurdu. */
    .year {
        position: sticky;
        /* Menu cubugu da yapiskan; yil onun ALTINA yapisir, ust uste
           binmesinler. Deger cubugun kapali yuksekliginden gelir. */
        top: var(--nav-h);
        z-index: 2;
        margin: 22px 0 0;
        margin-left: calc(var(--gutter) * -1);
        margin-right: calc(var(--gutter) * -1);
        padding: 6px var(--gutter) 4px;
        background: var(--bg);
        border-bottom: 2px solid var(--ink);
        font-family: var(--term);
        font-size: 22px;
        letter-spacing: 0.04em;
        color: var(--accent);
    }
}

/* --- Tablet: 561-860px --- */
/* Bu araligin kendi kurallari YOKTU, telefonla ayni davranisi aliyordu.
   Olculdu (768px): metrik hucresi 345px cikiyor ve yarisi bos duruyordu,
   kunye basligi satir basina ~72 karaktere ulasiyordu. */
@media (min-width: 801px) and (max-width: 860px) {
    /* Dort hucre bu genislige rahat sigar: 768'de hucre 188px, panel 312px
       yerine ~160px. Iki sutun kurali artik yalnizca ≤700'de. */
    .metrics__grid { grid-template-columns: repeat(var(--cells, 4), 1fr); }

    /* Esit genislikli fontta 72 karakterlik satir yoruyor. Biyografi icin
       zaten 78ch siniri vardi (bkz. .hero__bio), kunye basligi disarida
       kalmisti. */
    .pub--page .pub__title { max-width: 68ch; }

    /* Portre masaustu olcusunde kalir, kolon araligi daralir: 40px burada
       icerikten calinan bir bosluk. */
    .hero { gap: 28px; }

    /* Menu tek satirda kalsin diye dolgu ve harf araligi daraltilir:
       varsayilan olculerle Turkce menu 691px istiyor, 701px'te 645px alan
       var. Daraltmayla 625px'e iniyor (olculdu), yani araligin EN DAR
       noktasinda 21px, 768px'te 73px pay kaliyor. Ingilizce daha kisa:
       701px'te 572px, 73px pay.
       Pay tukenirse liste iki satira sarar; tasma olmaz, yalnizca
       yukseklik 88px'e cikar. */
    .nav__list .btn {
        padding: 9px 7px;
        letter-spacing: 0.06em;
    }
}

/* --- Telefon uclusu: 700, 560, 459 --- */

/* 700px = KOMPAKT MOD ESIGI. Hero, baslik ve menu ayni noktada bicim
   degistirir; once hero 700'de, menu 560'ta kiriliyordu ve arada menu iki
   satira sarip 96px tutuyordu.

   Esik olculdu: Turkce menu tek satir icin 691px nav genisligi, yani 747px
   viewport istiyor ("AKADEMİK FAALİYETLER" tek basina 217px). 768px'te
   yalnizca 6px pay kaliyordu; bir etiket uzasa sessizce sariyordu.
   701-860 araliginda dugme dolgusu daraltilarak gercek pay birakildi
   (bkz. yukaridaki tablet blogu).

   Hero da ayni noktada kiriliyor: 768px'te portrenin sagindaki ~490px bos
   duruyordu. */
@media (max-width: 700px) {
    /* Iki sutun 375px'e kadar korunur: tek sutunda panel 587px'e ciktiginda
       ekranin yarisini yiyordu, iki sutunda 372px. Uc sutun yalnizca 17px
       daha kazandirip hucreleri 112px'e dusurdugu icin secilmedi. */
    .metrics__grid { grid-template-columns: repeat(2, 1fr); }

    /* Genis hucrede sola yapisik sayi dengesiz duruyordu. */
    .metric { text-align: center; }
    .metric__second { justify-content: center; }

    /* Tek kalan son hucre iki sutuna yayilir, yaninda bos kutu kalmasin. */
    .metric:last-child:nth-child(odd) { grid-column: 1 / -1; }

    /* KIMLIK BIR KEZ.
       Baslikta ad + iki satir unvan, hemen altinda hero'da unvan rozeti +
       ad + kurum vardi; 812px'lik ilk ekranin ~570px'i ayni bilgiyi iki kez
       soylemeye gidiyordu. Dar ekranda baslik yalnizca adi tasir.
       Unvani hero (rozet + kurum satiri) ve Hakkimda sayfasi soyler. */
    .site-header__unit { display: none; }

    /* ANA SAYFADA baslik logosu da susar: hero 60px asagida ayni adi zaten
       basiyor, yani ilk ekranda ad iki kez geciyordu. Ic sayfalarda logo
       KALIR, orada kimligi tasiyan tek yer o.
       Eve donus baglantisi kaybolmaz: menu satirindaki ev simgesi duruyor
       (ve zaten ana sayfadayken eve donmek gerekmiyor). */
    [data-route="home"] .site-header__brand { display: none; }

    /* PORTRE ADIN SOLUNA GECER.
       Masaustunde portre sol sutunda, ad sag sutunda; ikisi ayri kaplarda
       (.hero__side ve .hero__main) oldugu icin dar ekranda dogal olarak
       yan yana gelemiyorlardi. Iki sarmalayici burada display: contents ile
       duzlestirilir, boylece dort parca dogrudan .hero izgarasinin ogesi
       olur ve serbestce yerlestirilebilir.

       display: contents guvenli, cunku her iki sarmalayicinin da TAM OLARAK
       iki cocugu var ve ikisi de burada acikca yerlestiriliyor; degisken
       sayida cocuk olsaydi bu numara kirilgan olurdu.

       Sira: [portre | rozet+ad+kurum] / profil rozetleri / biyografi.
       Rozetler adin altina degil bloğun altina tam genislikte konur; 375px'te
       adin sagında yalnizca ~225px kaliyor, bes rozet oraya sigmaz. */
    .hero {
        display: grid;
        /* 160px: paspartu dengesi icin genislik gerekiyor. Dar birakilinca
           goruntu kisa kaliyor ve gerilen cercevede ust/alt paspartu yan
           paspartudan cok daha kalin cikiyordu. */
        grid-template-columns: 160px minmax(0, 1fr);
        grid-template-areas:
            "portrait id"
            "links    links"
            "body     body";
        column-gap: 14px;
        row-gap: 16px;
        align-items: start;
    }

    .hero__side,
    .hero__main { display: contents; }

    .portrait   { grid-area: portrait; }
    .hero__id   { grid-area: id; }
    .side-links { grid-area: links; margin-top: 0; }
    .hero__body { grid-area: body; }

    /* PORTRE: CERCEVE ad bloguyla ayni yukseklikte, GORUNTU oranini korur.
       Once goruntunun kendisi gerdirilmisti (object-fit: cover) ve oran
       0.80'den 0.46'ya kadar dusuyordu; ozellikle 561-700 arasinda foto
       ezik duruyordu. Artik gerilen yalnizca cerceve; goruntu 4/5 oraninda
       kalip icinde DIKEY ORTALANIR, artan yer paspartu olur.

       Cerceve zaten tek cizgi (bkz. .portrait); burada kalan tek is
       yuksekligi kimlik bloguna esitlemek ve goruntuyu icinde ortalamak.
       Artan yer sayfanin zemini olarak gorunur. */
    .portrait {
        align-self: stretch;
        padding: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .portrait__img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 5;
    }

    .portrait__empty {
        width: 100%;
        aspect-ratio: 4 / 5;
    }

    /* Ad iki satira dusuyor ve sag sutunda ~225px alan var; kurum satiri
       orada dort satira kadar cikabiliyor, blok yine de portreden uzun
       oldugu icin altta bosluk kalmiyor. */
    .hero__affiliation { margin-bottom: 0; }

}

/* Ozgecmisin adi bir basamak iner.
   Sutun burada 78ch sinirindan cikip viewport'a baglaniyor: 801px'te
   702px, 701px'te 645px. Esik menuyle ayni sayi (800) ama sebebi ayri;
   ikisi tesadufen ayni noktada bulusuyor. */
@media (max-width: 800px) {
    :root {
        --cv-name-size:  32px;
        --cv-name-track: 0.05em;
    }

    [data-heading="terminal"] {
        --cv-name-size:  48px;
    }
}

/* --- Menu esigi: 800px --- */
/* Hero 700'de kiriliyor, MENU 800'de. Ikisi ayri cunku sinirlarini farkli
   seyler belirliyor: hero'yu portrenin yanindaki bosluk, menuyu ETIKET
   UZUNLUGU.

   ESIK BIR KEZ DAHA YUKARI CIKTI: 782 -> 800. Sebep menuye CV'nin
   eklenmesi, yani YEDINCI oge. Olculdu (Turkce, tablet olculeriyle):
   menu tek satir icin 702px nav genisligi istiyor, 702 + 56 = 758;
   ama araligin en dar noktasinda pay birakmak icin esik 800'e alindi ve
   dugmeler ayrica daraltildi (dolgu 9px 7px, harf araligi 0.06em).
   801px'te Turkce menu 43px, Ingilizce 101px pay birakiyor.

   Ikinci bir kirilma noktasi da vardi ve gorulmesi zor: MASAUSTU
   duzeni 861px'te basliyor ve varsayilan .btn olculeriyle (14px dolgu,
   0.14em) yedi ogeli Turkce menu 920px istiyordu, yani 861-919 arasi
   iki satira sariyordu. Menu dugmeleri bu yuzden genel .btn'den daha
   siki: 9px 10px / 0.10em. Simdi 861'de 29px pay var.

   ESIK IKI YERDE TANIMLI VE AYNI OLMALI: burasi ve site.js icindeki
   matchMedia. Ayrisirlarsa menu genis ekranda kapali baslar ve summary
   gizli oldugu icin ACILAMAZ. Bir test bagi kuruyor, bir baskasi da
   iki aralikta da tek satira sigdigini hesapliyor. */
@media (max-width: 800px) {
    /* MENU ACILIR MENUYE DONER: solda ev simgesi, saginda "MENÜ".
       Liste summary'nin altinda acilir. */
    .nav {
        display: flex;
        gap: 2px;
        align-items: flex-start;
    }

    .nav .btn--home {
        display: flex;
        justify-content: center;
        flex: none;
        width: 44px;
        padding: 0;
    }

    .nav__menu { flex: 1; min-width: 0; }

    .nav .nav__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        list-style: none;
        cursor: pointer;
    }

    .nav__toggle::-webkit-details-marker { display: none; }

    /* Acik/kapali isareti: fontta ok ya da hamburger glifi yok, artı/eksi
       her iki alt kumede de var. */
    .nav__toggle::after { content: '+'; }
    .nav__menu[open] .nav__toggle::after { content: '-'; }

    /* ACIK MENU EKRANI ASAMAZ.
       "Menu acikken yapiskanligi birak" denendi ve OLMADI: yapiskanlik
       birakilinca oge belgedeki dogal yerine, sayfanin en tepesine
       donuyor. Olculdu: 2000px kaydirilmis haldeyken menu acilinca cubuk
       ekranin 2267px yukarisina firliyor, yani MENU TAMAMEN KAYBOLUYOR.
       Menuye dokunup menunun yok olmasi kabul edilemez.

       Asil korkulan sey (acik menunun ekrani yemesi) burada cozuluyor:
       cubuk yapiskan kaliyor ama acik liste ekrani asamiyor, gerekirse
       kendi icinde kayiyor. Kritik durum kisa ekran: yatay tutulan bir
       telefonda (375x400) acik panel 392px, yani ekranin %98'i olurdu.
       Dik tutulan telefonda (812px) sinir devreye bile girmiyor. */
    .nav__list {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }

    /* ACIK LISTE TAM GENISLIK.
       Liste <details> icinde oldugu icin ev simgesinin sagindan basliyordu:
       solda 46px'lik olu bir sutun kaliyordu (44px dugme + 2px bosluk) ve
       menu saga kaymis duruyordu. Negatif marj listeyi nav'in sol kenarina
       ceker. Iki sayi da bu blokta tanimli, birlikte degisirler. */
    .nav__list {
        display: block;
        border: 2px solid var(--ink);
        border-top: 0;
        margin-left: -46px;
    }

    .nav__list li + li { border-top: 2px solid var(--ink); }

    .nav__list .btn {
        display: flex;
        align-items: center;
        min-height: 44px;
        width: 100%;
        border: 0;
        padding: 0 10px;
        background: var(--bg);
    }

    .nav__list .btn:hover { background: var(--panel); }
    .nav__list .btn--on { background: var(--ink); color: var(--bg); }

    /* DIL DEGISTIRICI MENU PANELININ ICINE GIRER.
       Ust satirda ayri dururken logonun kabini ~45px daraltiyordu ve ust
       cubukta ucuncu bir kontrol olarak duruyordu. Panelde iki dil de yan
       yana rahat siger; boylece eski "aktif dili gizle" odunune de
       gerek kalmaz, ziyaretci hangi dilde oldugunu yine gorur. */
    .site-header__top .lang-switch { display: none; }

    .nav__lang { display: flex; }

    .nav__lang .btn {
        flex: 1 1 0;
        width: auto;
        justify-content: center;
    }

    .nav__lang .btn + .btn { border-left: 2px solid var(--ink); }
}

@media (max-width: 560px) {
    :root {
        --nav-h:         70px;
        --gutter:        16px;
        --logo-size:     24px;
        /* Ad portrenin YANINDA, tam genislikte degil. Portre 150px'e
           cikinca sag sutun 179px'e indi; "ŞİŞMANOĞLU" 24px'te 163px,
           yani 16px pay kaliyor (olculdu). */
        --h1-home-size:  24px;
        --h1-size:       28px;
        --h2-size:       18px;
        /* 375px'te sutun 343px. */
        --cv-name-size:  26px;
        --cv-name-track: 0.03em;
    }

    /* Yayin basligi telefonda bir kademe iner; --h1-size ile ayni orani
       korur (38->28 ~ %74, 30->22). */
    .paper__title { font-size: 22px; }

    [data-heading="terminal"] {
        --logo-size:     34px;
        --h1-home-size:  42px;
        --h1-size:       40px;
        --h2-size:       26px;
        --cv-name-size:  38px;
    }

    /* Portre 150px. Genislik paspartu dengesini belirliyor: cerceve
       yuksekligi ad bloguna kilitli oldugu icin, goruntu ne kadar genisse
       o kadar uzun oluyor ve ust/alt paspartu o kadar inceliyor.
       Olculdu: 128px'te ust paspartu 27px / yan 8px; 150px'te 13/8. */
    .hero { grid-template-columns: 150px minmax(0, 1fr); }

    /* DDS, PhD ust simgesi hero'da KENDI SATIRINA iner.
       Sebep olculdu: sag sutun 233px, ad tek basina 190px, ama ust simge
       adin ardinda 40px daha ekliyor ve toplam 231px'e cikiyordu (2px pay).
       Dolgusu 0.5em, yani ad kuculdukce orantili kuculmuyor; asil daralmayi
       ad degil o yaratiyordu. Alt satira alinca ad 28px'te kalabiliyor.
       Baslik logosundaki .creds DEGISMEZ, orada yer sorunu yok. */
    .hero__name .creds {
        display: block;
        top: 0;
        padding-left: 0;
        margin-top: 6px;
        font-size: 11px;
    }

    /* .wrap ve .site-footer yan bosluklari --gutter'dan alir, ayri kural yok. */

    .site-header { padding-top: 16px; }
    .nav-bar { padding: 12px 0; }


    /* KUNYE KOMPAKT BLOK.
       Olculdu: kayit ortalamasi 269px, ekran basina 3 kayit, sayfa 36 ekran.
       Govde satir araligi (1.65) baslik icin gereksiz genisti ve her kayitta
       ~40px'e mal oluyordu. */
    .pub,
    .pub--page {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 14px 0;
    }

    /* Sira numarasi sustur; 70px kolon + 16px bosluk, 343px'lik alanin
       %25'ini yiyor ve baslik 28 karaktere sikisiyordu. Yerini yapiskan
       yil basligi aliyor (bkz. .year). */
    .pub__no { display: none; }

    /* Kronolojide yil sutunu 70px'ten 52px'e iner ve punto kuculur;
       343px'lik alanda 70px kolon aciklamaya 257px birakiyordu. */
    .timeline__row {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 12px;
        padding: 10px 0;
    }

    .timeline__year { font-size: 22px; }
    .timeline__text { font-size: 14px; }

    /* 132px, 343px'lik alanda ekranin ustunu tek basina dolduruyordu. */
    .notfound__code { font-size: 84px; }

    .pub__title,
    .pub--page .pub__title {
        font-size: 15px;
        line-height: 1.35;
        padding: 0 0 3px;
    }

    .pub__authors { font-size: 13.5px; line-height: 1.5; }
    .pub__venue { font-size: 12.5px; line-height: 1.5; }
    .pub__meta { padding-top: 6px; gap: 6px; }

    /* Rozet kenarligi 1px. Sistemin kurali 2px ama rozetler zaten renk
       istisnasi (accent, ink degil). Uc rozet yan yana gelince 2px accent
       ekrandaki en gurultulu ogeydi, oysa neredeyse her kayitta ayni ikisi
       yaziyor: en cok murekkep, en az ayirt edici bilgi.
       DOKUNMA HEDEFI 44px OLARAK KORUNUR (≤860 kurali min-height veriyor,
       dolgu degil). */
    .pub__badge {
        border-width: 1px;
        font-size: 11px;
        padding: 4px 7px;
    }
}

/* Esik 459'dan 374'e INDI. Eskiden dil dugmeleri header'daydi ve logonun
   kabini 230px'e dusuruyordu; bu yuzden 460px'in altinda punto kirpmak
   gerekiyordu. Dugmeler ≤700'de menu paneline tasindiktan sonra kap tam
   genislik oldu ve logo 24px'te 375px'e kadar tek satirda kaliyor
   (olculdu: 24px'te logo 313px, 375px'te kullanilabilir alan 343px).

   Bununla birlikte ESKI ODUN DE KALKTI: aktif dilin dugmesini gizlemek
   gerekmiyor, panelde iki dil de duruyor. */
@media (max-width: 374px) {
    :root {
        --logo-size: 22px;
        /* 320px'te 118px'lik portrenin yaninda 156px kaliyor; ad 20px'te
           136px tutuyor (olculdu). */
        --h1-home-size: 20px;
        /* Ozgecmis adi: 320px'te sutun 288px. */
        --cv-name-size: 22px;
        --cv-name-track: 0.02em;
    }

    [data-heading="terminal"] {
        --logo-size: 32px;
        --h1-home-size: 30px;
        --cv-name-size: 32px;
    }

    /* Portre 150 -> 118px: 320px'te ada 156px birakir, 20px'lik ad 136px
       tutuyor, 20px pay kalir. */
    .hero { grid-template-columns: 118px minmax(0, 1fr); }

    /* SENKRON BURADA BIRAKILIR.
       320px'te kimlik blogu 228px'e cikiyor (kurum satiri dar sutunda cok
       sariyor) ama o sutuna sigan goruntu en fazla 128px. Cerceveyi yine de
       gerdirmek 50px'lik bos paspartu birakiyordu; foto kutunun icinde
       yuzuyor gibi duruyordu. Kisa ama duzgun oranli bir portre, bos
       cerceveden iyidir. */
    .portrait { align-self: start; }
}

/* --- Ozgecmis --- */
/* Sayfa ekranda sitenin bir parcasi, kagitta bagimsiz bir belge olarak
   davranir. Ayri bir stil dosyasi YOK: bu dosyanin kendi kurali "tek stil
   dosyasi, build adimi yok" (bkz. dosya basi). */
.cv { max-width: 78ch; }

.cv__head {
    padding-bottom: 16px;
    border-bottom: 2px solid var(--ink);
}

.cv__name {
    margin: 0;
    font-size: var(--cv-name-size);
    letter-spacing: var(--cv-name-track);
    line-height: 1.2;
}

/* Ad ardindaki ust simge: baslik logosundaki .creds ile AYNI davranis.
   Once duz bir span'di, taban cizgisinde duruyor ve ada YAPISIK
   gorunuyordu ("ŞişmanoğluDDS, PhD"). Iki duzeltme:
   - yukari kalkiyor, yani ust simge gibi okunuyor,
   - nowrap: "DDS," ile "PhD" birbirinden AYRILAMAZ. */
.cv__creds {
    position: relative;
    top: -0.75em;
    font-family: var(--mono);
    font-weight: 500;
    font-size: 0.32em;
    letter-spacing: 0.10em;
    color: var(--dim);
    padding-left: 0.55em;
    white-space: nowrap;
}

.cv__title {
    margin: 8px 0 0;
    font-size: 15px;
    color: var(--dim);
}

.cv__address {
    margin: 10px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--dim);
}

.cv__mail { margin: 8px 0 0; font-size: 14px; }

/* KUNYE SOLDA, EYLEM SAGDA (≥801px).
   Once indir dugmesi ad/unvan/adres/e-posta ile ayni sol kenardan
   baslayan BESINCI blok'tu ve "bir satir daha metin" gibi taraniyordu.
   Olculdu: en genis kunye satiri 468px, sutun 702px, yani sagda 234px
   kullanilmayan bosluk vardi.

   SAG SUTUN 200px, 214 DEGIL: 214'te sol sutun 464px kaliyor ve unvan
   satiri (468px) iki satira sariyordu. 200'de sol sutun 478px.
   Etiket 200px'e rahat sigiyor: "ÖZGEÇMİŞİ İNDİR" 168px.

   Ad izgaranin DISINDA sayilir (1 / -1): iki sutunun ustunde tam
   genislikte kalir, yoksa 478px'e sikisip sarardi. */
@media (min-width: 801px) {
    .cv__head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 200px;
        column-gap: 24px;
    }

    .cv__name { grid-column: 1 / -1; }

    .cv__actions { grid-column: 2; margin: 12px 0 0; }
}

.cv__actions { margin: 18px 0 0; }

/* Iki satirli eylem dugmesi: IKON USTTE, metin altta.
   Ikon yanda dururken 200px'lik sutunda metne 125px kaliyordu ve
   "ÖZGEÇMİŞİ İNDİR" (135px) sariyordu; ustte durunca metin 161px
   aliyor ve tek satirda kaliyor. Olculdu.

   Bicim her genislikte ayni: dar ekranda kutu daralmiyor, yalnizca
   izgara tek sutuna iniyor. */
.cv__actions .btn {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    padding: 15px 16px 14px;
    line-height: 1.35;
}

.cv__actions-text b {
    display: block;
    font-weight: 600;
}

.cv__actions-text small {
    display: block;
    margin-top: 3px;
    font-size: 10.5px;
    letter-spacing: 0.10em;
    color: var(--dim);
}

/* Dolgu murekkebe donunce ikinci satir da okunur kalmali. */
.cv__actions .btn:hover .cv__actions-text small { color: var(--bg); }

.cv__section { margin-top: 30px; }

.cv__section-title {
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--hair);
    font-size: var(--h2-size);
    letter-spacing: var(--h2-track);
}

.cv__sublabel {
    margin: 16px 0 6px;
    font-size: 11px;
    letter-spacing: 0.10em;
    color: var(--dim);
}

.cv__label { color: var(--dim); }
.cv__muted { color: var(--dim); font-size: 0.85em; }

.cv__text { margin: 0; font-size: 14px; line-height: 1.65; }

.cv__ids, .cv__list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.7;
}

/* Tanitici yerine adres basilan satirlarda adres uzun olabiliyor; kabi
   tasmasin diye kirilmasina izin verilir. */
.cv__ids a { overflow-wrap: anywhere; }

.cv__list li { padding-left: 14px; text-indent: -14px; }
.cv__list li::before { content: '— '; color: var(--dim); }

.cv__pubs {
    margin: 0;
    padding-left: 22px;
    font-size: 13.5px;
    line-height: 1.55;
}

.cv__pub { margin-bottom: 7px; }

.cv__generated {
    margin-top: 30px;
    padding-top: 12px;
    border-top: 2px solid var(--hair);
    font-size: 11.5px;
    color: var(--dim);
}

/* --- Yazdirma --- */
/* KAGIDA BASILAN SEY BELGENIN KENDISI: site kabugu (kesikli seritler,
   baslik, menu, footer) ve ekrana ait dugmeler cikmaz.
   Baglantilarin adresi yaninda yazilir, cunku kagitta tiklanamaz. */
@media print {
    .rule-strip,
    .site-header,
    .nav-bar,
    .site-footer,
    .no-print { display: none !important; }

    html, body { background: #FFFFFF; color: #000000; }

    main.wrap {
        max-width: none;
        padding: 0;
    }

    .cv { max-width: none; }

    /* Bolum basligi ile ilk satiri ayni sayfada kalsin. */
    .cv__section { break-inside: auto; }
    .cv__section-title { break-after: avoid; }
    .cv__sublabel { break-after: avoid; }
    .cv__pub, .timeline__row { break-inside: avoid; }

    /* Metrik paneli kagitta ters renk basmasin, murekkep yemesin. */
    .metrics { border-color: #000000; }
    .metrics__strip { background: #FFFFFF; color: #000000; border-bottom-color: #000000; }
    .metrics__cursor { display: none; }
    .metrics__grid { background: #000000; }
    .metric { background: #FFFFFF; }
    .metric__value, .metric__second-value { color: #000000; }

    .timeline__year { color: #000000; }

    /* Kagitta e-posta baglantisi da siyah. mailto adresi zaten metnin
       kendisi; asagidaki href ekleme kurali yalnizca http baglantilarini
       hedefler, yani adres iki kez yazilmaz. */
    .cv__mail a { color: #000000; }

    /* Baglantinin adresi yanina yazilir. */
    .cv a[href^="http"]::after {
        content: ' (' attr(href) ')';
        font-size: 0.85em;
        color: #444444;
        word-break: break-all;
    }
}