/* ============================================================================
   tada — shared public-site stylesheet
   ----------------------------------------------------------------------------
   Single source of truth for marketing.html and all 45 pages/*.html.

   Previously this block was embedded, byte-identical, in 45 pages/*.html files plus a
   slightly-newer copy in marketing.html. That duplication is exactly why fixes landed in
   marketing.html and never reached the 45 pages (the section-padding fix, the centred section
   heading, the step/FAQ/table component updates). One file now; fix once, applies everywhere.

   landing.html deliberately keeps its OWN embedded styles: it is the design reference and has a
   genuinely different structure (full-bleed hero card, CSS mockups, panel sections). The tokens
   here are derived FROM landing.html, not the other way round.

   Loaded by: marketing.html, pages/*.html  (<link rel="stylesheet" href="/public.css">)
   ============================================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
@font-face{
  font-family:'Samsung Sharp Sans';
  src:url('/fonts/SamsungSharpSans-Bold.ttf') format('truetype');
  font-weight:1 1000; font-style:normal; font-display:swap;
}
:root{
  --font-primary:'Samsung Sharp Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bg:#0a0a0b; --bg-2:#0e0e11; --bg-3:#141418;
  --surface:rgba(255,255,255,.03); --surface-2:rgba(255,255,255,.055);
  --glass:rgba(20,20,24,.55);
  --border:rgba(255,255,255,.08); --border-2:rgba(255,255,255,.14);
  --text:#f4f4f6; --text-dim:#a6a6b0; --text-mute:#6c6c78; --white:#fff;
  --gold:#387AFF; --gold-rgb:56,122,255; --gold-soft:rgba(var(--gold-rgb),.16); --gold-yuzey:#2A66E6; --gold-rozet:#8fb6ff;
  --shine:linear-gradient(135deg,#ffffff 0%,#c9c9d2 45%,#8f8f9c 100%);
  --ok:#7fd18f; --warn:#e0c070;
  --radius:22px; --radius-lg:30px; --radius-sm:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 30px 80px -30px rgba(0,0,0,.85);
  --maxw:1180px;

  --scroll-thumb:rgba(255,255,255,.12); --scroll-thumb-hover:rgba(255,255,255,.22);
  --hover-fill:rgba(255,255,255,.11); --hover-fill-soft:rgba(255,255,255,.02);
}
/* Black & White theme, ported from landing.html (same localStorage['landing_theme'] key, so a
   choice made on either page carries over to the other) — a real white background/dark text, not
   a filter. Overrides every design token these 45 pages build on, plus the handful of components
   that use a hardcoded hex instead of a token (buttons, nav brand mark, scrolled-nav backdrop). */
