/* ============================================================
   style.css — App UI styles (not the generated website)
   ============================================================ */

*, *::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;
  }
}

/* Revitrino brand tokens (Phase 2 — this panel's own chrome). --bg is
   the page background AND the tone nested cards (template/palette
   cards, etc.) recede to inside the white --surface panel, same nested
   bg->surface->bg rhythm this file already had, just refreshed colors —
   a subtle cool near-white instead of pure white keeps that panel
   grouping/depth cue instead of everything collapsing to flat white. */
:root {
  --bg:          #F5F6FA;
  --surface:     #ffffff;
  --border:      #E4E4EC;
  --text:        #16161A;
  --text-muted:  #6B6B76;
  --accent:      #2F5FFF;
  --accent-h:    #264ED1;
  --yellow:      #EEFF3C;   /* small accent shapes only — see usages below */
  --danger:      #DC2626;   /* kept a true red, distinct from --accent, so error states stay unambiguous from brand cobalt */
  --success:     #1F7A4D;   /* Kaydedildi confirmation */
  --radius:      14px;
  --radius-sm:   9px;
  /* Spacing scale (customize panel) — 4/8/16/24/32/48px steps, used in
     place of the ad hoc rem values the panel's rules used to carry. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  /* Elevation: panel floats a bit more than before (--shadow-panel);
     open accordion content gets its own, much quieter shadow so it
     reads as a recessed layer rather than another floating box. */
  --shadow:        0 1px 4px rgba(22,22,26,.06), 0 8px 28px rgba(22,22,26,.08);
  --shadow-panel:  0 2px 8px rgba(22,22,26,.06), 0 16px 40px rgba(22,22,26,.10);
  --shadow-inset:  inset 0 1px 2px rgba(22,22,26,.04);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* ── "You're editing X" banner ──
   Sits between the header and the body — a cobalt-tinted strip (not
   another dark block) keeps it from reading as a second header, and
   echoes the same cobalt tint already used for the "active" state
   elsewhere in this panel (e.g. .palette-card.active). */
.editing-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.85rem 1.5rem;
  background: rgba(47,95,255,.08);
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text);
  text-align: center;
}

#editing-banner-text {
  font-weight: 600;
}

.clear-business-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.95rem 1rem;
  line-height: 1;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 100px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s;
  white-space: nowrap;
}
.clear-business-btn:hover { border-color: var(--accent); color: var(--accent-h); }

