/* ========== THEME ========== */
:root{
  --bg:#F9F5F9;
  --text:#1f1f1f;
  --muted:#6b6b6b;
  --accent:#2f6f61;
  --accent-2:#C77A2B;
  --chip:#f1e9e2;
  --line:#ececec;
  --card:#ffffff;
  --shadow:0 8px 30px rgba(0,0,0,.06);

  /* Mint palet */
  --mint:#2f6f61;
  --mint-soft:#f3fbf6;
  --mint-border:#d7efe4;
  --mint-active:#49b59e;
  --mint-active-text:#fff;
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
}
a{color:var(--text);text-decoration:none}
a:hover{opacity:.85}
.container{max-width:1180px;margin:auto;padding:0 16px}

/* ========== TOPBAR ========== */
.topbar{
  background:repeating-linear-gradient(135deg,#EAF6EF 0 18px,#DCEEDC 18px 36px);
  color:#1f3d31;font-size:13px;
}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;padding:8px 0}
.topbar a{color:var(--mint)}

/* ========== HEADER ========== */
.header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 0;border-bottom:1px solid var(--line);gap:16px;
}
.brand{display:flex;align-items:center;gap:12px}
.logo{height:150px}
.brand-text h1{font-size:28px;margin:0;color:var(--mint);font-weight:800;letter-spacing:.2px}
.brand-text small{color:#5f7b70;font-size:16px}
.nav a{margin:0 10px}
.btn{background:var(--accent);color:#fff;padding:12px 18px;border-radius:12px;border:none;cursor:pointer;box-shadow:var(--shadow)}
.btn.small{padding:8px 12px;border-radius:10px}

/* ========== HERO ========== */
.hero{display:block;margin:28px 0}
.hero-card{
  background:linear-gradient(135deg,var(--mint-soft) 0%, var(--bg) 60%);
  border:1px solid var(--mint-border);
  border-radius:18px;padding:28px;box-shadow:var(--shadow);
  text-align:center;
}
.badge{display:inline-block;background:#EAF6EF;color:var(--mint);padding:6px 12px;border-radius:999px;font-size:12px}
.hero-card h2{color:var(--mint);white-space:nowrap;font-size:clamp(28px,5vw,56px);line-height:1.1;margin:.75rem 0 .5rem}
.hero-card p{color:#5f7b70;font-size:clamp(15px,1.8vw,18px)}
.hero-card .actions{display:flex;justify-content:center;gap:12px;margin-top:12px}
.hero-card .btn{background:var(--mint);border:1px solid var(--mint)}
.hero-card .btn.small{background:var(--mint-active);border-color:var(--mint-active)}
.hero-card .btn:hover{filter:brightness(1.06)}

/* ========== CHIP NAV (mint uyumlu) ========== */
.chipbar{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem .8rem;margin:16px auto 6px;align-items:center;width:100%}
.chip{
  appearance:none;border:1px solid var(--mint-border);cursor:pointer;
  padding:.55rem .95rem;border-radius:999px;background:var(--mint-soft);
  color:var(--mint);box-shadow:0 6px 18px rgba(0,0,0,.04);
  font-weight:600;font-size:.95rem;transition:transform .12s ease,border-color .15s;
}
.chip:hover{transform:translateY(-1px);border-color:var(--mint)}
.chip.active{background:var(--mint-active);color:var(--mint-active-text);border-color:var(--mint-active)}

/* ========== SEARCH ========== */
.searchbar{display:flex;gap:10px;margin:12px 0}
.searchbar input{flex:1;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#fff}

/* ========== PRODUCT GRID & CARDS ========== */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.card img{width:100%;height:210px;object-fit:cover}
.card .pad{padding:16px}
.card h3{margin:0}
.price{color:var(--accent-2);font-weight:800}

/* ========== KATEGORİ KARTLARI ========== */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px}
.cat-card{position:relative;display:block;aspect-ratio:16/9;border-radius:0;overflow:hidden;background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.08)}
.cat-card::before{content:"";position:absolute;inset:0;background:var(--cat-img, url('/assets/logo.jpeg')) center/cover no-repeat;border-radius:0}
.cat-card span,.cat-card::after{display:none}

/* ========== Üsttekiler hariç chipbar/tabs gizle (varsa) ========== */
.chipbar:not(:first-of-type), #app .chipbar, #app .tabs{display:none !important}

/* ========== RESPONSIVE ========== */
@media (max-width:900px){
  .nav{display:none}
  .chip{font-size:.9rem;padding:.5rem .85rem}
  .hero-card h2{white-space:normal;text-wrap:balance}
}

/* ========== FOOTER ========== */
.footer{text-align:center;padding:28px 0;margin-top:30px;border-top:1px solid var(--line);color:#7a7a7a}

/* ========== MOBİL SOLA YASLA (hamburgersiz görünüm de düzgün olsun) ========== */
@media (max-width: 768px){
  .container{ padding-left:12px !important; padding-right:12px !important; }
  .header{ display:flex !important; justify-content:flex-start !important; align-items:center; gap:10px; padding:12px 0 !important; }
  .brand{ margin:0 !important; justify-content:flex-start; gap:10px; }
  .brand-text{ text-align:left; }
  .brand-text h1{ margin:0; line-height:1.1; font-size:20px !important; }
  .brand-text small{ font-size:12px !important; color:#5f7b70; }
  .logo{ height:64px !important; width:auto; }
}
/* ========== PRODUCT DETAILS (İÇİNDEKİLER) ========== */
.card .icerik{ 
  margin-top:6px;
  border-top:1px solid var(--line);
}
.card .icerik summary{
  cursor:pointer;
  list-style:none;
  font-weight:700;
  color:var(--mint);
  padding:6px 0;
  display:flex; align-items:center; gap:6px;
}
.card .icerik summary::-webkit-details-marker{ display:none; }
.card .icerik summary::before{ content:"▸"; font-weight:900; }
.card .icerik[open] summary::before{ content:"▾"; }

.card .icerik ul{
  margin:6px 0 0 18px;
  padding:0 0 6px 0;
  color:#3a3a3a;
  font-size:.95rem; line-height:1.45;
}
.card .icerik ul li{ margin:.15rem 0; }

/* =========================
   >>> HAMBURGER & DRAWER (final) <<<
   (Bu bölüm EN SONA konmalı)
========================= */

/* Varsayılan: masaüstünde gizli */
.hamburger{
  display:none;
  width:44px; height:44px; padding:8px;
  border:0; border-radius:10px; background:transparent; cursor:pointer;
}

/* Drawer (soldan kayan panel) */
.chip-drawer{
  position:fixed; top:0; left:0; height:100dvh; width:min(86vw,360px);
  background:#f6fbf8; box-shadow:0 0 30px rgba(0,0,0,.15);
  transform:translateX(-100%); transition:transform .25s ease;
  padding:18px; z-index:1001; overflow-y:auto;
}
.chip-drawer.open{ transform:translateX(0); }

/* Drawer içeriği (chip’ler dikey) */
.chip-list{ display:flex; gap:12px; flex-direction:column; }

/* Arka plan */
.backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1000; }

/* Mobil/Tablet: hamburger görünür & 3 çizgi ALT ALTA */
@media (max-width:1024px){
  .header{ justify-content:flex-start; gap:12px; }
  .nav{ display:none; }
  .chipbar{ display:none; }                 /* yatay chipbar yerine drawer */

  .hamburger{
    display:inline-flex;                    /* göster */
    align-items:center; justify-content:center;
    flex-direction:column;                  /* ÇİZGİLER ALT ALTA */
    gap:6px;                                /* aralık */
    order:-1;                               /* solda dursun */
    margin-right:8px;
  }
}

/* Çizgiler (koyu yeşil, alt alta) */
.hamburger span,
.hamburger .bar{
  display:block;
  width:24px;
  height:2px;
  background:#1b4d3e;                       /* koyu yeşil */
  border-radius:2px;
  transition:transform .25s, opacity .25s;
}

/* Açıkken X animasyonu (opsiyonel) */
.hamburger.is-open span:nth-child(1),
.hamburger.is-open .bar:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.hamburger.is-open span:nth-child(2),
.hamburger.is-open .bar:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3),
.hamburger.is-open .bar:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }
.home-subtitle{
  margin: 6px 0 12px;
  font-size: 22px;
  font-weight: 800;
  color: var(--mint);
}