/*
Theme Name: QR Menu Ticket
Theme URI: https://bugrasasirt.com.tr/
Author: Buğra Yazılım
Author URI: https://bugrasasirt.com.tr/
Description: Tamamen mobil öncelikli, "adisyon fişi" estetiğinde QR menü teması. Admin panelden ürün, görsel ve kategori yönetimi.
Version: 3.2.0
Requires at least: 5.8
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: qr-menu-premium
*/

:root{
  --paper:#FAFAF6;
  --paper-raised:#FFFFFF;
  --paper-alt:#F0EEE6;
  --ink:#201E1B;
  --ink-soft:#79766E;
  --ink-faint:#C7C3B8;
  --stamp:#C1432E;
  --stamp-deep:#96331F;
  --stamp-soft:rgba(193,67,46,.09);
  --mint:#4F7A5B;
  --line:rgba(32,30,27,.14);
  --line-soft:rgba(32,30,27,.08);
  --radius-sm:10px;
  --radius-md:16px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:'Inter',sans-serif;
  color:var(--ink);
  min-height:100vh;
  background:var(--paper);
}

img{max-width:100%;display:block}
button,input{font:inherit}
a{text-decoration:none;color:inherit}
.mono{font-family:'IBM Plex Mono',monospace}

.app{
  width:min(100%,540px);
  margin:0 auto;
  padding:0 0 48px;
}

/* ── Sticky top bar ── */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  background:rgba(250,250,246,.92);
  backdrop-filter:blur(10px);
  border-bottom:1.5px dashed var(--line);
}

.topbar .custom-logo-link{
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  min-width:44px;
  border-radius:var(--radius-sm);
  background:#fff;
  border:1px solid var(--line);
  overflow:hidden;
  flex:0 0 44px;
  padding:4px;
}
.topbar .custom-logo{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  padding:0 !important;
  margin:0 !important;
  border:none !important;
  box-shadow:none !important;
}
.brand-logo-fallback{
  width:44px;height:44px;min-width:44px;
  border-radius:var(--radius-sm);
  background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:4px;flex:0 0 44px;
}
.brand-logo-fallback img{width:100%;height:100%;object-fit:contain}

.topbar-id{
  flex:1;
  min-width:0;
}

.topbar-id h1{
  font-family:'Bebas Neue',sans-serif;
  font-weight:400;
  letter-spacing:.03em;
  font-size:23px;
  line-height:1;
  margin:0 0 3px;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.topbar-status{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:var(--ink-soft);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 0 3px rgba(79,122,91,.16);
  flex:0 0 6px;
}

.search-toggle{
  flex:0 0 auto;
  width:40px;height:40px;
  border-radius:50%;
  border:1px solid var(--line);
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  color:var(--ink);
  transition:background .15s ease,transform .1s ease;
}
.search-toggle svg{width:18px;height:18px}
.search-toggle:active{transform:scale(.92)}
.search-toggle.open{background:var(--stamp);color:#fff;border-color:var(--stamp)}

/* ── Search drawer ── */
.search-drawer{
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease;
  padding:0 16px;
}
.search-drawer.open{
  max-height:80px;
  padding:12px 16px 6px;
}
.search-box{position:relative}
.search-box input{
  width:100%;
  height:46px;
  border:1.5px solid var(--line);
  outline:none;
  background:#fff;
  border-radius:var(--radius-sm);
  padding:0 14px 0 42px;
  font-size:14.5px;
  color:var(--ink);
}
.search-box input:focus{border-color:var(--stamp)}
.search-box svg{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;opacity:.5;
}

/* ── Badge strip ── */
.badges-strip{
  display:flex;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
  padding:12px 16px 0;
}
.badges-strip::-webkit-scrollbar{display:none}
.badge{
  flex:0 0 auto;
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--ink-soft);
  border:1px dashed var(--line);
  border-radius:999px;
  padding:6px 11px;
  white-space:nowrap;
}
.hero-desc{
  margin:10px 16px 0;
  font-size:12.5px;
  color:var(--ink-soft);
  line-height:1.5;
}

/* ── Category tabs ── */
.tabs-wrap{
  position:sticky;
  top:69px;
  z-index:40;
  background:var(--paper);
  padding-top:14px;
}
.tabs{
  display:flex;
  gap:6px;
  overflow-x:auto;
  scrollbar-width:none;
  padding:0 16px 12px;
}
.tabs::-webkit-scrollbar{display:none}

.tab-btn{
  flex:0 0 auto;
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--ink-soft);
  background:transparent;
  border:none;
  border-bottom:2px dashed var(--line);
  padding:8px 12px 9px;
  cursor:pointer;
  white-space:nowrap;
  border-radius:2px;
  transition:.15s ease;
}
.tab-btn:active{transform:scale(.96)}
.tab-btn.active{
  color:#fff;
  background:var(--stamp);
  border-bottom:2px solid var(--stamp);
  border-radius:6px 6px 3px 3px;
}

