:root{
  --bg:#181715;
  --bg2:#22201d;
  --panel:#2a2723;
  --cream:#f1eadf;
  --muted:#b8afa3;
  --bronze:#b8895a;
  --bronze2:#d2aa7d;
  --line:rgba(210,170,125,.18);
  --radius:24px;
}

/* RESET */
*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--cream);
  font-family:Inter,Arial,sans-serif;
  line-height:1.65;
}

img,
video{
  max-width:100%;
  display:block;
}

a{
  text-decoration:none;
  color:inherit;
}

.container{
  width:min(1180px,calc(100% - 40px));
  margin:auto;
}

/* =========================
   TOPBAR
========================= */

.topbar{
  background:#12110f;
  border-bottom:1px solid var(--line);
  font-size:.9rem;
  color:#d7cec3;
}

.topbar .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:9px 0;
}

/* =========================
   HEADER
========================= */

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(24,23,21,.96);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}

.nav{
  min-height:88px;
  display:flex;
  align-items:center;
  gap:28px;
}

.brand{
  display:flex;
  align-items:center;
  gap:13px;
  flex-shrink:0;
}

.brand img{
  width:56px;
  height:56px;
  object-fit:cover;
  border-radius:50%;
}

.brand strong{
  display:block;
  font-family:Georgia,serif;
  letter-spacing:.12em;
  font-size:1.35rem;
}

.brand small{
  display:block;
  font-size:.7rem;
  color:var(--muted);
  letter-spacing:.14em;
}

.nav-links{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:24px;
}

.nav-links a{
  font-weight:600;
  color:#ddd5cb;
  transition:.2s ease;
}

.nav-links a:hover{
  color:var(--bronze2);
}

.menu-btn{
  display:none;
  margin-left:auto;
  background:none;
  color:white;
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 12px;
}

/* =========================
   BUTTONS
========================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 20px;
  border-radius:999px;
  font-weight:700;
  border:1px solid transparent;
  transition:.2s ease;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-bronze{
  background:linear-gradient(
    135deg,
    var(--bronze2),
    var(--bronze)
  );
  color:#18130e;
}

.btn-outline{
  border-color:rgba(210,170,125,.42);
}

/* =========================
   ANA SAYFA HERO
========================= */

.hero{
  min-height:720px;
  display:flex;
  align-items:center;
  background:
    linear-gradient(
      90deg,
      rgba(24,23,21,.97) 0%,
      rgba(24,23,21,.80) 42%,
      rgba(24,23,21,.25) 70%,
      rgba(24,23,21,.05) 100%
    ),
    url('../images/home-hero.jpg') center/cover no-repeat;
}

.hero-content{
  max-width:760px;
  padding:100px 0;
}

.kicker{
  text-transform:uppercase;
  letter-spacing:.28em;
  color:var(--bronze2);
  font-size:.78rem;
  font-weight:700;
}

h1,
h2,
h3{
  font-family:Georgia,serif;
  line-height:1.06;
  margin:0;
}

.hero h1{
  font-size:clamp(3.5rem,8vw,7.4rem);
  margin:18px 0 24px;
}

.hero p{
  max-width:650px;
  color:#cec4b9;
  font-size:1.12rem;
}

.hero-actions,
.card-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:28px;
}

/* =========================
   GENEL SECTION
========================= */

.section{
  padding:90px 0;
}

.section.alt{
  background:var(--bg2);
}

.section-head{
  max-width:760px;
  margin-bottom:42px;
}

.section-head h2{
  font-size:clamp(2.4rem,5vw,4.4rem);
  margin:12px 0 18px;
}

.section-head p,
.card-body p,
.split p,
.contact-card p{
  color:var(--muted);
}

/* =========================
   GRID / KARTLAR
========================= */

.grid{
  display:grid;
  gap:24px;
}

.grid-2{
  grid-template-columns:repeat(2,1fr);
}

.service-card{
  background:linear-gradient(
    180deg,
    #292622,
    #302c27
  );
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}

.service-card .media{
  aspect-ratio:16/10;
  background:#111;
  overflow:hidden;
}

.service-card .media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.card-body{
  padding:28px;
}

.card-body h3{
  font-size:2rem;
}

/* =========================
   SPLIT SECTION
========================= */

.split{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:46px;
  align-items:center;
}

/* BURASI ÖNEMLİ:
   min-height kaldırıldı.
   Böylece video/fotoğraf altında siyah boşluk kalmaz.
*/

.visual{
  height:500px;
  border-radius:var(--radius);
  overflow:hidden;
  background:#111;
}

.visual img,
.visual video{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* =========================
   HİZMET LİSTESİ
========================= */

.list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px 18px;
  margin:26px 0;
}

.list div{
  padding:14px 0;
  border-bottom:1px solid var(--line);
}

/* =========================
   FEATURE STRIP
========================= */

.feature-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
}

.feature{
  background:var(--panel);
  padding:26px;
  text-align:center;
}

.feature strong{
  display:block;
  font-family:Georgia,serif;
  color:var(--bronze2);
  font-size:1.7rem;
}

/* =========================
   ALT SAYFA HERO
   ERKEK / KADIN / HAKKIMIZDA / İLETİŞİM
========================= */

/*
Eski hali:
min-height:470px
align-items:flex-end
padding-bottom:70px

Bu yüzden dev boşluk oluşuyordu.
*/

