:root { --ecru:#F2E9E1; --coffee:#6B4226; --leaf:#2E7D32; --text:#2b2b2b; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--ecru);scroll-behavior:smooth}
a{color:var(--leaf);text-decoration:none}a:hover{text-decoration:underline}
.container{width:min(1100px,94%);margin:0 auto}
.header{position:sticky;top:0;z-index:10;background:rgba(242,233,225,.86);backdrop-filter:saturate(180%) blur(6px);border-bottom:1px solid rgba(0,0,0,.06)}
.header .inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--coffee)}
.nav a{margin-left:18px;font-weight:600;color:var(--coffee);opacity:.9}.nav a:hover{opacity:1}
.lang{display:flex;align-items:center;gap:8px}.lang select{background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:12px;padding:8px 10px;font-weight:600;color:var(--coffee)}

.hero{position:relative;min-height:72vh;display:grid;place-items:center;text-align:center;color:#fff}
.hero::before{content:"";position:absolute;inset:0;background-image:image-set(url('assets/husk_pile_1.webp') type('image/webp'), url('assets/husk_pile_1.jpg') type('image/jpeg'));background-position:center;background-size:cover;background-repeat:no-repeat;filter:saturate(.95) contrast(.95) brightness(.8)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.3) 30%,rgba(0,0,0,.55))}
.hero .content{position:relative;padding:70px 0}.hero h1{font-size:clamp(32px,6vw,54px);margin:0 0 10px;letter-spacing:.5px}.hero p{font-size:clamp(16px,2.6vw,19px);opacity:.95}