/* ── Shared marketing nav ──
   Same markup/behavior as home.html/pricing.html/contact.html/
   login.html/profile.html's nav, kept pixel-identical to marketing.css.
   Rewritten here rather than linking marketing.css directly, because
   several of its class names (.logo, .btn-primary, .active, .dot,
   .template-card) collide with this file's own unrelated builder-UI
   classes of the same name — scoping every rule under .nav keeps the
   two completely independent regardless of stylesheet load order.

   Colors here are the new Revitrino brand tokens (cobalt/charcoal/acid
   yellow — see marketing.css's :root for the source of truth) written
   as literal hex values rather than var(--accent)/var(--text), since
   those custom properties are still the OLD Retro palette shared by
   the rest of this file's own builder-panel UI, which isn't part of
   this rebrand pass yet. Literal values keep this nav copy correctly
   on-brand without touching --accent/--text and rippling into the
   customize panel. */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e4e4ec;
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.75rem; max-width: 1120px; margin: 0 auto;
}
.nav .logo {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.3rem; font-weight: 700; color: #16161a;
  display: inline-flex; align-items: baseline; gap: 0.5rem;
  margin-bottom: 0;
  text-decoration: none;
}
.nav .logo .dot { font-style: normal; font-weight: 700; letter-spacing: normal; color: #eeff3c; font-size: 1.6rem; line-height: 0; }

/* marketing.css gets this for free from its sitewide `a { text-decoration:
   none }` reset — style.css has no such global reset (it would risk
   changing unrelated builder links elsewhere), so the scoped nav copy
   needs its own explicit reset instead. The "active" underline effect
   on marketing pages is actually .nav-links a.active's border-bottom,
   never real text-decoration. */
.nav-links { display: flex; align-items: center; gap: 1.75rem; list-style: none; }
.nav-links a {
  font-size: 0.9rem; font-weight: 600; color: #6b6b76;
  padding-bottom: 3px; border-bottom: 1.5px solid transparent;
  transition: color .2s, border-color .2s;
  text-decoration: none;
}
.nav-links a:hover { color: #16161a; }
.nav-links a.active { color: #264ed1; border-color: #2f5fff; }

/* 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" — same reasoning as the other marketing pages. */
.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: #16161a;
  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); }

.nav .btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.95rem 1.35rem; line-height: 1; border-radius: 100px;
  font-family: inherit; 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;
  text-decoration: none;
}
.nav .btn-ghost { border-color: #e4e4ec; color: #16161a; }
.nav .btn-ghost:hover { border-color: #2f5fff; color: #264ed1; }

@media (max-width: 640px) {
  .nav-toggle { display: flex; }
  .nav-menu {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #ffffff;
    border-bottom: 1px solid #e4e4ec;
    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 #e4e4ec; }
  .nav-menu .nav-auth-link { width: 100%; justify-content: center; margin-top: 0.85rem; }
}
@media (min-width: 641px) {
  .nav-menu { display: flex; align-items: center; gap: 1.75rem; }
}

/* ── Leave-page confirmation (unsaved changes) ──
   Same on-brand dialog pattern as profile.html's delete confirmation —
   no browser-native confirm(). Only shown to a logged-in owner whose
   in-memory customization has diverged from what's saved (see
   hasUnsavedChanges() in script.js); anonymous visitors never see it. */
.leave-confirm-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;
}
.leave-confirm-overlay.hidden { display: none; }
.leave-confirm-dialog {
  background: #fff;
  border-radius: var(--radius);
  max-width: 400px;
  width: 100%;
  padding: 2rem;
  box-shadow: var(--shadow);
}
.leave-confirm-text {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.6;
  text-align: center;
}
.leave-confirm-actions {
  margin-top: 1.75rem;
  display: flex;
  gap: 0.75rem;
}
.leave-confirm-actions button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1rem;
  line-height: 1;
  border-radius: 100px;
  font-family: inherit;
  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;
}
.leave-confirm-stay-btn { border-color: var(--border); color: var(--text); background: none; }
.leave-confirm-stay-btn:hover { border-color: var(--accent); color: var(--accent-h); }
.leave-confirm-leave-btn { background: var(--danger); color: #fff; }
.leave-confirm-leave-btn:hover { background: #b3261e; }

/* ── Fresh-state intro ──
   Sits directly above the search card, only in the empty state (before
   any business is generated/loaded) — reuses the same :has() check the
   two-column layout already keys off of, so it never competes with the
   customize/preview UI once a business is active. No icon/band: the nav
   above already carries the logo, so this is just quiet text sitting on
   the page's own cream background. */
.builder-intro {
  display: none;
  max-width: 560px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 0;
  text-align: center;
}
.builder-layout:has(.preview-area.hidden) .builder-intro {
  display: block;
}
.builder-intro h1 {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.25;
  color: var(--text);
}
.builder-intro p {
  margin-top: 0.6rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
}
/* The empty-state generator-panel's own top margin exists to create
   space below the nav/editing-banner when it's the sidebar's first
   visible element — once the intro takes that role, the sidebar's own
   flex gap is enough, so this avoids doubling up the spacing. */
.builder-layout:has(.preview-area.hidden) .generator-panel {
  margin-top: 0;
}

/* ── Generator Panel ── */
.generator-panel {
  max-width: 680px;
  margin: 2.25rem auto 0;
  padding: 2rem 2rem 1.75rem;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.input-group label {
  display: block;
  font-size: 0.825rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}

.input-row {
  display: flex;
  gap: 0.6rem;
}

.input-row input {
  flex: 1;
  min-width: 0;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font-size: 0.9rem;
  font-family: 'Inter', monospace;
  color: var(--text);
  background: var(--surface);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}

.input-row input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47,95,255,.12);
}

.input-row input::placeholder {
  color: #94a3b8;
  font-family: 'Courier New', monospace;
  font-size: 0.82rem;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.75rem 1.3rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 9px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s, transform .1s;
}

.btn-primary svg {
  width: 14px;
  height: 14px;
}

.btn-primary:hover:not(:disabled)  { background: var(--accent-h); }
.btn-primary:active:not(:disabled) { transform: scale(0.97); }
.btn-primary:disabled              { opacity: 0.55; cursor: not-allowed; }

.hint {
  margin-top: 0.65rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.hint a {
  color: var(--accent);
  text-decoration: none;
}

.hint a:hover { text-decoration: underline; }

/* ── Error message ── */
.error-msg {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: #fef2f2;
  color: var(--danger);
  border: 1px solid #fecaca;
  border-radius: 8px;
  font-size: 0.875rem;
  line-height: 1.4;
}

/* ── Warning message (API load failure) ── */
.warning-msg {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 8px;
  font-size: 0.875rem;
  line-height: 1.4;
}

/* ── Loading ── */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem 1.5rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.spinner {
  width: 38px;
  height: 38px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Utility ── */
.hidden { display: none !important; }

/* ── Preview Area ── */
.preview-area {
  max-width: 1160px;
  margin: 2.5rem auto 4rem;
  padding: 0 1.5rem;
}

.preview-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #dde1e7;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 0.625rem 1rem;
}

.browser-dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.dot-red    { background: #ff5f57; }
.dot-yellow { background: #ffbd2e; }
.dot-green  { background: #28c840; }

.url-bar {
  flex: 1;
  min-width: 0;
  background: #fff;
  border-radius: 6px;
  padding: 0.28rem 0.75rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-download {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.95rem;
  background: var(--text);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s;
}

.btn-download svg  { width: 13px; height: 13px; }
.btn-download:hover { background: var(--accent); }

.preview-frame {
  display: block;
  width: 100%;
  height: 680px;
  border: none;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 6px 40px rgba(0,0,0,.12);
  background: #fff;
}

/* Google attribution div — hidden but must be in the DOM */
#maps-attribution {
  display: none;
}

/* ── Search Box ── */
.search-box-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 0.9rem;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  pointer-events: none;
  flex-shrink: 0;
}

.search-input {
  width: 100%;
  padding: 0.85rem 1rem 0.85rem 2.75rem;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font-size: 0.95rem;
  font-family: 'Inter', sans-serif;
  color: var(--text);
  background: var(--surface);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}

.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47,95,255,.12);
}

.search-input:disabled {
  background: #f8fafc;
  color: var(--text-muted);
}

/* ── Or Divider ── */
.or-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.25rem 0 0.75rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.or-divider::before,
.or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Manual Section Toggle ── */
.manual-toggle-row {
  text-align: center;
  margin-bottom: 0.5rem;
}

.toggle-link {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  transition: color .15s;
}

.toggle-link:hover { color: var(--accent); }

/* ── Manual Section ── */
.manual-section {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border);
}

.manual-section label {
  display: block;
  font-size: 0.825rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

/* ── Google Autocomplete Dropdown Overrides ── */
/* .pac-container is the dropdown Google injects into the page body */
.pac-container {
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.10) !important;
  margin-top: 4px;
  font-family: 'Inter', -apple-system, sans-serif !important;
  overflow: hidden;
}

.pac-item {
  padding: 10px 14px !important;
  cursor: pointer;
  font-size: 0.875rem !important;
  border-top: 1px solid #f1f5f9 !important;
  line-height: 1.4 !important;
}

.pac-item:first-child { border-top: none !important; }
.pac-item:hover       { background: #f1f5f9 !important; }

.pac-item-query {
  font-size: 0.9rem !important;
  color: #1e293b !important;
}

.pac-matched { font-weight: 600 !important; }

.pac-icon { display: none !important; }

/* ── Collapsible Section System ── */
.collapsible-section {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.section-toggle-row {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  margin: 0;
  border-radius: 6px;
  transition: background-color .15s;
}

.section-toggle-row:hover {
  background-color: rgba(47,95,255,.06);
}

/* The label itself needs to read as a heading a user should notice when
   collapsed, not a quiet inline link — full-strength ink, heavier weight,
   larger size. Scoped to .section-toggle-row so the Place ID fallback link
   in the generator panel (plain .toggle-link) keeps its lighter treatment. */
.section-toggle-row .toggle-link {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--text);
}

.section-panel {
  padding: 0.8rem 0 0.55rem;
}

/* ── About Textarea Control ── */
.about-section-control {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.about-control-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.about-control-header label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text);
}

.about-prefill-note {
  font-size: 0.72rem;
  color: #94a3b8;
}

.about-textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  resize: vertical;
  outline: none;
  line-height: 1.55;
  transition: border-color .18s, box-shadow .18s;
}

.about-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47,95,255,.12);
}

