:root{ /*renkler önden belirlendi*/
  --bg: rgb(255, 245, 235);
  --text: rgb(0, 0, 0);
  --muted:rgb(102, 102, 102);
  --maroon: rgb(122, 16, 32);   /* başlıklar */
  --orange:  rgb(255, 100, 0);  /* vurgu */
  --gap: 22px;
  --maxwidth:1400px;
}
*{box-sizing:border-box}
body {
  font-family: Tahoma, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:var(--bg);
  color: var(--text);
  line-height: 1.6;
  margin: 2em auto;
  max-width: var(--maxwidth);
  padding: 0 1em;
}


/* düzen */
.wrap{
  max-width: var(--maxwidth);
  margin:0 auto;
  padding:28px;
  display:grid;
  grid-template-columns: 1fr 200px;
  gap:var(--gap);
  align-items:start;
}

/* header */
header{
  grid-column:1 / -1;
  margin-bottom:8px;
}



main#icerik{
  padding:0;
  min-height:220px; /* boş sayfalarda yükseklik korur */
  background: transparent;
}



/*Burdan sonra yazılar*/



kbd, samp {
  font-family: inherit;
}

/* Başlıklar */
h1, h2, h3, h4, h5, h6 {
  font-family: Verdana,Tahoma, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  margin-top: 1.2em;
  margin-bottom: 0.6em;
}

h1 { font-size: 36px; color: rgb(120, 45, 40); }
h2 { font-size: 32px; color: rgb(160, 60, 50); }
h3 { font-size: 26px; color: rgb(200, 75, 60); }
h4 { font-size: 20px; color: rgb(240, 90, 70); }


/* Paragraflar */
p, pre {
  font-size: 16px;
  margin-bottom: 1em;
  color: var(--text);
  font-family: inherit;
}

/* Vurgular */
strong { color: rgb(163, 60, 51); font-weight: bold; }
em { color: rgb(217, 108, 6); font-style: italic; }


/* Alıntılar */
blockquote {
  border-left: 4px solid rgb(123, 45, 38);
  padding-left: 1em;
  margin: 1em 0;
  color: rgb(68, 68, 68);
  font-style: italic;
  background: rgb(255, 230, 230);
}

/* Listeler */
ul, ol {
  margin: 1em 0;
  padding-left: 2em;
}

li {
  margin-bottom: 0.4em;
}

/* Kod blokları */
code {
  font-family: 'Cascadia Code' ,'JetBrains Mono', "Courier New", monospace;
  background: rgb(255, 225, 225); /* açık bordo tonu */
  padding: 2px 4px;
  border-radius: 4px;
  color: rgb(86, 0, 104);
}

/* Linkler */
a {
  color: rgb(0, 0, 255);
  text-decoration: none; /* alt çizgi yok */
  font-weight: bold;
}

a:hover {
  color: rgb(217, 108, 0);        /* turuncu */
  text-decoration: underline;
}







.hint{
  /*color:rgb(0, 0, 0);*/
  cursor: help;
  font-style: italic;
  position: relative;
}

.hint::after{
  content: "yani?";
  font-size: 0.5em;
  margin-left: 4px;
  color: rgb(158, 66, 66);
}

.info{
  cursor: help;
  color: rgb(0, 95, 36);
}
/*Burdan önce yazılar*/





img.res{ max-width:100%; height:auto; display:block; margin-top:12px; border-radius:6px; }








nav#nav {
  align-self:start;
  padding-top:6px;
}
nav .link{
  display: block;
  text-decoration:none;
  color:var(--text);
  margin:10px 0;
  font-weight:600;
  font-size:20px;
  transition: color .15s ease, transform .08s ease;
}
nav .link:hover{ color:var(--orange); transform:translateX(3px); }
nav .link.active{ color:var(--maroon); text-decoration:underline; text-underline-offset:6px; }

nav .link:focus-visible{
  outline:2px dashed var(--orange);
  outline-offset:4px;
}










/* fade sınıfı JS ile tetikleniyor */
.fade {
  opacity:0;
  transform: translateY(6px);
  transition: opacity .28s ease, transform .28s ease;
}
.fade.show {
  opacity:1;
  transform: none;
}

/* responsive */
@media (max-width:950px){
  .wrap{ grid-template-columns:1fr; padding:18px; }
  nav#nav{ order:-1; padding-top:18px; display:flex; gap:12px; flex-wrap:wrap; }
  nav .link{ margin:0; font-size:14px; }
}