/* ============================================================
   marketing.css — Shared stylesheet for the marketing site
   Palette: "Revitrino" — cobalt + charcoal + a single acid-yellow
   accent, used sparingly (see the small-badge/dot rules below —
   never as a large fill or body text color, since it's too
   low-contrast on white for anything but a small dark-on-yellow
   shape). This is the same identity applied to the app shell's own
   nav (see style.css's scoped .nav copy for index.html/duzenle).
   ============================================================ */

:root {
  --cobalt:      #2F5FFF;  /* primary accent — CTAs, links, focus  */
  --cobalt-dark: #264ED1;  /* hover/pressed state for the above    */
  --yellow:      #EEFF3C;  /* secondary accent — small badges/dots
                               only, always with dark (--ink) content
                               on top; never a large fill or text
                               color, it's too light-on-light        */
  --ink:         #16161A;  /* headings, body text                  */
  --ink-deep:    #0E1030;  /* dark panels — cta panel, footer, the
                               "after" plaque; a cobalt-tinted near-
                               black rather than flat gray, so dark
                               sections still read as this brand's,
                               not generic dark mode                 */
  --ink-muted:   #6b6b76;  /* secondary/muted text                 */
  --bg:          #ffffff;  /* page background                      */
  --bg-alt:      #f5f6fb;  /* panel / alt-section background       */
  --border:      #e4e4ec;
  --danger:      #b3261e;  /* form validation errors               */
  --success:     #2f6f4e;  /* fake success states (no backend yet)  */

  --radius:      14px;
  --radius-sm:   9px;

  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 3px;
}

.container { max-width: 1120px; margin: 0 auto; padding: 0 1.75rem; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cobalt-dark);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::before { content: ''; width: 22px; height: 1.5px; background: var(--cobalt); display: inline-block; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
em { font-style: normal; font-weight: 700; color: var(--cobalt); }

/* ── Nav ── */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.75rem; max-width: 1120px; margin: 0 auto;
}
.logo {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.3rem; color: var(--ink);
  display: inline-flex; align-items: baseline; gap: 0.5rem;
}
/* The signature mark: a small acid-yellow dot, repeated wherever the
   brand needs a "this is the moment" beat — the logo's own full stop,
   the numbered steps, the before/after hinge, the feature checkmarks.
   One idea, used consistently, instead of the accent color appearing
   in a dozen unrelated places. */
.logo .dot { font-style: normal; color: var(--yellow); font-size: 1.6rem; line-height: 0; }

.nav-links { display: flex; align-items: center; gap: 1.75rem; list-style: none; }
.nav-links a {
  font-size: 0.9rem; font-weight: 600; color: var(--ink-muted);
  padding-bottom: 3px; border-bottom: 1.5px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--cobalt-dark); border-color: var(--cobalt); }

/* Hidden until the session check resolves, so a logged-in visitor
   never sees "Giriş Yap / Kayıt Ol" flash before it swaps to
   "Çalışma Alanım" — an absent element for a moment reads as far less
   jarring than briefly-wrong content. */
.nav-auth-link { visibility: hidden; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px; height: 34px;
  background: none; border: none; cursor: pointer;
  padding: 0;
}
.nav-toggle-bar {
  width: 100%; height: 2px;
  background: var(--ink);
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.35rem; border-radius: 100px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.88rem;
  cursor: pointer; border: 1.5px solid transparent;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
/* Nav CTAs and "Çıkış Yap" use plain unscoped .btn sizing, which
   measures ~40px tall — under the 44px touch-target minimum. Scoped
   rather than changed at the base .btn level, since several existing
   card-scoped overrides (.business-card-btn, .contact-card .btn-primary,
   etc.) don't set their own line-height and inherit the base's — an
   explicit line-height there rippled into shrinking THOSE buttons
   instead, discovered by re-measuring after trying that first. */
.nav-menu > .btn, #logout-btn {
  padding: 0.95rem 1.35rem;
  line-height: 1;
}
/* Real async states (Supabase calls in flight) — quiet, no spinner
   icon needed since the button's own label text already communicates
   what's happening ("Giriş yapılıyor…"). pointer-events:none blocks
   both a double-submit click and the hover lift while disabled. */
