/* =========================================================
   TOKENS – Fresh Mint (green) + Orchid (purple), Light/Dark
========================================================= */
:root{
  --bg:#f8fafc; --surface:#ffffff; --muted:#eef2f7;
  --text:#0b0e0f; --text-muted:#4b5563; --border:#e6e9f0;

  --primary:#10b981; --primary-600:#059669; --primary-100:#d1fae5;
  --accent:#8b5cf6;  --accent-600:#7c3aed;  --accent-100:#ede9fe;
  --danger:#ef4444;  --container:1240px;

  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --shadow-1:0 6px 18px rgba(17,24,39,.08);
  --shadow-2:0 14px 32px rgba(17,24,39,.14);

  /* Formlar */
  --input-bg:#ffffff; --input-text:var(--text);
  --input-border:var(--border); --input-placeholder:#9aa6b2;
}
html[data-theme="dark"]{
  --bg:#0f1215; --surface:#0f141a; --muted:#141b20;
  --text:#f1f5f9; --text-muted:#9aa6b2; --border:#1f2732;

  --primary:#22c55e; --primary-600:#16a34a; --primary-100:#052e16;
  --accent:#a78bfa;  --accent-600:#8b5cf6;  --accent-100:#2e1065;

  --shadow-1:0 10px 28px rgba(0,0,0,.30);
  --shadow-2:0 18px 40px rgba(0,0,0,.40);

  --input-bg:#0f141a; --input-placeholder:#6b7280;
}

