/*
Theme Name: İstanapolitan
Theme URI: https://istanapolitan.com
Description: Kültür, sanat ve hayata dair bir dergi teması. The New Yorker ruhunda.
Version: 1.0
Author: İstanapolitan
*/

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Libre+Franklin:wght@300;400;500;600&display=swap');

/* =====================
   TEMEL DEĞİŞKENLER
   ===================== */
:root {
  --renk-zemin: #F9F6F0;
  --renk-kart: #FFFFFF;
  --renk-metin: #1A1A18;
  --renk-metin-ikincil: #5A5750;
  --renk-vurgu: #8B2020;
  --renk-cizgi: #D8D2C8;
  --renk-ayrac: #1A1A18;
  --ff-serif: 'EB Garamond', Georgia, serif;
  --ff-sans: 'Libre Franklin', sans-serif;
  --max-genislik: 1180px;
  --kenar-bosluk: 24px;
}

/* =====================
   GENEL SIFIRLA
   ===================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  background: var(--renk-zemin);
  color: var(--renk-metin);
  font-family: var(--ff-sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--renk-vurgu); }

/* =====================
   ÜSTTEN BAR
   ===================== */
.ust-bar {
  background: var(--renk-ayrac);
  color: #F9F6F0;
  text-align: center;
  padding: 7px 0;
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* =====================
   HEADER / MASTHEAD
   ===================== */
.site-header {
  border-bottom: 3px solid var(--renk-ayrac);
  background: var(--renk-zemin);
}
.masthead {
  max-width: var(--max-genislik);
  margin: 0 auto;
  padding: 28px var(--kenar-bosluk) 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.masthead-logo {
  display: flex;
  align-items: center;
  gap: 18px;
}
.masthead-logo img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}
.masthead-baslik {
  display: flex;
  flex-direction: column;
}
.masthead-baslik .site-adi {
  font-family: var(--ff-serif);
  font-size: 52px;
  font-weight: 400;
  letter-spacing: -2px;
  line-height: 1;
  color: var(--renk-metin);
}
.masthead-baslik .site-slogan {
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--renk-metin-ikincil);
  margin-top: 6px;
}
.masthead-sag {
  text-align: right;
  font-family: var(--ff-sans);
  font-size: 11px;
  color: var(--renk-metin-ikincil);
  letter-spacing: 0.5px;
  line-height: 1.8;
}

/* =====================
   NAVİGASYON
   ===================== */
.site-nav {
  border-top: 1px solid var(--renk-cizgi);
  border-bottom: 1px solid var(--renk-cizgi);
  background: var(--renk-zemin);
}
.nav-ici {
  max-width: var(--max-genislik);
  margin: 0 auto;
  padding: 0 var(--kenar-bosluk);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.nav-ici a {
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--renk-metin);
  padding: 12px 18px;
  border-right: 1px solid var(--renk-cizgi);
  transition: color 0.2s;
}
.nav-ici a:first-child { border-left: 1px solid var(--renk-cizgi); }
.nav-ici a:hover { color: var(--renk-vurgu); }
.nav-ici a.aktif { color: var(--renk-vurgu); }

/* =====================
   ANA İÇERİK ALANI
   ===================== */
.site-govde {
  max-width: var(--max-genislik);
  margin: 0 auto;
  padding: 36px var(--kenar-bosluk);
}

/* =====================
   ANA SAYFA IZGARA
   ===================== */
.ana-izgara {
  display: grid;
  grid-template-columns: 1fr 1px 320px;
  gap: 0;
}
.ana-sol { padding-right: 36px; }
.ana-ayrac { background: var(--renk-cizgi); }
.ana-sag { padding-left: 36px; }

/* =====================
   BÖLÜM BAŞLIKLARI
   ===================== */
.bolum-baslik {
  font-family: var(--ff-sans);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--renk-vurgu);
  border-bottom: 1.5px solid var(--renk-vurgu);
  padding-bottom: 7px;
  margin-bottom: 24px;
}

/* =====================
   ÖNE ÇIKAN YAZI
   ===================== */
