.container{max-width:1200px;margin:0 auto;padding:0 16px;}
.main-header{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:12px 0;}
.main-nav a{margin:0 8px;}
.brand-logo{height:40px}

.shop { padding: 28px 0 80px; }
.shop-controls { display:flex; gap:12px; align-items:center; margin-bottom:18px; }
.shop-controls input, .shop-controls select{
  padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px; font-size:14px; outline:none;
}
.shop-controls input{ flex:1; }

.product-grid{ display:grid; gap:20px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px){ .product-grid{ grid-template-columns: repeat(3, 1fr);} }
@media (max-width: 860px){  .product-grid{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 600px){  .product-grid{ grid-template-columns: 1fr;} }

.product-card{
  background:#fff; border:1px solid #eef0f3; border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  padding:14px; display:grid; gap:10px; transition:transform .2s ease, box-shadow .2s ease;
}
.product-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.12); }
.product-thumb{ width:100%; aspect-ratio: 1/1; object-fit:contain; border-radius:12px; background:#fafafa; }
.product-title{ font-weight:600; font-size:15px; min-height:28px; }
.product-price{ font-weight:700; font-size:16px; }
.product-meta{ color:#6b7280; font-size:12px; }
.btn-add{ margin-top:6px; padding:10px 12px; border-radius:10px; border:1px solid #636d85; background:transparent; color:#1f4358; font-weight:700; cursor:pointer; }
.btn-add:hover{ filter: brightness(1.08); }

/* Sepet çekmecesi */
.cart-drawer{
  position:fixed; inset:0 0 0 auto; width:min(420px, 92%);
  background:#fff; box-shadow:-10px 0 30px rgba(0,0,0,.18);
  transform: translateX(100%); transition: transform .3s ease; z-index:999; display:flex; flex-direction:column;
}
.cart-drawer.open{ transform: translateX(0); }
.cart-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .3s; z-index:998;
}
.cart-backdrop.show{ opacity:1; pointer-events:auto; }
.cart-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #eef0f3; }
.cart-items{ padding:10px 14px; display:flex; flex-direction:column; gap:12px; overflow:auto; flex:1 1 auto; min-height:0; }
.cart-item{ display:grid; grid-template-columns: 56px 1fr auto; gap:10px; align-items:center; }
.cart-item img{ width:56px; height:56px; object-fit:contain; background:#fafafa; border-radius:8px; }
.cart-item h4{ margin:0; font-size:14px; }
.qty{ display:inline-flex; align-items:center; gap:8px; border:1px solid #e5e7eb; border-radius:8px; padding:4px 6px; }
.qty button{ border:0; background:transparent; font-size:18px; cursor:pointer; padding:2px 6px; }
.remove{ background:transparent; border:0; color:#ef4444; cursor:pointer; }
/* alt kısım – iPhone çentik güvenli alanını da hesaba kat */
.cart-foot{
  border-top:1px solid #eef0f3;
  padding:12px 16px;
  display:grid;
  gap:10px;

  /* fallback */
  padding-bottom:12px;
  /* iOS safe-area (destek varsa bu geçerli olur) */
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  /* çok eski iOS için (opsiyonel) */
  /* padding-bottom:calc(12px + constant(safe-area-inset-bottom)); */
}
.btn-primary{ background:#111827; color:#fff; border:1px solid #111827; padding:12px 12px; border-radius:12px; font-weight:800; cursor:pointer; }
.checkout-note{ color:#6b7280; font-size:12px; }

.icon-btn.cart-btn{ display:inline-flex; align-items:center; gap:6px; }
.cart-badge{ background:#1f4358; color:#fff; font-weight:800; font-size:12px; padding:2px 6px; border-radius:999px; }

/* Scroll to top */
.scroll-top{
  position:fixed; bottom:100px; right:26px; width:48px; height:48px; border:none; border-radius:50%;
  background:#111; color:#fff; font-size:22px; line-height:1; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,.3);
  opacity:0; visibility:hidden; transition:opacity .3s, transform .3s; z-index:9998;
}
.scroll-top.show{ opacity:1; visibility:visible; }
.scroll-top:hover{ transform:translateY(-3px); }