.about-char-counter {
  font-size: 0.72rem;
  color: #94a3b8;
  text-align: right;
  margin-top: 0.35rem;
}

/* ── Photos Section ── */
.photos-section {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.photo-upload-row    { margin-bottom: 1rem; }
.photo-upload-row:last-of-type { margin-bottom: 0; }

.photo-upload-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text);
  margin-bottom: 0.45rem;
}

.photo-upload-max {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}

.photo-file-input {
  display: block;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: 0.8rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color .2s;
}
.photo-file-input:hover { border-color: #94a3b8; }

.photo-thumb-single  { position: relative; display: inline-block; margin-top: 0.6rem; }

.photo-thumb-grid    { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }

.photo-thumb-wrap    { position: relative; }

.photo-thumb-img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  border: 1px solid var(--border);
}

.photo-thumb-remove {
  position: absolute;
  top: -5px; right: -5px;
  width: 18px; height: 18px;
  background: var(--danger);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 9px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0; line-height: 1;
  transition: background .15s;
}
.photo-thumb-remove:hover { background: #dc2626; }

.keyword-tag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.7rem;
}

.keyword-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.4rem 0.35rem 0.75rem;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 100px;
  font-size: 0.8rem;
  color: var(--text);
}

.keyword-tag-remove {
  width: 16px; height: 16px;
  background: var(--danger);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0; line-height: 1;
  transition: background .15s;
}
.keyword-tag-remove:hover { background: #dc2626; }

.photo-upload-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.75rem;
}

.photo-upload-spinner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.photo-upload-spinner .spinner { width: 16px; height: 16px; border-width: 2px; }

/* ── Photo Manager Modal ──
   Unifies hero + gallery into one ordered, draggable list — position 0
   is always the hero photo, everything after it is the gallery. */
.photo-modal-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;
}
.photo-modal {
  background: var(--surface);
  border-radius: var(--radius);
  max-width: 560px; width: 100%;
  max-height: 85vh;
  display: flex; flex-direction: column;
  padding: 1.5rem;
  box-shadow: var(--shadow);
}
.photo-modal-header { display: flex; justify-content: space-between; align-items: center; }
.photo-modal-header h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--text); }
.photo-modal-close { background: none; border: none; font-size: 1rem; color: var(--text-muted); cursor: pointer; padding: 0.3rem; }
.photo-modal-close:hover { color: var(--accent); }
.photo-modal-hint { font-size: 0.8rem; color: var(--text-muted); margin: 0.6rem 0 1rem; }
.photo-manager-list { display: flex; flex-direction: column; gap: 0.5rem; overflow-y: auto; padding-right: 0.25rem; }