/* =========================================================
   BASE
========================================================= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{width:min(100%,var(--container)); margin-inline:auto; padding-inline:20px}

/* =========================================================
   HEADER
========================================================= */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:var(--surface); border-bottom:1px solid var(--border);
  backdrop-filter:blur(10px);
}
.site-header .container{
  min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{display:flex; align-items:center; gap:14px; text-decoration:none}
.logo-wrap{
  display:inline-flex; align-items:center; justify-content:center;
  height:52px; width:52px; background:#fff; border-radius:14px;
  box-shadow:0 2px 10px rgba(0,0,0,.06); border:1px solid rgba(15,23,42,.06); overflow:hidden;
}
.site-logo{display:block; height:42px; width:auto; object-fit:contain; image-rendering:-webkit-optimize-contrast}
.brand-text{font-weight:700; letter-spacing:.2px; color:#0f172a; white-space:nowrap}

.nav{margin-left:auto; display:flex; align-items:center; gap:18px; flex-wrap:nowrap}
.nav a{padding:8px 10px; border-radius:10px; color:var(--text-muted)}
.nav a:hover{background:var(--muted); color:var(--text)}
.cart-btn{background:var(--muted); border:1px solid var(--border); color:var(--text); font-weight:800; border-radius:12px; padding:10px 14px}
.btn{border:1px solid transparent; border-radius:12px; padding:10px 14px; cursor:pointer; font-weight:700}
.btn-secondary{background:transparent; color:var(--text); border:1px solid var(--border)}
.btn-secondary:hover{background:var(--muted)}
#themeToggle{min-width:40px}

/* Hamburger & Drawer */
.hamburger{
  display:none; margin-left:auto; width:42px; height:42px;
  border-radius:12px; border:1px solid var(--border); background:var(--muted);
  align-items:center; justify-content:center; flex-direction:column; gap:5px; cursor:pointer;
}
.hamburger span{width:20px; height:2px; background:var(--text); border-radius:2px; transition:.2s}
.hamburger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.is-open span:nth-child(2){opacity:0}
.hamburger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-drawer{
  position:fixed; inset:0 0 0 auto; width:min(80vw,340px);
  background:var(--surface); border-left:1px solid var(--border);
  transform:translateX(100%); transition:transform .25s ease; z-index:1050; box-shadow:var(--shadow-2);
}
.mobile-drawer.open{transform:translateX(0)}
.mobile-drawer .drawer-inner{padding:18px; display:flex; flex-direction:column; gap:12px}
.mobile-drawer a{padding:12px 10px; border-radius:10px; color:var(--text)}
.mobile-drawer a:hover{background:var(--muted)}
.mobile-drawer .drawer-cart{font-weight:800; background:var(--muted); border:1px solid var(--border)}
body.no-scroll{overflow:hidden}

/* =========================================================
   MAIN / CARDS
========================================================= */
.site-main{padding-block:24px}
.section{padding:28px 0}
.section .muted{color:var(--text-muted)}

.grid.products{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:28px}

.card.product{
  background:var(--surface); border:1px solid var(--border); border-radius:18px; overflow:hidden;
  box-shadow:var(--shadow-1); transition:transform .15s ease, box-shadow .2s ease;
  display:flex; flex-direction:column;
}
.card.product:hover{transform:translateY(-4px); box-shadow:var(--shadow-2)}
.card.product .media{position:relative; background:var(--muted); aspect-ratio:1/1}
.card.product .media img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.card.product:hover .media img{transform:scale(1.03)}
.card.product .badge{
  position:absolute; left:12px; bottom:12px; background:var(--text); color:var(--surface);
  font-weight:800; font-size:13px; padding:6px 8px; border-radius:8px;
}
.card.product .body{padding:14px 14px 16px; display:flex; flex-direction:column; gap:8px}
.card.product .brand{font-weight:800; color:var(--text-muted); font-size:14px}
.card.product .title{margin:0; font-size:18px; line-height:1.35; font-weight:900}
.card.product .desc{margin:0; color:var(--text-muted); font-size:14px}
.card.product .price-row{margin-top:6px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.card.product .price{display:flex; align-items:center; gap:10px}
.card.product .price .old{color:#9aa1ad; text-decoration:line-through; font-weight:700}
.card.product .price .new{color:var(--text); font-weight:900; font-size:18px}
.buy{display:flex; align-items:center; gap:10px}
.qty{display:flex; align-items:center; gap:6px; padding:6px; border-radius:999px; background:#fff; border:1px solid var(--border)}
.qty input{width:56px; text-align:center; border:0; outline:none; font-weight:800; font-size:15px; background:transparent; -moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.qty-step{width:32px; height:32px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--border); background:var(--muted); color:var(--text); font-size:18px; font-weight:800; cursor:pointer}
.qty-step:hover{background:#fff}
.btn-primary{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,var(--accent) 0%, #9b5cf8 40%, var(--primary) 100%);
  color:#fff; border:0; border-radius:12px; padding:10px 14px; font-weight:900;
  box-shadow:0 10px 22px rgba(124,58,237,.20);
}

/* =========================================================
   CART PAGE (yalnızca .cart-page alanı)
========================================================= */
.cart-page{max-width:1180px; margin:40px auto; padding:0 18px}
.cart-page .page-title{font-size:clamp(28px,4vw,42px); line-height:1.15; font-weight:900; letter-spacing:-.02em; margin:0 0 18px; color:var(--text)}
.cart-page .card{background:color-mix(in srgb, var(--surface) 92%, transparent); border:1px solid var(--border); border-radius:18px; padding:18px; box-shadow:var(--shadow-1); backdrop-filter:blur(6px)}
.cart-page .card + .card{margin-top:20px}
.cart-page .table-wrap{overflow:hidden; border-radius:14px; border:1px solid var(--border)}
.cart-page table{width:100%; border-collapse:separate; border-spacing:0; background:var(--surface); color:var(--text)}
.cart-page thead th{text-align:left; padding:16px 14px; font-weight:800; background:var(--muted); border-bottom:1px solid var(--border)}
.cart-page tbody td{padding:14px 14px; border-bottom:1px solid var(--border)}
.cart-page tbody tr:nth-child(odd){background:color-mix(in srgb, var(--muted) 55%, transparent)}
.cart-page tbody tr:hover{background:color-mix(in srgb, var(--muted) 80%, transparent)}
.cart-page tfoot th,.cart-page tfoot td{padding:16px 14px; font-weight:900; border-top:2px solid var(--border)}

.cart-page .checkout-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:16px}
.cart-page .col-12{grid-column:span 12}
.cart-page .col-6{grid-column:span 6}
.cart-page .col-4{grid-column:span 4}
.cart-page .col-8{grid-column:span 8}
@media (max-width:960px){
  .cart-page .checkout-grid{grid-template-columns:1fr}
  .cart-page .col-6,.cart-page .col-4,.cart-page .col-8{grid-column:1/-1}
}

.cart-page .field label{display:block; margin:0 0 8px; font-weight:800; color:var(--text)}
.cart-page .input,.cart-page select,.cart-page textarea{
  width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:12px;
  background:var(--surface); color:var(--text); outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.cart-page textarea{min-height:120px; resize:vertical}
.cart-page .input::placeholder,.cart-page textarea::placeholder{color:var(--input-placeholder)}
.cart-page .input:focus,.cart-page select:focus,.cart-page textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-100)}
.cart-page .pill-group{display:flex; flex-wrap:wrap; gap:10px}
.cart-page .pill{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); background:var(--muted); color:var(--text); padding:10px 12px; border-radius:999px; cursor:pointer; user-select:none; transition:background .15s ease, border-color .15s ease}
.cart-page .pill input{display:none}
.cart-page .pill:hover{background:color-mix(in srgb, var(--muted) 80%, transparent)}
.cart-page .pill.is-active{border-color:var(--accent); background:color-mix(in srgb, var(--accent-100) 65%, var(--muted))}
.cart-page .qty{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); background:var(--surface); border-radius:999px; padding:6px}
.cart-page .qty .btn-step{width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--muted); border:1px solid var(--border); font-weight:900; cursor:pointer}
.cart-page .qty input{width:64px; text-align:center; border:0; outline:0; background:transparent; font-weight:800; -moz-appearance:textfield}
.cart-page .qty input::-webkit-outer-spin-button,.cart-page .qty input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.cart-page .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid transparent; border-radius:12px; cursor:pointer; font-weight:900; padding:12px 16px; text-align:center; transition:transform .06s ease, filter .15s ease, background .15s ease}
.cart-page .btn:active{transform:translateY(1px)}
.cart-page .btn-primary{color:#fff; background:linear-gradient(135deg,var(--accent) 0%, #9b5cf8 40%, var(--primary) 100%); box-shadow:0 10px 22px rgba(124,58,237,.20)}
.cart-page .btn-primary:hover{filter:brightness(1.03)}
.cart-page .btn-secondary{color:var(--text); background:var(--muted); border-color:var(--border)}
.cart-page .btn-secondary:hover{filter:brightness(1.02)}
.cart-page .btn-danger{color:#fff; background:var(--danger); border-color:transparent}
.cart-page .actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px}
.cart-page .actions .btn{flex:1 1 240px}
@media (max-width:720px){
  .cart-page .actions{flex-direction:column}
  .cart-page .actions .btn{width:100%}
}
.cart-page .alert{background:#fff3cd; color:#8a6d3b; border:1px solid #ffecb5; padding:12px 14px; border-radius:12px; margin-bottom:14px}
.cart-page .section-title{margin:0 0 12px; font-size:clamp(18px,2.2vw,22px); font-weight:900; color:var(--text)}
.cart-page .muted{color:var(--text-muted); font-size:13px}
.cart-page .spacer{height:16px}

/* =========================================================
   FOOTER
========================================================= */
.site-footer{margin-top:36px; background:var(--surface); border-top:1px solid var(--border)}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; color:var(--text-muted)}
.footer-inner a{color:inherit}

/* =========================================================
   WHATSAPP FLOAT
========================================================= */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:1100;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,#25D366 0%,#1ebe57 100%);
  box-shadow:0 12px 28px rgba(37,211,102,.35), 0 2px 6px rgba(0,0,0,.12);
  border:0; transition:transform .12s ease, filter .2s ease;
}
.wa-float:hover{transform:translateY(-1px); filter:brightness(1.05)}
.wa-float:active{transform:translateY(0)}
html[data-theme="dark"] .wa-float{box-shadow:0 12px 28px rgba(37,211,102,.25), 0 2px 6px rgba(0,0,0,.4)}
@media (max-width:720px){ .wa-float{ right:14px; bottom:14px; width:54px; height:54px } }

