/* ===========================================================================
   ZAPTİYE — Matbaa teması
   Harici font / kütüphane yok. Sistem serif + sistem sans.
   =========================================================================== */

/* --- Değişkenler ----------------------------------------------------------
   Renkler iki takım hâlinde: açık ve koyu. Koyu takım hem sistem tercihine
   hem de sağ üstteki düğmeye bağlı; düğme seçimi sistemi ezer.
   -------------------------------------------------------------------------- */
:root{
  /* Logo kırmızısı. Bant ve büyük bloklarda kullanılır — küçük metinde
     beyaz üstünde 4.14:1 kaldığı için okunaklı değil, orada --vurgu var. */
  --marka:#f9090a;
  --marka-koyu:#d40a05;

  --sayfa:#efeeec;         /* sayfa zemini — kâğıdın durduğu masa */
  --yuzey:#ffffff;         /* içerik zemini */
  --murekkep:#121212;      /* ana metin */
  --soluk:#54524e;         /* ikincil metin */
  --cizgi:#e3e2df;         /* ayraçlar */
  --cizgi-koyu:#c9c7c1;
  --vurgu:#d40a05;         /* bağlantı ve vurgular — beyaz üstünde 5.46:1 */
  --vurgu-acik:#b01008;
  --secim:#ffd9d6;
  --isaret:#ffe08a;        /* arama vurgusu */
  --foto-suzgec:grayscale(.5) contrast(1.04);

  --serif:Georgia,"Iowan Old Style","Palatino Linotype","Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --genislik:900px;
  --olcu:74ch;             /* okuma satır uzunluğu */
  --ic-bosluk:40px;

  color-scheme:light;
}

/* Koyu takım */
@media (prefers-color-scheme:dark){
  :root:not([data-tema="acik"]){
    --sayfa:#0f0f0e;
    --yuzey:#171716;
    --murekkep:#eae8e4;
    --soluk:#a3a09a;
    --cizgi:#2b2b29;
    --cizgi-koyu:#3f3e3b;
    --vurgu:#ff5247;          /* koyu zeminde 5.64:1 */
    --vurgu-acik:#ff6a5e;
    --secim:#4a201d;
    --isaret:#4a3f24;
    --foto-suzgec:grayscale(.45) brightness(.88) contrast(1.02);

    color-scheme:dark;
  }
}

:root[data-tema="koyu"]{
  --sayfa:#0f0f0e;
  --yuzey:#171716;
  --murekkep:#eae8e4;
  --soluk:#a3a09a;
  --cizgi:#2b2b29;
  --cizgi-koyu:#3f3e3b;
  --vurgu:#ff5247;          /* koyu zeminde 5.64:1 */
  --vurgu-acik:#ff6a5e;
  --secim:#4a201d;
  --isaret:#4a3f24;
  --foto-suzgec:grayscale(.45) brightness(.88) contrast(1.02);

  color-scheme:dark;
}

/* --- Sıfırlama ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--sayfa);
  color:var(--murekkep);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0; font-weight:400; line-height:1.2}
p,ul,ol,figure,blockquote{margin:0}
::selection{background:var(--secim)}

.sar{max-width:var(--genislik); margin-inline:auto; padding-inline:var(--ic-bosluk)}

/* İçerik beyaz bir sayfa gibi; başlık ve alt bilgi onu çerçeveler. */
main.sar{
  background:var(--yuzey);
  border-inline:1px solid var(--cizgi);
  padding-bottom:8px;
}

/* Ekranda görünmez ama ekran okuyucu okur (form etiketleri için) */
.gizli{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* Klavye kullanıcıları için içeriğe atlama bağlantısı */
.atla{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--murekkep); color:var(--yuzey);
  padding:10px 16px; font-size:14px;
}
.atla:focus{left:0}

:where(a,button,input,textarea,select):focus-visible{
  outline:2px solid var(--vurgu);
  outline-offset:3px;
}

/* --- Başlık (masthead) ----------------------------------------------------
   Logo, kendi kırmızısıyla aynı renkte tam genişlikte bir bantta duruyor.
   Logo dosyası saydam beyaz PNG olduğu için bantla dikişsiz birleşiyor. */
.site-basi{border-bottom:1px solid var(--cizgi)}