/* ── AI ile Doldur ── the small trigger button sits above each target
   field (Hakkında / a custom section's content textarea); the modal
   itself reuses .photo-modal-overlay/.photo-modal's look-and-feel. */
.ai-fill-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 100px;
  color: var(--accent-h);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  margin-bottom: 0.6rem;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ai-fill-btn:hover  { border-color: var(--accent); background: rgba(47, 95, 255, 0.06); }
.ai-fill-btn:disabled { opacity: 0.55; cursor: not-allowed; }

#ai-generate-input { margin-top: 0.4rem; }
.ai-generate-actions {
  margin-top: 1.1rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}
.ai-generate-cancel-btn {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 100px;
  color: var(--text);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.7rem 1.2rem;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.ai-generate-cancel-btn:hover { border-color: var(--accent); color: var(--accent-h); }
#ai-generate-error { margin-top: 0.7rem; }

.photo-manager-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.photo-manager-item.drag-over { border-color: var(--accent); }
.photo-manager-item.pointer-dragging {
  opacity: 0.9;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  z-index: 10;
  position: relative;
}
.photo-manager-item img { width: 60px; height: 45px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.photo-manager-item-label { flex: 1; font-size: 0.82rem; color: var(--text); }
.photo-manager-item-badge {
  font-family: 'Inter', sans-serif; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  color: #fff; background: var(--accent); border-radius: 100px; padding: 0.2rem 0.55rem;
}
.photo-manager-item-remove {
  width: 26px; height: 26px; border-radius: 50%; border: none;
  background: var(--danger); color: #fff; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 10px;
}
.photo-manager-item-restore {
  width: 26px; height: 26px; border-radius: 50%; border: none;
  background: var(--accent); color: #fff; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}

/* ── Custom Section content type: text fields vs. "Ürün/Hizmet Kartları" ──
   Both blocks stay in the DOM regardless of which is active — only one
   is ever visible via .hidden, driven by the section's own type
   dropdown — so switching back and forth never loses what was typed
   into the other mode. */
.cs-text-fields.hidden,
.cs-cards-editor.hidden {
  display: none;
}
.cs-cards-editor { margin-top: 0.5rem; }
/* .biz-info-input's own height (~39px) is fine for the compact fields
   it's shared with, but this is a standalone tappable control. */
.cs-section-type-select { min-height: 44px; }
.cs-cards-list { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0.75rem; }

.cs-card-editor-item {
  border: 1.5px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  padding: 0.85rem;
}
.cs-card-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}
.cs-card-editor-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}
.cs-card-editor-remove {
  width: 44px; height: 44px;
  margin: -0.6rem -0.6rem -0.6rem 0;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  transition: background .15s, color .15s;
}
.cs-card-editor-remove:hover { background: rgba(220,38,38,.08); color: var(--danger); }

/* A single photo slot (not a gallery) — click anywhere to upload/replace. */
.cs-card-image-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  height: 110px;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  background-size: cover;
  background-position: center;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 0.5rem;
  transition: border-color .15s;
}
.cs-card-image-slot:hover { border-color: var(--accent); }
.cs-card-image-slot.has-image { border-style: solid; color: transparent; }

.cs-card-image-remove {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.7rem;
  margin-bottom: 0.6rem;
  border: 1.5px solid var(--border);
  border-radius: 100px;
  background: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.cs-card-image-remove:hover { border-color: var(--danger); color: var(--danger); }

.cs-card-editor-fields {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cs-card-editor-fields .biz-info-input { min-height: 44px; }

.cs-card-add-btn {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.7rem;
  text-align: center;
  border: 1.5px dashed var(--border);
  border-radius: 9px;
}
.cs-card-add-btn:hover { border-color: var(--accent); }
.cs-card-add-btn.hidden { display: none; }

.photo-manager-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.3rem 0 0.1rem;
  color: var(--text-muted);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.photo-manager-divider::before,
.photo-manager-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Business Info Section ── */
.biz-info-section {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.biz-info-row { margin-bottom: 0.85rem; }
.biz-info-row:last-child { margin-bottom: 0; }

.biz-info-control-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}

.biz-info-control-header label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text);
}

.biz-info-input {
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}

.biz-info-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47,95,255,.12);
}

/* ── Custom subdomain ──
   .biz-info-input's own padding measures under the 44px touch-target
   minimum — fine for the compact fields it's shared with, but this is
   a standalone field, so it gets a bit more of its own padding rather
   than changing the shared base (which several other inputs rely on
   staying compact). */