.btn:disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; }
.btn-primary { background: var(--cobalt); color: #fff; }
.btn-primary:hover { background: var(--cobalt-dark); transform: translateY(-1px); }
.btn-ghost { border-color: var(--border); color: var(--ink); }
.btn-ghost:hover { border-color: var(--cobalt); color: var(--cobalt-dark); }

/* ── Hero ── */
.hero { padding: 5.5rem 0 4.5rem; position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; top: -30%; right: -10%;
  width: 640px; height: 640px;
  background: radial-gradient(circle, rgba(47,95,255,.13) 0%, transparent 70%);
  pointer-events: none;
}
.hero-inner { max-width: 720px; position: relative; }
.hero h1 { margin-top: 1.1rem; font-size: clamp(2.3rem, 5.2vw, 3.6rem); line-height: 1.08; }
.hero p.sub { margin-top: 1.4rem; font-size: 1.12rem; color: var(--ink-muted); max-width: 540px; line-height: 1.7; }
.hero-actions { margin-top: 2.2rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.hero-actions .btn-primary { padding: 0.85rem 1.6rem; font-size: 0.95rem; }

.link-inline {
  font-size: 0.9rem; font-weight: 600; color: var(--ink-muted);
  border-bottom: 1px solid var(--border); padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.link-inline:hover { color: var(--cobalt-dark); border-color: var(--cobalt); }

.trust-line {
  margin-top: 3.2rem; font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--ink-muted); letter-spacing: 0.02em;
  border-top: 1px solid var(--border); padding-top: 1.2rem; max-width: 620px;
}

/* ── Sections shared ── */
section { padding: 5rem 0; }
.section-head { max-width: 620px; margin-bottom: 3rem; }
.section-head h2 { margin-top: 1rem; font-size: clamp(1.7rem, 3.4vw, 2.35rem); line-height: 1.18; }

/* ── Before / After (signature) ──
   The hinge's rivet and every small circular badge below (step-num,
   price-features check) share the same acid-yellow dot language — see
   the .logo .dot comment above. */
.compare-wrap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: center; }
.compare-hinge { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; color: var(--ink-muted); }
.compare-hinge .rivet {
  width: 10px; height: 10px; border-radius: 50%; background: var(--yellow);
  box-shadow: 0 0 0 3px rgba(238,255,60,.35);
}
.compare-hinge .arrow { font-family: var(--font-mono); font-size: 1.1rem; color: var(--ink-muted); }

.plaque {
  border-radius: var(--radius); padding: 1.9rem; position: relative;
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}
.plaque.is-visible { opacity: 1; transform: translateY(0); }
.plaque.after { transition-delay: .15s; }

.plaque.before { background: #fff; border: 1px solid var(--border); }
.plaque-label {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 1.1rem; display: block;
}
.before .biz-name { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; color: var(--ink-muted); }
.before .biz-stars { color: var(--ink-muted); opacity: .7; font-size: 0.85rem; margin-top: 0.4rem; }
.before .biz-addr { color: var(--ink-muted); opacity: .6; font-size: 0.82rem; margin-top: 0.9rem; }
.before .biz-pill {
  display: inline-block; margin-top: 1.3rem; font-size: 0.76rem; color: var(--ink-muted);
  border: 1px dashed var(--border); border-radius: 100px; padding: 0.4rem 0.85rem;
}

.plaque.after { background: linear-gradient(155deg, #1b2450 0%, var(--ink-deep) 100%); color: #fff; }
.plaque.after .plaque-label { color: rgba(255,255,255,.55); }
.after .biz-name { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: #fff; }
.after .biz-stars { font-size: 0.85rem; margin-top: 0.5rem; color: var(--yellow); }
.after .biz-addr { font-size: 0.82rem; margin-top: 0.9rem; opacity: .75; }
.after .biz-pill {
  display: inline-block; margin-top: 1.3rem; background: var(--yellow); color: var(--ink);
  font-size: 0.78rem; font-weight: 700; border-radius: 100px; padding: 0.5rem 1rem;
}

.compare-caption { margin-top: 1.6rem; font-size: 0.9rem; color: var(--ink-muted); max-width: 480px; }

/* ── Steps ── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem; }
.step-num {
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700; color: var(--ink);
  background: var(--yellow); border-radius: 50%;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.1rem;
}
.step h3 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; }
.step p { margin-top: 0.55rem; font-size: 0.92rem; color: var(--ink-muted); line-height: 1.65; }

/* ── Template showcase ── */
.template-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.template-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1.35rem; }
.template-card .swatch { width: 100%; height: 46px; border-radius: 6px; margin-bottom: 1rem; }
.template-card h4 { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.template-card p { font-size: 0.82rem; color: var(--ink-muted); margin-top: 0.4rem; line-height: 1.5; }

.sw-classic { background: linear-gradient(90deg, #1c2b3a, #d4a854); }
.sw-minimal { background: linear-gradient(90deg, #fafaf8, #d4a854); }
.sw-bold    { background: linear-gradient(90deg, #0a0a0a, #ffb703); }
.sw-split   { background: linear-gradient(90deg, #8a3b2a, #e07a5f); }

.palette-strip { margin-top: 2.5rem; display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.palette-dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--border); }
.palette-strip .cap { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-muted); margin-left: 0.4rem; }

/* ── For-who ── */
.who-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--border); border-left: 1px solid var(--border);
}
.who-item {
  padding: 1.6rem 1.5rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; color: var(--ink);
}
.who-item span { display: block; margin-top: 0.4rem; font-weight: 400; font-size: 0.82rem; color: var(--ink-muted); }

/* ── CTA ── */
.cta-panel { background: var(--ink-deep); border-radius: var(--radius); padding: 3.2rem 2.6rem; text-align: center; }
.cta-panel .eyebrow { color: #b9c6ff; }
.cta-panel .eyebrow::before { background: var(--cobalt); }
.cta-panel h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); color: #fff; }
.fake-search {
  margin: 2rem auto 0; max-width: 460px; display: flex; align-items: center; gap: 0.6rem;
  background: #fff; border-radius: 100px; padding: 0.35rem 0.4rem 0.35rem 1.2rem;
}
.fake-search span { flex: 1; text-align: left; font-size: 0.9rem; color: var(--ink-muted); font-family: var(--font-body); }
.fake-search .btn-primary { padding: 0.65rem 1.3rem; font-size: 0.85rem; white-space: nowrap; }
.cta-note { margin-top: 1.3rem; font-size: 0.8rem; color: #b7bac9; }

/* ── Pricing card ── */
.price-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 2.6rem 2.4rem; max-width: 440px; margin: 0 auto;
}
.price-card .eyebrow { margin-bottom: 0.9rem; }
.price-card h2 { font-size: 1.5rem; }
.price-card .card-sub { margin-top: 0.6rem; font-size: 0.92rem; color: var(--ink-muted); line-height: 1.55; }
.price-row { display: flex; align-items: baseline; gap: 0.35rem; margin-top: 1.8rem; }
.price-row .amount { font-family: var(--font-display); font-size: 3.2rem; font-weight: 700; color: var(--ink); line-height: 1; }
.price-row .period { font-size: 0.95rem; color: var(--ink-muted); }
.price-note { margin-top: 0.6rem; font-size: 0.8rem; color: var(--ink-muted); font-family: var(--font-mono); }
.price-features { list-style: none; margin-top: 2rem; border-top: 1px solid var(--border); }
.price-features li {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.85rem 0; border-bottom: 1px solid var(--border);
  font-size: 0.92rem; color: var(--ink); line-height: 1.5;
}
.price-features .check {
  flex-shrink: 0; width: 18px; height: 18px; margin-top: 0.15rem; border-radius: 50%;
  background: var(--yellow); color: var(--ink);
  display: flex; align-items: center; justify-content: center; font-size: 0.62rem;
}
.price-card .btn-primary { width: 100%; justify-content: center; margin-top: 2rem; padding: 0.9rem; font-size: 0.95rem; }

/* Sits directly under the CTA — clarifies what actually happens on
   click (the real business-search/build flow, not an automated
   checkout) without undercutting the button itself. */
.price-cta-note { margin-top: 0.9rem; font-size: 0.82rem; color: var(--ink-muted); text-align: center; line-height: 1.5; }

/* Deliberately small/muted/last — the launch price above is what this
   page is actually selling; this is a quiet, honest footnote about
   where the price goes later, not a second call to action. */
.price-standard-note { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--border); font-size: 0.76rem; color: var(--ink-muted); font-family: var(--font-mono); text-align: center; }

/* ── Contact form ── */
.contact-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 2.6rem 2.4rem; max-width: 560px; margin: 0 auto;
}
.contact-card .card-sub { margin-bottom: 2rem; font-size: 0.98rem; color: var(--ink-muted); line-height: 1.6; }
.field { margin-bottom: 1.4rem; }
.field label {
  display: block; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 0.5rem;
}
.field .optional { text-transform: none; letter-spacing: 0; font-weight: 400; }
.field input, .field textarea, .field select {
  width: 100%; padding: 0.75rem 1rem; font-family: var(--font-body); font-size: 0.95rem;
  color: var(--ink); background: var(--bg-alt); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); outline: none; transition: border-color .2s;
  /* Explicit line-height (rather than the default "normal") keeps the
     input's rendered height a stable ≥44px touch target — "normal" is
     derived from font metrics and can round to 43px vs 44px by a
     sub-pixel margin depending on viewport, right at the boundary. */
  line-height: 1.4;
}
.field select { cursor: pointer; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--cobalt); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-muted); opacity: .7; }
.field textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.contact-card .btn-primary { width: 100%; justify-content: center; padding: 0.9rem; font-size: 0.95rem; margin-top: 0.5rem; }

.hidden { display: none; }

/* ── Auth card (login / sign up) ──
   Reuses .contact-card for the shell (same white panel, border, radius,
   max-width) — .auth-card only narrows it slightly, since two email/
   password fields need less width than a full contact form. */
.auth-card { max-width: 440px; }
.auth-card h2 { font-size: 1.35rem; }
.auth-card .card-sub { margin-top: 0.5rem; margin-bottom: 1.8rem; font-size: 0.92rem; }
.auth-card .btn-primary { margin-top: 0.3rem; }
.auth-switch {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--ink-muted);
}
.auth-switch .link-inline { margin-left: 0.35rem; }

/* Sits between the password field and the submit button — negative
   top margin pulls it up against the field it's about, rather than
   reading as a stray line floating in the button's own gap. */
.auth-forgot-link { text-align: right; margin: -0.7rem 0 1.3rem; }
.auth-forgot-link .link-inline { font-size: 0.85rem; }

/* reset-password.html's "verifying the recovery link" state — shown
   briefly while the Supabase client parses the email link's URL
   fragment, before either the form or the invalid-link state appears. */
.auth-verifying { text-align: center; padding: 1rem 0 0.5rem; color: var(--ink-muted); font-size: 0.95rem; }

/* Inline field validation — text sits directly under the field it
   describes, paired with a border-color change on the input itself so
   the error reads clearly even for someone scanning quickly. Empty by
   default and collapses to zero height via :empty, so it never reserves
   blank space for fields that pass validation. */
.field-error {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--danger);
}
.field-error:empty { display: none; }
.field.has-error input { border-color: var(--danger); }

/* Whole-form errors (wrong credentials, already-registered email) —
   these aren't about one field, so they get a boxed banner above the
   fields rather than living under a specific input. Same collapse-
   when-empty trick as .field-error. */
.form-error {
  margin-bottom: 1.2rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(179, 38, 30, .08);
  border: 1px solid rgba(179, 38, 30, .25);
  color: var(--danger);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.5;
}
.form-error:empty { display: none; padding: 0; margin: 0; border: none; }

/* Success state — replaces the form entirely rather than sitting
   above/below it, since "you're done" and "here's a form to fill out"
   shouldn't both be on screen at once. Reuses the small circular badge
   language already established by .price-features .check, scaled up
   as the sole focus of this state. */
.auth-success { text-align: center; padding: 0.5rem 0 0.75rem; }
.auth-success-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: rgba(47, 111, 78, .12);
  color: var(--success);
  font-size: 1.3rem;
}
.auth-success-text {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
}
.auth-success-note {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--ink-muted);
}

