/* ==========================================================================
   emrebiltekin.me — tema
   Renk / tipografi / olcu degerleri tek yerde: :root altindaki degiskenler.
   Vurgu rengini degistirmek icin sadece --accent satirini duzenlemen yeterli.
   ========================================================================== */

/* --- KOYU TEMA (varsayilan) --- */
:root{
  color-scheme: dark;

  /* Zemin katmanlari */
  --bg:        #0B0E13;
  --bg-1:      #11151C;
  --bg-2:      #161B24;
  --bg-3:      #1C222D;
  --header-bg: rgba(11,14,19,.72);

  /* Cizgiler */
  --border:    #222835;
  --border-2:  #2E3743;

  /* Metin */
  --text:       #E9EDF3;
  --text-2:     #9AA5B4;
  --text-3:     #6A7484;
  --prose-text: #DDE3EC;
  --code-text:  #E3B77A;

  /* Vurgu — degistirmek icin burasi */
  --accent:      #E0A33E;
  --accent-2:    #EEBB63;
  --accent-soft: rgba(224,163,62,.12);
  --accent-ring: rgba(224,163,62,.40);
  --on-accent:   #0A0D12;   /* vurgu zemini uzerindeki metin rengi */

  --ok:   #3FBF87;
  --warn: #E0A33E;
  --err:  #F2555A;

  /* Tipografi */
  --font-head: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* Olcu */
  --wrap:        1120px;
  --wrap-narrow: 720px;
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --pad:  clamp(16px, 4vw, 28px);

  --shadow-1: 0 1px 2px rgba(0,0,0,.45);
  --shadow-2: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.85);
  --t: 180ms cubic-bezier(.2,.7,.3,1);
}

/* --- ACIK TEMA ---
   Sadece renkler degisir; olcu/tipografi ayni kalir.
   Kehribar acik zeminde parlak kaldigi icin okunabilirlik adina koyulastirildi. */
:root[data-theme="light"]{
  color-scheme: light;

  --bg:        #FBFAF7;
  --bg-1:      #FFFFFF;
  --bg-2:      #F4F2ED;
  --bg-3:      #EAE7DF;
  --header-bg: rgba(251,250,247,.78);

  --border:    #E4E0D7;
  --border-2:  #CFC9BC;

  --text:       #15181D;
  --text-2:     #565F6C;
  --text-3:     #7E8794;
  --prose-text: #23282F;
  --code-text:  #8A5A0B;

  --accent:      #B0730F;
  --accent-2:    #8C5A08;
  --accent-soft: rgba(176,115,15,.10);
  --accent-ring: rgba(176,115,15,.38);
  --on-accent:   #FFFFFF;

  --shadow-1: 0 1px 2px rgba(20,24,30,.06);
  --shadow-2: 0 1px 2px rgba(20,24,30,.05), 0 12px 28px -16px rgba(20,24,30,.25);
}

/* ===== Reset ===== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent-2); }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4{ font-family:var(--font-head); font-weight:600; line-height:1.2; letter-spacing:-.02em; margin:0 0 .5em; }
h1{ font-size:clamp(2rem, 1.4rem + 2.6vw, 3.25rem); letter-spacing:-.03em; }
h2{ font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
h3{ font-size:1.15rem; }
p{ margin:0 0 1em; }
code,kbd,pre,samp{ font-family:var(--font-mono); font-size:.9em; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--accent); color:var(--on-accent); padding:10px 16px; border-radius:0 0 var(--r-sm) 0;
  font-weight:600;
}
.skip-link:focus{ left:0; }

/* ===== Kapsayici ===== */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.wrap-narrow{ max-width:var(--wrap-narrow); }
.section{ padding-block:clamp(56px, 8vw, 96px); }
.section-tight{ padding-block:clamp(36px, 5vw, 56px); }

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--header-bg);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid transparent;
  transition:border-color var(--t), background var(--t);
}
.site-header.is-stuck{ border-bottom-color:var(--border); }
.nav{ display:flex; align-items:center; gap:20px; height:64px; position:relative; }
.brand{
  font-family:var(--font-head); font-weight:600; font-size:1.05rem;
  color:var(--text); letter-spacing:-.02em; white-space:nowrap;
}
.brand:hover{ color:var(--text); }
.brand .dot{ color:var(--accent); }
.nav-links{
  display:flex; align-items:center; gap:4px;
  margin-left:auto; list-style:none; padding:0; margin-block:0;
}
.nav-links a{
  display:block; padding:8px 12px; border-radius:var(--r-sm);
  color:var(--text-2); font-size:.925rem; font-weight:500;
  transition:color var(--t), background var(--t);
}
.nav-links a:hover{ color:var(--text); background:var(--bg-2); }
.nav-links a[aria-current="page"]{ color:var(--text); background:var(--bg-2); }