.custom-slug-section { margin-bottom: 0.85rem; }
.custom-slug-input {
  padding: 0.95rem 0.85rem;
}
.custom-slug-preview {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.custom-slug-preview.hidden { display: none; }
.custom-slug-feedback {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
}
.custom-slug-feedback:empty { display: none; }
.custom-slug-feedback.is-available { color: var(--success); }
.custom-slug-feedback.is-taken { color: var(--danger); }

/* ── Social Links Section ── */
.social-section {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.social-row { margin-bottom: 0.75rem; }
.social-row:last-child { margin-bottom: 0; }

.social-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text);
  margin-bottom: 0.35rem;
}

.social-input {
  width: 100%;
  padding: 0.55rem 0.85rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}

.social-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47,95,255,.12);
}

.social-input::placeholder { color: #94a3b8; }

/* ── Template Cards ── */
.template-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.template-section-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text);
  margin-bottom: 0.6rem;
}

.template-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.template-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.7rem 0.8rem;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.template-card:hover:not(.active) { border-color: #94a3b8; }

.template-card.active {
  border-color: var(--accent);
  background: rgba(47,95,255,.04);
  box-shadow: 0 0 0 3px rgba(47,95,255,.08);
}

.template-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
}

.template-desc {
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.35;
}

/* ── Template mini-preview thumbnails ──
   Pure CSS/HTML shapes, no image assets — each represents that
   template's actual layout at a glance (dark/light bands, split, or
   line rhythm) so the card doesn't rely on the name/description text
   alone. Purely decorative on top of the existing card/button —
   data-template, the click handler, and the card's own active state
   are untouched. */
.template-preview {
  width: 100%;
  height: 34px;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 0.4rem;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.template-preview--classic .tp-band-dark { height: 55%; background: var(--text); }
.template-preview--classic .tp-band-light { height: 45%; background: #fff; }

.template-preview--minimal {
  background: #fff;
  justify-content: center;
  gap: 4px;
  padding: 0 8px;
}
.template-preview--minimal .tp-line { height: 3px; border-radius: 2px; background: var(--border); }
.template-preview--minimal .tp-line--wide { width: 60%; background: var(--text-muted); }
.template-preview--minimal .tp-line--narrow { width: 35%; }

.template-preview--bold { background: var(--text); }

.template-preview--split { flex-direction: row; }
.template-preview--split .tp-half-dark { width: 50%; background: var(--text); }
.template-preview--split .tp-half-light { width: 50%; background: #fff; }

/* ── Palette Cards ── */
.palette-section {
  margin-bottom: 0.6rem;
}

.palette-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.palette-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.6rem 0.7rem;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.palette-card:hover:not(.active) { border-color: #94a3b8; }

.palette-card.active {
  border-color: var(--accent);
  background: rgba(47,95,255,.04);
  box-shadow: 0 0 0 3px rgba(47,95,255,.08);
}

.palette-swatch-bar {
  display: flex;
  height: 14px;
  border-radius: 3px;
  overflow: hidden;
}

.palette-swatch { flex: 1; }

.palette-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
}

/* ── Accent Picker ──
   Layered on top of the 12 palettes, not a replacement — only the
   accent varies here, which affects highlights/stars/buttons/CTAs but
   never text-on-background contrast, so it can't reintroduce the
   contrast bugs the old full 5-colour picker caused. */
.accent-picker-row {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}
.accent-picker-row label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.accent-picker-control {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
#ctrl-accent {
  -webkit-appearance: none;
  appearance: none;
  width: 40px;
  height: 34px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 3px;
  background: none;
}
#ctrl-accent::-webkit-color-swatch-wrapper { padding: 0; }
#ctrl-accent::-webkit-color-swatch { border-radius: 4px; border: none; }
.accent-picker-value {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ── Font Row ── */
.font-row {
  margin-top: 0;
}

/* ── Map Toggle ── */
.map-toggle-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 0;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

.map-toggle-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent);
}

/* ── Customisation Panel ── */
.customization-panel {
  max-width: 680px;
  margin: var(--space-4) auto 0;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
  border-top: 3px solid var(--accent);
}

.custom-inner {
  padding: var(--space-3) var(--space-4);
}

.custom-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

/* Back to living inline in .custom-heading (top of the panel, next to
   "ÖZELLEŞTİR") rather than fixed to the viewport — pushed to the far
   right of the heading row via margin-left:auto, wraps to its own
   line on narrow widths (flex-wrap on .custom-heading) rather than
   overflowing or clipping. Positioning-only revert from the fixed
   bottom bar; the pill shape/shadow/hover-lift styling from the
   polish pass stays as-is. */
.save-business-btn {
  margin-left: auto;
  padding: var(--space-3) var(--space-4);
  line-height: 1;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 100px;
  box-shadow: 0 8px 20px rgba(47,95,255,.35), var(--shadow);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.save-business-btn:hover:not(:disabled) {
  background: var(--accent-h);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(47,95,255,.4), var(--shadow);
}
.save-business-btn:active:not(:disabled) { transform: scale(0.97); }
.save-business-btn:disabled              { opacity: 0.6; cursor: not-allowed; box-shadow: var(--shadow); }

.save-business-status {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--success);
  white-space: nowrap;
}
.save-business-status.save-status-error { color: var(--danger); white-space: normal; }

/* Longer than the error line above (a full sentence + link explaining
   why the save was deliberately skipped, not that it failed) — given
   its own full-width line below the heading row rather than trying to
   sit inline next to the button, since it wouldn't fit gracefully there. */
.save-business-status.save-status-info {
  display: block;
  width: 100%;
  margin-top: var(--space-1);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: normal;
}
.save-business-status.save-status-info a {
  color: var(--accent-h);
  font-weight: 700;
  text-decoration: underline;
}

.custom-heading svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
}

/* Yayınla / Yayından Kaldır — deliberately outline, not filled, so it
   can't be mistaken for Kaydet (the one primary action in this row) at
   a glance. Sits right after Kaydet, before the badge/link. */
.publish-toggle-btn {
  padding: var(--space-3) var(--space-4);
  line-height: 1;
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 100px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  transition: background .15s, color .15s, transform .15s, border-color .15s;
}
.publish-toggle-btn:hover:not(:disabled) {
  background: rgba(47, 95, 255, .08);
  transform: translateY(-1px);
}
.publish-toggle-btn:active:not(:disabled) { transform: scale(0.97); }
.publish-toggle-btn:disabled              { opacity: 0.6; cursor: not-allowed; }

/* Currently live — button now offers to take it down, styled with the
   same danger red used elsewhere for destructive/reversing actions. */
.publish-toggle-btn.is-published {
  color: var(--danger);
  border-color: var(--danger);
}
.publish-toggle-btn.is-published:hover:not(:disabled) {
  background: rgba(220, 38, 38, .08);
}

.publish-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-muted);
}
.publish-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}
.publish-status-badge.is-published { color: var(--success); }
.publish-status-badge.is-published .publish-status-dot { background: var(--success); }

