/* ============================================================
   Modernize katmanı — en son yüklenir, orijinal temanın üstüne biner.
   Kural: düzen özelliklerine (display/grid/flex/width/padding/
   breakpoint) DOKUNULMAZ. Yalnızca yüzey, kenarlık, gölge,
   tipografi ve etkileşim. Böylece responsive davranış korunur.
   Geri almak için: _Layout.cshtml'deki link satırını sil.
   ============================================================ */

/* ============================================================
   YAZI TİPİ — Geist + Geist Mono (yerel, değişken font)
   Poppins yuvarlak/sevimli bir "ajans" fontuydu; Geist teknik ve
   ağırbaşlı. latin + latin-ext (ş, ğ, İ…) yeterli; unicode-range
   sayesinde tarayıcı yalnızca gerekeni indirir.
   ============================================================ */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/geist/geist-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;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/geist/geist-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;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(../fonts/geist/geist-mono-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;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(../fonts/geist/geist-mono-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;
}
html { font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.hero-section h1, .section-title h2 { letter-spacing: -.035em !important; }

:root {
  --m-bg: #101112;
  --m-surface: #191b1c;
  --m-raised: #202324;
  --m-line: rgb(255 255 255 / .07);
  --m-line-hover: color-mix(in srgb, var(--m-accent) 45%, transparent);
  --m-text: #e9ecec;
  --m-muted: #a8aeae;
  --m-accent: #9d85f7; /* menekşe — .NET marka rengi #512BD4 ile aynı ton (~253°), koyu zeminde okunur açıklık. Önceki: #8b8cf7 (indigo, maviye çalıyordu) */
  --m-on-accent: #0e1011; /* vurgu dolgulu düğmedeki metin */
  --m-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 18px 40px -22px rgb(0 0 0 / .85);
}

/* --- Zemin: kartların ayrışabilmesi için gövde bir ton koyulaşıyor --- */
body.dark { background-color: var(--m-bg) !important; color: var(--m-muted); }

/* --- Yüzeyler: düz tek renk yerine yükseltilmiş kart + ince kenarlık --- */
.dark .dark\:bg-nightBlack {
  background-color: var(--m-surface);
  border: 1px solid var(--m-line);
  box-shadow: var(--m-shadow);
}
.dark .dark\:bg-greyBlack,
.dark .dark\:bg-metalBlack { background-color: var(--m-raised); }

/* --- Kenarlıklar: sert gri yerine ışık sızıntısı --- */
.dark .dark\:border-greyBlack200,
.dark .dark\:border-greyBlack { border-color: var(--m-line); }

/* --- Metin kontrastı: #999 gövde metni WCAG için fazla sönüktü --- */
.dark .dark\:text-lightGrey,
.dark .dark\:text-grey { color: var(--m-muted); }
.dark .dark\:text-white { color: var(--m-text); }

/* ============================================================
   TİPOGRAFİ ÖLÇEĞİ
   Temanın başlıkları gövde metnine fazla yakındı — her şey aynı
   sesle konuşunca hiçbir şey vurgulanmıyor. Ölçeği açıyoruz:
   büyük başlık = özgüven, küçük etiket = alçakgönüllülük.
   clamp() kullanıldığı için her ekranda akıcı, breakpoint eklemiyor.
   ============================================================ */
.section-title, .section-title * { letter-spacing: -.028em; line-height: 1.08; }
h1, h2, h3 { letter-spacing: -.022em; }

/* Hero başlığı: sayfaya giren ilk cümle en yüksek sesle konuşmalı.
   Tema burada `lg:text-5xl xl:text-4xl 2xl:text-5xl` kullanıyordu —
   başlık 1280px'te 48px'ten 36px'e DÜŞÜP 1536'da geri çıkıyordu.
   clamp() bunu tek akıcı eğriye çeviriyor, breakpoint zıplaması yok. */
.hero-section h1 {
  font-size: clamp(2.2rem, 1.15rem + 2.3vw, 3.05rem) !important;
  line-height: 1.1;
  text-wrap: balance; /* satırları eşitler, tek kelimelik dul satır bırakmaz */
}

/* Bölüm başlıkları: hero'dan bir basamak AŞAĞIDA olmalı.
   Tema hepsine text-5xl (48px) veriyordu; hero ile aynı boydaydılar,
   yani sayfada hiyerarşi yoktu. Seçici h2'nin kendisini hedefler —
   .section-title sarmalayıcısına yazmak Tailwind sınıfını ezmiyor. */
.section-title h2,
.about-section .section-title h2,
.contact-section .section-title h2 {
  font-size: clamp(1.75rem, 1rem + 2.1vw, 2.5rem) !important;
  line-height: 1.12;
}

/* Gövde metni: 1.65 satır yüksekliği uzun paragrafta okumayı taşır */
.section-content, .subtitle { line-height: 1.7; }

/* Rakamlar (5+ yıl, 20+ proje): mono + sıkı aralık = mühendis dili */
.counter, .odometer, [class*="counter"] {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}

/* --- Kartlar: durağan kutu yerine tepki veren yüzey --- */
.card-item {
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.card-item:hover {
  transform: translateY(-3px);
  border-color: var(--m-line-hover);
  box-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 22px 44px -24px color-mix(in srgb, var(--m-accent) 30%, transparent);
}

/* ============================================================
   VURGU EKONOMİSİ
   Yeşil her yerde kullanılınca hiçbir yerde vurgu olmuyor. Parlama
   efektini kısıp rengi anlamlı yerlere saklıyoruz: birincil eylem,
   aktif durum, veri. "Göz boyama" ile "göz doldurma" farkı burada.
   ============================================================ */
.dark .bg-theme, .btn-theme, button.bg-theme, a.bg-theme {
  box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--m-accent) 50%, transparent);
  transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}
.dark .bg-theme:hover, .btn-theme:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--m-accent) 60%, transparent);
}