.one-cikan {
  margin-bottom: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--renk-cizgi);
}
.one-cikan .yazi-kategori {
  font-family: var(--ff-sans);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--renk-metin-ikincil);
  margin-bottom: 10px;
}
.one-cikan .yazi-kategori span {
  color: var(--renk-vurgu);
  font-weight: 600;
}
.one-cikan .yazi-baslik {
  font-family: var(--ff-serif);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 12px;
  transition: color 0.2s;
}
.one-cikan .yazi-baslik:hover { color: var(--renk-vurgu); cursor: pointer; }
.one-cikan .yazi-ozet {
  font-family: var(--ff-serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--renk-metin-ikincil);
  font-style: italic;
  margin-bottom: 14px;
}
.yazi-meta {
  font-family: var(--ff-sans);
  font-size: 12px;
  color: var(--renk-metin-ikincil);
  display: flex;
  align-items: center;
  gap: 10px;
}
.yazi-meta .yazar { color: var(--renk-vurgu); }
.yazi-meta .ayirici { color: var(--renk-cizgi); }

/* =====================
   YAZI LİSTESİ
   ===================== */
.yazi-listesi .yazi-ogesi {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--renk-cizgi);
  align-items: start;
}
.yazi-ogesi:first-child { padding-top: 0; }
.yazi-ogesi .yazi-bilgi .kategori {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--renk-vurgu);
  font-weight: 600;
  margin-bottom: 6px;
}
.yazi-ogesi .yazi-bilgi .baslik {
  font-family: var(--ff-serif);
  font-size: 20px;
  line-height: 1.3;
  margin-bottom: 6px;
  transition: color 0.2s;
}
.yazi-ogesi .yazi-bilgi .baslik:hover { color: var(--renk-vurgu); cursor: pointer; }
.yazi-ogesi .yazi-bilgi .ozet {
  font-family: var(--ff-serif);
  font-size: 14px;
  font-style: italic;
  color: var(--renk-metin-ikincil);
  line-height: 1.6;
}
.yazi-ogesi .yazi-gorseli {
  width: 100px;
  height: 80px;
  object-fit: cover;
  background: var(--renk-cizgi);
}

/* =====================
   KENAR ÇUBUĞU
   ===================== */
.kenar-widget {
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--renk-cizgi);
}
.kenar-widget:last-child { border-bottom: none; }
.kenar-widget-baslik {
  font-family: var(--ff-sans);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--renk-vurgu);
  border-bottom: 1.5px solid var(--renk-vurgu);
  padding-bottom: 7px;
  margin-bottom: 18px;
}
.kenar-yazi {
  padding: 14px 0;
  border-bottom: 1px solid var(--renk-cizgi);
}
.kenar-yazi:first-of-type { padding-top: 0; }
.kenar-yazi:last-child { border-bottom: none; }
.kenar-yazi .k-baslik {
  font-family: var(--ff-serif);
  font-size: 16px;
  line-height: 1.35;
  margin-bottom: 4px;
  transition: color 0.2s;
}
.kenar-yazi .k-baslik:hover { color: var(--renk-vurgu); cursor: pointer; }
.kenar-yazi .k-meta {
  font-size: 11px;
  color: var(--renk-metin-ikincil);
}

/* =====================
   HAKKINDA KUTUSU
   ===================== */
.hakkinda-kutu {
  background: var(--renk-kart);
  border: 1px solid var(--renk-cizgi);
  padding: 20px;
  text-align: center;
}
.hakkinda-kutu img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  margin: 0 auto 12px;
  object-fit: cover;
}
.hakkinda-kutu .hk-isim {
  font-family: var(--ff-serif);
  font-size: 20px;
  margin-bottom: 8px;
}
.hakkinda-kutu .hk-aciklama {
  font-family: var(--ff-serif);
  font-size: 14px;
  font-style: italic;
  color: var(--renk-metin-ikincil);
  line-height: 1.6;
}

/* =====================
   YAZI SAYFASI (TEKİL)
   ===================== */