/* Same badge/text layout as .auth-success, recolored for
   reset-password.html's "invalid or expired link" state — an error is
   still "the form is replaced by one final state," just not a happy one. */
.auth-success.is-error .auth-success-check { background: rgba(179, 38, 30, .1); color: var(--danger); }

/* ── Profile page ──
   "Çalışma Alanım" (the heading + .sub above) is the page's real
   identity now; .profile-account-row below is deliberately boxed off
   from it with its own top divider rather than reading as more of the
   same heading block — see profile.html's own comment on this row. */
.profile-hero { padding-bottom: 3rem; }
.profile-account-row {
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.profile-account-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.profile-email {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.profile-loading {
  margin-top: 2rem;
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.9rem;
  padding: 2rem 0;
}

.profile-empty {
  margin-top: 2rem;
  text-align: center;
  padding: 3rem 1.5rem;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
}
.profile-empty p { margin-bottom: 1.5rem; color: var(--ink-muted); font-size: 0.98rem; }

.business-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}
.business-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.6rem;
}
.business-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
.business-card-name {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}
/* A fixed-size flex sibling next to the (possibly wrapping) name,
   rather than absolutely positioned over it — so a long business
   name can never run underneath the delete button. */
.business-card-delete {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin: -0.65rem -0.65rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--ink-muted);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.business-card-delete:hover { background: rgba(179, 38, 30, .08); color: var(--danger); }