/* Yetenek etiketleri: yüzde dairelerinin yerini aldı. Durağan halde sakin,
   üzerine gelince vurgu — iddia yok, kapsam var. */
.skill-chip { transition: border-color .18s ease, background-color .18s ease, transform .18s ease; }
.skill-chip:hover {
  border-color: color-mix(in srgb, var(--m-accent) 50%, transparent);
  background-color: color-mix(in srgb, var(--m-accent) 7%, transparent);
  transform: translateY(-1px);
}
/* ============================================================
   DÜZEN ONARIMI
   Tailwind bundle'ı önceden derlenmiş: HTML'de yazılan ama orijinal
   temada kullanılmamış sınıflar (grid-cols-3 gibi) CSS'te yok ve
   sessizce etkisiz kalıyor. Eksik olanları burada tanımlıyoruz.
   Breakpoint'ler temanın kendi eşikleriyle (sm/md/xl) hizalı.
   ============================================================ */

/* Bal küpü alanı: Tailwind'in -left-[9999px] arbitrary sınıfı bundle'da
   üretilmemiş, alan ekranda görünüyordu. Erişilebilir şekilde gizliyoruz
   (display:none bazı botların alanı atlamasına yol açar). */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Sayaçlar: grid-cols-3 bundle'da yok, hepsi alt alta düşüyordu. */
.counters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 400px) { .counters { gap: 1rem; } }

/* Hizmet kartları 4'ten 3'e indi; 2 kolonda üçüncü kart yalnız kalıp
   sağında boşluk bırakıyordu. Geniş ekranda üçü tek sıraya giriyor. */
@media (min-width: 1280px) {
  .service-card-wrapper { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Gruplar arası nefes: başlık bir önceki gruba yapışmasın. */
.skill-group + .skill-group { margin-top: 2rem; }
.skill-group h3 { margin-bottom: .9rem; opacity: .9; }

/* Kartların üst kenarında ince ışık — yüzeye yön ve "üretilmiş" hissi verir.
   Sadece hover'da görünür, durağan halde sayfayı yormaz. */
.card-item { position: relative; overflow: hidden; }
.card-item::before {
  content: "";
  position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--m-accent) 55%, transparent), transparent);
  opacity: 0; transition: opacity .25s ease;
}
.card-item:hover::before { opacity: 1; }