/* ── Campaign banner ── */
.campaign-banner{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  margin:14px 16px 0;
  padding:14px 16px;
  border-radius:var(--radius-md);
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.07) 0 10px, transparent 10px 20px),
    var(--stamp);
  overflow:hidden;
}
.campaign-icon-img{
  width:56px;height:56px;min-width:56px;max-width:56px;max-height:56px;
  object-fit:cover;
  border-radius:10px;
  flex-shrink:0;
  border:2px solid rgba(255,255,255,.55);
}
.campaign-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.campaign-text{
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:13.5px;
  color:#fff;
  line-height:1.35;
}
.campaign-note{
  font-size:11px;
  font-weight:500;
  color:rgba(255,255,255,.8);
}
.campaign-stamp{
  position:absolute;
  right:-6px;
  top:-6px;
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.06em;
  color:#fff;
  border:1.5px dashed rgba(255,255,255,.7);
  border-radius:6px;
  padding:4px 8px;
  transform:rotate(8deg);
}

/* ── Sections ── */
.section{margin-top:26px;padding:0 16px}
.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.section-head h2{
  font-family:'Bebas Neue',sans-serif;
  font-weight:400;
  letter-spacing:.02em;
  font-size:22px;
  color:var(--ink);
  margin:0;
}
.section-sub{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  color:var(--ink-soft);
  white-space:nowrap;
}

/* ── Featured: swipeable ticket stubs ── */
.featured-track{
  display:flex;
  gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:2px 2px 6px;
  scrollbar-width:none;
  margin:0 -16px;
  padding-left:16px;
  padding-right:16px;
}
.featured-track::-webkit-scrollbar{display:none}

