/* ================================================
   layout.css — Header, Footer, Topbar, Grid
   ================================================ */

/* Topbar */
.topbar {
  background: linear-gradient(90deg, rgba(34,197,94,.16), rgba(34,197,94,.07));
  border-bottom: 1px solid rgba(16,185,129,.14);
}
.topbar .row {
  display:flex; gap:12px; align-items:center;
  justify-content:space-between; padding:9px 0;
}
.pills { display:flex; gap:10px; flex-wrap:wrap; }
.pill  {
  font-size:13px; padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.55); border:1px solid rgba(16,185,129,.18);
  display:flex; align-items:center; gap:6px;
}
.pill b { font-weight:800; }

/* Header */
.header {
  position:sticky; top:0; z-index:200;
  background:rgba(244,251,247,.82);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(15,23,42,.08);
  padding:13px 0;
}
.header .row {
  display:flex; align-items:center;
  justify-content:space-between; gap:16px;
}

/* Brand */
.brand { display:flex; align-items:center; gap:11px; min-width:220px; }
.brand-mark {
  width:44px; height:44px; border-radius:16px; flex-shrink:0;
  background: radial-gradient(circle at 30% 30%, #22c55e, rgba(59,130,246,.65));
  box-shadow: 0 10px 24px rgba(16,185,129,.24);
}
.brand-text .name { font-size:20px; font-weight:900; letter-spacing:-.2px; line-height:1.1; }
.brand-text .tag  { font-size:11px; color:var(--muted); }

/* Nav */
.nav { display:flex; align-items:center; gap:4px; }
.nav a {
  font-weight:700; font-size:14px; color:#243047;
  padding:9px 12px; border-radius:var(--r-md); transition:var(--ease);
}
.nav a:hover, .nav a.active {
  background:var(--primary-light); color:var(--primary);
}

/* Header actions */
.header-actions { display:flex; align-items:center; gap:9px; }
.icon-btn {
  display:flex; align-items:center; gap:7px;
  padding:9px 12px; border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  box-shadow:0 8px 20px rgba(2,6,23,.06);
  position:relative; transition:var(--ease);
  font-weight:700; font-size:14px; color:var(--text);
}
.icon-btn:hover { border-color:var(--primary); color:var(--primary); }
.cart-badge {
  min-width:20px; height:20px; border-radius:999px;
  background:rgba(34,197,94,.15);
  border:1px solid rgba(34,197,94,.35);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:900; color:#0f5132;
}
.btn-cta {
  padding:10px 16px; border-radius:14px;
  background:linear-gradient(180deg,#22c55e,#16a34a);
  color:#fff; border:none; font-weight:900; cursor:pointer;
  box-shadow:0 14px 30px rgba(34,197,94,.26);
  transition:var(--ease); font-size:14px;
}
.btn-cta:hover { filter:brightness(1.04); transform:translateY(-1px); }

/* Footer */
.footer {
  background:#0b1220; color:#e5e7eb;
  margin-top:72px; padding:52px 0 24px;
}
.footer-grid {
  display:grid; grid-template-columns:1.4fr 1fr 1fr;
  gap:32px; padding-bottom:36px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer h4 { font-size:14px; font-weight:800; margin-bottom:16px; letter-spacing:.2px; }
.footer-links { display:flex; flex-direction:column; gap:10px; }
.footer-links a { font-size:14px; color:#d1d5db; transition:color .2s; }
.footer-links a:hover { color:var(--primary); }
.footer-copy {
  padding-top:22px; text-align:center;
  font-size:13px; color:#64748b;
}

/* Float */
.float-wrap {
  position:fixed; right:18px; bottom:18px;
  display:flex; flex-direction:column; gap:10px; z-index:999;
}
.floatbtn {
  width:54px; height:54px; border-radius:18px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  box-shadow:0 18px 40px rgba(2,6,23,.18);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:var(--ease);
}
.floatbtn:hover { transform:scale(1.07); }
.floatbtn.wa  { background:linear-gradient(180deg,#25d366,#16a34a); border:none; }
.floatbtn.ai  { overflow:hidden; }

/* Toast */
#miniToast {
  position:fixed; right:18px; bottom:18px;
  padding:12px 16px; border-radius:var(--r-md);
  background:rgba(15,23,42,.94); color:#fff;
  font-size:14px; font-weight:700;
  box-shadow:var(--shadow-lg);
  transform:translateY(16px); opacity:0;
  transition:all .22s ease; z-index:99999; pointer-events:none;
}
#miniToast.show { opacity:1; transform:translateY(0); }

/* Grids */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }

@media (max-width:980px) {
  .nav { display:none; }
  .footer-grid { grid-template-columns:1fr; gap:24px; }
  .grid-3 { grid-template-columns:1fr; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px) {
  .grid-2,.grid-4 { grid-template-columns:1fr; }
  .pills { display:none; }
}

/* ── Mobil Responsive — Layout ── */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  /* Header */
  .header .row { gap: 10px; flex-wrap: wrap; }
  .brand-text .name { font-size: 16px; }
  .brand-text .tag { display: none; }
  .nav { display: none !important; }
  .btn-cta { padding: 8px 12px; font-size: 13px; }
  .icon-btn span { display: none; }

  /* Hamburger menü göster */
  .mobile-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--white);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: var(--ease);
  }
  .mobile-menu-btn:hover { background: var(--primary-light); }

  /* Mobile nav overlay */
  .mobile-nav {
    display: none;
    position: fixed; inset: 0; z-index: 9998;
    background: rgba(15,23,42,.5);
    backdrop-filter: blur(4px);
  }
  .mobile-nav.open { display: block; }
  .mobile-nav-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(320px, 90vw);
    background: var(--white);
    padding: 20px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(0.4,0,0.2,1);
    display: flex; flex-direction: column; gap: 8px;
  }
  .mobile-nav.open .mobile-nav-panel { transform: translateX(0); }
  .mobile-nav-panel a {
    display: block; padding: 14px 16px;
    border-radius: 12px;
    font-weight: 700; font-size: 16px;
    color: var(--text);
    border: 1px solid transparent;
    transition: var(--ease);
  }
  .mobile-nav-panel a:hover { background: var(--primary-light); color: var(--primary); border-color: rgba(5,150,105,.2); }
  .mobile-nav-close {
    align-self: flex-end;
    width: 36px; height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; margin-bottom: 8px;
  }

  /* Topbar */
  .topbar .row { flex-direction: column; gap: 6px; padding: 6px 0; }
  .pills { justify-content: center; }
  .pill { font-size: 12px; padding: 4px 8px; }

  /* Grid */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer { padding: 36px 0 20px; margin-top: 40px; }

  /* Genel */
  section { padding: 40px 0 !important; }
}

@media (max-width: 480px) {
  .brand-mark { width: 36px; height: 36px; }
  .float-wrap { right: 12px; bottom: 12px; }
  .floatbtn { width: 46px; height: 46px; }
  .btn-cta { padding: 7px 10px; font-size: 12px; }
}