:root{
  --purple:#4b2f83;
  --green:#4f7a2a;
  --cream:#f6f2ea;
  --text:#1f1f1f;
  --card:#ffffff;
  --shadow: 0 10px 30px rgba(0,0,0,.10);
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);background:var(--cream)}
a{color:inherit;text-decoration:none}
.container{width:min(1100px, 92%);margin:0 auto}

.topbar{position:sticky;top:0;background:rgba(246,242,234,.92);backdrop-filter: blur(8px);border-bottom:1px solid rgba(0,0,0,.08);z-index:5}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:16px}
.brand{display:flex;align-items:center;gap:10px}
.brand__logo{width:48px;height:48px;object-fit:contain}
.brand__text{letter-spacing:.8px}
.nav{display:flex;gap:16px;flex-wrap:wrap}
.nav a{padding:8px 10px;border-radius:10px}
.nav a:hover{background:rgba(75,47,131,.10)}

.hero{
  min-height:64vh;
  display:grid;
  place-items:center;
  text-align:center;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25)),
    url('/assets/images/aronya-bg.jpg') center/cover no-repeat;
  color:#fff;
}
.hero__box{width:min(820px,92%);padding:34px;border-radius:20px;background:rgba(0,0,0,.25);box-shadow:var(--shadow)}
.hero h1{margin:0 0 8px;font-size:clamp(26px, 4vw, 44px)}
.hero p{margin:0 0 18px;font-size:clamp(14px, 2vw, 18px);opacity:.95}
.btn{
  display:inline-block;padding:12px 16px;border-radius:12px;
  background:var(--green);color:#fff;font-weight:600;
  box-shadow:var(--shadow)
}
.btn:hover{filter:brightness(1.05)}
.section{padding:36px 0}
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.grid-3{grid-template-columns:1fr}}
.card{
  background:var(--card);border-radius:18px;box-shadow:var(--shadow);
  overflow:hidden;border:1px solid rgba(0,0,0,.06)
}
.card__body{padding:14px}
.badge{display:inline-block;background:rgba(75,47,131,.12);color:var(--purple);padding:6px 10px;border-radius:999px;font-weight:600;font-size:12px}

.products{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:980px){.products{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.products{grid-template-columns:1fr}}
.product img{width:100%;height:170px;object-fit:cover}
.product .price{font-weight:800;color:var(--purple);margin-top:6px}

.footer{margin-top:40px;padding:20px 0;background:#fff;border-top:1px solid rgba(0,0,0,.08)}
.footer__inner{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.footer__right a{color:var(--purple)}

.form input,.form textarea{
  width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.15);background:#fff;
}
.form textarea{min-height:120px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:720px){.form .row{grid-template-columns:1fr}}




/* =========================
   MOBILE RESPONSIVE FIXES
   ========================= */

img { max-width: 100%; height: auto; display: block; }

.container { width: min(1100px, 92%); margin: 0 auto; }

/* Grid genel: mobilde tek kolon */
.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px){
  .grid-3 { grid-template-columns: 1fr; }
}

/* Kartlar */
.card { border-radius: 18px; overflow: hidden; }
.card__body { padding: 16px; }

/* HERO */
.hero { min-height: 42vh; padding: 28px 0; }
.hero__box { width: min(680px, 92%); padding: 16px; }
.hero__box h1 { font-size: clamp(26px, 5vw, 44px); line-height: 1.1; }
.hero__box p { font-size: 16px; }

/* NAV / HEADER mobil düzen */
.topbar__inner { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.nav { display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; }

@media (max-width: 700px){
  .brand__text { font-size: 16px; }
  .brand__logo { width: 40px; height: 40px; }
  .nav { width:100%; justify-content:flex-start; gap:10px; overflow:auto; padding-bottom:6px; }
  .nav a { white-space: nowrap; }
}

/* FORM mobil */
.form input, .form textarea, .form select { width:100%; box-sizing:border-box; }
.row { display:flex; gap:10px; }
@media (max-width: 700px){
  .row { flex-direction: column; }
}

/* Galeri görselleri mobilde düzgün kutu */
.products { display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px){
  .products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .products { grid-template-columns: 1fr; }
}
.product img { width:100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }



@media (max-width: 800px){
  .grid[style*="repeat(2,1fr)"]{ grid-template-columns: 1fr !important; }
}

/* GALER��� - MOB���L UYUMLU (SADE, SORUNSUZ) */
.products{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
}

@media (max-width: 900px){
  .products{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 520px){
  .products{ grid-template-columns:1fr; }
}

.card.product{
  border-radius:16px;
  overflow:hidden;
}

.card.product img{
  width:100%;
  height:auto;
  display:block;
}
.products img{ display:block !important; visibility:visible !important; opacity:1 !important; }


/* Neden Aronya Antalya? - ikonlu ���zellikler */
.features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 20px;
}

/* Tek tek kutular */
.feature-item {
  background: #fff;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

/* Mobil uyum */
@media (max-width: 992px) {
  .features {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .features {
    grid-template-columns: 1fr;
  }
}


.urun-mini-bilgi{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 12px;
  font-size:13px;
  opacity:.9;
}
.urun-mini-bilgi span{
  background: rgba(0,0,0,.05);
  padding:6px 10px;
  border-radius:999px;
}


.urun-detay{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  align-items:start;
}
.urun-detay__img img{
  width:100%;
  height:auto;
  border-radius:14px;
  display:block;
}
@media (max-width: 900px){
  .urun-detay{
    grid-template-columns: 1fr;
  }
}

.urun-mini-bilgi{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 12px;
  font-size:13px;
  opacity:.9;
}
.urun-mini-bilgi span{
  background: rgba(0,0,0,.05);
  padding:6px 10px;
  border-radius:999px;
}