.tekil-yazi {
  max-width: 720px;
  margin: 0 auto;
  padding: 36px var(--kenar-bosluk);
}
.tekil-yazi .yazi-ustbilgi {
  text-align: center;
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--renk-cizgi);
}
.tekil-yazi .yazi-ustbilgi .kategori {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--renk-vurgu);
  font-weight: 600;
  margin-bottom: 14px;
}
.tekil-yazi .yazi-ustbilgi h1 {
  font-family: var(--ff-serif);
  font-size: 44px;
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 16px;
}
.tekil-yazi .yazi-ustbilgi .alt-baslik {
  font-family: var(--ff-serif);
  font-size: 20px;
  font-style: italic;
  color: var(--renk-metin-ikincil);
  margin-bottom: 20px;
  line-height: 1.5;
}
.tekil-yazi .yazi-ustbilgi .meta {
  font-size: 12px;
  color: var(--renk-metin-ikincil);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Yazı İçeriği Tipografisi */
.yazi-icerigi {
  font-family: var(--ff-serif);
  font-size: 19px;
  line-height: 1.8;
  color: var(--renk-metin);
}
.yazi-icerigi p { margin-bottom: 1.5em; }
.yazi-icerigi h2 {
  font-family: var(--ff-serif);
  font-size: 28px;
  font-weight: 500;
  margin: 2em 0 0.75em;
  line-height: 1.25;
}
.yazi-icerigi h3 {
  font-family: var(--ff-sans);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  margin: 2em 0 0.75em;
  color: var(--renk-metin-ikincil);
}
.yazi-icerigi blockquote {
  border-left: 3px solid var(--renk-vurgu);
  margin: 2em 0;
  padding: 0 0 0 24px;
  font-style: italic;
  color: var(--renk-metin-ikincil);
  font-size: 21px;
}
.yazi-icerigi a { color: var(--renk-vurgu); text-decoration: underline; text-underline-offset: 3px; }
.yazi-icerigi img { margin: 2em auto; }
.yazi-icerigi .ilk-harf::first-letter {
  font-family: var(--ff-serif);
  font-size: 72px;
  font-weight: 700;
  float: left;
  line-height: 0.75;
  margin: 8px 8px 0 0;
  color: var(--renk-metin);
}

/* =====================
   FOOTER
   ===================== */
.site-footer {
  border-top: 3px solid var(--renk-ayrac);
  background: var(--renk-zemin);
  margin-top: 48px;
}
.footer-ici {
  max-width: var(--max-genislik);
  margin: 0 auto;
  padding: 36px var(--kenar-bosluk);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 36px;
}
.footer-logo .site-adi {
  font-family: var(--ff-serif);
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 8px;
}
.footer-logo p {
  font-size: 13px;
  font-family: var(--ff-serif);
  font-style: italic;
  color: var(--renk-metin-ikincil);
  line-height: 1.6;
}
.footer-bolum h4 {
  font-family: var(--ff-sans);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--renk-vurgu);
  margin-bottom: 14px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--renk-vurgu);
}
.footer-bolum a {
  display: block;
  font-size: 14px;
  font-family: var(--ff-serif);
  color: var(--renk-metin-ikincil);
  margin-bottom: 8px;
  transition: color 0.2s;
}
.footer-bolum a:hover { color: var(--renk-vurgu); }
.footer-alt {
  border-top: 1px solid var(--renk-cizgi);
  text-align: center;
  padding: 16px var(--kenar-bosluk);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--renk-metin-ikincil);
}

/* =====================
   MOBİL UYUM
   ===================== */
@media (max-width: 900px) {
  .ana-izgara { grid-template-columns: 1fr; }
  .ana-sol { padding-right: 0; border-bottom: 1px solid var(--renk-cizgi); padding-bottom: 36px; margin-bottom: 36px; }
  .ana-ayrac { display: none; }
  .ana-sag { padding-left: 0; }
  .masthead { flex-direction: column; text-align: center; }
  .masthead-sag { text-align: center; }
  .masthead-baslik .site-adi { font-size: 38px; }
  .footer-ici { grid-template-columns: 1fr; gap: 24px; }
  .nav-ici { flex-wrap: wrap; justify-content: center; }
  .tekil-yazi .yazi-ustbilgi h1 { font-size: 32px; }
  .yazi-icerigi { font-size: 17px; }
}