html.theme-mono{
  --bg:#ffffff; --bg-2:#f5f5f7; --bg-3:#ececef;
  --surface:rgba(10,10,11,.035); --surface-2:rgba(10,10,11,.06);
  --glass:rgba(255,255,255,.75);
  --border:rgba(10,10,11,.1); --border-2:rgba(10,10,11,.16);
  --text:#0a0a0b; --text-dim:#4a4a52; --text-mute:#78787f; --white:#0a0a0b;
  --gold:#2A66E6; --gold-rgb:56,122,255; --gold-soft:rgba(56,122,255,.12); --gold-yuzey:#2A66E6; --gold-rozet:#1f57cf;
  --shine:linear-gradient(135deg,#0a0a0b 0%,#3c3c42 45%,#6e6e78 100%);
  --shadow:0 30px 80px -30px rgba(10,10,11,.18);
  --ok:#1f7a3d; --warn:#8a6d1f;

  /* Faz 131: acik temada bu dortlu ezilmezse kaydirma cubugu ve hover kayboluyor. */
  --scroll-thumb:rgba(0,0,0,.18); --scroll-thumb-hover:rgba(0,0,0,.30);
  --hover-fill:rgba(0,0,0,.06); --hover-fill-soft:rgba(0,0,0,.03);
}
html.theme-mono body{ background:var(--bg); }
/* The pill sits on the page background here (no dark hero card behind it, unlike landing.html),
   so in light theme it needs the dark tint straight away rather than only once scrolled. */
html.theme-mono .nav-in{ background:rgba(10,10,11,.05); }
html.theme-mono .nav.scrolled .nav-in{ background:rgba(10,10,11,.08); }
html.theme-mono .nav.open .nav-links{ background:rgba(255,255,255,.97); }
html.theme-mono .brand .mark,
html.theme-mono .theme-switch.on{ color:var(--gold); }
html.theme-mono .brand .mark{ color:#0a0a0b; }
html.theme-mono .btn-primary{ background:var(--gold-yuzey); color:#fff; box-shadow:0 10px 30px -8px rgba(56,122,255,.35); }
html.theme-mono .nav-toggle{ color:#0a0a0b; }
html.theme-mono ::selection{ background:var(--gold-soft); color:#0a0a0b; }
html.theme-mono .foot-social a:hover{ color:#0a0a0b; }
/* Comparison table checkmark (table.cmp .yes) — same near-white-on-white bug landing.html had. */
html.theme-mono .yes{ color:#0a0a0b; }
/* Step badges are now flat outlined circles (no gradient fill, no .shine text), so the
   light-theme overrides they used to need are gone. */
/* Contact-form status messages — the dark-theme colors are pale mint/salmon text tuned for a near-
   black background; unreadable on white, no landing.html equivalent to copy since it has no
   contact form. New, distinct dark tones for legibility on the light background. */
html.theme-mono .form-msg.ok{ background:rgba(31,122,61,.08); border:1px solid rgba(31,122,61,.3); color:#1f7a3d; }
html.theme-mono .form-msg.bad{ background:rgba(168,50,38,.08); border:1px solid rgba(168,50,38,.3); color:#a83226; }
*{ font-family:var(--font-primary) !important; }
code,pre,kbd,samp,.mono{ font-family:ui-monospace,'SFMono-Regular',Menlo,monospace !important; }
html{ scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--text); line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative; }
/* Flat background — no ambient glow gradients, in either theme (matches landing.html). */
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:var(--gold-soft); color:#fff; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--bg); }
/* Kaydirma cubugu TEMA TOKEN'INA baglandi (Faz 131). Once sabit rgba(255,255,255,...)
   yaziliydi ve html.theme-mono bloklari bunu hic ele almiyordu; acik temada --bg
   #ffffff olunca thumb BEYAZ USTUNE %12 BEYAZ oluyor, yani kaydirma cubugu tamamen
   kayboluyordu (hem Chromium hem Firefox). panel.css ve admin.css bu ikiliyi zaten
   temaya gore ceviriyor; public tarafina o desen tasinmamisti. */
::-webkit-scrollbar-thumb{ background:var(--scroll-thumb); border-radius:8px; border:3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--scroll-thumb-hover); }
*{ scrollbar-width:thin; scrollbar-color:var(--scroll-thumb) transparent; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; position:relative; z-index:1; }
section{ position:relative; z-index:1; }
.shine{ background:var(--shine); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* Bölüm üstü küçük etiket. Faz 104: eskiden yuvarlak çerçeveli, içinde parlayan bir nokta
   olan bir "hap" (pill) idi — kullanıcı kararıyla kaldırıldı, görüntüyü bozuyordu.
   Yerine sade büyük-harf metin + altında ince ayırıcı çizgi. Nokta CSS'te gizlendi ki
   46 sayfadaki HTML'e tek tek dokunmak gerekmesin. */
.eyebrow{ display:inline-block; font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-dim);
  padding:0 0 9px; background:none; border:0; border-radius:0;
  border-bottom:1px solid var(--border); }
.eyebrow .dot{ display:none; }
/* overflow-wrap is a safety net for long Turkish compounds ("Restoranınızı",
   "Kişiselleştirilebilir") which cannot fit a 320px screen at heading sizes and would otherwise
   push the page into horizontal scroll. It has no visible effect at any width where the word
   already fits. */
h1,h2,h3{ line-height:1.08; letter-spacing:-.02em; overflow-wrap:break-word; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-size:15px;
  padding:13px 24px; border-radius:999px; cursor:pointer; border:1px solid transparent;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease); white-space:nowrap; }
.btn svg{ width:17px; height:17px; }
.btn-primary{ background:var(--gold-yuzey); color:#fff; box-shadow:0 10px 30px -8px rgba(var(--gold-rgb),.45); }
@media (hover:hover) and (pointer:fine){ .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 42px -8px rgba(var(--gold-rgb),.6); } }
.btn-ghost{ background:var(--surface-2); color:var(--text); border-color:var(--border-2); }
/* Hover dolgusu token'a baglandi (Faz 131). Sabit beyaz oldugu icin ACIK TEMADA
   buton hover'da KOYULASMAK yerine BOSALIYORDU: normalde --surface-2 acik gri
   dolgusu var, hover'da beyaza donusup dolgu tamamen kayboluyordu. */
@media (hover:hover) and (pointer:fine){ .btn-ghost:hover{ background:var(--hover-fill); transform:translateY(-2px); } }
/* Basma geri bildirimi (tasklist 3): dugmelerde gecis TANIMLIYDI ama tetikleyen
   :active yoktu. Hover kalkmasi yalnizca fareli cihazda; dokunmatikte :hover
   yapiskan kaliyordu (olculdu: dokunduktan 700ms sonra hala -2px). */
.btn:active:not(:disabled){ transform:scale(.97); transition-duration:.1s; }
@media (prefers-reduced-motion: reduce){ .btn:active:not(:disabled){ transform:none; } }
.btn-lg{ padding:16px 30px; font-size:16px; }

/* NAV — floating pill card, matching landing.html so both pages read as one site.
   Sticky (not fixed) here: marketing pages have no full-bleed hero card for the bar to
   overlay, so it should keep occupying layout space at the top of the page. */
.nav{ position:sticky; top:14px; z-index:100; padding:0 20px; }
/* Wider cap than landing.html's 1040px, and tighter internal gaps — NOT an oversight.
   This nav carries five right-side items (theme toggle, TR/EN selector, "Yönetici Girişi",
   "Ücretsiz Demo", hamburger) where landing.html carries three (no language selector, one CTA).
   Measured: brand 123px + links 566px + right 450px + gaps/padding needs ~1225px, so a 1040px
   pill pushes the whole page into horizontal scroll. Verified empirically — do not "unify" this
   to 1040px without first shrinking the nav's contents. */
.nav-in{
  max-width:var(--maxw); margin:0 auto; padding:10px 12px 10px 22px; display:flex; align-items:center; gap:14px;
  border-radius:999px; border:none;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  background:rgba(255,255,255,.15); box-shadow:none;
  transition:background .3s;
}
.nav.scrolled .nav-in{ background:rgba(255,255,255,.22); }
.brand{ display:flex; align-items:center; gap:11px; font-size:20px; }
.brand .mark{ width:34px; height:34px; display:grid; place-items:center; color:#ffffff; }
.nav-links{ display:flex; gap:4px; margin-left:10px; }
.nav-links a{ color:var(--text-dim); font-size:14.5px; padding:8px 11px; border-radius:999px; transition:color .15s, background .15s; }
.nav-links a:hover,.nav-links a.on{ color:var(--text); background:var(--surface); }
.nav-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.nav-cta-mobile{ display:none; color:var(--gold) !important; }
.theme-switch{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; flex:none;
  background:var(--surface); border:1px solid var(--border); border-radius:999px; color:var(--text-mute);
  cursor:pointer; transition:all .15s; }
.theme-switch:hover{ color:var(--text); border-color:var(--border-2); }
.theme-switch.on{ background:var(--surface-2); color:var(--gold); }
.lang{ display:flex; align-items:center; gap:2px; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:3px; }
.lang button{ background:none; border:none; color:var(--text-mute); font-size:12.5px; cursor:pointer; padding:5px 11px; border-radius:999px; transition:all .15s; }
.lang button.on{ background:var(--surface-2); color:var(--text); }
/* .beta-tag — FAZ 126 DÜZELTMESİ.
   Faz 111'de rozet işaretlemesi landing.html + marketing.html + 45 pages/*.html
   dosyasına kondu ama CSS kuralı YALNIZCA landing.html'in satır içi style'ına
   yazıldı. marketing.html ve 45 sayfa sadece public.css yüklüyor, dolayısıyla
   rozet 46 sayfada STILSIZ kaldı: marka 20px puntosunda "tada beta" diye iki
   kelime yan yana görünüyordu. Bu aynı zamanda üst çubuğu şişirip taşmaya
   katkı veriyordu (Faz 122'de eşik yükseltilerek semptom giderilmişti). */
.beta-tag{
  display:inline-block; vertical-align:middle; margin-left:7px;
  font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold-rozet); background:var(--gold-soft);
  border:1px solid rgba(var(--gold-rgb),.35);
  padding:2px 7px; border-radius:999px; line-height:1.5;
}
.nav-toggle{ display:none; background:var(--surface); border:1px solid var(--border); color:#fff; width:42px; height:42px; border-radius:999px; cursor:pointer; }
.nav-toggle svg{ width:20px; height:20px; margin:auto; }

/* BREADCRUMB */
.crumb{ padding:20px 0 0; font-size:13px; color:var(--text-mute); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.crumb a:hover{ color:var(--text); }

/* HERO */
.p-hero{ padding:46px 0 54px; max-width:760px; }
.p-hero h1{ font-size:clamp(32px,5.2vw,60px); margin:20px 0 20px; }
.p-hero p{ font-size:clamp(16px,1.8vw,19px); color:var(--text-dim); margin-bottom:28px; }
.p-hero .acts{ display:flex; gap:12px; flex-wrap:wrap; }

/* Scoped as `section.block` (0,1,1) on purpose: these sections also carry .wrap, and .wrap's
   `padding` SHORTHAND in the <=560px media query comes later at equal specificity, which wiped
   the vertical padding to 0 on mobile — every section ended up jammed against the next one.
   .wrap keeps owning the horizontal gutter; .block owns only the vertical rhythm. */
section.block{ padding-top:64px; padding-bottom:64px; }
/* Centred like landing.html's .sec-head — these were capped at 680px with no auto margin, so
   every section heading hugged the left edge while the grid below it spanned the full width. */
.b-head{ max-width:680px; margin:0 auto 34px; text-align:center; }
/* ...except inside the two-column form layout, where the heading is the left column sitting
   beside the form and must stay left-aligned. */
.form-wrap .b-head{ margin:0 0 34px; text-align:left; }
.b-head h2{ font-size:clamp(24px,3.4vw,38px); margin-bottom:12px; }
.b-head p{ color:var(--text-dim); font-size:16px; }

/* CARDS */
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px;
  transition:transform .18s var(--ease), border-color .18s, background .18s; display:block; }
.card:hover{ transform:translateY(-4px); border-color:var(--border-2); background:var(--surface-2); }
.card h4{ font-size:16.5px; margin-bottom:8px; }
.card p{ font-size:13.5px; color:var(--text-dim); line-height:1.55; }
.card .more{ font-size:12.5px; color:var(--gold); margin-top:12px; display:inline-flex; align-items:center; gap:6px; }
.card .ci{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; margin-bottom:14px;
  background:linear-gradient(150deg,#232329,#0e0e11); border:1px solid var(--border-2); color:var(--gold); font-size:15px; }

/* PROSE */
.prose{ max-width:820px; margin:0 auto; }
.prose .sec{ padding:22px 0; border-top:1px solid var(--border); }
.prose .sec:first-child{ border-top:none; padding-top:0; }
.prose h3{ font-size:19px; margin-bottom:10px; }
.prose p{ color:var(--text-dim); font-size:15px; line-height:1.75; }

/* STEPS — card grid with a flat numbered badge, matching landing.html (was a connected
   timeline list with a gradient rail). */
.steps{ max-width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.step{
  display:flex; flex-direction:column; padding:28px; border:1px solid var(--border); border-radius:36px;
  background:var(--surface); transition:border-color .3s;
}
.step:hover{ border-color:var(--border-2); }
.step .num{
  flex:none; width:28px; height:28px; border-radius:999px; display:grid; place-items:center; font-size:13px; font-weight:600;
  border:1px solid var(--border-2); color:var(--text-dim);
}
.step h4{ font-size:19px; margin:16px 0 6px; }
.step p{ font-size:14.5px; color:var(--text-dim); line-height:1.45; }
@media (max-width:760px){ .steps{ grid-template-columns:1fr; } }

/* FAQ — one grouped card with divider rows, matching landing.html (was a separate bordered
   card per question). */
.faq{ max-width:820px; margin:0 auto; border:1px solid var(--border); border-radius:16px; overflow:hidden; background:var(--surface); }
.qa{ border-radius:0; margin-bottom:0; background:transparent; border-top:1px solid var(--border); }
.qa:first-child{ border-top:none; }
.qa summary{ list-style:none; cursor:pointer; padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:15.5px; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary .pl{ flex:none; width:24px; height:24px; border-radius:8px; border:1px solid var(--border-2); display:grid; place-items:center; transition:transform .2s; color:var(--text-dim); }
.qa[open] summary .pl{ transform:rotate(45deg); color:var(--gold); }
.qa .ans{ padding:0 20px 18px; color:var(--text-dim); font-size:14.5px; line-height:1.65; }
.qa .ans a{ color:var(--gold); }

/* STATS */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.statc{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px 20px; }
.statc .n{ font-size:clamp(24px,3vw,34px); background:var(--shine); -webkit-background-clip:text; background-clip:text; color:transparent; }
.statc .lb{ font-size:13px; color:var(--text-dim); margin-top:6px; }

/* TABLE — 24px radius + lifted shadow, matching landing.html's comparison card. */
.tbl-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:24px; background:var(--bg-3); box-shadow:0 24px 60px -24px rgba(0,0,0,.3); }
table.cmp{ width:100%; border-collapse:collapse; min-width:560px; }
table.cmp th,table.cmp td{ padding:14px 18px; text-align:left; font-size:14px; border-top:1px solid var(--border); }
table.cmp thead th{ border-top:none; background:var(--bg-3); font-size:14.5px; }
table.cmp thead th:not(:first-child),table.cmp td:not(:first-child){ text-align:center; }
table.cmp td:first-child{ color:var(--text-dim); }
table.cmp tbody tr:hover{ background:var(--hover-fill-soft); }
.yes{ color:#e9e9ee; } .no{ color:var(--text-mute); }
.cmp svg{ width:18px; height:18px; }

/* PLANS */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
.plan{ background:var(--surface); border:1px solid var(--border); border-radius:28px; padding:28px 24px; display:flex; flex-direction:column; transition:transform .18s var(--ease), border-color .18s; }
.plan:hover{ transform:translateY(-5px); border-color:var(--border-2); }
.plan.pop{ background:linear-gradient(180deg,rgba(var(--gold-rgb),.08),var(--surface)); border-color:rgba(var(--gold-rgb),.4); }
.plan .badge{ align-self:flex-start; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); background:var(--gold-soft); border:1px solid rgba(var(--gold-rgb),.3); padding:5px 11px; border-radius:999px; margin-bottom:13px; }
.plan h4{ font-size:18px; margin-bottom:5px; }
.plan .desc{ font-size:13px; color:var(--text-mute); margin-bottom:16px; min-height:34px; }
.plan .amt{ display:flex; align-items:baseline; gap:6px; margin-bottom:18px; }
.plan .amt .v{ font-size:40px; letter-spacing:-.03em; }
.plan .amt .per{ font-size:13px; color:var(--text-mute); }
.plan ul{ list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:22px; }
.plan li{ display:flex; gap:9px; font-size:13.5px; color:var(--text-dim); align-items:flex-start; }
.plan li svg{ width:15px; height:15px; color:var(--gold); flex:none; margin-top:3px; }
.plan .btn{ margin-top:auto; width:100%; }

/* POSTS */
.posts{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.post{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px; transition:transform .18s var(--ease), border-color .18s; }
.post:hover{ transform:translateY(-4px); border-color:var(--border-2); }
.post .meta{ font-size:12px; color:var(--gold); margin-bottom:9px; letter-spacing:.04em; }
.post h4{ font-size:17px; margin-bottom:9px; line-height:1.35; }
.post p{ font-size:13.5px; color:var(--text-dim); line-height:1.55; }

/* TIMELINE */
.tl{ max-width:820px; position:relative; }
.tl::before{ content:''; position:absolute; left:9px; top:10px; bottom:10px; width:2px; background:var(--border-2); }
.tl-item{ display:flex; gap:20px; padding:13px 0; }
.tl-dot{ flex:none; width:20px; height:20px; border-radius:50%; margin-top:4px; position:relative; z-index:1;
  background:var(--bg-3); border:2px solid var(--border-2); }
.tl-item.done .tl-dot{ background:var(--gold); border-color:var(--gold); }
.tl-item.active .tl-dot{ border-color:var(--gold); box-shadow:0 0 0 4px var(--gold-soft); }
.tl-when{ font-size:11.5px; color:var(--gold); letter-spacing:.08em; text-transform:uppercase; }
.tl-item h4{ font-size:17px; margin:5px 0 5px; }
.tl-item p{ font-size:14px; color:var(--text-dim); }

/* STATUS */
.st-list{ border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.st-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; border-top:1px solid var(--border); font-size:14.5px; }
.st-row:first-child{ border-top:none; }
.st-badge{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ok); }
.st-badge .d{ width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 10px var(--ok); }

/* CODE */
.code-list{ border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--bg-2); }
.code-row{ display:flex; gap:18px; align-items:center; padding:14px 18px; border-top:1px solid var(--border); flex-wrap:wrap; }
.code-row:first-child{ border-top:none; }
.code-row code{ font-size:13px; color:var(--gold); background:var(--surface-2); padding:5px 10px; border-radius:8px; white-space:nowrap; }
.code-row span{ font-size:13.5px; color:var(--text-dim); }

/* FORM */
.form-wrap{ display:grid; grid-template-columns:1fr 1.05fr; gap:44px; align-items:start; }
.form{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow); }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12.5px; color:var(--text-dim); margin-bottom:6px; }
.field input,.field textarea{ width:100%; background:var(--bg-2); border:1px solid var(--border); border-radius:12px;
  padding:12px 14px; color:var(--text); font-size:14.5px; transition:border-color .15s, box-shadow .15s; resize:vertical; }
.field input:focus,.field textarea:focus{ outline:none; border-color:rgba(var(--gold-rgb),.55); box-shadow:0 0 0 3px var(--gold-soft); }
.field.err input,.field.err textarea{ border-color:#c0463a; box-shadow:0 0 0 3px rgba(192,70,58,.18); }
.form .btn{ width:100%; margin-top:4px; }
.form-note{ font-size:12px; color:var(--text-mute); text-align:center; margin-top:12px; }
.form-msg{ text-align:center; padding:12px; border-radius:12px; font-size:14px; margin-bottom:15px; display:none; }
.form-msg.ok{ display:block; background:rgba(120,200,120,.1); border:1px solid rgba(120,200,120,.3); color:#a6e0a6; }
.form-msg.bad{ display:block; background:rgba(200,90,80,.1); border:1px solid rgba(200,90,80,.3); color:#e5a49c; }

/* CTA */
.cta-box{ background:linear-gradient(160deg,rgba(var(--gold-rgb),.09),var(--surface)); border:1px solid var(--border-2);
  border-radius:var(--radius-lg); padding:44px 36px; text-align:center; }
.cta-box h2{ font-size:clamp(24px,3.2vw,36px); margin-bottom:12px; }
.cta-box p{ color:var(--text-dim); font-size:16px; margin-bottom:24px; max-width:560px; margin-left:auto; margin-right:auto; }
.cta-box .acts{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
/* 320px sinifi telefonlarda Ücretsiz Demo Talep Et (btn-lg, nowrap) cagri
   kutusunun ic genisligini 1px asiyordu. Olculdu: 241px dugme, 240px kutu ici;
   Canli Demo dugmesi eklenmeden ONCE de ayniydi. Yan bosluk daraltiliyor,
   yazi tek satirda kaliyor. */
@media (max-width:360px){
  .cta-box .acts .btn-lg, .p-hero .acts .btn-lg{ padding-left:20px; padding-right:20px; }
}

/* FOOTER */
.footer{ border-top:1px solid var(--border); padding:60px 0 30px; margin-top:50px; }
/* auto-fit so any number of footer groups wraps cleanly; brand keeps its own row */
.foot-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:30px 22px; margin-bottom:40px; }
.foot-brand{ grid-column:1/-1; }
.foot-brand p{ color:var(--text-mute); font-size:13.5px; margin:15px 0 18px; max-width:420px; }
.foot-social{ display:flex; gap:10px; }
.foot-social a{ width:38px; height:38px; border-radius:11px; border:1px solid var(--border); background:var(--surface); display:grid; place-items:center; color:var(--text-dim); transition:all .15s; }
.foot-social a:hover{ color:#fff; border-color:var(--border-2); background:var(--surface-2); transform:translateY(-2px); }
.foot-social svg{ width:17px; height:17px; }
.foot-col h5{ font-size:13px; color:var(--text); margin-bottom:13px; }
.foot-col a{ display:block; color:var(--text-mute); font-size:13.5px; padding:4px 0; transition:color .15s; }
.foot-col a:hover{ color:var(--text); }
.foot-bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:24px; border-top:1px solid var(--border); flex-wrap:wrap; }
.foot-bottom p{ font-size:13px; color:var(--text-mute); }

.js-anim .rv{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.js-anim .rv.in{ opacity:1; transform:none; }

@media (max-width:960px){
  .grid3{ grid-template-columns:repeat(2,1fr); }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  /* margin auto matters once max-width kicks in — without it the single column hugs the left. */
  .price-grid{ grid-template-columns:1fr; max-width:430px; margin:0 auto; }
  .plan.pop{ order:-1; }
  .form-wrap{ grid-template-columns:1fr; gap:26px; }
  .posts{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .foot-grid{ grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:24px 18px; }
}
/* KIRILMA NOKTASI 1080 -> 1220 (Faz 122). Eski deger "marka + 5 link + dil + CTA"
   varsayimiyla secilmisti; o zamandan beri iki sey eklendi: "Fiyatlandirma"
   baglantisi geri geldi (6. link) ve marka adinin yanina "beta" rozeti kondu.
   Ikisi birlikte cubuguu ~117px tasiriyordu: nav scrollWidth 1209 > clientWidth
   1092, sonucta SAYFA YATAY KAYIYOR ve marka sol kenardan kesiliyordu (kullanici
   ekran goruntusuyle bildirdi). Menu artik daha erken hamburger'e donuyor. */
@media (max-width:1220px){
  .nav-links{ display:none; }
  .nav-toggle{ display:grid; }
  .nav.open .nav-links{ display:flex; flex-direction:column; position:absolute; top:calc(100% + 8px); left:20px; right:20px;
    background:rgba(10,10,11,.97); backdrop-filter:blur(16px); border:1px solid var(--border); border-radius:22px; padding:12px; gap:2px;
    box-shadow:0 16px 40px -14px rgba(0,0,0,.65); }
  .nav.open .nav-links a{ padding:12px 14px; }
}
/* PAZARLAMA SAYFALARI UST CUBUGU (2026-09-13). marketing.html cubuguna
   "Canli Demo" baglantisi eklendi (gercek demo restorana gider; yanindaki
   "Demo Talep Et" bir FORM). Eklenince cubuk sigmadi — OLCULDU:
   - dugmeler 1180px kapsulun disina 79px tasiyordu (her genislikte; eski kod
     da 13px tasiyordu),
   - 1240-1320px arasinda sayfa yatay kayiyordu,
   - "Canli Demo" iki kelime oldugu icin iki satira kiriliyordu.
   Yazi tek satira alininca cubugun ihtiyaci ~1298px. Kapsul YALNIZ bu
   sayfalarda 1320px'e genisletildi (--maxw DEGISMEDI: .wrap icerik genisligi
   de onu kullaniyor) ve menu 1360px altinda hamburgere donuyor — ayni
   gerekceyle yukaridaki 1080->1220 kaydirmasi da yapilmisti.
   .nav-pazarlama sinifina bagli: bu dosya 7 sayfanin ortak stili, landing ve
   market cubuklari etkilenmesin. Tema (mono) kurallari daha ozgul oldugu icin
   acik menu rengi orada yine onlardan gelir. */
.nav-pazarlama .nav-links a{ white-space:nowrap; }
.nav-pazarlama .nav-in{ max-width:1320px; }
@media (max-width:1359px){
  .nav-pazarlama .nav-links{ display:none; }
  .nav-pazarlama .nav-toggle{ display:grid; }
  .nav-pazarlama.open .nav-links{ display:flex; flex-direction:column; position:absolute; top:calc(100% + 8px); left:20px; right:20px;
    background:rgba(10,10,11,.97); backdrop-filter:blur(16px); border:1px solid var(--border); border-radius:22px; padding:12px; gap:2px;
    box-shadow:0 16px 40px -14px rgba(0,0,0,.65); }
  .nav-pazarlama.open .nav-links a{ padding:12px 14px; }
}
@media (max-width:620px){
  /* both nav buttons move into the collapsed menu so the bar never overflows */
  .nav-right > .btn{ display:none; }
  .nav-cta-mobile{ display:block; }
  .brand{ font-size:17px; } .brand .mark{ width:30px; height:30px; }
  .lang button{ padding:5px 9px; font-size:11.5px; }
  .nav-in{ gap:10px; padding:12px 18px; }
}
@media (max-width:560px){
  .wrap{ padding:0 18px; }
  .grid3{ grid-template-columns:1fr; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .form .row{ grid-template-columns:1fr; }
  .cta-box{ padding:32px 22px; }
  .foot-grid{ grid-template-columns:1fr; }
  .foot-bottom{ justify-content:center; text-align:center; }
  .p-hero .acts .btn{ flex:1; }
}
@media (max-width:760px){
  /* Tighter vertical rhythm on small screens — longhand for the same .wrap reason as above. */
  section.block{ padding-top:44px; padding-bottom:44px; }
}

/* ── Very small phones (320px class) ──
   Measured: even after the <=620px rules hide both CTAs, the bar still needs ~324px against
   ~310px of usable width, so the nav was the ONE source of horizontal scroll left on the whole
   public site. The compact TR/EN pill is dropped here (the footer carries a full
   "Türkçe / English" switcher, so language stays reachable) and the remaining controls tighten
   up — same escalation the <=620px block already uses for the CTAs.
   Must stay AFTER the <=620px block: equal specificity, later rule wins. */
@media (max-width:400px){
  .nav{ padding:0 12px; }
  .nav-in{ gap:8px; padding:10px 12px; }
  .nav-right{ gap:6px; }
  .nav-right .lang{ display:none; }
  .brand{ font-size:15px; gap:8px; }
  .brand .mark{ width:28px; height:28px; }
  .theme-switch{ width:30px; height:30px; }
  .nav-toggle{ width:36px; height:36px; }
}

/* ── Focus states (keyboard accessibility) ──
   :focus-visible only, so a mouse click never paints a ring but Tab always does. */
.btn:focus-visible,
.nav-links a:focus-visible,
.nav-cta-mobile:focus-visible,
.foot-col a:focus-visible,
.foot-social a:focus-visible,
.crumb a:focus-visible,
.card:focus-visible,
.theme-switch:focus-visible,
.lang button:focus-visible,
.nav-toggle:focus-visible,
.qa summary:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  .js-anim .rv{ transition:none; opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ================================================================
   YÜKLENME GÖSTERGELERİ (Faz 104)
   Site genelinde bekleme anlarında kullanılır. Tasarım kararı: renk ve boyut
   `currentColor` + `em` üzerinden alınır — böylece koyu/açık temaya ve içinde
   bulunduğu yazı boyutuna kendiliğinden uyar, ayrı tema kuralı gerekmez.
   ================================================================ */

/* Küçük dönen halka. Buton içi, satır sonu, sekme başlığı gibi dar yerler için. */
.tspin{
  display:inline-block; width:1em; height:1em; flex:0 0 auto;
  border:2px solid currentColor; border-right-color:transparent;
  border-radius:50%; vertical-align:-.14em; opacity:.55;
  animation:tspin .62s linear infinite;
}
.tspin-lg{ width:1.6em; height:1.6em; border-width:2.5px; }
@keyframes tspin{ to{ transform:rotate(360deg); } }

/* Simge + metin birlikte: "◌ Yükleniyor…" */
.tloading{
  display:inline-flex; align-items:center; gap:.6em;
  color:var(--text-dim); font-size:14px;
}
/* Bir bölümün tamamı beklerken ortalanmış hâli. */
.tloading-block{
  display:flex; align-items:center; justify-content:center; gap:.6em;
  min-height:120px; color:var(--text-dim); font-size:14px;
}

/* İskelet (skeleton): kart/liste yerine geçici gri blok. Metin yerine bunu
   göstermek, içerik gelince sayfanın zıplamasını da azaltır. */
.tskel{
  position:relative; overflow:hidden;
  background:var(--surface-2); border-radius:var(--radius-sm);
  min-height:14px;
}
.tskel::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(var(--gold-rgb),.10), transparent);
  animation:tskel 1.25s var(--ease) infinite;
}
.tskel + .tskel{ margin-top:10px; }
.tskel-line{ height:12px; }
.tskel-title{ height:20px; width:45%; }
.tskel-card{ height:110px; border-radius:var(--radius); }
@keyframes tskel{ from{ transform:translateX(-100%); } to{ transform:translateX(100%); } }

/* Sayfa üstü ince ilerleme çizgisi — gezinme/uzun istek sırasında.
   .is-done eklenince tamamlanıp kendini gizler. */
.tbar{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:9999;
  background:var(--gold); transform-origin:0 50%;
  transform:scaleX(0); opacity:1;
  animation:tbar 8s var(--ease) forwards;
  box-shadow:0 0 12px rgba(var(--gold-rgb),.6);
}
.tbar.is-done{ animation:none; transform:scaleX(1); opacity:0; transition:transform .2s var(--ease), opacity .35s .15s; }
@keyframes tbar{ 0%{transform:scaleX(0)} 40%{transform:scaleX(.65)} 80%{transform:scaleX(.88)} 100%{transform:scaleX(.95)} }

/* Hareketi azalt tercihi: dönme/kayma yerine sade bir nabız. Gösterge yine
   görünür kalır — tamamen kaldırmak "bekliyor" bilgisini yok ederdi. */
@media (prefers-reduced-motion: reduce){
  .tspin{ animation:tpulse 1.4s ease-in-out infinite; border-right-color:currentColor; }
  .tskel::after{ animation:tpulse 1.4s ease-in-out infinite; }
  .tbar{ animation:none; transform:scaleX(.4); }
  @keyframes tpulse{ 0%,100%{opacity:.25} 50%{opacity:.7} }
}

/* ═══════════════ SAYFALAR ARASI KAYMA GECISI (Faz 176) ═══════════════
   Landing'den girise, girisden menuye… her sayfa gecisi eskiden ANLIKTI: bir
   sayfa kayboluyor, otekisi patlar gibi geliyordu.

   Artik iki sayfa BIRLESIK bir yuzey gibi kayiyor — eski sayfa sola cikarken
   yeni sayfa sagdan geliyor ve ikisi ayni anda hareket ediyor.

   NEDEN "View Transitions" (JS ile elle animasyon degil):
   Sayfalar ayri HTML dosyalari. JS ile yapmak icin her baglantiya tiklamayi
   yakalayip once animasyonu oynatmak, sonra `location.href` atamak gerekirdi —
   bu, tarayicinin geri/ileri tuslarini, orta tikla yeni sekmeyi ve on-yuklemeyi
   bozar. Tarayicinin kendi gecis mekanizmasi bunlarin hicbirini bozmaz.

   DESTEKLEMEYEN TARAYICI: kural sessizce yok sayilir ve gecis BUGUNKU gibi
   anlik olur. Yani hicbir sey bozulmaz, yalnizca animasyon olmaz.

   IKI TARAF DA KATILMALI: gecis, hem cikilan hem girilen sayfa bu kurali
   tasidiginda calisir. Bu yuzden blok hem `public.css`'e (48 sayfa) hem de
   kendi stilini tasiyan bagimsiz sayfalara ayri ayri konuyor. */
@view-transition { navigation: auto; }

::view-transition-group(root){ animation-duration:.34s; }

/* Eski sayfa sola cikar — YENIDEN DAHA AZ yol alir (%18). Bu fark, iki yuzeyin
   birbirine yapisik oldugu hissini veren sey; ikisi ayni hizda kaysaydi
   birbirinden bagimsiz iki resim gibi gorunurdu. */
::view-transition-old(root){
  animation:sayfaCikSol .34s cubic-bezier(.4,0,.2,1) both;
}
::view-transition-new(root){
  animation:sayfaGirSag .34s cubic-bezier(.4,0,.2,1) both;
}
@keyframes sayfaCikSol{
  from{ transform:translateX(0); opacity:1; }
  to  { transform:translateX(-18%); opacity:.4; }
}
@keyframes sayfaGirSag{
  from{ transform:translateX(100%); }
  to  { transform:translateX(0); }
}

@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){ animation:none; }
}