.lang-switch{
  display:inline-flex; align-items:center; padding:3px;
  background:var(--bg-2); border:1px solid var(--border); border-radius:999px;
}
.lang-switch button{
  border:0; background:transparent; cursor:pointer;
  padding:4px 11px; border-radius:999px;
  font-size:.78rem; font-weight:600; letter-spacing:.04em;
  color:var(--text-3); transition:color var(--t), background var(--t);
}
.lang-switch button:hover{ color:var(--text-2); }
.lang-switch button[aria-pressed="true"]{ background:var(--accent-soft); color:var(--accent-2); }

/* Acik/koyu tema butonu */
.theme-toggle{
  display:inline-grid; place-items:center;
  width:34px; height:34px; flex:none; cursor:pointer;
  background:var(--bg-2); border:1px solid var(--border); border-radius:999px;
  color:var(--text-2);
  transition:color var(--t), border-color var(--t), background var(--t);
}
.theme-toggle:hover{ color:var(--accent-2); border-color:var(--accent-ring); background:var(--accent-soft); }
.theme-toggle .icon-sun{ display:none; }
:root[data-theme="light"] .theme-toggle .icon-sun{ display:block; }
:root[data-theme="light"] .theme-toggle .icon-moon{ display:none; }

.nav-toggle{
  display:none; margin-left:auto;
  background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-sm);
  width:38px; height:38px; cursor:pointer; align-items:center; justify-content:center;
  color:var(--text-2);
}
@media (max-width:760px){
  .nav-toggle{ display:inline-flex; }
  .nav-links{
    position:absolute; left:calc(var(--pad) * -1); right:calc(var(--pad) * -1); top:64px;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--bg-1); border-bottom:1px solid var(--border);
    padding:10px var(--pad) 16px;
    display:none;
  }
  .nav-links.is-open{ display:flex; }
  .nav-links a{ padding:11px 12px; }
  .nav-links .ctrl-li{ margin-top:12px; }
}
.ctrl-li{ display:flex; align-items:center; gap:8px; }

/* ===== Hero ===== */
.hero{ position:relative; padding-block:clamp(64px, 10vw, 120px) clamp(48px, 7vw, 84px); overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:-45% 0 auto 50%;
  width:min(900px, 130vw); aspect-ratio:1; transform:translateX(-50%);
  background:radial-gradient(circle, var(--accent-soft) 0%, transparent 62%);
  pointer-events:none;
}
.hero-inner{ position:relative; display:grid; gap:clamp(28px,5vw,56px); grid-template-columns:1fr; align-items:center; }
@media (min-width:880px){ .hero-inner{ grid-template-columns:1.35fr .65fr; } }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent-2); background:var(--accent-soft);
  border:1px solid var(--accent-ring); border-radius:999px; padding:5px 12px;
  margin-bottom:20px;
}
.eyebrow .pulse{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 var(--accent-ring); animation:pulse 2.4s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 8px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }
.hero p.lead{ font-size:clamp(1.02rem,.95rem + .4vw,1.18rem); color:var(--text-2); max-width:56ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

.avatar-frame{
  position:relative; width:min(280px,70vw); margin-inline:auto;
  aspect-ratio:1; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--border-2); background:var(--bg-2);
  box-shadow:var(--shadow-2);
}
.avatar-frame img{ width:100%; height:100%; object-fit:cover; }
.avatar-frame .placeholder{
  display:grid; place-items:center; height:100%;
  color:var(--text-3); font-family:var(--font-mono); font-size:.78rem; text-align:center; padding:20px; line-height:1.7;
}

/* ===== Butonlar ===== */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 20px; border-radius:var(--r-sm);
  font-size:.94rem; font-weight:600; font-family:var(--font-body);
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background var(--t), border-color var(--t), color var(--t), transform var(--t);
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); color:var(--on-accent); }
.btn-primary:hover{ background:var(--accent-2); color:var(--on-accent); }
.btn-ghost{ background:var(--bg-2); border-color:var(--border-2); color:var(--text); }
.btn-ghost:hover{ background:var(--bg-3); border-color:var(--text-3); color:var(--text); }
.btn-sm{ padding:7px 14px; font-size:.85rem; }