.ticket{
  scroll-snap-align:start;
  flex:0 0 78%;
  max-width:300px;
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
  position:relative;
}
.ticket-photo{
  position:relative;
  height:140px;
  background:var(--paper-alt);
}
.ticket-photo img{
  width:100%;height:100%;object-fit:cover;
}
.ticket-stamp{
  position:absolute;
  top:10px;right:10px;
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.05em;
  color:var(--stamp);
  background:#fff;
  border:1.5px dashed var(--stamp);
  border-radius:6px;
  padding:4px 7px;
  transform:rotate(-6deg);
}
.ticket-perf{
  height:14px;
  background-image:radial-gradient(circle at center, var(--paper) 0 4px, transparent 4.5px);
  background-size:16px 14px;
  background-repeat:repeat-x;
  background-position:center;
}
.ticket-body{padding:4px 14px 16px}
.ticket-kat{
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--mint);
  font-weight:700;
  margin-bottom:6px;
}
.ticket-row{
  display:flex;
  align-items:baseline;
  gap:6px;
}
.ticket-name{
  font-family:'Bebas Neue',sans-serif;
  font-weight:400;
  letter-spacing:.01em;
  font-size:19px;
  color:var(--ink);
  white-space:nowrap;
}
.ticket-dots{
  flex:1;
  min-width:10px;
  border-bottom:2px dotted var(--ink-faint);
  transform:translateY(-5px);
}
.ticket-price{
  font-weight:700;
  font-size:14.5px;
  color:var(--stamp);
  white-space:nowrap;
}
.ticket-desc{
  margin:6px 0 0;
  font-size:12.5px;
  color:var(--ink-soft);
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ── Menu list ── */
.menu-list{display:flex;flex-direction:column}
.row{
  display:flex;
  gap:13px;
  padding:14px 2px;
  border-bottom:1.5px dashed var(--line);
  align-items:flex-start;
  transition:background .15s ease;
}
.row:active{background:var(--paper-alt)}
.row:last-child{border-bottom:none}
.row-img{
  width:64px;height:64px;min-width:64px;
  object-fit:cover;
  border-radius:var(--radius-sm);
  background:var(--paper-alt);
  border:1px solid var(--line);
}
.row-body{flex:1;min-width:0}
.row-head{
  display:flex;
  align-items:baseline;
  gap:6px;
}
.row-name{
  font-family:'Bebas Neue',sans-serif;
  font-weight:400;
  letter-spacing:.01em;
  font-size:18px;
  margin:0;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.row-dots{
  flex:1;
  min-width:10px;
  border-bottom:2px dotted var(--ink-faint);
  transform:translateY(-5px);
}
.row-price{
  font-weight:700;
  font-size:14.5px;
  color:var(--stamp);
  white-space:nowrap;
  flex:0 0 auto;
}
.row-desc{
  margin:5px 0 7px;
  font-size:12.5px;
  color:var(--ink-soft);
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.row-cat{
  display:inline-block;
  font-size:10px;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--mint);
  text-transform:uppercase;
}

.empty-state{
  display:none;
  text-align:center;
  color:var(--ink-soft);
  padding:26px 8px 6px;
  font-size:13.5px;
}

.footer-note{
  margin-top:30px;
  text-align:center;
  font-size:11px;
  font-family:'IBM Plex Mono',monospace;
  color:var(--ink-faint);
  padding:14px 16px 0;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .search-drawer,.row,.search-toggle{transition:none}
  .featured-track{scroll-behavior:auto}
}

/* ── Larger screens: still usable, grid list ── */
@media (min-width:700px){
  .app{width:min(100%,880px)}
  .menu-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 22px;
  }
  .featured-track{margin:0;padding:2px 2px 6px}
  .ticket{flex:0 0 46%}
}

@media (max-width:360px){
  .topbar-id h1{font-size:20px}
  .row-name,.ticket-name{font-size:16.5px}
}

/* ── Öneri kutusu (FAB + bottom sheet) ── */
.suggest-fab{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:80;
  width:52px;height:52px;
  border-radius:50%;
  border:none;
  background:var(--stamp);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px rgba(193,67,46,.35);
  cursor:pointer;
  transition:transform .15s ease;
}
.suggest-fab svg{width:23px;height:23px}
.suggest-fab:active{transform:scale(.92)}

.suggest-overlay{
  position:fixed;
  inset:0;
  background:rgba(20,18,16,.42);
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease;
  z-index:90;
}
.suggest-overlay.open{opacity:1;visibility:visible}

.suggest-sheet{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:91;
  margin:0 auto;
  width:min(100%,540px);
  background:var(--paper-raised);
  border-radius:20px 20px 0 0;
  transform:translateY(100%);
  transition:transform .28s cubic-bezier(.32,.72,0,1);
  max-height:86vh;
  overflow-y:auto;
}
.suggest-sheet.open{transform:translateY(0)}

.suggest-perf{
  height:16px;
  background-image:radial-gradient(circle at center, var(--paper) 0 4.5px, transparent 5px);
  background-size:18px 16px;
  background-repeat:repeat-x;
  background-position:center;
}

.suggest-inner{padding:6px 20px 22px}

.suggest-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.suggest-head h3{
  font-family:'Bebas Neue',sans-serif;
  font-weight:400;
  letter-spacing:.02em;
  font-size:22px;
  margin:8px 0 0;
  color:var(--ink);
}
.suggest-close{
  width:32px;height:32px;
  border-radius:50%;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink-soft);
  font-size:14px;
  cursor:pointer;
  flex:0 0 auto;
}
.suggest-sub{
  margin:6px 0 16px;
  font-size:12.5px;
  color:var(--ink-soft);
}

#suggestForm{display:flex;flex-direction:column;gap:10px}
.suggest-honeypot{
  position:absolute !important;
  left:-9999px !important;
  width:1px;height:1px;
  opacity:0;
}
#suggestName,#suggestMessage{
  width:100%;
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--paper);
  padding:12px 14px;
  font-size:14px;
  color:var(--ink);
  font-family:'Inter',sans-serif;
  resize:vertical;
}
#suggestName:focus,#suggestMessage:focus{outline:none;border-color:var(--stamp)}

.suggest-submit{
  border:none;
  background:var(--stamp);
  color:#fff;
  font-family:'IBM Plex Mono',monospace;
  font-weight:600;
  font-size:13.5px;
  letter-spacing:.02em;
  border-radius:var(--radius-sm);
  padding:13px;
  cursor:pointer;
  transition:transform .1s ease,opacity .15s ease;
}
.suggest-submit:active{transform:scale(.98)}
.suggest-submit:disabled{opacity:.6;cursor:default}

.suggest-status{
  min-height:16px;
  font-size:12.5px;
  text-align:center;
}
.suggest-status.ok{color:var(--mint)}
.suggest-status.err{color:var(--stamp)}

@media (prefers-reduced-motion:reduce){
  .suggest-sheet,.suggest-overlay,.suggest-fab{transition:none}
}