.business-card-meta {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--ink-muted);
}

/* Google-data freshness + manual refresh — deliberately its own row,
   separate from .business-card-meta above (which tracks the owner's
   own last customization save, a completely different timestamp).
   Low-key by design: same muted color as the rest of the card's meta
   text normally; .is-stale (past ~90 days, see isPlaceDataStale() in
   profile.html) only shifts it to the brand cobalt, never a red/danger
   tone — this is a "you might want to check this" nudge, not a warning. */
.business-card-google-row {
  margin-top: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.business-card-google-meta {
  font-size: 0.78rem;
  color: var(--ink-muted);
}
.business-card-google-meta.is-stale { color: var(--cobalt-dark); font-weight: 600; }
.business-card-google-refresh {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0.5rem 0.85rem;
  border: 1.5px solid var(--border);
  border-radius: 100px;
  background: none;
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.business-card-google-refresh:hover:not(:disabled) { border-color: var(--cobalt); color: var(--cobalt-dark); }
.business-card-google-refresh:disabled { opacity: 0.7; cursor: not-allowed; }

.business-card-btn { width: 100%; justify-content: center; padding: 0.85rem; font-size: 0.9rem; }

.business-add-row { margin-top: 2rem; text-align: center; }

/* ── Menu cards ──
   Same card-grid shape as .business-grid/.business-card above (grid,
   border, radius, padding all match) but kept as its own class family
   rather than reusing those literally-named classes — a menu isn't a
   business, and a future change to one card type shouldn't risk
   silently reshaping the other just because they happened to share a
   selector. */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}
.menu-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.6rem;
}
.menu-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
.menu-card-name {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}
/* Same fixed-size-flex-sibling reasoning as .business-card-delete — a
   long menu name can never run underneath the delete button. */
.menu-card-delete {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin: -0.65rem -0.65rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--ink-muted);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.menu-card-delete:hover { background: rgba(179, 38, 30, .08); color: var(--danger); }

