:root {
  --bg:#f5f6f7;
  --bg-alt:#eceeef;
  --surface:#ffffff;
  --surface-alt:#f1f2f3;
  --accent:#c57029; /* karamelli sıcak ton açık tema */
  --accent-grad:linear-gradient(135deg,#d88634,#b45a16 60%,#7a3c11);
  --text:#2a2927;
  --text-dim:#676b6f;
  --danger:#cc3d38;
  --radius:14px;
  --radius-sm:6px;
  --shadow:0 4px 14px -3px rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.08);
  --ff-base:'Poppins',system-ui,sans-serif;
  --ff-display:'Playfair Display',serif;
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; font-family:var(--ff-base); background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }
body.theme-dark { background:linear-gradient(160deg,#fafbfb,#f0f2f3 55%,#e5e7e9); min-height:100dvh; }

h1,h2,h3 { font-family:var(--ff-display); margin:0 0 .6rem; letter-spacing:.5px; }
p { line-height:1.5; }

.app-header { display:flex; align-items:center; gap:1rem; padding:.75rem 1rem; background:rgba(255,255,255,.85); backdrop-filter:blur(14px); position:sticky; top:0; z-index:40; border-bottom:1px solid #dde1e4; }
.app-header.admin { position:static; }
.brand { display:flex; align-items:center; gap:.75rem; }
.logo { width:150px; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.brand h1 { font-size:1.4rem; background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

.search-area { flex:1; position:relative; max-width:480px; }
.search-area input { width:100%; padding:.7rem 2.2rem .7rem .9rem; border-radius:var(--radius-sm); border:1px solid #d2d6da; background:#fff; color:var(--text); font-size:.95rem; }
.search-area input:focus { outline:2px solid #c9a37e; }
.search-area button { position:absolute; right:.35rem; top:50%; translate:0 -50%; border:none; background:#e7eaed; color:#777; width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:1.1rem; }
.search-area button:hover { background:#d7dade; }

.category-bar { display:flex; gap:.5rem; overflow-x:auto; padding:.6rem 1rem .9rem; scrollbar-width:thin; }
.category-bar button { background:#ffffff; color:var(--text-dim); border:1px solid #d9dee2; padding:.55rem .95rem; border-radius:50px; cursor:pointer; font-size:.8rem; letter-spacing:.5px; text-transform:uppercase; font-weight:500; white-space:nowrap; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.category-bar button.active, .category-bar button:hover { background:var(--accent-grad); color:#fff; border-color:#b45a16; }

.menu-container { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; padding:1rem clamp(.75rem,2vw,2rem) 3rem; }
.product-card { background:var(--surface); border:1px solid #eaedf0; border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; position:relative; box-shadow:var(--shadow); animation:fadeIn .5s ease; }
.product-card:hover { box-shadow:0 6px 18px -6px rgba(0,0,0,.16), 0 2px 6px -2px rgba(0,0,0,.08); }
.product-card .img-wrapper { aspect-ratio:4/3; background:#f3f5f6; position:relative; overflow:hidden; }
.product-card img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; filter:contrast(1.03) saturate(1.08); }
.product-card:hover img { transform:scale(1.07); }
.product-card .badges { position:absolute; top:.5rem; left:.5rem; display:flex; gap:.4rem; flex-wrap:wrap; }
.badge { background:rgba(255,255,255,.85); padding:.25rem .55rem; font-size:.6rem; border-radius:40px; letter-spacing:.5px; text-transform:uppercase; border:1px solid rgba(0,0,0,.08); color:#6b4a30; backdrop-filter:blur(4px); }
.badge.hot { background:#ffe1d2; color:#b54714; }
.badge.cold { background:#d9ecff; color:#0a569e; }
.badge.new { background:#efe0ff; color:#67349e; }
.badge.popular { background:#ffefc9; color:#8c650c; }
.badge.special { background:#fff; color:#c57029; border:1px solid #e9c9a4; box-shadow:0 2px 6px -2px rgba(0,0,0,.12); }

.product-card .info { padding:.85rem .85rem 1rem; display:flex; flex-direction:column; flex:1; }
.product-card .title { font-size:1.05rem; margin:0 0 .35rem; font-weight:600; letter-spacing:.5px; }
.product-card .desc { font-size:.72rem; color:var(--text-dim); margin:0 0 .5rem; min-height:2.6em; }
.product-card .tags { display:flex; gap:.35rem; flex-wrap:wrap; margin:0 0 .65rem; }
.tag { font-size:.55rem; background:#f2f4f5; padding:.3rem .55rem; border-radius:40px; letter-spacing:.5px; text-transform:uppercase; border:1px solid #e1e5e8; color:#6a6e72; }
.product-card .bottom { margin-top:auto; display:flex; align-items:center; justify-content:space-between; }
.price { font-weight:600; font-size:1rem; background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.add-btn { background:#f5f7f8; border:1px solid #d7dee2; color:#5d4a3f; padding:.55rem .9rem; border-radius:var(--radius-sm); cursor:pointer; font-size:.75rem; font-weight:600; letter-spacing:.5px; transition:background .3s, color .3s; }
.add-btn:hover { background:#ebeef0; color:#3d2d23; }

.cart-button { position:relative; cursor:pointer; display:flex; align-items:center; justify-content:center; background:#ffffff; border:1px solid #d8dde0; width:46px; height:46px; border-radius:50%; box-shadow:0 2px 4px rgba(0,0,0,.08); }
.cart-button.pulse { animation: cartPulse .5s ease; }
@keyframes cartPulse { 0%{ transform:scale(1);} 40%{ transform:scale(1.15);} 100%{ transform:scale(1);} }
.cart-button:hover { background:#f2f5f7; }
.cart-count { position:absolute; top:-4px; right:-4px; background:var(--accent-grad); color:#fff; font-size:.65rem; padding:.25rem .4rem; border-radius:40px; line-height:1; font-weight:600; box-shadow:0 0 0 2px #ffffff; }

.cart-panel { position:fixed; top:0; right:-420px; width:380px; max-width:100%; height:100dvh; background:#ffffff; border-left:1px solid #dfe4e7; box-shadow:-4px 0 14px -2px rgba(0,0,0,.08); display:flex; flex-direction:column; z-index:70; transition:right .45s cubic-bezier(.65,.05,.36,1); }
.cart-panel.open { right:0; }
.cart-header { display:flex; align-items:center; justify-content:space-between; padding:1rem; background:#f5f6f7; border-bottom:1px solid #e1e5e8; }
.cart-items { flex:1; overflow:auto; padding:1rem; display:flex; flex-direction:column; gap:.75rem; background:#fafbfc; }
.cart-item { display:grid; grid-template-columns:48px 1fr auto; gap:.6rem; background:#ffffff; border:1px solid #e3e7ea; padding:.6rem .6rem; border-radius:var(--radius-sm); position:relative; }
.cart-item img { width:48px; height:48px; object-fit:cover; border-radius:8px; }
.cart-item h4 { margin:0 0 .2rem; font-size:.75rem; letter-spacing:.4px; }
.cart-item .meta { font-size:.6rem; color:var(--text-dim); }
.qty-control { display:flex; align-items:center; gap:.4rem; }
.qty-control button { width:26px; height:26px; background:#f4f6f7; border:1px solid #d3d8db; color:#5d4a3f; font-size:.8rem; border-radius:8px; cursor:pointer; }
.qty-control button:hover { background:#e6eaed; }
.remove-item { position:absolute; top:4px; right:4px; background:none; border:none; color:#999; cursor:pointer; font-size:1rem; }
.remove-item:hover { color:#c57029; }

.cart-summary { padding:1rem; border-top:1px solid #e1e5e8; background:#f5f6f7; display:flex; flex-direction:column; gap:.55rem; }
.cart-summary .row { display:flex; justify-content:space-between; font-size:.8rem; }
.cart-summary .row.total { font-size:.95rem; font-weight:600; margin-top:.3rem; border-top:1px dashed #3a2f29; padding-top:.5rem; }

.overlay { position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .4s; z-index:60; }
.overlay.show { opacity:1; pointer-events:auto; }

.modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:90; opacity:0; pointer-events:none; transition:opacity .4s; }
.modal.show { opacity:1; pointer-events:auto; }
.modal-content { width:min(560px,92%); background:#ffffff; border:1px solid #e1e5e8; border-radius:var(--radius); padding:1.2rem 1.2rem 1.6rem; position:relative; box-shadow:0 14px 40px -6px rgba(0,0,0,.18); }
.modal-content h2 { margin-top:0; }
.modal-content .close { position:absolute; right:.6rem; top:.6rem; background:none; border:none; font-size:1.3rem; color:#888; cursor:pointer; }
.modal-content .close:hover { color:#c57029; }
.order-form label { display:flex; flex-direction:column; font-size:.75rem; gap:.2rem; }
.order-form input, .order-form textarea, .order-form select { background:#ffffff; border:1px solid #d3d8db; color:var(--text); padding:.55rem .7rem; border-radius:var(--radius-sm); font:inherit; }
.order-form input:focus, .order-form textarea:focus { outline:2px solid #c9a37e; }
.order-form button { margin-top:.8rem; }

.primary { background:var(--accent-grad); border:1px solid #b45a16; color:#fff; font-weight:600; padding:.7rem 1.2rem; border-radius:var(--radius-sm); cursor:pointer; letter-spacing:.5px; font-size:.8rem; }
.primary:hover { filter:brightness(1.07); }
.secondary { background:#ffffff; border:1px solid #d3d8db; color:#5b5f63; font-weight:500; padding:.65rem 1.1rem; border-radius:var(--radius-sm); cursor:pointer; font-size:.75rem; }
.secondary:hover { background:#f2f5f7; }
.danger { background:#ffe5e4; border:1px solid #f3c4c2; color:#cc3d38; padding:.55rem .9rem; border-radius:var(--radius-sm); cursor:pointer; font-size:.7rem; font-weight:600; }
.danger:hover { background:#ffd1cf; }
.full { width:100%; }
.inline { display:inline-flex; align-items:center; gap:.4rem; font-size:.65rem; }
.small { font-size:.65rem; color:var(--text-dim); }

/* ADMIN */
.admin-layout .admin-nav { display:flex; gap:.5rem; }
.admin-nav button { background:#ffffff; border:1px solid #d6dbdf; color:#5c5f62; padding:.55rem .9rem; border-radius:var(--radius-sm); cursor:pointer; font-size:.7rem; font-weight:600; letter-spacing:.5px; }
.admin-nav button.active, .admin-nav button:hover { background:var(--accent-grad); color:#fff; border-color:#b45a16; }
.admin-content { padding:1rem clamp(.75rem,2vw,2rem) 2.5rem; display:grid; gap:1.5rem; }
.panel { display:none; }
.panel.active { display:block; animation:fadeIn .4s ease; }
.form-grid { display:grid; gap:.9rem; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); align-items:start; }
.product-form textarea { resize:vertical; }
.card { background:#ffffff; border:1px solid #e1e5e8; padding:1rem; border-radius:var(--radius); box-shadow:var(--shadow); }
.list { display:flex; flex-direction:column; gap:.5rem; }
.item-row { display:flex; align-items:center; justify-content:space-between; gap:.75rem; background:#ffffff; border:1px solid #e0e4e7; padding:.6rem .75rem; border-radius:var(--radius-sm); }
.item-row .title { font-size:.8rem; font-weight:500; }
.actions { display:flex; gap:.5rem; }
.actions button { background:#ffffff; border:1px solid #d4d9dc; color:#5d5f62; padding:.45rem .7rem; border-radius:var(--radius-sm); cursor:pointer; font-size:.65rem; }
.actions button:hover { background:#f0f3f5; }
.options-group { display:flex; flex-direction:column; gap:.4rem; background:#f5f6f7; border:1px solid #e1e5e8; padding:.7rem .8rem .9rem; border-radius:var(--radius-sm); grid-column:1/-1; }
.options-group .group-title { font-size:.65rem; text-transform:uppercase; letter-spacing:.5px; color:#818689; }

input,textarea,select { font:inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline:2px solid #c9a37e; outline-offset:2px; }

/* UTIL */
.fade-enter { animation:fadeIn .4s ease; }
@keyframes fadeIn { from { opacity:0; translate:0 4px;} to { opacity:1; translate:0 0;} }

/* Responsive tweaks */
@media (max-width: 860px) {
  .menu-container { padding-right:1rem; }
  .cart-panel { width:100%; }
}
@media (max-width:600px){
  .brand h1 { display:none; }
  .search-area { max-width:100%; }
  .app-header { padding:.6rem .75rem; }
  .menu-container { grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); }
}