:root{
  --gold:#d4af37;
  --dark:#1c1c1c;
  --light:#fff;
  --text:#2b2b2b;
}

body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:var(--light);color:var(--text);}
.navbar{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:15px 40px;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,0.05);}
.navbar .logo img{height:48px;}
.navbar ul{list-style:none;display:flex;margin:0;padding:0;align-items:center;gap:6px;}
.navbar ul li{margin-left:25px;}
.navbar ul li a{
  text-decoration:none;
  color:var(--text);
  font-weight:500;
  transition:color .25s ease, transform .2s ease;
}
.navbar ul li a:hover{
  color:var(--gold);
  transform:translateY(-2px);
}
.hamburger{display:none;flex-direction:column;cursor:pointer;}
.hamburger span{height:3px;width:25px;background:#2b2b2b;margin:4px 0;border-radius:2px;transition:0.3s;}

/* smoother mobile nav open/close */
@media(max-width:768px){
    .hamburger{display:flex;}
    .navbar ul{flex-direction:column;display:block;max-height:0;overflow:hidden;width:100%;background:#fff;transition:max-height .35s ease;padding:0;}
    .navbar ul.active{max-height:420px;}
    .navbar ul li{margin:15px 0;text-align:center;}
}

header{background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),url('images/bina-cephe.webp') center/cover no-repeat;color:#fff;padding:140px 20px;text-align:center;} 
.hero-content h1{
  font-size:48px;
  margin-bottom:15px;
  animation: slideInLeft .9s ease both;
}
.hero-content p{
  font-size:20px;
  animation: slideInRight .9s ease .12s both;
}

section{max-width:1100px;margin:80px auto;padding:0 20px;}
h2{color:var(--gold);margin-bottom:20px;}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:25px;}
.box{
  background:#fff;
  padding:25px;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  transition:transform .3s,box-shadow .3s;
  will-change: transform;
}
.box:hover{
  transform:translateY(-6px) scale(1.01);
  box-shadow:0 16px 40px rgba(0,0,0,.12);
}
.box.fade-in.appear{ animation: slideInUp .7s ease both; }

.gallery-container{display:flex;flex-wrap:wrap;gap:15px;justify-content:center;}
.gallery-container img{
  width:200px;
  border-radius:10px;
  transition:transform .35s ease, box-shadow .35s ease, opacity .6s ease;
  opacity:0;
  transform:scale(.98);
}
.gallery-container img.fade-in.appear{
  opacity:1;
  transform:scale(1);
  animation: zoomIn .6s ease both;
}
.gallery-container img:hover{
  transform:scale(1.05);
  box-shadow:0 10px 20px rgba(0,0,0,0.2);
}

.contact-box{background:#fff;padding:20px;border-radius:10px;box-shadow:0 5px 15px rgba(0,0,0,.1);}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.fade-in{
  opacity:0;
  transform:translateY(20px);
  transition:all 1s ease;
}
.fade-in.appear{
  opacity:1;
  transform:translateY(0);
  animation: fadeIn .7s ease both;
}

footer{background:#111;color:#fff;text-align:center;padding:40px 20px;}

@media(max-width:768px){ /* Mobile nav handled above for smooth open/close */ }
.hero-alt {
  position: relative;
  min-height: 320px; /* gri alanın yüksekliği */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-alt::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url("images/bina-cephe.webp") center/cover no-repeat;
  z-index: 0;
  background-size: cover;
  background-position: center;
}

/* %50 şeffaf overlay (kept for backward compat) */
.hero-alt-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.0);
  z-index: 1;
}

/* Optional utility class to force bina-cephe background on any block (add .gri-alan to element) */
.gri-alan::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("images/bina-cephe.webp") center / cover no-repeat;
  z-index: 0;
}

/* İçerik */
.hero-alt-content {
  position: relative;
  z-index: 2;
  color: #fff;
  text-align: center;
  animation: fadeIn 1.5s ease-in-out;
}
/* Gri alan yardımcı sınıfı: yalnızca .gri-alan uygulanan elementler arka plana sahip olur */
.gri-alan {
  position: relative;
  overflow: hidden;
}
/* bina-cephe.webp + %50 şeffaflık — SADECE .gri-alan için */
.gri-alan::before {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("images/bina-cephe.webp") center / cover no-repeat;
  z-index: 0;
  background-size: cover;
}

/* içerik üstte kalsın */
section > *,
.page-title > *,
.sub-header > *,
.content-header > * {
  position: relative;
  z-index: 2;
}
/* Metinlerin arka planını temizle */
section p,
section h1,
section h2,
section h3,
section h4,
section div,
.section-content,
.content,
.box {
  background: transparent !important;
}
.gallery {
  padding: 80px 20px;
  background: #fff;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.gallery-grid img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.15);
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.gallery img {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}