/* =========================================================
   MOBIL TABBAR (APP-LIKE) — ikon üstte, yazı altta
========================================================= */
.mobile-tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:1050;
  background:var(--surface); border-top:1px solid var(--border); display:none;
}
.mobile-tabbar .tabbar-inner{
  max-width:var(--container); margin:0 auto; padding:6px 12px;
  display:flex; justify-content:space-between; align-items:center; gap:8px;
}
.mobile-tabbar a{
  flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; padding:10px 8px; border-radius:14px; color:var(--text-muted);
}
.mobile-tabbar a .ico{font-size:18px; line-height:1}
.mobile-tabbar a .lbl{font-size:12px; font-weight:700}
.mobile-tabbar a:hover{background:var(--muted); color:var(--text)}
.mobile-tabbar a.is-active{color:var(--text); background:var(--muted); font-weight:800}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:900px){
  /* Mobilde: masaüstü menü gizle, hamburger + tabbar göster */
  .desktop-nav{display:none}
  .hamburger{display:flex}
  .mobile-tabbar{display:block}
  .container{padding-inline:16px}
  .brand-text{display:none}
  body{padding-bottom:68px} /* içerik tabbarın altına kaçmasın */
}
@media (max-width:720px){
  .card.product .desc{display:none}
  .btn-primary{padding:10px 12px}
  .qty input{width:46px}
}
@media (min-width:901px){
  .desktop-nav{display:flex}
  .hamburger, .mobile-tabbar, #mobileDrawer{display:none}
}
   ========================= */