/* Low-key by design, same treatment as .business-card-google-meta.is-stale
   below — a small color shift, not a loud pill, since "Taslak" isn't a
   warning state, just the normal state before Yayınla is clicked. */
.menu-card-status {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 100px;
}
.menu-card-status.is-published { color: var(--cobalt-dark); border-color: rgba(47, 95, 255, .3); }
.menu-card-slug {
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-muted);
  word-break: break-all;
}
.menu-card-meta-row {
  margin-top: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.menu-card-meta {
  font-size: 0.78rem;
  color: var(--ink-muted);
}

/* ── Delete confirmation dialog ──
   Deliberately the quietest thing on this page — a confirmation
   dialog's job is to be instantly trustworthy and clear, not to carry
   the brand's personality. Sil uses --danger (not --cobalt), so a
   destructive action never shares color with the site's "go" accent. */
.confirm-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(22, 22, 26, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
/* .hidden{display:none} and this rule have equal specificity, so
   without this, whichever is declared later in the file wins
   regardless of which class comes first in the HTML — a compound
   selector guarantees hidden always wins here. */
.confirm-dialog-overlay.hidden { display: none; }
.confirm-dialog {
  background: #fff;
  border-radius: var(--radius-sm);
  max-width: 400px;
  width: 100%;
  padding: 2rem;
  box-shadow: 0 20px 60px rgba(22, 22, 26, .3);
}
.confirm-dialog-text {
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.6;
  text-align: center;
}
.confirm-dialog-text strong { color: var(--ink); }
.confirm-dialog-error {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(179, 38, 30, .08);
  border: 1px solid rgba(179, 38, 30, .25);
  color: var(--danger);
  font-size: 0.85rem;
  text-align: center;
}
.confirm-dialog-error:empty { display: none; }
.confirm-dialog-actions {
  margin-top: 1.75rem;
  display: flex;
  gap: 0.75rem;
}
.confirm-dialog-actions .btn {
  flex: 1;
  justify-content: center;
  padding: 0.95rem 1rem;
  line-height: 1;
}
.confirm-dialog-delete-btn { background: var(--danger); color: #fff; }
.confirm-dialog-delete-btn:hover:not(:disabled) { background: #8f1e18; }
.confirm-dialog-delete-btn:disabled,
.confirm-dialog-actions .btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Admin panel ──
   The only table in the site — every other list here is a card grid
   (see .business-grid above), but a table is the right shape for this
   many columns of comparable per-row data at a glance. Deliberately
   plainer than the marketing pages' own visual language (no gradients/
   hero flourishes beyond the shared .hero shell) since this is an
   internal tool, not something meant to sell anything. */
.admin-hero { padding-bottom: 2.5rem; }
.admin-section { padding-top: 0; }

.admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.admin-search-input {
  flex: 1;
  min-width: 240px;
  max-width: 420px;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--bg-alt);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
}
.admin-search-input:focus { border-color: var(--cobalt); }
.admin-count { font-size: 0.85rem; color: var(--ink-muted); font-family: var(--font-mono); white-space: nowrap; }

/* Horizontal scroll container, never the page itself — this table has
   more columns than comfortably fit under ~900px, and the rest of the
   page must never gain horizontal overflow because of it. */
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; white-space: nowrap; }
.admin-table th {
  text-align: left;
  padding: 0.85rem 1rem;
  background: var(--bg-alt);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--border);
}
.admin-table td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); color: var(--ink); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table-name { font-weight: 600; }

.admin-badge-btn {
  border: none;
  border-radius: 100px;
  padding: 0.35rem 0.8rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.admin-badge-btn:hover:not(:disabled) { opacity: 0.8; }
.admin-badge-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.admin-badge-success { background: rgba(47, 111, 78, .12); color: var(--success); }
.admin-badge-muted { background: rgba(107, 107, 118, .12); color: var(--ink-muted); }

.admin-select {
  padding: 0.4rem 0.6rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--ink);
  background: var(--bg-alt);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  outline: none;
}
.admin-select:focus { border-color: var(--cobalt); }
.admin-select:disabled { opacity: 0.6; cursor: not-allowed; }