.publish-live-link {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
.publish-live-link:hover { text-decoration: underline; }

/* ── Panel Tiers (accordion) ──
   The customisation panel is grouped into three top-level accordions —
   Görünüm/İçerik/Gelişmiş — each independently open/closed (not
   mutually exclusive), so the panel can be scanned via 3 headers
   instead of everything being visible/scrolled through at once.
   Replaces the old always-visible-tiers + jump-nav-with-scrollspy
   pattern: a collapsed header is itself the navigation now, so a
   separate jump-nav bar would just duplicate what clicking the header
   already does. */
.panel-tier {
  margin-bottom: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.panel-tier:last-child { margin-bottom: 0; }

.panel-tier-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  background: none;
  border: none;
  padding: 0 var(--space-2);
  margin: 0 calc(var(--space-2) * -1) var(--space-2);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  border-radius: var(--radius-sm);
  transition: color .15s, background-color .15s;
}
.panel-tier-toggle:hover { background-color: var(--bg); }
.panel-tier-toggle:hover .panel-tier-label { color: var(--accent); }
.panel-tier-toggle:hover .panel-tier-chevron { color: var(--accent); }

.panel-tier-label {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  transition: color .15s;
}

.panel-tier-chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform .2s ease, color .15s;
}
.panel-tier-toggle[aria-expanded="true"] .panel-tier-chevron { transform: rotate(180deg); }

/* İçerik/Gelişmiş have no boxed container (Görünüm keeps that
   distinction to itself), so their label carries a touch more
   weight to still read as a clear section start after the divider. */
.panel-tier:not(.panel-tier--primary) .panel-tier-label {
  font-size: 1.15rem;
}
.panel-tier:not(.panel-tier--primary) .panel-tier-toggle {
  margin-top: calc(var(--space-1) * -1);
}

/* Note: no .panel-tier--primary { border-top: none } here on purpose.
   That existed in bd2a6ff only to cancel a double-border where the
   (then outer-wrapper) box's own 4-sided border collided with the
   base .panel-tier top divider — now that the box lives on
   .panel-tier-content (an inner element, see below) instead of the
   outer .panel-tier, there's no collision left to cancel, and
   suppressing it here would break the collapsed-state parity bd2a6ff
   verified (Görünüm's top divider must match İçerik/Gelişmiş's when
   collapsed — confirmed still true, re-tested below). */

/* Open-content surface — ONE rule for .panel-tier-content itself,
   deliberately not scoped per tier (no .panel-tier--primary vs
   :not(.panel-tier--primary) split) after bd2a6ff and 56f3d52 both
   turned out to be exactly this class of bug: a treatment that was
   only ever meant to depend on open/closed state got scoped to tier
   identity instead, so Görünüm silently drifted from İçerik/Gelişmiş.
   Writing it once, unconditionally, makes that drift structurally
   impossible instead of relying on two copies staying in sync.
   .panel-tier-content only ever paints when its "hidden" class is
   off, i.e. exactly when open, so no extra :has()/aria selector is
   needed here either.

   Content sits on --surface (white/near-white) as instructed — the
   depth cue is now the ambient glow (::before below) instead of a
   flat --bg fill, so nested cards/inputs that already use --bg (the
   template/palette cards) pop even more clearly against it than
   before. overflow:hidden clips the glow to the box's own rounded
   corners; position:relative gives the ::before something to anchor
   to without affecting layout. */