/* ===== Bolum basligi ===== */
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:32px;
}
.section-head h2{ margin:0; }
.section-head p{ margin:6px 0 0; color:var(--text-2); font-size:.95rem; }
.link-more{ font-size:.9rem; font-weight:600; display:inline-flex; align-items:center; gap:6px; transition:gap var(--t); }
.link-more:hover{ gap:10px; }

/* ===== Kart izgarasi ===== */
.grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); }
.grid-2{ grid-template-columns:repeat(auto-fill, minmax(340px,1fr)); }

.card{
  position:relative; display:flex; flex-direction:column;
  background:var(--bg-1); border:1px solid var(--border); border-radius:var(--r);
  overflow:hidden; transition:border-color var(--t), transform var(--t), background var(--t);
}
.card:hover{ border-color:var(--border-2); transform:translateY(-3px); background:var(--bg-2); }
.card-media{
  aspect-ratio:16/9; background:var(--bg-3);
  display:grid; place-items:center; overflow:hidden; border-bottom:1px solid var(--border);
}
.card-media img{ width:100%; height:100%; object-fit:cover; }
.card-media .ph{ color:var(--text-3); font-family:var(--font-mono); font-size:.75rem; letter-spacing:.06em; }
.card-body{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card-title{ font-family:var(--font-head); font-size:1.08rem; font-weight:600; margin:0; color:var(--text); letter-spacing:-.01em; }
.card-title a{ color:inherit; }
.card-title a:hover{ color:var(--accent-2); }
.card-desc{ margin:0; color:var(--text-2); font-size:.925rem; flex:1; }
.card-meta{ display:flex; align-items:center; gap:10px; font-size:.8rem; color:var(--text-3); font-family:var(--font-mono); }
.card-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }

/* Etiketler */
.tags{ display:flex; flex-wrap:wrap; gap:6px; }
.tag{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.03em;
  padding:3px 9px; border-radius:999px;
  background:var(--bg-3); border:1px solid var(--border); color:var(--text-2);
}
.tag-accent{ background:var(--accent-soft); border-color:var(--accent-ring); color:var(--accent-2); }

/* Filtre / arama cubugu */
.toolbar{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:28px; }
.filters{ display:flex; flex-wrap:wrap; gap:8px; }
.filter-btn{
  background:var(--bg-1); border:1px solid var(--border); color:var(--text-2);
  padding:7px 14px; border-radius:999px; font-size:.85rem; font-weight:500; cursor:pointer;
  transition:color var(--t), border-color var(--t), background var(--t);
}
.filter-btn:hover{ color:var(--text); border-color:var(--border-2); }
.filter-btn[aria-pressed="true"]{ background:var(--accent-soft); border-color:var(--accent-ring); color:var(--accent-2); }
.search-box{ position:relative; margin-left:auto; min-width:220px; flex:1; max-width:320px; }
.search-box input{
  width:100%; padding:9px 14px 9px 36px;
  background:var(--bg-1); border:1px solid var(--border); border-radius:var(--r-sm);
  color:var(--text); font-size:.9rem; font-family:inherit;
}
.search-box input::placeholder{ color:var(--text-3); }
.search-box input:focus{ outline:none; border-color:var(--accent-ring); box-shadow:0 0 0 3px var(--accent-soft); }
.search-box .ico{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--text-3); }
@media (max-width:620px){ .search-box{ margin-left:0; max-width:none; } }

/* ===== Blog listesi ===== */
.post-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; }
.post-item{ border-bottom:1px solid var(--border); }
.post-item:first-child{ border-top:1px solid var(--border); }
.post-link{
  display:grid; gap:6px 24px; padding:22px 4px;
  grid-template-columns:1fr; color:inherit;
  transition:padding var(--t), background var(--t);
}
.post-link:hover{ color:inherit; background:linear-gradient(90deg, var(--accent-soft), transparent 60%); padding-inline:12px 4px; }
@media (min-width:720px){ .post-link{ grid-template-columns:120px 1fr; } }
.post-date{ font-family:var(--font-mono); font-size:.8rem; color:var(--text-3); padding-top:4px; white-space:nowrap; }
.post-title{ font-family:var(--font-head); font-size:1.22rem; font-weight:600; margin:0 0 6px; letter-spacing:-.015em; }
.post-link:hover .post-title{ color:var(--accent-2); }
.post-sum{ margin:0 0 10px; color:var(--text-2); font-size:.94rem; max-width:68ch; }