@media (min-width: 1100px){
  /* Header yüksekliği olsun, konumlandırmaya zemin hazırlayalım */
  .site-header .container{
    min-height: 108px;              /* daha tok duruş */
    position: relative;              /* brand'i ortalamak için referans */
  }

  /* Brand’i mutlak ortala (sol/sağ öğeler aynı kalır) */
  .site-header .brand{
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    display: flex; align-items: center; gap: 14px;
    pointer-events: none;            /* ortadaki alan link tıklamalarını engellemesin diye */
  }
  .site-header .brand a,
  .site-header .brand img,
  .site-header .brand .brand-text{
    pointer-events: auto;            /* sadece logo/link tıklanabilir kalsın */
  }

  /* Logo kabı ve logo ölçüsü – belirgin büyütme */
  .site-header .logo-wrap{
    height: 92px; width: 92px;       /* ~2x görünürlük */
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 8px 26px rgba(0,0,0,.10);
    padding: 10px;                   /* beyaz boşluk logoyu “premium” gösterir */
  }
  .site-header .site-logo{
    height: 72px; width: auto; object-fit: contain; display: block;
  }

  /* Markanın yazı kısmını da bir tık güçlendir */
  .site-header .brand-text{
    font-size: clamp(18px, 1.2vw, 22px);
    font-weight: 800;
    letter-spacing: .1px;
    white-space: nowrap;
  }

  /* Sağdaki eylemler (İletişim / Sepet / Giriş) sağda kalsın */
  .site-header .header-actions,
  .site-header .right,
  .site-header .nav-right{
    margin-left: auto;
  }
}

/* ============ (Opsiyonel) Scroll olunca kompaktlaşsın ============ */
@media (min-width: 1100px){
  .site-header.is-compact .container{ min-height: 72px; }
  .site-header.is-compact .brand{ transform: translate(-50%, -50%) scale(.82); }
  .site-header.is-compact .logo-wrap{ height: 68px; width: 68px; padding: 8px; }
  .site-header.is-compact .site-logo{ height: 52px; }
  .site-header.is-compact .brand-text{ font-size: 16px; }
}
/* ===== Superbrand (hero bar) ===== */
.superbrand{
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.superbrand .container{
  display:flex; align-items:center; justify-content:center;
  gap: 20px;
  min-height: 140px;                 /* büyük alan */
  padding: 16px 20px;
}

/* Büyük logo */
.superbrand-logo{
  height: 96px; width: auto; object-fit: contain; display:block;
  filter: drop-shadow(0 8px 26px rgba(0,0,0,.08));
}

/* Yazı */
.superbrand-text h1{
  margin:0;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: .2px;
}
.superbrand-text p{
  margin:6px 0 0;
  font-size: clamp(12px, 1.1vw, 14px);
  opacity:.7;
}

/* Menü ile görsel denge – mevcut header'a dokunmuyoruz */
.site-header .container{ min-height: 72px; }

/* Tablet/Mobil – hero’u kompaktlaştır */
@media (max-width: 992px){
  .superbrand .container{ min-height: 110px; gap:12px; }
  .superbrand-logo{ height: 72px; }
}
@media (max-width: 640px){
  .superbrand .container{ min-height: 88px; }
  .superbrand-logo{ height: 60px; }
  .superbrand-text p{ display:none; }  /* alt metni gizle – sıkışıklık olmasın */
}