.admin-actions-cell { display: flex; gap: 0.5rem; }
.admin-action-btn {
  padding: 0.4rem 0.75rem;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: none;
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.admin-action-btn:hover { border-color: var(--cobalt); color: var(--cobalt-dark); }
.admin-action-danger:hover { border-color: var(--danger); color: var(--danger); }

/* ── Admin detail panel ──
   Same overlay/dialog shell as the delete confirmation, just wider and
   scrollable — a business's full customization is a lot of fields. */
.admin-detail-dialog { max-width: 640px; max-height: 85vh; overflow-y: auto; text-align: left; }
.admin-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.admin-detail-header h2 { font-size: 1.2rem; }
.admin-detail-heading {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.admin-detail-heading:first-of-type { margin-top: 0; }
.admin-detail-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.86rem;
}
.admin-detail-label { color: var(--ink-muted); }
.admin-detail-value { color: var(--ink); word-break: break-word; }
.admin-raw-toggle { display: block; margin-top: 1.25rem; background: none; border: none; cursor: pointer; }
.admin-raw-json {
  margin-top: 0.75rem;
  padding: 1rem;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
}

@media (max-width: 640px) {
  .admin-detail-row { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* ── Footer ── */
footer { background: var(--ink-deep); padding: 3rem 0 2.2rem; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; }
footer .logo { font-size: 1.1rem; color: #fff; }
footer .logo .dot { color: var(--yellow); }
.footer-meta { font-size: 0.8rem; color: #9a9aa8; font-family: var(--font-mono); }

/* Legal/about links — Hakkımızda + the three iyzico-required documents.
   Sits between the logo and the copyright line in .footer-inner's flex
   row on wide screens, wraps to its own centered row on narrow ones
   (see the @media block below). */
.footer-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.3rem; }
.footer-links a {
  font-size: 0.8rem;
  font-family: var(--font-mono);
  color: #9a9aa8;
  text-decoration: none;
}
.footer-links a:hover { color: #fff; }

/* ── Legal content pages (Hakkımızda, Gizlilik Politikası, Mesafeli
   Satış Sözleşmesi, Teslimat ve İade Şartları) ──
   Plain prose, narrower than the marketing page max-width for
   readability — reuses the existing type scale/colors rather than
   introducing new ones. */
.legal-content { max-width: 720px; margin: 0 auto; }
.legal-content .legal-updated {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin-bottom: 2.2rem;
}
.legal-content h2 { font-size: 1.3rem; margin-top: 2.6rem; }
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: 1.8rem;
}
.legal-content p { margin-top: 1rem; font-size: 0.95rem; line-height: 1.75; color: var(--ink-muted); }
.legal-content ul, .legal-content ol { margin-top: 1rem; padding-left: 1.4rem; }
.legal-content li { margin-top: 0.55rem; font-size: 0.95rem; line-height: 1.7; color: var(--ink-muted); }
.legal-content strong { color: var(--ink); font-weight: 600; }
.legal-content a { color: var(--cobalt-dark); }

/* ── Menu builder (menu-duzenle.html) ──
   The one page in this system with a split-screen editor/preview
   layout, same concept as /duzenle's own builder-layout but re-themed
   into this cobalt/charcoal system rather than reusing style.css's
   Retro-palette classes directly (see CLAUDE.md: the two stylesheets
   are never meant to bleed into each other). Reuses .field/.field-error/
   .btn/.eyebrow/.hero from elsewhere in this file for the pieces that
   really are identical (labeled inputs, buttons, page header). */

.menu-builder-topbar { border-bottom: 1px solid var(--border); background: var(--bg); }
.menu-builder-topbar-inner {
  padding: 1.4rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.menu-builder-topbar-inner h1 { margin-top: 0.3rem; font-size: 1.5rem; }
.menu-builder-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.menu-save-status { font-size: 0.85rem; color: var(--ink-muted); }
.menu-save-status.menu-save-status-error { color: var(--danger); font-weight: 600; }
.menu-pdf-size-select {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: #fff; color: var(--ink);
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 600;
  cursor: pointer;
}
.menu-save-status.menu-save-status-info { color: var(--cobalt-dark); font-weight: 600; }

.menu-builder-layout {
  display: flex;
  align-items: flex-start;
  gap: 0;
  height: calc(100vh - 149px); /* topbar + nav height, roughly — the
    scroll containers below are what actually matter; this just keeps
    the two panes from growing the document's own scrollbar too */
}
.menu-builder-form {
  width: 460px;
  flex-shrink: 0;
  height: 100%;
  overflow-y: auto;
  padding: 2rem 1.75rem 4rem;
  border-right: 1px solid var(--border);
}
.menu-builder-preview {
  flex: 1;
  height: 100%;
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 2rem 2rem;
  gap: 1rem;
}
.menu-preview-toolbar { width: 100%; max-width: 720px; display: flex; justify-content: flex-end; }
.menu-view-toggle {
  display: flex; gap: 0.2rem;
  background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 0.2rem;
}
.menu-view-btn {
  padding: 0.4rem 0.85rem;
  border: none; border-radius: 6px;
  background: transparent; color: var(--ink-muted);
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: background .15s, color .15s;
}
.menu-view-btn:hover:not(.active) { color: var(--ink); }
.menu-view-btn.active { background: var(--cobalt); color: #fff; }

.menu-preview-frame {
  width: 100%;
  max-width: 720px;
  flex: 1;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: 0 8px 30px rgba(22, 22, 26, .08);
}
/* Same phone-frame treatment as style.css's .preview-frame.mobile-view
   (used on /duzenle) — fixed to a real phone content width (~390px,
   iPhone-class), not a scaled-down desktop layout, so the templates'
   own mobile @media breakpoints (see menu-generator.js's get*CSS()
   functions) actually apply, the same way they would on an owner's or
   visitor's actual phone. */
.menu-preview-frame.mobile-view {
  width: 390px;
  max-width: 390px;
  flex: none;
  height: 100%;
  margin: 0 auto;
  border-radius: 32px;
  box-shadow: 0 0 0 8px var(--ink), 0 20px 60px rgba(0, 0, 0, .3);
}

.menu-builder-section { margin-bottom: 2.5rem; }
.menu-builder-section-title {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 1.1rem;
}

.menu-slug-preview {
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-muted);
  word-break: break-all;
}
.menu-slug-availability { display: block; margin-top: 0.35rem; font-size: 0.8rem; font-weight: 500; }
.menu-slug-availability.is-available { color: var(--success); }
.menu-slug-availability.is-taken { color: var(--danger); }

/* ── QR Kodu — plain black/white preview + PNG/SVG download, generated
   client-side from the menu's saved slug (see updateQRSection() in
   menu-duzenle.js). qr-disabled-note reuses the same muted-caption
   styling as .menu-slug-preview above, just under its own name since
   this file's .about-prefill-note-equivalent lives in style.css, not
   here — menu-duzenle.html never loads that stylesheet. */
.qr-disabled-note {
  font-size: 0.85rem;
  color: var(--ink-muted);
  line-height: 1.6;
}
.qr-section-content { display: flex; flex-direction: column; gap: 1rem; }
.qr-preview {
  display: flex;
  justify-content: center;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
}
.qr-preview img { display: block; width: 160px; height: 160px; }
.qr-actions { display: flex; gap: 0.6rem; }
.qr-actions .btn { flex: 1; }

/* ── Template selector — same card concept as style.css's
   .template-card (used on /duzenle), themed cobalt/charcoal instead. */
.menu-template-cards { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.menu-template-card {
  text-align: left;
  padding: 0.9rem 1.1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.menu-template-card:hover { border-color: var(--cobalt); }
.menu-template-card.active { border-color: var(--cobalt); background: rgba(47, 95, 255, .05); }
.menu-template-name {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
}
.menu-template-card.active .menu-template-name { color: var(--cobalt-dark); }
.menu-template-desc { display: block; margin-top: 0.25rem; font-size: 0.8rem; color: var(--ink-muted); }

/* ── Palette picker — same card concept as style.css's .palette-card
   (used on /duzenle for business templates), themed cobalt/charcoal
   instead. The 12 palettes themselves are just swatch previews here;
   the actual colour values live once, in menu-generator.js's own
   PALETTES (duplicated from script.js's copy — see that file's header
   comment on why). */
.menu-palette-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
.menu-palette-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: left;
  padding: 0.6rem 0.7rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, background .15s;
}
.menu-palette-card:hover { border-color: var(--cobalt); }
.menu-palette-card.active { border-color: var(--cobalt); background: rgba(47, 95, 255, .05); }
.menu-palette-swatch-bar { display: flex; height: 14px; border-radius: 3px; overflow: hidden; }
.menu-palette-swatch { flex: 1; }
.menu-palette-name { font-size: 0.76rem; font-weight: 600; color: var(--ink); }
.menu-palette-card.active .menu-palette-name { color: var(--cobalt-dark); }

/* ── Category / item / price editor rows ──
   Reorder is a pair of ↑/↓ buttons, not drag-and-drop — a deliberately
   simpler affordance than /duzenle's draggable photo list, appropriate
   for a list of a handful of categories/items rather than dozens of
   photos. */
.menu-category-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  background: var(--bg-alt);
}
.menu-category-card-header { display: flex; align-items: center; gap: 0.6rem; }
.menu-category-name-input {
  flex: 1;
  min-width: 0;
  padding: 0.65rem 0.85rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
}
.menu-category-name-input:focus { border-color: var(--cobalt); }

.menu-row-controls { display: flex; align-items: center; gap: 0.3rem; flex-shrink: 0; }
.menu-row-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--ink-muted);
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.menu-row-btn:hover:not(:disabled) { border-color: var(--cobalt); color: var(--cobalt-dark); }
.menu-row-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.menu-row-btn.menu-row-btn-danger:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }

.menu-items-editor-list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.9rem; }
.menu-item-editor-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem;
  background: #fff;
}
.menu-item-editor-main { display: flex; align-items: center; gap: 0.6rem; }
.menu-item-name-input {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0.8rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--bg-alt);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
}
.menu-item-name-input:focus { border-color: var(--cobalt); }