/* ===== Yazi ===== */
.article-head{ padding-block:clamp(40px,6vw,72px) 28px; border-bottom:1px solid var(--border); margin-bottom:40px; }
.article-meta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; color:var(--text-3); font-family:var(--font-mono); font-size:.82rem; margin-bottom:18px; }
.back-link{ display:inline-flex; align-items:center; gap:7px; font-size:.87rem; color:var(--text-2); font-weight:500; }
.back-link:hover{ color:var(--accent-2); }

.prose{ font-size:1.045rem; line-height:1.78; color:var(--prose-text); }
.prose > *:first-child{ margin-top:0; }
.prose h2{ margin-top:2em; margin-bottom:.6em; font-size:1.55rem; scroll-margin-top:84px; }
.prose h3{ margin-top:1.7em; margin-bottom:.5em; font-size:1.2rem; scroll-margin-top:84px; }
.prose p{ margin:0 0 1.25em; }
.prose a{ text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--accent-ring); }
.prose a:hover{ text-decoration-color:var(--accent); }
.prose ul,.prose ol{ margin:0 0 1.25em; padding-left:1.4em; }
.prose li{ margin-bottom:.45em; }
.prose li::marker{ color:var(--text-3); }
.prose blockquote{
  margin:1.6em 0; padding:2px 0 2px 20px;
  border-left:3px solid var(--accent); color:var(--text-2);
}
.prose blockquote p:last-child{ margin-bottom:0; }
.prose img{ border-radius:var(--r); border:1px solid var(--border); margin:1.6em 0; }
.prose hr{ border:0; border-top:1px solid var(--border); margin:2.4em 0; }
.prose code{
  background:var(--bg-2); border:1px solid var(--border); border-radius:5px;
  padding:.15em .4em; font-size:.87em; color:var(--code-text);
}
.prose pre{
  background:var(--bg-1); border:1px solid var(--border); border-radius:var(--r);
  padding:16px 18px; overflow-x:auto; margin:1.6em 0; line-height:1.6;
}
.prose pre code{ background:none; border:0; padding:0; color:var(--text); font-size:.86rem; }
.prose table{ width:100%; border-collapse:collapse; margin:1.6em 0; font-size:.93rem; display:block; overflow-x:auto; }
.prose th,.prose td{ border:1px solid var(--border); padding:9px 13px; text-align:left; }
.prose th{ background:var(--bg-2); font-weight:600; }

/* ===== Hakkimda ===== */
.skill-group{ margin-bottom:26px; }
.skill-group h3{ font-size:.8rem; font-family:var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); margin-bottom:12px; }

/* ===== Iletisim ===== */
.contact-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
.contact-card{
  display:flex; align-items:center; gap:14px; padding:16px 18px;
  background:var(--bg-1); border:1px solid var(--border); border-radius:var(--r);
  color:var(--text); transition:border-color var(--t), background var(--t), transform var(--t);
}
.contact-card:hover{ border-color:var(--accent-ring); background:var(--bg-2); color:var(--text); transform:translateY(-2px); }
.contact-card .ico{ display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:10px; background:var(--bg-3); color:var(--accent-2); }
.contact-card .txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.contact-card .label{ display:block; font-size:.72rem; color:var(--text-3); font-family:var(--font-mono); letter-spacing:.06em; text-transform:uppercase; line-height:1.4; }
.contact-card .value{ display:block; font-weight:500; font-size:.95rem; line-height:1.4; overflow-wrap:anywhere; }

/* ===== Durum kutulari ===== */
.empty, .loading{
  padding:48px 24px; text-align:center; color:var(--text-3);
  border:1px dashed var(--border-2); border-radius:var(--r); background:var(--bg-1);
  font-family:var(--font-mono); font-size:.88rem;
}

/* ===== Footer ===== */
.site-footer{ border-top:1px solid var(--border); margin-top:clamp(56px,8vw,96px); padding-block:36px 44px; background:var(--bg-1); }
.footer-inner{ display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; }
.footer-inner p{ margin:0; color:var(--text-3); font-size:.87rem; }
.social{ display:flex; gap:8px; }
.social a{
  display:grid; place-items:center; width:38px; height:38px;
  border:1px solid var(--border); border-radius:10px;
  color:var(--text-2); background:var(--bg-2);
  transition:color var(--t), border-color var(--t), background var(--t), transform var(--t);
}
.social a:hover{ color:var(--accent-2); border-color:var(--accent-ring); background:var(--accent-soft); transform:translateY(-2px); }

/* ===== Yardimcilar ===== */
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.muted{ color:var(--text-2); }
.dim{ color:var(--text-3); }
.mono{ font-family:var(--font-mono); }
[hidden]{ display:none !important; }