/* okursoy.net — ortak stil.
   Mobil önce. Geniş ekranda iki sütun (grid-template-areas ile),
   dar ekranda tek sütun (flex order ile K-15 sırası). */

:root{
  --zemin:#fdfdfc; --zemin2:#f4f3f0; --metin:#1c1b19; --soluk:#5c5a55;
  --cizgi:#dfdcd6; --vurgu:#7a4b2a; --vurgu-zemin:#f3ece6;
  --olcu:38rem;
}
@media (prefers-color-scheme:dark){
  :root{
    --zemin:#15140f; --zemin2:#1e1d18; --metin:#eae7df; --soluk:#a3a096;
    --cizgi:#33312a; --vurgu:#d4a276; --vurgu-zemin:#2a241d;
  }
}

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

html{-webkit-text-size-adjust:100%}          /* iOS yatayda yazıyı şişirmesin */

body{
  margin:0;
  background:var(--zemin); color:var(--metin);
  font:400 1rem/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  padding:0 max(1.15rem,env(safe-area-inset-left)) env(safe-area-inset-bottom)
            max(1.15rem,env(safe-area-inset-right));
  overflow-wrap:anywhere;                     /* uzun DOI/başlık sayfayı kaydırmasın */
}
main,section,nav{min-width:0}

a{color:var(--vurgu)}
a:focus-visible{outline:2px solid var(--vurgu);outline-offset:3px;border-radius:3px}

/* ---------- üst çubuk ---------- */
.ust{
  display:flex;align-items:center;justify-content:flex-end;gap:1rem;
  padding:max(.6rem,env(safe-area-inset-top)) 0 .6rem;
  border-bottom:1px solid var(--cizgi);
  max-width:var(--olcu);margin:0 auto;
}
.ust nav{display:flex;gap:.15rem;flex-shrink:0}
.ust nav a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;padding:0 .6rem;       /* Kural 6: 44×44 */
  text-decoration:none;font-size:.9rem;border-radius:6px;
}
.ust nav a:hover{background:var(--zemin2)}

/* ---------- kabuk: dar ekran = tek sütun, K-15 sırası ---------- */
.kabuk{
  max-width:var(--olcu);margin:0 auto;padding-bottom:2rem;
  display:flex;flex-direction:column;
}
.bolge-yan{display:contents}      /* dar ekranda sarmalayıcı yok sayılır: K-15 sırası korunur */
.bolge-giris   {order:1}
.bolge-tanitim {order:2}
.bolge-menu    {order:3}   /* K-15: yayın menüsü tanıtım metninden SONRA */
.bolge-alanlar {order:4}
.bolge-baglar  {order:5}
.bolge-oyun    {order:6}
.bolge-iletisim{order:7}
.bolge-liste   {order:2}   /* künye sayfası: menü(1) → liste(2) → bağlantılar */

/* ---------- giriş ---------- */
.giris{display:flex;flex-wrap:wrap;gap:1.1rem;align-items:flex-start;margin:1.6rem 0 1.4rem}
.giris img{width:150px;height:auto;border-radius:8px;display:block;background:var(--zemin2)}
.giris .kim{flex:1 1 13rem;min-width:0}

h1{font-size:1.5rem;line-height:1.25;margin:.1rem 0 .4rem;font-weight:650}
h1 .unvan{display:block;font-size:.78rem;font-weight:500;color:var(--soluk);
          letter-spacing:.06em;text-transform:uppercase;margin-bottom:.15rem}
h1 .sayi{color:var(--soluk);font-weight:400;font-size:1rem}
.kurum{margin:0;color:var(--soluk);font-size:.95rem;line-height:1.5}
.tanitim p{margin:0 0 .9rem}

h2{font-size:1rem;margin:1.8rem 0 .7rem;padding-bottom:.35rem;
   border-bottom:1px solid var(--cizgi);font-weight:650}
h3{font-size:.8rem;margin:1.8rem 0 .4rem;color:var(--soluk);font-weight:700;
   letter-spacing:.07em;text-transform:uppercase}

/* ---------- yayın menüsü: dar ekranda yatay şerit ---------- */
.geri{display:inline-flex;align-items:center;min-height:44px;   /* Kural 6 */
      text-decoration:none;font-size:.9rem;color:var(--soluk)}