.panel-tier-content {
  position: relative;
  /* z-index:0 (not just position:relative) is required here — without
     an explicit z-index, this element doesn't establish its own
     stacking context, so the ::before's z-index:-1 below escapes to
     an ancestor's context instead of staying local and renders behind
     this element's own white background, i.e. fully invisible.
     Confirmed by testing: without this, the glow doesn't show even at
     90% opacity. */
  z-index: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
}

/* Soft ambient glow, tucked into the top-right corner, behind the
   content (z-index:-1 keeps it under every normal-flow child without
   needing z-index on the children themselves). Two overlapping radial
   gradients (cobalt + acid yellow) rather than a flat tint, blurred
   heavily so it reads as ambient light, not a shape — kept to a low
   8-16% alpha range so it never competes with form-field/text
   contrast on top of it. Purely decorative (aria-hidden not needed,
   it's not in the accessibility tree at all as a ::before). */
.panel-tier-content::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -18%;
  right: -12%;
  width: 60%;
  height: 60%;
  min-width: 220px;
  min-height: 220px;
  background:
    radial-gradient(circle at 65% 35%, rgba(47,95,255,.14) 0%, transparent 62%),
    radial-gradient(circle at 40% 60%, rgba(238,255,60,.10) 0%, transparent 55%);
  filter: blur(48px);
  pointer-events: none;
}

/* Label/chevron color is still gated on the OPEN state specifically
   (:has aria-expanded=true) — this one is genuinely about open vs
   collapsed, not about the box, so it keeps the :has() check: collapsed,
   Görünüm's header must stay pixel-identical to İçerik/Gelişmiş
   collapsed (bd2a6ff), never showing this cobalt tint just because
   it's the tier that starts open by default. */
.panel-tier--primary:has(.panel-tier-toggle[aria-expanded="true"]) .panel-tier-label,
.panel-tier--primary:has(.panel-tier-toggle[aria-expanded="true"]) .panel-tier-chevron { color: var(--accent-h); }

/* Palette/Font live inside the always-visible primary tier, so their
   collapse toggle stays a secondary "tuck away if you want" affordance
   (smaller) rather than a primary interaction like the accordion rows
   below — but it still needs full-strength ink and real weight so it
   doesn't vanish against the panel when collapsed. Sits on the same
   recessed --bg as the rest of the open primary tier, so its own
   sub-panels (palette cards, font select) get white surfaces to pop
   against, same rhythm as the template cards below.
   Alignment intentionally NOT overridden here — label-left/arrow-right
   is the base .section-toggle-row .toggle-link layout every other
   sub-toggle in the panel (İşletme Bilgileri, Görünürlük, etc.) uses;
   Renk Paleti/Yazı Tipi match that exactly now instead of the old
   right-aligned treatment. */
.panel-tier--primary .section-toggle-row {
  border-bottom: none;
  padding: 0 0 var(--space-2);
}
.panel-tier--primary .toggle-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}
.panel-tier--primary .toggle-link:hover { color: var(--accent); }

/* ── Custom Sections: consolidated tab switcher (pure CSS, no JS) ──
   All three Custom Section blocks and their original toggle buttons
   stay in the DOM untouched for script.js — only which one is VISIBLE
   is driven by the checked radio, via :has() on the shared wrapper. */
.cs-group-wrap { margin-top: 1.25rem; }

.cs-tab-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cs-tabs {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1.15rem;
}

.cs-tab-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.cs-tab-label:hover { border-color: var(--accent); color: var(--accent); }