.page-hero{
  min-height:330px;

  display:flex;
  align-items:center;

  background:
    linear-gradient(
      90deg,
      rgba(24,23,21,.97) 0%,
      rgba(24,23,21,.88) 42%,
      rgba(24,23,21,.55) 65%,
      rgba(24,23,21,.25) 100%
    ),
    var(--page-bg) center/cover no-repeat;
}

.page-hero .container{
  padding:60px 0;
}

.page-hero h1{
  font-size:clamp(3rem,7vw,6rem);
  margin:12px 0 14px;
}

.page-hero p{
  max-width:700px;
  color:#cfc5ba;
  margin:0;
  font-size:1.05rem;
}

/* =========================
   MEDIA / VIDEO GALERİ
========================= */

.media-block{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:24px;
  align-items:stretch;
}

.media-main{
  height:480px;
  border-radius:var(--radius);
  overflow:hidden;
  background:#111;
}

.media-main video,
.media-main img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.media-side{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:24px;
  height:480px;
}

.media-side img,
.media-side video{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:var(--radius);
  overflow:hidden;
  background:#111;
}

.note{
  margin-top:18px;
  padding:18px 20px;
  background:rgba(184,137,90,.08);
  border:1px dashed rgba(210,170,125,.45);
  border-radius:16px;
}

/* =========================
   CTA
========================= */

.cta{
  padding:75px 0;
}

.cta-box{
  background:linear-gradient(
    135deg,
    #2b2723,
    #1e1c19
  );

  border:1px solid var(--line);
  border-radius:30px;

  padding:46px;

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
}

.cta-box h2{
  font-size:clamp(2rem,4vw,3.5rem);
  max-width:680px;
}

/* =========================
   İLETİŞİM
========================= */

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}

.contact-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:24px;
  padding:32px;
}

/* =========================
   FOOTER
========================= */

.footer{
  background:#12110f;
  border-top:1px solid var(--line);
  padding:55px 0 24px;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.4fr .8fr .8fr;
  gap:34px;
}

.footer-logo{
  width:76px;
  height:76px;
  object-fit:cover;
  border-radius:50%;
}

.footer ul{
  list-style:none;
  padding:0;
}

.footer li,
.footer p{
  color:var(--muted);
}

.copyright{
  border-top:1px solid var(--line);
  margin-top:34px;
  padding-top:20px;
  color:#91887f;
}

/* =========================
   WHATSAPP
========================= */

.whatsapp-float{
  position:fixed;
  right:22px;
  bottom:22px;

  width:58px;
  height:58px;

  border-radius:50%;

  background:#25D366;
  color:#fff;

  display:grid;
  place-items:center;

  font-size:1.5rem;

  z-index:90;
}

/* =========================
   ANİMASYON
========================= */

.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:.7s;
}

.reveal.show{
  opacity:1;
  transform:none;
}

/* =========================
   TABLET
========================= */

@media(max-width:980px){

  .nav-links{
    display:none;

    position:absolute;
    top:88px;
    left:20px;
    right:20px;

    flex-direction:column;

    background:#1d1b18;

    padding:20px;

    border:1px solid var(--line);
    border-radius:18px;
  }

  .nav-links.open{
    display:flex;
  }

  .menu-btn{
    display:block;
  }

  .desktop-cta{
    display:none;
  }

  .split,
  .media-block,
  .contact-grid{
    grid-template-columns:1fr;
  }

  .visual{
    height:460px;
  }

  .media-main{
    height:450px;
  }

  .media-side{
    height:auto;
    grid-template-columns:1fr 1fr;
    grid-template-rows:none;
  }

  .media-side img,
  .media-side video{
    height:300px;
  }

  .feature-strip{
    grid-template-columns:1fr 1fr;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr;
  }

}

/* =========================
   MOBİL
========================= */

@media(max-width:700px){

  .container{
    width:min(100% - 28px,1180px);
  }

  .topbar .container{
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
  }

  .brand span{
    display:none;
  }

  .nav{
    min-height:76px;
  }

  .hero{
    min-height:620px;

    background:
      linear-gradient(
        rgba(24,23,21,.72),
        rgba(24,23,21,.82)
      ),
      url('../images/home-hero.jpg') 68% center/cover no-repeat;
  }

  .hero-content{
    padding:80px 0;
  }

  .hero h1{
    font-size:clamp(3rem,14vw,5rem);
  }

  .section{
    padding:70px 0;
  }

  .grid-2{
    grid-template-columns:1fr;
  }

  .split{
    gap:30px;
  }

  .visual{
    height:360px;
  }

  .list{
    grid-template-columns:1fr;
  }

  /*
  Alt sayfa hero mobilde de gereksiz yüksek olmayacak
  */

  .page-hero{
    min-height:280px;
  }

  .page-hero .container{
    padding:45px 0;
  }

  .page-hero h1{
    font-size:clamp(2.8rem,14vw,4.6rem);
  }

  .media-main{
    height:320px;
  }

  .media-side{
    grid-template-columns:1fr;
  }

  .media-side img,
  .media-side video{
    height:280px;
  }

  .feature-strip,
  .footer-grid{
    grid-template-columns:1fr;
  }

  .cta{
    padding:60px 0;
  }

  .cta-box{
    flex-direction:column;
    align-items:flex-start;
    padding:32px;
  }

}