/* --- Rozetler (TANITIM, HAKKIMDA…): vurgu rengiyle ilişkilendirildi --- */
.section-name {
  background-color: color-mix(in srgb, var(--m-accent) 7%, transparent);
  border-color: color-mix(in srgb, var(--m-accent) 28%, transparent) !important;
  color: var(--m-text);
}

/* ============================================================
   VURGU DOZAJI
   Yeşil başlıkta, rozette, ikonda, butonda, sayaçta, çizgide —
   her yerdeydi. Her yerde vurgu = hiçbir yerde vurgu.
   Yeşil üç role saklanıyor: İSİM, BİRİNCİL EYLEM, VERİ.
   Bölüm başlıklarının ikinci kelimesi artık renkle değil
   ağırlıkla ayrışıyor. Geri almak için bu bloğu silmek yeterli.
   ============================================================ */
.section-title h2 .text-theme { color: var(--m-text); }

/* Hero'daki isim marka sayılır — yeşil kalıyor. */
.hero-section h1 .text-theme { color: var(--m-accent) !important; }

/* Yeşil dolgulu düğmelerde beyaz metnin kontrastı 2.54:1 idi (AA için
   4.5 gerekir) — #00bc91 açık bir renk. Metni koyuya çevirince oran
   ~8:1 oluyor ve düğme daha da belirginleşiyor. */
.dark .bg-theme, .dark a.bg-theme, .dark button.bg-theme,
.bg-theme.text-white, button[type="submit"].bg-theme {
  color: var(--m-on-accent) !important;
}
.dark .bg-theme svg, .bg-theme.text-white svg { fill: var(--m-on-accent); stroke: var(--m-on-accent); }

/* Hizmet kartı ikonları: durağan halde nötr, kartın üzerine gelince
   yeşil. Böylece renk bir durum bildiriyor, dekor olmaktan çıkıyor. */
