:root{
  --line:#e5e7eb;
  --ink:#0f172a;
  --muted:#64748b;
  --open-bg:#ffe4e6;  --open-br:#fecdd3;
  --empty-bg:#dcfce7; --empty-br:#bbf7d0;
}
*{box-sizing:border-box}
body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial; color:var(--ink); margin:0; background:#f6f7fb}

.topbar{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10}
.container{max-width:1320px; margin:16px auto; padding:0 16px}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px}
.card{position:relative; border:1px solid var(--line); border-radius:18px; padding:18px 18px 52px; background:#fff; box-shadow:0 14px 36px rgba(0,0,0,.06); transition:transform .15s, box-shadow .15s, border-color .15s; text-decoration:none; color:inherit}
.card:hover{ transform:translateY(-3px); box-shadow:0 22px 48px rgba(0,0,0,.10); border-color:#d1d5db; }

.card.open { background:var(--open-bg);  border-color:var(--open-br); }
.card.empty{ background:var(--empty-bg); border-color:var(--empty-br); }

.title{display:flex; align-items:center; justify-content:space-between; margin:2px 0 8px}
.title b{font-size:20px}
.badge{font-size:12px; padding:4px 10px; border-radius:999px; background:#fff; border:1px solid var(--line)}
.meta{font-size:14px; color:var(--muted)}
.amount{font-size:30px; font-weight:800; margin-top:6px}
.elapsed{position:absolute; left:16px; bottom:14px; font-size:12px; color:#334155; background:#fff; border:1px solid #e2e8f0; padding:5px 10px; border-radius:999px; box-shadow:0 6px 18px rgba(0,0,0,.06)}

.paybar{display:flex; flex-wrap:wrap; gap:12px; align-items:stretch; margin-top:12px}
.paybar > form{flex:1 1 0; min-width:180px}
.paybar .btn{width:100%; height:48px; border-radius:12px; font-weight:700; border:1px solid var(--line); background:#fff}
.paybar .ok{background:#111827; color:#fff; border-color:#111827}
.paybar .payform{flex:1 1 100%; display:flex; flex-wrap:wrap; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px; max-width:100%}
.paybar .payform input,.paybar .payform select{height:44px; border:1px solid var(--line); border-radius:10px; padding:0 12px; flex:1 1 180px; min-width:160px}
.paybar .payform button{height:44px}

.login{display:grid; place-items:center; min-height:100vh}
.login-card{width:100%; max-width:440px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,.08)}
.login-card h2{margin:0 0 8px}
.login-card label{display:block; font-size:14px; margin-top:10px; color:var(--muted)}
.login-card input{width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line); margin-top:6px}
.btn.primary{width:100%; padding:12px 14px; margin-top:14px; border-radius:12px; border:0; background:#111827; color:#fff; font-weight:700}
.alert{background:#fee2e2; border:1px solid #fecaca; padding:10px 12px; border-radius:10px; color:#7f1d1d; margin:10px 0}
.topbar{
  display:flex; align-items:center; gap:14px;
  padding:14px 18px; background:#fff; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
}
.topbar .left{display:flex; align-items:center; gap:10px; flex:1}
.topbar .title{font-weight:700}
.topbar .right{display:flex; align-items:center; gap:10px; color:var(--muted)}

.btn{display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:0 14px; border-radius:10px; font-weight:700;
  border:1px solid var(--line); background:#fff; color:#0f172a; text-decoration:none; cursor:pointer}
.btn:hover{border-color:#cbd5e1; box-shadow:0 4px 14px rgba(0,0,0,.06)}
.btn.primary{background:#111827; color:#fff; border-color:#111827}
.btn.secondary{background:#f1f5f9; color:#0f172a; border-color:#e2e8f0}
.btn.secondary:hover{background:#e2e8f0; border-color:#cbd5e1}
.btn.ghost{background:#fff; color:#0f172a}
.btn.icon{gap:8px}
.paybar{display:grid; grid-template-columns:repeat(2, minmax(170px,1fr)); gap:12px; align-items:stretch; margin-top:12px}
@media (max-width:900px){ .paybar{grid-template-columns:1fr} }
.paybar .btn{width:100%; height:52px; border-radius:12px; font-weight:800}
.paybar .payform{grid-column:1 / -1}
/* İki sütun düzen */
.layout {
  display:grid;
  grid-template-columns: 30% 1fr;   /* sol %30, sağ %70 */
  gap:18px;
}
@media (max-width: 1100px){
  .layout { grid-template-columns: 1fr; }
}

/* Sağ panel: kategori sekmeleri ve ürün kartları */
.catbar {
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px;
}
.tab {
  display:inline-flex; align-items:center; height:36px; padding:0 12px;
  border-radius:999px; border:1px solid var(--line); background:#fff;
  text-decoration:none; color:#0f172a; font-weight:600; font-size:14px;
}
.tab.active { background:#111827; color:#fff; border-color:#111827; }

.products {
  display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:12px;
}
.product-card {
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px;
  text-decoration:none;
  display:flex; flex-direction:column; gap:8px; cursor:pointer;
  box-shadow:0 10px 22px rgba(0,0,0,.04); transition:transform .12s, box-shadow .12s, border-color .12s;
}
.product-card:hover { transform:translateY(-2px); border-color:#cbd5e1; box-shadow:0 16px 28px rgba(0,0,0,.08); }
.product-name{font-weight:700;color: black;}
.product-price{color:#334155; font-weight:700}
.product-add{margin-top:auto}
.product-add .btn{width:100%; height:40px; border-radius:10px; font-weight:700}

/* Footer */
.footer {
  margin-top: 40px;
  padding: 30px 16px;
  text-align: center;
  background: transparent;
}

.footer-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-logo {
  max-width: 200px;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .footer {
    padding: 20px 16px;
    margin-top: 30px;
  }
  
  .footer-logo {
    max-width: 150px;
  }
}

@media (max-width: 480px) {
  .footer {
    padding: 16px 12px;
    margin-top: 20px;
  }
  
  .footer-logo {
    max-width: 120px;
  }
}