.marka-bant{background:var(--marka)}
.marka-satir{position:relative}

.marka{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  padding-block:26px 24px; text-decoration:none;
}
.marka-logo{
  width:clamp(230px,42vw,380px);
  height:auto;                /* oran 7.03:1 */
}
.marka-alt{
  font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
  color:#fff; opacity:.82;
}

/* --- Tema düğmesi (sağ üst) -----------------------------------------------
   JavaScript kapalıysa hiç görünmez; çalışmayan düğme göstermenin anlamı yok. */
.tema-dugme{display:none}
.js .tema-dugme{
  display:inline-flex; align-items:center; justify-content:center;
  position:absolute; top:14px; right:calc(var(--ic-bosluk) - 8px);
  width:36px; height:36px; padding:0;
  font:inherit; color:#fff; opacity:.85; cursor:pointer;
  background:transparent;
  border:0; border-radius:2px;
}
.tema-dugme:hover{opacity:1}
.tema-dugme:focus-visible{outline-color:#fff}
.tema-simge{font-size:19px; line-height:1}

.menu{border-top:1px solid var(--cizgi)}
/* Menü ve arama tek satır: bağlantılar ve arama aynı hizada, ortalanmış */
.menu-ic{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:6px 22px; padding-block:7px;
}
.menu-baglar{display:flex; flex-wrap:wrap; gap:6px 24px}
.menu a{
  font-size:12.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--soluk); text-decoration:none; padding-block:3px;
}
.menu a:hover{color:var(--murekkep)}
.menu a.etkin{color:var(--murekkep); box-shadow:inset 0 -2px 0 var(--vurgu)}

/* --- Arama kutusu ---------------------------------------------------------
   Menü satırının yüksekliğini büyütmesin diye alan da düğme de 30px. */
.ara{display:flex; flex-wrap:nowrap; gap:5px}
.ara input{
  font:inherit; font-size:13.5px; width:132px; height:30px;
  padding:0 10px;
  border:1px solid var(--cizgi-koyu); border-radius:2px;
  background:var(--yuzey); color:var(--murekkep);
  -webkit-appearance:none; appearance:none;
}
.ara input::placeholder{color:var(--soluk); opacity:.75}
.ara input:focus{border-color:var(--vurgu); outline:none}
.ara button{
  font:inherit; font-size:11.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; cursor:pointer; height:30px;
  padding:0 12px; white-space:nowrap;
  border:1px solid var(--cizgi-koyu); border-radius:2px;
  background:transparent; color:var(--soluk);
}
.ara button:hover{background:var(--murekkep); border-color:var(--murekkep); color:var(--yuzey)}

/* Arama sonuçlarında eşleşen kelime */
mark{background:var(--isaret); color:inherit; padding:0 2px; border-radius:2px}

.ara-bos{padding:26px 0 10px; color:var(--soluk); max-width:var(--olcu)}
.ara-bos ul{margin:10px 0 14px; padding-left:1.3em}
.ara-bos li{margin-bottom:5px}
.ara-bos a{color:var(--vurgu)}

/* --- Ortak parçalar ------------------------------------------------------- */
.ustbilgi{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:11.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--vurgu); margin-bottom:11px;
}
.ustbilgi .ayrac{color:var(--cizgi-koyu)}
.ustbilgi span:not(.ayrac){color:var(--soluk)}

.bolum-basi{
  border-top:1px solid var(--cizgi);
  padding-top:15px; margin-top:8px;
}
.bolum-basi h2{
  font-family:var(--sans);
  font-size:12px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--soluk);
}

.sayfa-basi{padding-block:42px 26px; border-bottom:1px solid var(--cizgi)}
.sayfa-basi h1{font-family:var(--serif); font-size:clamp(30px,5.5vw,40px)}
.sayfa-basi p{margin-top:9px; color:var(--soluk); font-size:15.5px}

.bos{padding:60px 0; color:var(--soluk); text-align:center}

/* Fotoğraflar gazete baskısı gibi: kırık beyaza yakın, düşük doygunluk */
.manset-foto img,
.oge-foto img,
.yazi-foto img{
  filter:var(--foto-suzgec);
}