.menu-item-desc-input {
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.6rem 0.8rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ink);
  background: var(--bg-alt);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  min-height: 60px;
  resize: vertical;
  line-height: 1.5;
}
.menu-item-desc-input:focus { border-color: var(--cobalt); }

/* Hidden entirely outside the Vitrin template — #menu-categories-list
   only carries .is-vitrin when menuState.template === 'vitrin' (see
   menu-duzenle.js's applyTemplateVisibility()); every other template
   has no use for a per-item photo control at all. */
#menu-categories-list:not(.is-vitrin) .menu-item-photo-control { display: none; }
.menu-item-photo-control {
  margin-top: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.menu-item-photo-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--border);
}
.menu-item-photo-status { font-size: 0.78rem; color: var(--ink-muted); }

/* Reuses .menu-add-btn (already the "add X" outline button used for
   + Kategori Ekle / + Ürün Ekle / + Fiyat Ekle elsewhere on this same
   page) so "Fotoğraf Ekle" reads as a clickable control instead of a
   bare underlined link. Only the top margin needs overriding here —
   .menu-add-btn's own margin-top assumes it's the last thing in a
   column, but here it sits inline with the thumbnail/status text in a
   centered flex row, where that margin would push it off-center. */
.menu-item-photo-control .menu-add-btn { margin-top: 0; }
/* "Kaldır" pairs with "Fotoğraf Ekle" above — same outline-button
   shape/padding/radius (via .menu-add-btn, applied alongside this
   modifier) so the two read as one button system, but recolored
   danger and switched to a solid border so it's legible as the
   destructive counterpart at a glance, not just on hover — same
   resting-state-danger call as .confirm-dialog-delete-btn elsewhere
   in this file, appropriate here since it sits right next to its
   "add" sibling rather than in a low-traffic admin table row.
   Compound selector (not just .menu-remove-btn) so this beats
   .menu-add-btn's own color rule regardless of source order — both
   classes sit on the same element with equal specificity otherwise,
   and .menu-add-btn's definition comes later in this file. */