.cs-group:has(#cs-tab-1:checked) .cs-tab-label[for="cs-tab-1"],
.cs-group:has(#cs-tab-2:checked) .cs-tab-label[for="cs-tab-2"],
.cs-group:has(#cs-tab-3:checked) .cs-tab-label[for="cs-tab-3"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* The original per-section toggle row is retired in favour of the tab
   switcher above — hidden, not removed, so its button element still
   exists for script.js's addEventListener call. */
.cs-toggle-hidden { display: none; }

.cs-instance { display: none; }
.cs-group:has(#cs-tab-1:checked) .cs-instance[data-cs="1"],
.cs-group:has(#cs-tab-2:checked) .cs-instance[data-cs="2"],
.cs-group:has(#cs-tab-3:checked) .cs-instance[data-cs="3"] {
  display: block;
}

.custom-hint {
  font-size: 0.72rem;
  color: #94a3b8;
  margin-top: 0.1rem;
}

.custom-control--font { flex: 1; min-width: 200px; }

#ctrl-font {
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  padding-right: 1.6rem;
}

#ctrl-font:focus  { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,95,255,.12); }
#ctrl-font:hover  { border-color: #94a3b8; }
.view-toggle {
  display: flex;
  gap: 0.25rem;
}

.view-btn {
  padding: 0.35rem 0.75rem;
  border: 1.5px solid rgba(255,255,255,.2);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}

.view-btn.active {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}

.preview-area.mobile-active .browser-dots { display: none; }
.preview-area.mobile-active .url-bar      { display: none; }

.preview-frame.mobile-view {
  width: 390px;
  margin: 0 auto;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 0 0 8px var(--text), 0 20px 60px rgba(0,0,0,.3), inset 0 -80px 60px -30px rgba(0,0,0,.07);
  display: block;
  scrollbar-width: none;
    clip-path: inset(0 round 32px);
}



.preview-frame.mobile-view::-webkit-scrollbar { display: none; }
/* ── Two-Column Builder Layout ── */
.builder-layout {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 1.5rem;
  padding: 1.5rem;
  align-items: start;
}

.builder-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
  padding-bottom: 2rem;
}

.builder-preview {
  position: sticky;
  top: 1.5rem;
  height: calc(100vh - 3rem);
  display: flex;
  flex-direction: column;
}

/* Mobile view switcher — desktop shows sidebar + preview side by side,
   so there's nothing to switch between; hidden until the ≤1024px rule
   below turns it into the single-column view's navigation. */
.mobile-view-tabs { display: none; }

/* Empty state: before any search, single centered column */
.builder-layout:has(.preview-area.hidden) {
  grid-template-columns: minmax(0, 680px);
  justify-content: center;
}
.builder-layout:has(.preview-area.hidden) .builder-preview {
  display: none;
}

.builder-layout .generator-panel,
.builder-layout .customization-panel {
  max-width: none;
  margin: 0;
}

.builder-layout .preview-area {
  max-width: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.builder-layout .preview-frame {
  flex: 1;
  height: auto;
  min-height: 400px;
  border-radius: 0 0 var(--radius) var(--radius);
}

/* Below 1024px: revert to single-column stacked layout */
@media (max-width: 1024px) {
  .builder-layout {
    display: block;
    padding: 0;
  }
  .builder-preview {
    position: static;
    height: auto;
  }

  /* Stacking sidebar above preview means the preview is a scroll away
     from any change made deep in the panel — this tab bar lets a user
     jump straight to it instead. Sticky so it stays reachable while
     scrolling a long panel or a tall preview.

     top was previously 0 — the same offset the shared nav (also
     position:sticky, top:0, z-index:40) sticks to. Once both were
     stuck at once, the switcher sat exactly behind the nav's higher
     z-index, effectively invisible instead of merely low-contrast.
     70.1875px is the nav's own measured rendered height (confirmed via
     a live check at 375/390/430px — constant across all three, since
     it's driven by the fixed-size hamburger button + rem-based
     padding, not viewport width), so the switcher now sticks flush
     against the nav's bottom edge instead of underneath it. */
  .mobile-view-tabs {
    display: flex;
    position: sticky;
    top: 70.1875px;
    z-index: 30;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0.6rem 1rem;
    gap: 0.5rem;
  }
  .mobile-tab {
    flex: 1;
    min-height: 44px;
    padding: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: var(--bg);
    color: var(--text-muted);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
  }
  .mobile-tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }

  /* No business generated yet: nothing to preview, so there's nothing
     to switch to — mirrors the same .preview-area.hidden condition the
     desktop empty-state layout already keys off of. */
  .builder-layout:has(.preview-area.hidden) .mobile-view-tabs {
    display: none;
  }

  /* Default state on mobile: only show sidebar content, hide preview,
     until JS toggles based on tab selection */
  .builder-layout.mobile-showing-preview .builder-sidebar { display: none; }
  .builder-layout:not(.mobile-showing-preview) .builder-preview { display: none; }
  .builder-layout .generator-panel {
    max-width: 680px;
    margin: 2.25rem auto 0;
  }
  .builder-layout .customization-panel {
    max-width: 680px;
    margin: 1.75rem auto 0;
  }
  .builder-layout .preview-area {
    max-width: 1160px;
    margin: 2.5rem auto 4rem;
    padding: 0 1.5rem;
    flex: unset;
    display: block;
    height: auto;
  }
  .builder-layout .preview-frame {
    flex: unset;
    height: 680px;
    min-height: unset;
  }
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .view-toggle                { display: none; }
  .preview-area .browser-dots { display: none; }
  .preview-area .url-bar      { display: none; }
  .preview-frame {
    width: 390px;
    margin: 0 auto;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 0 0 8px var(--text), 0 20px 60px rgba(0,0,0,.3), inset 0 -80px 60px -30px rgba(0,0,0,.07);
    scrollbar-width: none;
  }
  .preview-frame::-webkit-scrollbar { display: none; }
}
@media (max-width: 600px) {
  .builder-layout .generator-panel { margin: 1.25rem 1rem 0; padding: 1.25rem; }
  .builder-layout .customization-panel { margin: 1.25rem 1rem 0; }
  .input-row        { flex-direction: column; }
  .builder-layout .preview-area { padding: 0 0.75rem; margin-top: 1.5rem; }
  #ctrl-font        { font-size: 0.8rem; }
  .template-desc    { font-size: 0.66rem; line-height: 1.4; }
}
@media (max-width: 380px) {
  /* At the very narrowest phones the longest option label still
     clipped after the 600px-tier fix (measured, not estimated) —
     tighten further here rather than shrinking it everywhere. */
  #ctrl-font {
    font-size: 0.72rem;
    padding-right: 1.3rem;
    background-position: right 0.45rem center;
  }
}