/* --- Manşet --------------------------------------------------------------- */
.manset{padding-block:38px 30px}
.manset-foto{display:block; margin-bottom:22px; background:var(--cizgi)}
.manset-foto img{width:100%; aspect-ratio:16/9; object-fit:cover}

.manset-baslik{
  font-family:var(--serif);
  font-size:clamp(29px,5.6vw,42px);
  line-height:1.14;
  margin-bottom:13px;
}
.manset-baslik a{text-decoration:none}
.manset-baslik a:hover{color:var(--vurgu)}

.manset-ozet{
  font-family:var(--serif);
  font-size:18.5px; line-height:1.6;
  color:var(--soluk);
  max-width:var(--olcu);
  margin-bottom:17px;
}

.devam{
  font-size:14px; font-weight:600; color:var(--vurgu); text-decoration:none;
}
.devam:hover{text-decoration:underline; text-underline-offset:3px}

/* --- Yazı listesi --------------------------------------------------------- */
.liste{display:flex; flex-direction:column}

.oge{
  display:flex; gap:20px; align-items:flex-start;
  padding-block:24px; border-bottom:1px solid var(--cizgi);
}
.oge-foto{
  display:block; flex:none; width:118px; aspect-ratio:1;
  background:var(--cizgi); overflow:hidden;
}
.oge-foto img{width:100%; height:100%; object-fit:cover}

.oge-govde{flex:1; min-width:0}
.oge-tarih{
  display:block; font-size:12.5px; color:var(--soluk);
  font-variant-numeric:tabular-nums; margin-bottom:6px;
}
.oge-baslik{
  font-family:var(--serif); font-size:22px; line-height:1.28; margin-bottom:7px;
}
.oge-baslik a{text-decoration:none}
.oge-baslik a:hover{color:var(--vurgu)}

.oge-ozet{
  color:var(--soluk); font-size:15.5px; line-height:1.58;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* --- Sayfalama ------------------------------------------------------------ */
.sayfalama{
  display:flex; gap:7px; justify-content:center; flex-wrap:wrap;
  padding:34px 0 48px;
}
.sayfalama a,.sayfalama span{
  min-width:38px; height:38px; padding-inline:13px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--cizgi); color:var(--soluk);
  font-size:14px; font-weight:600; text-decoration:none;
  font-variant-numeric:tabular-nums;
}
.sayfalama a:hover{border-color:var(--cizgi-koyu); color:var(--murekkep)}
.sayfalama .etkin{background:var(--vurgu); border-color:var(--vurgu); color:var(--yuzey)}

/* --- Tek yazı ------------------------------------------------------------- */
.yazi{padding-block:40px 20px}

.yazi-basi{margin-bottom:26px}
.yazi-basi h1{
  font-family:var(--serif);
  font-size:clamp(30px,6vw,44px);
  line-height:1.13;
  max-width:22ch;
}

.yazi-foto{margin-block:0 30px; background:var(--cizgi)}
.yazi-foto img{width:100%; aspect-ratio:16/9; object-fit:cover}

.yazi-govde{
  font-family:var(--serif);
  font-size:19px;
  line-height:1.72;
  max-width:var(--olcu);
}
.yazi-govde > * + *{margin-top:1.15em}

.yazi-govde h2,
.yazi-govde h3,
.yazi-govde h4{
  font-family:var(--serif);
  line-height:1.25;
  margin-top:1.9em;
}
.yazi-govde h2{font-size:27px}
.yazi-govde h3{font-size:22px}
.yazi-govde h4{font-size:19px; font-weight:700}

.yazi-govde a{color:var(--vurgu); text-decoration:underline; text-underline-offset:2px}
.yazi-govde a:hover{color:var(--vurgu-acik)}

.yazi-govde strong{font-weight:700}
.yazi-govde em{font-style:italic}

.yazi-govde ul,.yazi-govde ol{padding-left:1.3em}
.yazi-govde li + li{margin-top:.45em}
.yazi-govde ul{list-style:square}

.yazi-govde blockquote{
  border-left:3px solid var(--vurgu);
  padding:2px 0 2px 20px;
  color:var(--soluk);
  font-style:italic;
}
.yazi-govde blockquote p{margin:0}

.yazi-govde hr{
  border:0; height:1px; background:var(--cizgi);
  margin-block:2.2em;
}

