/* ---------------------------------------------------------------
   mihracnar.tr — giriş paftasına özgü düzen
   Yalnızca ana sayfa kullanır. Alt alanlar yüklemez.
   --------------------------------------------------------------- */

/* --- sabitlenen üst bant --- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:1;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  padding:calc(var(--sheet) + 12px) 0 .8rem;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .28s ease,transform .28s ease,visibility .28s;
}
.topbar.show{opacity:1; visibility:visible; transform:none}
.topbar-inner{
  max-width:var(--wrap); margin:0 auto;
  padding:0 calc(var(--sheet) + var(--gutter));
  display:flex; align-items:baseline; gap:.9rem 1.6rem; flex-wrap:wrap;
}
.topbar-title{
  font-family:var(--serif); font-weight:400;
  font-size:1.3rem; line-height:1.1; margin:0; letter-spacing:-.01em;
}
.topbar-deck{margin:0; color:var(--muted); font-size:.9rem; line-height:1.3}
@media (max-width:640px){ .topbar-deck{display:none} }
@media (prefers-reduced-motion:reduce){ .topbar{transition:none} }

/* --- başlık --- */
.head{position:relative; padding-bottom:clamp(2rem,5vw,3.4rem)}
.grid-bg{
  position:absolute; inset:-3.5rem -2rem 1rem -2rem;
  background-image:
    repeating-linear-gradient(to right,var(--rule) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(to bottom,var(--rule) 0 1px,transparent 1px 64px);
  opacity:.35; z-index:-1;
  -webkit-mask-image:radial-gradient(120% 100% at 12% 35%,#000 0%,transparent 70%);
          mask-image:radial-gradient(120% 100% at 12% 35%,#000 0%,transparent 70%);
}
.cross{
  position:absolute; top:0; right:0;
  width:clamp(28px,4vw,46px); height:auto; color:var(--red);
  opacity:0;
}
.cross.show{opacity:1; transition:opacity .7s ease .35s}
@media (prefers-reduced-motion:reduce){ .cross.show{transition:none} }

/* --- iki sütunlu gövde --- */
.body{
  display:grid;
  grid-template-columns:1fr;
  gap:3rem;
  border-top:1px solid var(--rule);
  padding-top:clamp(2rem,4vw,3.4rem);
}
@media (min-width:920px){
  .body{
    grid-template-columns:minmax(0,7fr) minmax(0,11fr);
    gap:clamp(2.5rem,5vw,5.5rem);
  }
  .side{position:sticky; top:calc(var(--sheet) + 48px); align-self:start}
}
.side p{margin:0 0 1rem; max-width:48ch}
.side p:last-of-type{margin-bottom:1.8rem}

/* --- proje lejantı --- */
.legend{list-style:none; margin:0; padding:0}
.legend li{
  display:grid;
  grid-template-columns:2.2rem minmax(0,1fr) auto;
  gap:.25rem 1.1rem;
  padding:1.25rem 0;
  border-bottom:1px dotted var(--rule);
  align-items:baseline;
}
.legend li:first-child{border-top:1px dotted var(--rule)}
.key{grid-row:span 2; align-self:start; margin-top:.35rem; color:var(--ink)}
.title{font-size:1.1em; margin:0}
.title a{
  color:var(--ink); text-decoration:none;
  background-image:linear-gradient(var(--red),var(--red));
  background-size:0 1px; background-repeat:no-repeat; background-position:0 100%;
  padding-bottom:1px;
  transition:background-size .25s ease,color .25s ease;
}
.title a:hover,.title a:focus-visible{color:var(--red); background-size:100% 1px}
@media (prefers-reduced-motion:reduce){ .title a{transition:none} }
.cat{grid-column:3; color:var(--muted); font-size:.82em; white-space:nowrap}
.desc{grid-column:2/4; margin:0; color:var(--muted); font-size:.94em; max-width:62ch}
@media (max-width:560px){
  .legend li{grid-template-columns:1.8rem minmax(0,1fr)}
  .cat{grid-column:2; grid-row:3; margin-top:.2rem}
  .desc{grid-column:2}
}