.card-item svg.fill-theme { fill: #6b7280; transition: fill .2s ease; }
.card-item:hover svg.fill-theme { fill: var(--m-accent); }

/* --- Özel imleç: tarihli bir efekt, gerçek imleç geri veriliyor --- */
.custom_cursor_one, .custom_cursor_two { display: none !important; }
body.custom_cursor, body.custom_cursor * { cursor: auto !important; }
body.custom_cursor a, body.custom_cursor button,
body.custom_cursor [role="button"], body.custom_cursor label { cursor: pointer !important; }

/* --- Klavye odağı: temada hiç yoktu --- */
:focus-visible {
  outline: 2px solid var(--m-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --- Sol profil kartı: kart yüzey diline uyduruldu. (Sağ nav'ın dış çerçevesi
   zaten var; çocuklarına uygulanınca ikon listesinde köşeli kutular çıkıyordu.) --- */
.minfo__sidebar__wrapper > * {
  border: 1px solid var(--m-line);
  box-shadow: var(--m-shadow);
}

/* --- Form alanları: çerçeve belirginleşti, odakta vurgu rengi --- */
.dark input[type="text"], .dark input[type="email"], .dark textarea {
  background-color: var(--m-raised);
  border-color: var(--m-line);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.dark input[type="text"]:focus, .dark input[type="email"]:focus, .dark textarea:focus {
  border-color: var(--m-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-accent) 16%, transparent);
}

/* --- Bağlantı alt çizgisi: kalın yerine ince, metinden uzak --- */
a { text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ============================================================
   RESPONSIVE ONARIMI
   custom.css şunu yapıyor:
     @media (max-width:1279px){ .md\:max-w-sidebar{max-width:100%!important} }
   Tema sidebar'ı dar bir kart olarak tasarlamış; bu override onu
   1009px'e yayıyor, buton boydan boya uzuyor ve şeffaf sticky
   header'ın altından sızıyor. Sınırı geri veriyoruz.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1279px) {
  .minfo__sidebar__wrapper.md\:max-w-sidebar { max-width: 24rem !important; }
}

/* Kapalı off-canvas menü (-right-full) ekranın sağında durup sahte yatay
   kaydırma yaratıyordu (320px'te 320 yerine 356px). clip kullanıyoruz:
   hidden'ın aksine position:sticky'i bozmaz. */
html, body { overflow-x: clip; }

/* Sticky mobil/tablet başlığı: bg-white/10 koyu temada açık bir şerit
   bırakıyor ve altındaki içerik okunur halde geçiyordu. */
.dark .mobile-menu-bar {
  background-color: rgb(16 17 18 / .85);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--m-line);
}

/* ============================================================
   KÖŞE YARIÇAPI SİSTEMİ
   Sayfada altı farklı değer vardı (0 / 6 / 12 / 16 / 40 / 9999px).
   Tutarsız yarıçap, tasarımın "sistem" değil "derleme" olduğunu
   ele verir. Üç role indiriyoruz: yüzey, kontrol, hap.
   ============================================================ */
:root { --m-r-yuzey: 16px; --m-r-kontrol: 10px; }

.dark .dark\:bg-nightBlack,
.card-item,
.minfo__sidebar__wrapper > *,
.rounded-2xl, .rounded-xl { border-radius: var(--m-r-yuzey); }

/* Form alanları ve küçük kontroller tek değerde buluşuyor */
.dark input[type="text"], .dark input[type="email"], .dark textarea,
.rounded-md { border-radius: var(--m-r-kontrol); }

/* Hap biçimi yalnızca rozet ve birincil düğmede kalsın (amaçlı vurgu) */

/* ============================================================
   MONO AKSAN
   Teknik etiket, tarih ve sayılarda mono yazı tipi — mühendislik
   sinyali verir, harici font indirmeden (sistem yığını).
   ============================================================ */
:root {
  --m-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
.skill-chip,
.section-name,
.counters li > div:first-child,
.minfo__sidebar__wrapper .user-meta-info li > span.is-data {
  font-family: var(--m-mono);
  font-feature-settings: "tnum" 1;
  letter-spacing: -.01em;
}
.skill-chip { font-size: .82rem; }

@media (prefers-reduced-motion: reduce) {
  .card-item, .dark .bg-theme, .btn-theme { transition: none; }
  .card-item:hover, .dark .bg-theme:hover { transform: none; }
}

/* ============================================================
   SERTİFİKA DİALOĞU — yerleşik <dialog>; Esc ve odak tuzağı tarayıcıdan.
   ============================================================ */
.cert-dialog {
  width: min(36rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 1.5rem;
  color: var(--m-text);
  background: var(--m-surface);
  border: 1px solid var(--m-line);
  border-radius: 16px;
  box-shadow: var(--m-shadow);
}
.cert-dialog::backdrop { background: rgb(0 0 0 / .7); backdrop-filter: blur(2px); }

/* Form denetimleri (onay kutusu vb.) koyu temada beyaz kutu olarak kalıyordu. */
body.dark { color-scheme: dark; }

/* Aydınlatma metni — uzun okuma için düz tipografi. */
.legal h2 { margin: 2rem 0 .6rem; font-size: 1.15rem; font-weight: 600; color: var(--m-text); letter-spacing: 0; }
.legal p, .legal li { line-height: 1.7; }
.legal ul { list-style: disc; padding-left: 1.25rem; margin: .5rem 0; }
.legal a:not(.text-theme) { color: var(--m-accent); text-decoration: underline; }
/* Önceden derlenmiş Tailwind'de max-w-3xl yok; okunabilir satır uzunluğu (~70 karakter) burada. */
.legal { max-width: 48rem; margin-inline: auto; }
.legal h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); line-height: 1.2; }

/* ============================================================
   VURGU RENGİ — TEK KAYNAK
   Tema yeşili (#00bc91) önceden derlenmiş Tailwind'de 17 yere gömülüydü.
   Hepsi --m-accent'e bağlandı: rengi değiştirmek için yalnızca :root'taki
   değeri değiştir (logo SVG'si ayrıca: assets/img/fy_logo.svg).
   ============================================================ */
.text-theme, .hover\:text-theme:hover, .group:hover .group-hover\:text-theme,
.group.active .group-\[\&\.active\]\:text-theme, .dark .dark\:hover\:text-theme:hover { color: var(--m-accent); }
.bg-theme, .hover\:bg-theme:hover, .\[\&\.active\]\:bg-theme.active { background-color: var(--m-accent); }
.after\:\!bg-theme::after { background-color: var(--m-accent) !important; }
.md\:before\:bg-theme::before, .\*\:before\:bg-theme > *::before { background-color: var(--m-accent); }
.border-theme, .hover\:border-theme:hover, .focus\:border-theme:focus,
.dark .dark\:hover\:border-theme:hover, .dark .dark\:focus\:border-theme:focus { border-color: var(--m-accent); }
.fill-theme { fill: var(--m-accent); }
.accent-theme { accent-color: var(--m-accent); }
.hover\:bg-themeHover:hover, .hover\:border-themeHover:hover {
  background-color: color-mix(in srgb, var(--m-accent) 88%, black);
  border-color: color-mix(in srgb, var(--m-accent) 88%, black);
}
.contact-info svg [fill="#10B981"], .contact-info svg[fill="#10B981"] { fill: var(--m-accent); }

/* ============================================================
   SADELEŞTİRME — şablon süsleri
   Kıdem sakinlikten okunur: hareketli/parlayan dekor kaldırıldı.
   ============================================================ */
/* Sidebar'ın klasör-sekmesi kesiği → düz kart */
.minfo__sidebar { clip-path: none !important; border-radius: 16px; }
/* Parlamalar: düğme ve kart gölgeleri nötr */
.hover\:shadow-theme_shadow:hover { box-shadow: none; }
.dark .bg-theme, .btn-theme, button.bg-theme, a.bg-theme,
.dark .bg-theme:hover, .btn-theme:hover { box-shadow: none; }
.card-item:hover { box-shadow: var(--m-shadow); }
/* Zaman çizelgesi noktası: hale yok */
.md\:before\:shadow-dots_glow::before { box-shadow: none !important; }

/* ============================================================
   KÖŞELER — tam yuvarlak "hap" düğmeler sevimli/ajans havası veriyordu.
   Teknik ürünlerdeki gibi hafif köşe: düğme 10px, etiket 6px, kart 14px.
   ============================================================ */
:is(.btn-theme, a.bg-theme, button.bg-theme, button[type="submit"]) { border-radius: 10px !important; }
.section-name, .skill-chip { border-radius: 6px; }
.section-name { font-size: 11px; letter-spacing: .08em; }
.counters li > div:first-child, .experience p.text-theme { font-family: var(--m-mono); }



/* Hero: arkada çok silik mor ışık — derinlik verir, "efekt" gibi görünmez.
   Metin/düğmede gradyan YOK (bilinçli karar). */
.hero-section {
  background-image: radial-gradient(42rem 26rem at 88% 0%, color-mix(in srgb, var(--m-accent) 20%, transparent), transparent 70%);
}

/* ============================================================
   GENİŞ EKRAN (≥1536px): yan kartlar ekran kenarına yapışıktı, orta sütun
   sabit → 1920'de iki yanda ~210-230px boşluk. Orta sütunu esnetmek kartları
   iri yapıyordu; bunun yerine üçü TEK GRUP olarak ortalanıyor:
   [profil kartı] 40px [960px içerik] 40px [nav].
   Sabitler: profil kartı 332px (+16px iç boşluk), nav 82px.
   ============================================================ */
@media (min-width: 1536px) {
  /* Grup = 332 (kart) + 40 + 960 (içerik) + 40 + 82 (nav) = 1454px, sayfada ortalı.
     Kart nav'dan geniş olduğu için içerik sütunu (332-82)/2 = 125px sağa kayar. */
  :root { --m-col: 960px; --m-gap: 2.5rem; --m-half: 727px; --m-shift: 125px; }
  .minfo__contentBox {
    max-width: var(--m-col) !important;
    margin-left: calc(50% - var(--m-col) / 2 + var(--m-shift)) !important;
    margin-right: 0 !important;
  }
  .minfo__contentBox > * { max-width: none !important; margin-inline: 0 !important; }
  .minfo__sidebar__wrapper { left: max(0px, calc(50% - var(--m-half) - 16px)) !important; }
  .minfo__nav__wrapper { right: max(1rem, calc(50% - var(--m-half))) !important; }
}

/* Bölüm başlıkları: ince+kalın ikili yazım (şablon klişesi) yerine tek ağırlık.
   Üstteki etiket numaralı mono ("01 — HAKKIMDA"); başlık onu tekrar etmiyor. */
.section-title h2.title { font-weight: 600 !important; }

/* Deneyim: öne çıkan işler (somut sonuç maddeleri). */
.exp-points { margin-top: .9rem; display: grid; gap: .55rem; }
.exp-points li { position: relative; padding-left: 1.1rem; line-height: 1.6; }
.exp-points li::before {
  content: ""; position: absolute; left: 0; top: .7em;
  width: .4rem; height: 1px; background: var(--m-accent);
}

/* ============================================================
   SEÇİLİ İŞLER — vaka kartları: sorun → çözüm → sonuç
   ============================================================ */
.cases { display: grid; gap: 1.25rem; }
.case {
  padding: 1.75rem; border: 1px solid var(--m-line); border-radius: 14px;
  background: rgb(255 255 255 / .015);
}
.case-tag { font-family: var(--m-mono); font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--m-accent); }
.case-title { margin: .5rem 0 1.1rem; font-size: 1.35rem; font-weight: 600; color: var(--m-text); letter-spacing: -.02em; }
.case-body { display: grid; gap: .9rem; }
.case-body > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; }
.case-body dt { font-family: var(--m-mono); font-size: 14px; color: rgb(233 236 236 / .88); padding-top: .1rem; }
.case-body dd { margin: 0; line-height: 1.65; }
.case-body > div:last-child dd { color: var(--m-text); font-weight: 500; }
.case-stack { margin-top: 1.1rem; font-family: var(--m-mono); font-size: 14px; color: rgb(233 236 236 / .85); }
@media (max-width: 640px) { .case-body > div { grid-template-columns: 1fr; gap: .25rem; } }

