:root{
  --bg:#ffffff;
  --ink:#121212;
  --muted:#5b5b5b;
  --line:#e9e4dc;
  --sand:#ead7c3;
  --card:#fbfaf8;
  --radius:18px;
  --max:1060px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; height:auto; }

/* Containers */
.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 16px;
}

/* Header */
.topbar{
  background:var(--sand);
  border-bottom:1px solid rgba(0,0,0,.06);
  position: sticky; /* mobilde üstte kalsın */
  top: 0;
  z-index: 60;
}

.topbar-wrap{
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:180px;
}

.brand img{
  height:42px;
  width:auto;
}

/* Desktop nav */
.nav-list{
  list-style:none;
  display:flex;
  gap:22px;
  padding:0;
  margin:0;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.nav-link{
  font-size:14px;
  color:#2a2a2a;
  padding:8px 10px;
  border-radius:999px;
  transition: background .15s ease;
}

.nav-link:hover{ background:rgba(255,255,255,.55); }
.nav-link.is-active{ background:rgba(255,255,255,.70); }

/* ✅ Hamburger (mobil) */
.hamburger{
  display:none;              /* desktop'ta görünmesin */
  width:44px;
  height:44px;
  border:0;
  border-radius:12px;
  background:rgba(255,255,255,.55);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:10px;
}

.hamburger-line{
  display:block;
  width:20px;
  height:2px;
  background:#2a2a2a;
  border-radius:999px;
  transition:transform .18s ease, opacity .18s ease;
}

/* X animasyonu */
.hamburger.is-open .hamburger-line:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}
.hamburger.is-open .hamburger-line:nth-child(2){
  opacity:0;
}
.hamburger.is-open .hamburger-line:nth-child(3){
  transform: translateY(-7px) rotate(-45deg);
}

/* ✅ Mobil nav (açılır) */
.nav-mobile{
  display:none;              /* desktop'ta kapalı */
  border-top:1px solid rgba(0,0,0,.06);
  background:var(--sand);
}

.nav-mobile.is-open{
  display:block;
}

.mobile-list{
  list-style:none;
  padding:10px 16px 16px;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.mobile-link{
  display:block;
  padding:12px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.55);
  color:#2a2a2a;
  font-size:15px;
}

.mobile-link.is-active{
  background:rgba(255,255,255,.75);
}

/* Hero */
.hero{
  padding:44px 0 22px;
  text-align:center;
}

.hero-title{
  font-family:"Playfair Display",serif;
  font-weight:600;
  letter-spacing:-.4px;
  font-size:clamp(30px,4vw,52px);
  line-height:1.1;
  margin:0 0 16px;
}

.hero-text{
  max-width:860px;
  margin:0 auto 18px;
  color:var(--muted);
  font-size:15.5px;
}

.hero-media{
  margin:24px auto 0;
  max-width:840px;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.10);
  background:#f3f1ed;
}

/* Sections */
.section{ padding:34px 0; }

.grid-2{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:28px;
  align-items:center;
}

.grid-2.reverse{
  grid-template-columns: .9fr 1.1fr;
}

.section-title{
  font-family:"Playfair Display",serif;
  font-weight:600;
  font-size:clamp(26px,3vw,42px);
  margin:0 0 10px;
}

.text{
  color:var(--muted);
  font-size:15.5px;
}

.card-img{
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--card);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}

/* Footer */
.footer{
  border-top:1px solid var(--line);
  margin-top:10px;
  padding:18px 0 26px;
  color:#777;
  font-size:13px;
  text-align:center;
}

.footer-wrap{ padding:0 16px; }
.footer p{ margin:6px 0 0; }

/* WhatsApp bubble */
.wa{
  position:fixed;
  right:18px;
  bottom:18px;
  width:56px;
  height:56px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#25D366;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  z-index:50;
  color:#fff; /* svg currentColor için */
}

/* Responsive */
@media (max-width: 880px){
  .grid-2, .grid-2.reverse{ grid-template-columns: 1fr; }

  /* ✅ mobilde desktop menüyü kapat, hamburgeri aç */
  .nav-desktop{ display:none; }
  .hamburger{ display:flex; }

  /* logo biraz küçülsün */
  .brand{ min-width:auto; }
  .brand img{ height:36px; }

  /* header tek satır gibi dursun */
  .topbar-wrap{
    flex-direction:row;
    padding:12px 16px;
  }
}