.section{padding:64px 0}.section h2{margin:0 0 12px;font-size:clamp(24px,4vw,34px);color:var(--coffee)}.section .sub{color:#5f5b57;margin-bottom:28px}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.card{background:#fff;border-radius:18px;padding:20px;box-shadow:0 6px 22px rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.04)}.card h3{margin:6px 0 8px;color:var(--leaf)}.card p{margin:0;color:#5b5148}
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center}@media(max-width:860px){.split{grid-template-columns:1fr}}
.img-frame{border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.12);border:1px solid rgba(0,0,0,.05)}.img-frame img{width:100%;height:auto;display:block}
.specs{margin-top:16px;border-radius:16px;overflow:hidden;border:1px solid rgba(0,0,0,.06)}.specs table{width:100%;border-collapse:collapse;background:#fff}
.specs th,.specs td{padding:12px 14px;border-bottom:1px solid #eee;text-align:left}.specs th{background:#f7f2ec;color:var(--coffee)}.specs tr:last-child td{border-bottom:none}
.badge{display:inline-block;padding:6px 10px;background:#e6efe6;color:var(--leaf);border-radius:999px;font-weight:700;font-size:12px;letter-spacing:.3px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.gallery img{width:100%;height:180px;object-fit:cover;border-radius:14px;box-shadow:0 8px 20px rgba(0,0,0,.08);border:1px solid rgba(0,0,0,.06)}
.about{background:linear-gradient(180deg,#fff,#f7f2ec)}.about p{color:#5a524a;max-width:70ch}

/* Portrait video cards */
.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.video-card{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.18);border:1px solid rgba(0,0,0,.06);background:#000}
.video-card video{width:100%;height:100%;object-fit:cover;display:block;background:#000}

.footer{background:#1e1b18;color:#d7cec7;padding:26px 0}.footer a{color:#c6e7c6}
.footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}.footer h4{margin:0 0 8px;color:#f5eee7}.footer p{margin:0;color:#59483a;line-height:1.6}.footer .copy{text-align:center;opacity:.8;margin-top:20px;font-size:14px}

/* WhatsApp floating button */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:30;background:#25D366;color:#fff;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.25);font-weight:700}
.wa-float:hover{filter:brightness(1.05);text-decoration:none}.wa-float svg{width:22px;height:22px;fill:#fff}

/* === Mobile menu + layout (paste at the end of styles.css) === */

/* Hamburger button (hidden on desktop) */
.menu-toggle{
  display:none;             /* shown under 760px */
  align-items:center; justify-content:center;
  gap:8px;
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  height:36px; padding:0 12px;
  color:var(--coffee); font-weight:700;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  cursor:pointer;
}
.menu-toggle .bars{width:18px;height:14px;position:relative;display:inline-block}
.menu-toggle .bars::before,
.menu-toggle .bars::after,
.menu-toggle .b{
  content:""; position:absolute; left:0; right:0;
  height:2px; background:var(--coffee); border-radius:2px;
}
.menu-toggle .b{ top:6px }
.menu-toggle .bars::before{ top:0 }
.menu-toggle .bars::after{ bottom:0 }

/* Mobile dropdown */
.nav-mobile{
  display:none;                 /* add .open to show */
  position:absolute;
  left:10px; right:10px; top:58px;
  background:rgba(242,233,225,.98);
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  padding:14px; z-index:20;
}
.nav-mobile a{
  display:block; padding:10px 12px; border-radius:10px;
  font-weight:700; color:var(--coffee);
}
.nav-mobile a:hover{ background:#fff }
.nav-mobile .nav-lang{ margin-top:8px; display:flex; align-items:center; gap:8px }

/* Dark overlay behind the dropdown */
.nav-backdrop{
  display:none;                 /* add .show to display */
  position:fixed; inset:0; background:rgba(0,0,0,.25); z-index:15;
}

/* ====== Responsive tweaks ====== */
@media (max-width: 760px){

  /* Header tighten + show hamburger, hide desktop nav/lang */
  .header .inner{ gap:10px }
  .menu-toggle{ display:flex }
  .nav{ display:none }
  .lang{ display:none }

  /* Center content blocks */
  .section h2,
  .section .sub{ text-align:center }
  .hero .content{ text-align:center; padding:56px 0 }

  /* One-column sections */
  .split{ grid-template-columns:1fr }
  .img-frame{ order:2 } /* görselle metni yer değiştir */

  /* Gallery & videos a little taller on small screens */
  .gallery img{ height:220px }
  .video-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px }
  .video-card{ border-radius:16px } /* hafif küçültme */

  /* WhatsApp button: ekranla çakışmasın */
  .wa-float{ right:14px; bottom:14px; padding:11px 13px }

  /* Mobile dropdown visibility toggles (via JS: add/remove .open/.show) */
  .nav-mobile.open{ display:block }
  .nav-backdrop.show{ display:block }
}

/* ===== Contact bölümünü mobilde düzelt ===== */

/* Kartı her ekranda ortala ve taşmaları engelle */
#contact .container{
  display:grid;
  justify-items:center;   /* başlık ve alt yazıyı da ortalar */
}
#contact-form{
  width:100%;
  max-width:680px;        /* kart genişliği (isteğe göre 560–760px) */
  margin:0 auto;          /* yatay ortalama */
  box-sizing:border-box;
}

/* Form alanları güvenli genişlikte kalsın */
#contact-form input,
#contact-form textarea{
  width:100%;
  box-sizing:border-box;
}

/* Mobil: iki kolonlu ilk satırı tek kolona düşür, her şeyi ortala */
@media (max-width: 760px){
  /* başlık & alt metin ortalı (genel mobil kuralın yoksa bunlar da yardımcı olur) */
  #contact .section h2,
  #contact .section .sub,
  #contact h2,
  #contact .sub{ text-align:center; }

  /* ilk satır (Name + Email) -> dikey stack */
  #contact-form > div:first-child{
    display:grid;
    grid-template-columns:1fr !important;  /* inline grid-template’i ez */
    gap:10px !important;
  }

  /* kart kenar boşlukları */
  #contact-form{ padding:16px; border-radius:14px; }

  /* WhatsApp butonu ile üst üste binmeyi azaltmak için biraz daha iç boşluk */
  #contact{ scroll-margin-top:70px; }
}

.contact-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:760px){ .contact-row{ grid-template-columns:1fr; } }