/* Teknolojiler: ana yığın belirgin, diğerleri sade */
.skill-core .skill-chip {
  padding: .55rem 1rem; font-size: .9rem; color: var(--m-text);
  border: 1px solid color-mix(in srgb, var(--m-accent) 45%, transparent);
  background: color-mix(in srgb, var(--m-accent) 8%, transparent);
}
.skill-group:not(.skill-core) .skill-chip { font-size: .8rem; padding: .35rem .75rem; color: rgb(233 236 236 / .82) !important; }
.skill-group + .skill-group { margin-top: 1.5rem; }


/* Deneyim: sol sütun (şirket + tarih) daraldı; dikey çizgi de ona göre */
@media (min-width: 768px) {
  .experience > ul > li > div:first-child { width: 16rem !important; padding-right: 1.5rem; } /* 14.5rem metin + çizgiye pay */
  .experience > ul::before { left: 16rem !important; }
  .experience > ul > li > div:last-child { padding-left: 3rem !important; }
}

/* Öncelik: "İletişime geç" dolu, "Özgeçmişi indir" çerçeveli */
.minfo__sidebar a.bg-theme {
  background: transparent !important; color: var(--m-accent) !important;
  border-color: color-mix(in srgb, var(--m-accent) 55%, transparent) !important;
}
.minfo__sidebar a.bg-theme svg, .minfo__sidebar a.bg-theme svg path { fill: currentColor !important; stroke: none !important; }
.minfo__sidebar a.bg-theme:hover { background: color-mix(in srgb, var(--m-accent) 10%, transparent) !important; }

