*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--bg); color:var(--text);
  font-family:'Work Sans', sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,.display{ font-family:'Fraunces', serif; }
button{ font-family:inherit; }

/* ===== HEADER ===== */
header{ position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.header-inner{ max-width:1080px; margin:0 auto; padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{ display:flex; align-items:center; gap:10px; cursor:pointer; }
.brand-mark{ width:42px; height:42px; border-radius:11px; background:var(--bg2); box-shadow:0 2px 8px var(--shadow); display:flex; align-items:center; justify-content:center; overflow:hidden; padding:3px; }
.brand-mark img{ width:100%; height:100%; object-fit:contain; }
.brand-name{ font-family:'Fraunces',serif; font-size:19px; font-weight:600; }
.brand-tag{ font-size:11px; color:var(--text-dim); letter-spacing:.08em; text-transform:uppercase; }
.search-box{ display:flex; align-items:center; gap:8px; background:var(--bg3); border:1px solid var(--line); border-radius:100px; padding:9px 16px; flex:1; max-width:280px; }
.search-box input{ background:transparent; border:none; outline:none; color:var(--text); font-size:13px; width:100%; }
.search-box input::placeholder{ color:var(--muted); }

main{ max-width:1080px; margin:0 auto; padding:0 20px 80px; }

/* ===== İŞLETMEYE AİT GÖRSEL ALANI (HERO GALLERY) ===== */
.gallery-banner{ position:relative; margin-top:20px; border-radius:22px; overflow:hidden; aspect-ratio:16/8; box-shadow:0 10px 30px var(--shadow-color-lg); }
.gallery-slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.2s ease; }
.gallery-slide.active{ opacity:1; }
.gallery-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,14,10,0) 55%, rgba(20,14,10,0.55) 100%); }
.gallery-caption{ position:absolute; left:20px; bottom:16px; color:#fff; z-index:2; }
.gallery-caption .g1{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.85; }
.gallery-caption .g2{ font-family:'Fraunces',serif; font-size:19px; font-weight:600; margin-top:2px; }
.gallery-dots{ position:absolute; right:16px; bottom:18px; z-index:2; display:flex; gap:5px; }
.gallery-dots span{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.45); transition:.3s; }
.gallery-dots span.active{ background:#fff; width:14px; border-radius:4px; }

/* ===== HOME VIEW ===== */
.home-hero{ padding:34px 0 8px; text-align:center; }
.home-hero .hero-eyebrow{ color:var(--accent); font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; }
.home-hero h1{ font-size:clamp(28px,6vw,42px); margin-top:10px; font-weight:600; line-height:1.1; }
.home-hero p{ color:var(--text-dim); margin:12px auto 0; max-width:440px; font-size:14.5px; line-height:1.6; }

.cat-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:14px; margin:26px 0 10px; }
.cat-tile{ position:relative; aspect-ratio:1/0.95; border-radius:18px; overflow:hidden; cursor:pointer; box-shadow:0 4px 18px var(--shadow); transition:transform .25s ease, box-shadow .25s ease; }
.cat-tile:hover{ transform:translateY(-4px); box-shadow:0 10px 30px var(--shadow-color-lg); }
.cat-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.cat-tile:hover img{ transform:scale(1.08); }
.cat-tile-fallback{ position:absolute; inset:0; background:linear-gradient(135deg, var(--accent), var(--accent2)); }
.cat-tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,14,10,0) 45%, rgba(20,14,10,0.65) 100%); }
.cat-tile .cat-name{ position:absolute; left:12px; bottom:11px; z-index:1; color:#fff; font-family:'Fraunces',serif; font-weight:600; font-size:14.5px; transition:transform .25s ease; }
.cat-tile .cat-count{ position:absolute; left:12px; bottom:-1px; z-index:1; color:rgba(255,255,255,0.75); font-size:10px; transform:translateY(18px); opacity:0; transition:.25s; }
.cat-tile:hover .cat-count{ transform:translateY(-2px); opacity:1; }
.cat-tile:hover .cat-name{ transform:translateY(-14px); }

.about-strip{ margin-top:40px; padding:24px; border-radius:18px; background:var(--bg2); box-shadow:0 4px 18px var(--shadow); display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.about-strip h3{ font-size:16px; margin-bottom:6px; }
.about-strip p{ color:var(--text-dim); font-size:13px; line-height:1.6; max-width:560px; }
.about-strip .social{ display:flex; gap:10px; margin-left:auto; }
.about-strip .social a{ color:var(--text-dim); border:1px solid var(--line); border-radius:100px; padding:8px 16px; font-size:12.5px; text-decoration:none; transition:.2s; }
.about-strip .social a:hover{ border-color:var(--accent); color:var(--accent); }

/* ===== CATEGORY VIEW ===== */
#categoryView{ display:none; }
.cat-header{ display:flex; align-items:center; gap:14px; padding:26px 0 6px; }
.back-btn{ background:var(--bg2); box-shadow:0 4px 18px var(--shadow); width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-dim); flex-shrink:0; }
.back-btn:hover{ color:var(--accent); }
.cat-header h2{ font-size:25px; font-weight:600; }
.cat-header .count{ color:var(--text-dim); font-size:13px; margin-left:2px; }

.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:18px; margin-top:18px; }
.card{ background:var(--bg2); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; cursor:pointer; box-shadow:0 4px 18px var(--shadow); transition:transform .25s ease, box-shadow .25s ease; }
.card:hover{ transform:translateY(-4px); box-shadow:0 10px 30px var(--shadow-color-lg); }
.card-img{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--bg3); }
.card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.card:hover .card-img img{ transform:scale(1.08); }
.card-badge{ position:absolute; top:10px; left:10px; padding:4px 10px; border-radius:100px; font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
.badge-new{ background:var(--accent2); color:#fff; }
.badge-hot{ background:var(--accent); color:#fff; }
.badge-veg{ background:var(--olive); color:#fff; }
.card-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:7px; flex:1; }
.card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.card-name{ font-family:'Fraunces',serif; font-size:16.5px; font-weight:600; line-height:1.25; }
.card-price{ font-family:'Fraunces',serif; font-size:16px; font-weight:600; color:var(--accent); white-space:nowrap; }
.card-desc{ color:var(--text-dim); font-size:12.5px; line-height:1.55; flex:1; }
.allergen-row{ display:flex; gap:5px; flex-wrap:wrap; margin-top:2px; }
.allergen-chip{ display:flex; align-items:center; gap:4px; font-size:10px; color:var(--muted); border:1px solid var(--line); padding:3px 8px; border-radius:100px; background:var(--bg3); }
.allergen-chip.free{ color:var(--olive); border-color:color-mix(in srgb, var(--olive) 40%, transparent); }

/* ===== PRODUCT MODAL ===== */
#modalOverlay{ position:fixed; inset:0; background:rgba(20,14,10,0.45); backdrop-filter:blur(4px); display:none; align-items:flex-end; justify-content:center; z-index:60; }
#modalOverlay.show{ display:flex; }
.modal{ background:var(--bg2); width:100%; max-width:480px; border-radius:22px 22px 0 0; max-height:88vh; overflow-y:auto; animation:slideUp .3s ease; }
@media (min-width:640px){ #modalOverlay{ align-items:center; } .modal{ border-radius:20px; } }
@keyframes slideUp{ from{ transform:translateY(30px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
.modal-img{ position:relative; aspect-ratio:16/10; }
.modal-img img{ width:100%; height:100%; object-fit:cover; }
.modal-close{ position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; background:rgba(20,14,10,0.55); backdrop-filter:blur(6px); border:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; }
.modal-body{ padding:22px 24px 30px; }
.modal-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.modal-name{ font-family:'Fraunces',serif; font-size:22px; font-weight:600; }
.modal-price{ font-family:'Fraunces',serif; font-size:20px; font-weight:600; color:var(--accent); white-space:nowrap; }
.modal-desc{ color:var(--text-dim); font-size:13.5px; line-height:1.65; margin-top:10px; }
.modal-section-label{ font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin:20px 0 10px; }
.allergen-list{ display:flex; flex-wrap:wrap; gap:8px; }
.allergen-pill{ display:flex; align-items:center; gap:6px; font-size:12.5px; padding:7px 13px; border-radius:100px; background:var(--bg3); color:var(--text-dim); }

footer{ border-top:1px solid var(--line); padding:26px 20px; text-align:center; color:var(--muted); font-size:12px; }

@media (max-width:640px){
  .search-box{ display:none; }
  .about-strip .social{ margin-left:0; }
}