.geri:hover{color:var(--vurgu)}
.yanmenu ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.yanmenu a{
  display:flex;align-items:center;gap:.45rem;
  min-height:44px;padding:.4rem .8rem;                    /* Kural 6 */
  text-decoration:none;color:var(--metin);
  border:1px solid var(--cizgi);border-radius:999px;background:var(--zemin2);
}
.yanmenu a:hover{border-color:var(--vurgu)}
.yanmenu a[aria-current="page"]{background:var(--vurgu-zemin);border-color:var(--vurgu);
                                color:var(--vurgu);font-weight:600}

.baglantilar{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.15rem}
.baglantilar a{display:flex;align-items:center;min-height:44px;padding:.3rem .7rem;
               font-size:.9rem;border-radius:6px;text-decoration:none}
.baglantilar a:hover{background:var(--zemin2)}

/* ---------- araştırma alanları ---------- */
.alanlar{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0}
.alanlar li{background:var(--zemin2);border:1px solid var(--cizgi);border-radius:999px;
            padding:.25rem .7rem;font-size:.85rem;color:var(--soluk)}

/* ---------- künye listesi ---------- */
.yil{font-size:.78rem;font-weight:700;color:var(--soluk);letter-spacing:.09em;
     margin:1.4rem 0 .5rem;padding-bottom:.25rem;border-bottom:1px solid var(--cizgi)}
ol.kunye{list-style:none;margin:0;padding:0}
ol.kunye li{margin:0 0 1.1rem}
.kunye .ben{font-weight:700}
.kunye .baslik{display:block;margin:.1rem 0}
.kunye .yer{font-style:italic;color:var(--soluk)}
.kunye .detay{color:var(--soluk);font-size:.92rem}
.kunye .doi{display:inline-flex;align-items:center;min-height:44px;   /* Kural 6 */
            font-size:.85rem;word-break:break-all}
.kunye .etiket{display:inline-block;font-size:.68rem;letter-spacing:.06em;font-weight:700;
  color:var(--vurgu);background:var(--vurgu-zemin);border:1px solid var(--cizgi);
  border-radius:4px;padding:.05rem .4rem;margin-left:.25rem;vertical-align:.1em}

.altbilgi{max-width:var(--olcu);margin:2rem auto 0;padding-top:1rem;
          border-top:1px solid var(--cizgi);color:var(--soluk);font-size:.85rem}
.altbilgi p{margin:0 0 .5rem}

/* ---------- geniş ekran: iki sütun ---------- */
@media (min-width:56rem){
  :root{--olcu:58rem}
  .kabuk{
    display:grid;column-gap:2.75rem;align-items:start;padding-bottom:3rem;
    grid-template-columns:13rem 1fr;
    grid-template-areas:
      "yan giris"
      "yan tanitim"
      "yan alanlar"
      ".   iletisim";
  }
  .kabuk--liste{grid-template-areas:"yan liste";grid-template-rows:1fr}
  /* Sol sütun tek ızgara hücresi. Önceden üç ayrı satırdaydı ve satır
     yükseklikleri SAĞ sütunun içeriğiyle belirlendiği için "Oyunlar" bloğu
     232 px aşağı düşüyordu (ölçüldü 15.09.2026). Artık bloklar birbirine
     göre diziliyor, aralık burada belirleniyor. */
  .bolge-yan{grid-area:yan;display:flex;flex-direction:column;gap:1.5rem}
  .bolge-giris{grid-area:giris}    .bolge-tanitim{grid-area:tanitim}
  .bolge-alanlar{grid-area:alanlar}.bolge-iletisim{grid-area:iletisim}
  .bolge-liste{grid-area:liste}

  /* sol sütunda dikey liste */
  .yanmenu ul,.baglantilar{flex-direction:column;gap:.2rem}
  .yanmenu a{border-radius:6px;background:transparent;border-color:transparent}
  .yanmenu a:hover{background:var(--zemin2);border-color:var(--cizgi)}
  .yanmenu a[aria-current="page"]{background:var(--vurgu-zemin);border-color:var(--cizgi)}
  .yanmenu h2,.bolge-baglar h2{margin-top:0}
  .geri+h2{margin-top:.5rem}
  .bolge-baglar h2{margin-top:1.5rem}

  h1{font-size:1.8rem}
  .giris{margin-top:0}
  .giris img{width:170px}
}

/* Kural 6: metin içindeki e-posta bağlantıları da 44 px hedefe ulaşsın.
   testler/ekran.mjs bunları 16-18 px yükseklikte yakalamıştı. */
a[href^="mailto:"]{display:inline-flex;align-items:center;min-height:44px}
.altbilgi a[href^="mailto:"]{margin-left:.15rem}