/* İletişim ikonları: tek stil (çerçeveli kutu, vurgu rengi glif) */
.contact-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 10px; flex: 0 0 3rem;
  border: 1px solid var(--m-line); color: var(--m-accent); font-size: 1.25rem;
}

/* Teknoloji grup başlıkları: etiketlerden küçük kalmasın */
.skill-group h3 { font-size: .8rem !important; }

/* Masaüstünde sol kart ilk kartın üst kenarıyla hizalı (dikey ortada "yüzmesin") */
@media (min-width: 1280px) {
  .minfo__sidebar__wrapper { top: 3.375rem !important; transform: none !important; }
}

/* ============================================================
   MOBİL / TABLET (<1280px): profil kartı ilk ekranı kaplıyordu, ana başlık
   kaydırınca çıkıyordu. Kart kompakt kartvizite dönüşüyor: küçük foto +
   isim/unvan yan yana, altta buton. Konum/Deneyim/Odak listesi gizli
   (bilgiler sayfada zaten geçiyor).
   ============================================================ */
@media (max-width: 1279px) {
  .minfo__sidebar .user-info {
    display: grid; grid-template-columns: 4rem 1fr; column-gap: 1rem; align-items: center;
    text-align: left; margin: 1rem .75rem 0 !important;
  }
  .minfo__sidebar .user-info > div:first-child { width: 4rem !important; height: 4rem !important; margin: 0 !important; grid-row: span 2; }
  .minfo__sidebar .user-info > h6 { margin: 0; align-self: end; }
  .minfo__sidebar .user-info > div:nth-child(3) { display: none; } /* ayırıcı çizgi */
  .minfo__sidebar .user-info .cd-headline { align-self: start; }
  .minfo__sidebar .user-meta-info { display: none; }
  .minfo__sidebar > div:last-of-type { padding: 1rem .75rem .75rem !important; }
  .minfo__sidebar > div:last-of-type a { padding-block: .7rem !important; }
}