/* --- Önceki / sonraki ----------------------------------------------------- */
.komsu{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
  border-top:1px solid var(--cizgi);
  padding-block:26px 48px; margin-top:34px;
}
.komsu-oge{display:flex; flex-direction:column; gap:6px; text-decoration:none; min-width:0}
.komsu-oge.sag{text-align:right; grid-column:2}
.komsu-etiket{
  font-size:11.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--vurgu);
}
.komsu-baslik{font-family:var(--serif); font-size:17.5px; line-height:1.3}
.komsu-oge:hover .komsu-baslik{color:var(--vurgu)}

/* --- Arşiv ---------------------------------------------------------------- */
.arsiv-yil{padding-block:30px 6px}
.arsiv-yil h2{
  font-family:var(--serif); font-size:30px;
  padding-bottom:8px; border-bottom:1px solid var(--cizgi);
}
.arsiv-ay{
  font-family:var(--sans);
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--soluk); margin-top:24px;
}
.arsiv-liste{list-style:none; padding:0; margin-top:10px}
.arsiv-liste li{
  display:flex; gap:16px; align-items:baseline;
  padding-block:10px; border-bottom:1px solid var(--cizgi);
}
.arsiv-liste time{
  flex:none; width:48px; font-size:13px; color:var(--soluk);
  font-variant-numeric:tabular-nums;
}
.arsiv-liste a{
  font-family:var(--serif); font-size:18px; text-decoration:none; line-height:1.35;
}
.arsiv-liste a:hover{color:var(--vurgu)}

.geri{padding-block:34px 50px}
.geri a{color:var(--vurgu); font-weight:600; font-size:15px; text-decoration:none}
.geri a:hover{text-decoration:underline; text-underline-offset:3px}

/* --- Alt bilgi ------------------------------------------------------------ */
.site-alti{border-top:1px solid var(--cizgi); margin-top:10px}
.alt-ic{
  display:flex; gap:14px 20px; flex-wrap:wrap; align-items:center;
  padding-block:26px; font-size:13.5px; color:var(--soluk);
}
.alt-ic nav{margin-left:auto; display:flex; gap:18px}
.alt-ic a{text-decoration:none}
.alt-ic a:hover{color:var(--murekkep)}

/* --- Mobil ---------------------------------------------------------------- */
@media (max-width:760px){
  body{font-size:16.5px}
  .sar{padding-inline:18px}
  main.sar{border-inline:0}

  .marka{padding-block:20px 18px; gap:7px}
  .js .tema-dugme{top:8px; right:10px}

  /* Dar ekranda menü ve arama alt alta, arama tam genişlik */
  .menu-ic{flex-direction:column; gap:8px; padding-block:8px}
  .menu-baglar{gap:6px 18px}
  .menu a{font-size:11.5px}
  .ara{width:100%}
  .ara input{flex:1; width:auto; height:38px; font-size:16px}  /* 16px: iOS'ta odakta yakınlaşmayı önler */
  .ara button{height:38px}

  .manset{padding-block:24px 22px}
  .manset-foto{margin-bottom:18px}
  .manset-ozet{font-size:17px}

  .oge{gap:15px; padding-block:19px}
  .oge-foto{width:88px}
  .oge-baslik{font-size:18.5px}
  .oge-ozet{font-size:14.5px}

  .yazi{padding-block:26px 14px}
  .yazi-basi{margin-bottom:20px}
  .yazi-foto{margin-bottom:24px}
  .yazi-govde{font-size:18px; line-height:1.68}
  .yazi-govde h2{font-size:23px}
  .yazi-govde h3{font-size:20px}

  .komsu{grid-template-columns:1fr; gap:22px}
  .komsu-oge.sag{text-align:left; grid-column:1}

  .alt-ic nav{margin-left:0; width:100%}
}

/* --- Baskı ---------------------------------------------------------------- */
@media print{
  .menu,.komsu,.sayfalama,.site-alti,.atla{display:none}
  body{background:#fff; color:#000; font-size:12pt}
  .yazi-govde{max-width:none}
  .yazi-govde a{text-decoration:none}
  .yazi-govde a::after{content:" (" attr(href) ")"; font-size:9pt; color:#555}
}