.menu-add-btn.menu-remove-btn {
  color: var(--danger);
  border-style: solid;
  border-color: rgba(179, 38, 30, .35);
}
.menu-add-btn.menu-remove-btn:hover { border-color: var(--danger); background: rgba(179, 38, 30, .06); }

.menu-item-prices-editor { margin-top: 0.7rem; display: flex; flex-direction: column; gap: 0.5rem; }
.menu-price-editor-row { display: flex; align-items: center; gap: 0.4rem; }
.menu-price-label-input {
  flex: 1 1 auto;
  /* Without this, a flex item's default min-width is its content's
     min-content size, not 0 — so the input refused to shrink below
     that on narrow screens and pushed the amount field/remove button
     into a cramped overflow instead of the row just narrowing. */
  min-width: 0;
  padding: 0.55rem 0.7rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ink);
  background: var(--bg-alt);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
}
.menu-price-amount-input {
  width: 88px;
  flex-shrink: 0;
  padding: 0.55rem 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink);
  background: var(--bg-alt);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
}
.menu-price-label-input:focus, .menu-price-amount-input:focus { border-color: var(--cobalt); }

.menu-add-btn {
  margin-top: 0.85rem;
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cobalt-dark);
  background: none;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s;
}
.menu-add-btn:hover { border-color: var(--cobalt); }
/* .hidden{display:none} and .menu-add-btn's own display:inline-flex
   have equal specificity, so without this, .menu-add-btn (declared
   later in the file) wins regardless of which class comes first in
   the HTML — same fix as .confirm-dialog-overlay.hidden above. This
   is what let "Kaldır" render even with no photo_url: it always
   carries .hidden until updateItemPhotoUI() clears it, but once it
   also gained .menu-add-btn (for the outline-button restyle), that
   class's own display rule silently overrode .hidden. */
.menu-add-btn.hidden { display: none; }
.menu-add-category-btn { width: 100%; justify-content: center; }

.menu-builder-error { padding: 5rem 1.5rem; text-align: center; }
.menu-builder-error p { color: var(--ink-muted); margin-bottom: 1.5rem; font-size: 1rem; }

@media (max-width: 960px) {
  .menu-builder-layout { flex-direction: column; height: auto; }
  .menu-builder-form { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--border); overflow-y: visible; }
  .menu-builder-preview { height: 70vh; padding: 1.25rem; }
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .steps, .template-grid { grid-template-columns: repeat(2, 1fr); }
  .who-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .compare-wrap { grid-template-columns: 1fr; }
  .compare-hinge { flex-direction: row; padding: 0.3rem 0; }
  .compare-hinge .arrow { transform: rotate(90deg); }
  .steps, .template-grid, .who-grid { grid-template-columns: 1fr; }
  .cta-panel { padding: 2.4rem 1.4rem; }
  .fake-search { flex-direction: column; border-radius: 18px; padding: 1rem; align-items: stretch; }
  .fake-search span { text-align: center; margin-bottom: 0.4rem; }
  .price-card, .contact-card { padding: 2rem 1.4rem; }
  .nav-toggle { display: flex; }
  .nav-menu {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 1.75rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .nav-menu.is-open { max-height: 400px; padding: 1rem 1.75rem 1.5rem; }
  .nav-links { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
  .nav-links a { display: block; width: 100%; padding: 0.85rem 0; border-bottom: 1px solid var(--border); }
  .nav-menu .btn-ghost, .nav-menu .btn-primary { width: 100%; justify-content: center; margin-top: 0.85rem; }
}
@media (min-width: 641px) {
  .nav-menu { display: flex; align-items: center; gap: 1.75rem; }
}