/* "Eğitim": Deneyim bölümünün alt başlığı (h3) — bölüm başlığından bir kademe küçük. */
.section-title h3.title { font-size: clamp(1.5rem, 1.15rem + 1vw, 2rem); font-weight: 600; letter-spacing: -.03em; }

/* Masaüstü sağ menüde dil geçişi (EN / TR) */
.lang-switch {
  font-family: var(--m-mono); font-size: 11px; letter-spacing: .08em; color: var(--m-muted);
  border: 1px solid var(--m-line); border-radius: 999px; padding: .3rem .55rem; line-height: 1;
  transition: color .2s, border-color .2s;
}
.lang-switch:hover { color: var(--m-accent); border-color: var(--m-accent); }

/* Form sonrası bildirim (toast) — sağ altta, sitenin yüzey diliyle. */
.toast {
  position: fixed; right: 1.5rem; bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); z-index: 10000;
  display: flex; align-items: center; gap: .75rem; max-width: min(26rem, calc(100vw - 2rem));
  padding: .9rem 1.1rem; border-radius: 12px; font-size: .95rem; line-height: 1.45;
  color: var(--m-text); background: var(--m-raised); border: 1px solid var(--m-line); box-shadow: var(--m-shadow);
  animation: toast-in .25s ease-out;
}
.toast-icon {
  flex: 0 0 1.6rem; height: 1.6rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem;
}
.toast--ok  { border-color: color-mix(in srgb, var(--m-accent) 55%, transparent); }
.toast--ok .toast-icon  { background: var(--m-accent); color: var(--m-on-accent); }
.toast--err { border-color: rgb(239 68 68 / .6); }
.toast--err .toast-icon { background: #ef4444; color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }