:root{
  --bg:#f4f1ea;
  --text:#141414;
  --muted:rgba(20,20,20,.68);
  --border:rgba(20,20,20,.14);
  --cardbg:rgba(255,255,255,.22);
  --max:1080px;
  --pad:clamp(18px, 3vw, 34px);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing:.1px;
}
a{color:inherit;text-decoration:none}
a:hover{opacity:.86}
.container{
  width:min(var(--max), calc(100% - (var(--pad) * 2)));
  margin:0 auto;
}
.siteHeader{
  position:sticky; top:0; z-index:20;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.headerBar{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:12px 0;
}
.brand{display:flex; align-items:center; gap:12px; min-width:180px}
.brand img{height:44px; width:auto; display:block}
.nav{
  display:flex; align-items:center; gap: clamp(10px, 2vw, 18px);
  flex-wrap:wrap; justify-content:flex-end;
}
.nav a{
  font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
  padding:8px 10px;
  border-radius:999px;
}
.nav a.active{
  color:var(--text);
  border:1px solid var(--border);
  background:rgba(255,255,255,.22);
}
.menuBtn{
  display:none;
  border:1px solid var(--border);
  background:rgba(255,255,255,.18);
  border-radius:999px;
  padding:10px 12px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
main{padding: clamp(26px, 4.5vw, 64px) 0;}
.kicker{
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:center;
}
.heroContent{
  position: relative;
  margin-top: -90px; /* değeri artırıp azaltabilirsin */
  z-index: 5;
}

@media(max-width:768px){
  .heroContent{
    margin-top: -27px;
  }
}

.resim-kutu {
            display: flex;
            justify-content: center; /* yatay ortala */
            align-items: center;     /* dikey ortala */
            
        }

        .resim-kutu img {
            max-width: 100%;
            max-height: 100%;
            height: auto;
            width: auto;
        }
h1,h2,h3{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-weight: 500;
  letter-spacing:.2px;
  margin:0 0 14px 0;
}
h1{font-size:clamp(28px, 4.4vw, 48px)}
h2{font-size:clamp(20px, 3.2vw, 30px)}
p{
  margin:0 0 14px 0;
  color:var(--muted);
  line-height:1.85;
  font-size:16.5px;
}
.section{
  margin-top:clamp(22px, 3.4vw, 44px);
  padding-top:clamp(18px, 2.8vw, 34px);
  border-top:1px solid var(--border);
}
.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
}
@media(min-width:880px){
  .grid{grid-template-columns:1fr 1fr; gap:18px;}
}
.card{
  border-radius: var(--radius);
  padding: 20px 18px;
  background: rgba(255, 255, 255, 0.15); /* hafif cam efekti */
  backdrop-filter: blur(8px);  /* blur efekti */
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08); /* hafif gölge */
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
  background: rgba(255, 255, 255, 0.22); /* hover'da biraz daha belirgin */
}

.card h3{
  font-size: 20px;
  margin-bottom: 8px;
  color: var(--text);
}

.card .meta span{
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.12);
  color: var(--muted);
  font-size: 13px;
  padding: 5px 10px;
  border-radius: 999px;
}

.card p{
  color: var(--muted);
  line-height: 1.7;
  margin-top: 6px;
}
.meta{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  color:var(--muted); font-size:13px;
  margin-bottom:8px;
}
.meta span, .meta a{
  padding:4px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.list{display:grid; gap:12px}
hr.soft{border:0;border-top:1px solid var(--border);margin:18px 0}
.siteFooter{
  border-top:1px solid var(--border);
  padding:18px 0;
  margin-top:10px;
}
.footerBar{
  display:flex; justify-content:space-between;
  gap:12px; align-items:center;
  flex-wrap:wrap;
}
.footerBar a{
  color:var(--muted);
  font-size:14px;
}
.pill{
  display:flex; gap:8px; align-items:center;
  color:var(--muted);
  font-size:14px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(255,255,255,.18);
}
.heroTitle{margin-top:10px; text-align:center;}
.heroText{ margin-top:10px;}
.heroText.centered {
  max-width: 100%;   /* col-md-4 gibi genişlik (yaklaşık 4/12) */
  margin: 0 auto;   /* ortalamak için */
  text-align: center; /* metni ortala */
}

@media(max-width: 768px){
  .heroText.centered {
    max-width: 90%; /* mobilde kenarlardan fazla boşluk olmasın */
  }
}
.mediaRow{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
}
@media(min-width:980px){
  .mediaRow{grid-template-columns: 1.2fr .8fr}
}
.poster{
  width:100%;
  border-radius: var(--radius);
  border:1px solid var(--border);
  background: rgba(255,255,255,.18);
  overflow:hidden;
}
.poster img{width:100%; height:auto; display:block}
.embed{
  width:100%;
  aspect-ratio: 16/9;
  border:1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  background: rgba(255,255,255,.18);
}
.embed iframe{width:100%; height:100%; border:0}
blockquote{
  margin: 14px 0 0 0;
  padding: 14px 16px;
  border-left: 3px solid var(--border);
  background: rgba(255,255,255,.18);
  border-radius: 10px;
  color: var(--muted);
  line-height: 1.85;
}
.smallNote{font-size:13px;color:var(--muted)}
@media(max-width:760px){
  .menuBtn{display:inline-flex}
  .nav{display:none; width:100%; padding-bottom:10px}
  .nav.open{display:flex}
  .headerBar{flex-wrap:wrap}
  .brand{min-width:auto}
}