/* Closyra — tanıtım sitesi ve yasal sayfalar (closyra.com) */
@font-face { font-family: "Inter Display"; src: url("fonts/InterDisplay-ExtraBold.woff") format("woff"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("fonts/InterDisplay-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("fonts/InterDisplay-Medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-SemiBold.woff") format("woff"); font-weight: 600; font-display: swap; }

:root {
  --paper: #ffffff;
  --mist: #f0f2f8;
  --ink: #121a3a;
  --ink-2: #3c4566;
  --muted: #5e6782;
  --line: #dce1ec;
  --indigo: #3b4ef0;
  --indigo-deep: #2b3bd1;
  --won: #12805c;
  --won-soft: #e3f5ee;
  --meta: #1d6ef2; --google: #e2771b; --whatsapp: #1fa855; --organic: #0f9b8e;
  --wrap: 1180px;
  --display: "Inter Display", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --shot: 0 1px 2px rgba(18, 26, 58, .06), 0 24px 60px -18px rgba(18, 26, 58, .28);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.site { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
a { color: var(--indigo); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; color: var(--ink); }
h1, h2 { font-family: var(--display); font-weight: 800; }
h1 { font-size: clamp(42px, 5.6vw, 72px); line-height: .98; letter-spacing: -0.045em; }
h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.04; letter-spacing: -0.035em; }
h3 { font: 600 19px/1.35 var(--body); letter-spacing: -0.01em; }
.lede { font: 500 clamp(18px, 1.6vw, 21px)/1.5 var(--display); color: var(--ink-2); max-width: 32em; margin: 24px 0 0; letter-spacing: -0.005em; }
.fine { font-size: 14px; color: var(--muted); margin: 14px 0 0; }
.sect { padding: 112px 0; }
.sect-head { max-width: 40rem; margin-bottom: 56px; }
.sect-head p { color: var(--ink-2); margin: 18px 0 0; font-size: 18px; }

/* Düğmeler */
.btn-site { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; border-radius: 12px; background: var(--indigo); color: #fff; font: 600 16px/1 var(--body); text-decoration: none; border: 1px solid var(--indigo); transition: background .15s; }
.btn-site:hover { background: var(--indigo-deep); border-color: var(--indigo-deep); }
.btn-site.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-site.ghost:hover { border-color: var(--ink-2); }
.btn-site.small { min-height: 40px; padding: 0 16px; font-size: 14.5px; border-radius: 10px; }
.btn-site.light { background: #fff; color: var(--indigo-deep); border-color: #fff; }
.btn-site.light:hover { background: #eef0ff; }

/* Üst menü */
.site-head { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .9); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid rgba(220, 225, 236, .7); }
.head-row { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 20px; }
.site-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 800 21px/1 var(--display); letter-spacing: -0.03em; }
.site-nav { display: flex; align-items: center; gap: 28px; font-size: 15px; }
.site-nav a { color: var(--ink-2); text-decoration: none; }
.site-nav a:hover { color: var(--ink); }
.site-nav a.btn-site, .site-nav a.btn-site:hover { color: #fff; }
.site-nav .btn-site { color: #fff; }

/* Ekran çerçeveleri */
.browser { background: #fff; border-radius: 14px; box-shadow: var(--shot); overflow: hidden; border: 1px solid rgba(18, 26, 58, .08); }
.browser-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: #f5f6fa; border-bottom: 1px solid var(--line); }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d4d8e3; }
.browser-bar span { margin-left: 12px; flex: 0 1 320px; height: 24px; border-radius: 7px; background: #fff; border: 1px solid var(--line); font: 12.5px/22px var(--body); color: var(--muted); padding: 0 10px; white-space: nowrap; overflow: hidden; }
.phone { width: 100%; max-width: 270px; border-radius: 38px; padding: 9px; background: #1c2133; box-shadow: var(--shot); }
.phone img { border-radius: 30px; width: 100%; aspect-ratio: 700 / 1515; object-fit: cover; object-position: top; }

/* Hero */
.hero { padding: 72px 0 96px; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 78%; background: linear-gradient(180deg, var(--mist), #fff); z-index: -1; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.hero-copy h1 { max-width: 9.5em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-visual { position: relative; margin-right: calc((100vw - min(100vw, var(--wrap))) / -2 - 24px); padding-bottom: 40px; }
.hero-visual .browser { width: 118%; max-width: 980px; }
.hero-visual .phone { position: absolute; left: -48px; bottom: -8px; width: 34%; max-width: 230px; }
.notice { position: absolute; top: 96px; left: -56px; width: 300px; background: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: var(--shot); border: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: 13.5px; line-height: 1.4; }
.notice-dot { grid-row: span 3; width: 34px; height: 34px; border-radius: 10px; background: #e8f0ff; position: relative; }
.notice-dot::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--meta); }
.notice b { font-weight: 600; }
.notice small { color: var(--muted); font-size: 12.5px; }
.notice .assigned { color: var(--won); font-weight: 600; font-size: 12.5px; }
@media (prefers-reduced-motion: no-preference) {
  .notice { animation: notice-in .7s cubic-bezier(.2, .8, .2, 1) .9s both; }
  @keyframes notice-in { from { opacity: 0; transform: translateY(-14px) scale(.97); } to { opacity: 1; transform: none; } }
}

/* Kaynaklar */
.sources { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0; }
.sources-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 34px; font-size: 15px; color: var(--ink-2); }
.sources-row strong { font-weight: 600; color: var(--ink); margin-right: 6px; }
.sources-row span { display: inline-flex; align-items: center; gap: 9px; }
.sources-row span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--indigo); }
.sources-row .s-meta::before { background: var(--meta); } .sources-row .s-google::before { background: var(--google); }
.sources-row .s-whatsapp::before { background: var(--whatsapp); } .sources-row .s-organic::before { background: var(--organic); }

/* Bir lead, baştan sona */
.journey-list { list-style: none; margin: 0; padding: 0; position: relative; }
.journey-list::before { content: ""; position: absolute; left: 150px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--line), var(--line) 85%, var(--won)); }
.step { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.25fr); gap: 0 48px; align-items: start; padding: 0 0 72px; position: relative; }
.step:last-child { padding-bottom: 0; }
.step::before { content: ""; position: absolute; left: 144px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--indigo); }
.step.won::before { border-color: var(--won); background: var(--won); }
.step time { font: 600 14px/1.4 var(--body); color: var(--muted); padding-right: 28px; }
.step time b { display: block; font: 800 26px/1.1 var(--display); color: var(--ink); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.step-text h3 { font: 800 25px/1.15 var(--display); letter-spacing: -0.025em; }
.step.won .step-text h3 { color: var(--won); }
.step-text p { color: var(--ink-2); margin: 12px 0 0; }
.step-shot { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 18px 40px -22px rgba(18, 26, 58, .35); background: #fff; }
.journey-note { margin-top: 56px; font-size: 13.5px; color: var(--muted); }

/* Panel turu */
.tour { background: var(--mist); }
.tour-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; }
.tour-tabs { display: flex; flex-direction: column; gap: 4px; margin-top: 36px; }
.tour-tab { text-align: left; border: 0; background: transparent; padding: 14px 16px; border-radius: 12px; cursor: pointer; font: inherit; color: var(--ink-2); border-left: 3px solid transparent; }
.tour-tab b { display: block; font: 600 17px/1.3 var(--body); color: var(--ink); }
.tour-tab span { display: none; font-size: 15px; margin-top: 6px; line-height: 1.5; }
.tour-tab[aria-selected="true"] { background: #fff; border-left-color: var(--indigo); box-shadow: 0 6px 20px -12px rgba(18, 26, 58, .25); }
.tour-tab[aria-selected="true"] span { display: block; }
.tour-panel + .tour-panel { margin-top: 28px; }
.js .tour-panel + .tour-panel { margin-top: 0; }
.js .tour-panel[hidden] { display: none; }
.tour-cap { display: none; }
.no-js-cap { margin: 0 0 12px; font-weight: 600; }
.js .no-js-cap { display: none; }

/* Mobil */
.mobile-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; }
.phones { display: flex; gap: 28px; justify-content: center; align-items: flex-start; }
.phones .phone:nth-child(2) { margin-top: 64px; }
.points { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 22px; }
.points li { padding-left: 30px; position: relative; color: var(--ink-2); }
.points li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border-radius: 4px; background: var(--indigo); opacity: .9; }
.points b { color: var(--ink); font-weight: 600; display: block; }

/* Ajanslar */
.agency { background: var(--indigo); color: #e7eaff; position: relative; overflow: hidden; }
.agency h2, .agency h3 { color: #fff; }
.agency .sect-head p { color: #d7dcff; }
.agency-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.agency .points li { color: #d7dcff; }
.agency .points b { color: #fff; }
.agency .points li::before { background: #fff; }
.agency-visual { position: relative; }
.agency-visual .browser { border-color: rgba(255, 255, 255, .2); }
.agency-visual .phone { position: absolute; right: -16px; bottom: -40px; width: 30%; max-width: 200px; background: #0d1230; }

/* Ajans bölümü: markalı panel animasyonu (tüm ölçüler em; kapsayıcı genişliğine göre ölçeklenir) */
.bdemo { container-type: inline-size; --b: #0f6b5c; --bs: #e3f2ef; padding-bottom: 48px; }
.bdemo[data-brand="1"] { --b: #d9480f; --bs: #fdece4; }
.bdemo[data-brand="2"] { --b: #a21caf; --bs: #f8e8fa; }
.bdemo .browser-bar svg { color: var(--won); vertical-align: -1px; margin-right: 5px; }
/* Tarayıcı %86, telefon %26 genişlikte; telefonun bindiği şerit (≈7,4em) içerikte boş bırakılır */
.bdemo .browser { width: 86%; }
.bdemo .bd-main { padding-right: 8.6em; }
.agency-visual.bdemo .phone { width: 26%; max-width: none; right: 0; bottom: 0; }
.bd-url { font-weight: 600; color: var(--ink); }
.bd-url::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--ink); opacity: 0; }
.bdemo.typing .bd-url::after { opacity: 1; }
.bd-app { font-size: calc(100cqw / 62); display: grid; grid-template-columns: 13.5em minmax(0, 1fr); aspect-ratio: 16 / 10; background: #f6f7fb; color: var(--ink); line-height: 1.3; overflow: hidden; position: relative; }
.bd-side { background: #fff; border-right: 1px solid var(--line); padding: 1.6em 1.2em; display: flex; flex-direction: column; gap: 1.6em; }
.bd-logo { display: flex; align-items: center; gap: .7em; font-weight: 700; font-size: 1.15em; white-space: nowrap; }
.bd-mark { display: inline-grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: .55em; background: var(--b); color: #fff; font: 800 1em/1 var(--display); flex: 0 0 auto; transition: background-color .6s; }
.bd-nav { display: grid; gap: .3em; }
.bd-nav i { font-style: normal; font-size: 1.05em; color: var(--ink-2); padding: .55em .8em; border-radius: .5em; }
.bd-nav i.on { background: var(--bs); color: var(--b); font-weight: 600; transition: background-color .6s, color .6s; }
.bd-client { margin-top: auto; border: 1px solid var(--line); border-radius: .7em; padding: .7em .8em; display: grid; gap: .15em; }
.bd-client small { font-size: .85em; color: var(--muted); }
.bd-client b { font-size: .98em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-main { padding: 1.6em 1.8em; display: flex; flex-direction: column; gap: 1.2em; min-width: 0; }
.bd-top { display: flex; justify-content: space-between; align-items: center; }
.bd-top b { font: 800 1.6em/1 var(--display); letter-spacing: -.02em; }
.bd-top span { font-size: .95em; color: var(--ink-2); background: #fff; border: 1px solid var(--line); border-radius: 2em; padding: .35em .9em; }
.bd-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9em; }
.bd-kpis > div { background: #fff; border: 1px solid var(--line); border-radius: .8em; padding: .9em 1em; display: grid; gap: .2em; }
.bd-kpis small { font-size: .92em; color: var(--muted); }
.bd-kpis b { font: 800 1.9em/1.05 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.bd-kpis em { font-style: normal; font-size: .85em; font-weight: 600; color: var(--won); }
.bd-list { background: #fff; border: 1px solid var(--line); border-radius: .8em; padding: .4em 1em; flex: 1; overflow: hidden; }
.bd-head, .bd-row { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) 7.2em 5.6em; align-items: center; gap: .8em; }
.bd-head { grid-template-columns: minmax(0, 1fr) 7.2em 5.6em; font-size: .85em; color: var(--muted); padding: .6em 0 .5em; border-bottom: 1px solid var(--line); }
.bd-row { padding: .62em 0; border-bottom: 1px solid #eef0f5; font-size: 1em; }
.bd-row:last-child { border-bottom: 0; }
.bd-av { width: 2.2em; height: 2.2em; border-radius: 50%; background: #eef0f6; color: var(--ink-2); display: grid; place-items: center; font-size: .82em; font-weight: 700; }
.bd-nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-src { justify-self: start; font-size: .82em; font-weight: 600; padding: .25em .7em; border-radius: 2em; white-space: nowrap; }
.s-meta { background: #e8f0ff; color: var(--meta); } .s-google { background: #fdf0e3; color: #b8560c; } .s-whatsapp { background: #e3f6ea; color: #157a3e; }
.bd-st { justify-self: start; font-size: .82em; font-weight: 600; padding: .25em .7em; border-radius: .4em; }
.st-new { background: var(--bs); color: var(--b); transition: background-color .6s, color .6s; } .st-contact { background: #fff4dc; color: #9a6400; } .st-appt { background: #e6efff; color: #2457c5; } .st-won { background: var(--won-soft); color: var(--won); }
.bd-row.bd-new { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; overflow: hidden; border-bottom-color: transparent; }
.bdemo.lead .bd-row.bd-new { max-height: 4em; padding-top: .62em; padding-bottom: .62em; opacity: 1; border-bottom-color: #eef0f5; background: linear-gradient(90deg, var(--bs), transparent 70%); transition: max-height .5s cubic-bezier(.2, .8, .2, 1), padding .5s, opacity .4s .1s, background-color .6s; }
.bd-app > *, .bd-screen > * { transition: opacity .25s; }
.bdemo.switch .bd-app > *, .bdemo.switch .bd-screen > :not(.bd-status) { opacity: .15; }
.bdemo.bump .bd-k[data-i="0"] { color: var(--b); }
/* Telefon */
.bd-phone { container-type: inline-size; }
.bd-screen { font-size: calc(100cqw / 17); aspect-ratio: 700 / 1515; border-radius: 30px; background: #f6f7fb; overflow: hidden; position: relative; padding: 1em 1em; display: flex; flex-direction: column; gap: .7em; color: var(--ink); line-height: 1.3; }
.bd-status { display: flex; justify-content: space-between; align-items: center; font-size: .8em; padding: 0 .6em; }
.bd-status span { width: 1.8em; height: .8em; border-radius: .25em; border: 1px solid var(--ink); }
.bd-ph-head { display: flex; align-items: center; gap: .55em; font-size: 1.05em; margin-top: .4em; }
.bd-ph-head .bd-mark { font-size: .85em; }
.bd-ph-title { margin: .3em 0 0; font: 800 1.35em/1 var(--display); letter-spacing: -.02em; }
.bd-card { background: #fff; border: 1px solid var(--line); border-radius: .8em; padding: .75em .8em; display: grid; gap: .4em; font-size: .95em; }
.bd-card .bd-src { font-size: .78em; }
.bd-btns { display: flex; gap: .4em; }
.bd-btns i { flex: 1; font-style: normal; font-size: .78em; font-weight: 600; text-align: center; padding: .45em 0; border-radius: .5em; background: var(--bs); color: var(--b); transition: background-color .6s, color .6s; }
.bd-btns i.wa { background: #e3f6ea; color: #157a3e; }
.bd-card.bd-new { max-height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; opacity: 0; overflow: hidden; margin-bottom: -.7em; }
.bdemo.lead .bd-card.bd-new { max-height: 9em; padding-top: .75em; padding-bottom: .75em; border-width: 1px; opacity: 1; margin-bottom: 0; border-color: var(--b); transition: max-height .5s cubic-bezier(.2, .8, .2, 1), padding .5s, opacity .4s .1s, margin .5s, border-color .6s; }
.bd-push { position: absolute; left: .6em; right: .6em; top: 1.9em; z-index: 2; display: flex; gap: .6em; align-items: center; background: rgba(255, 255, 255, .96); border-radius: 1em; padding: .7em .75em; box-shadow: 0 .6em 1.6em -.4em rgba(18, 26, 58, .35); transform: translateY(-160%); opacity: 0; transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
.bd-push .bd-mark { font-size: .8em; }
.bd-push div { display: grid; gap: .1em; min-width: 0; }
.bd-push b { font-size: .78em; font-weight: 700; white-space: nowrap; }
.bd-push div > span { font-size: .78em; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bdemo.push .bd-push { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .bdemo * { transition: none !important; } }
.agency .btn-site { margin-top: 36px; }

/* Fiyatlar */
.price-table { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-top: 2px solid var(--ink); }
.price-col { padding: 32px 28px 8px 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.price-col + .price-col { padding-left: 28px; }
.price-col:last-child { border-right: 0; }
.price-col.featured h3 { color: var(--indigo); }
.price-col h3 { font-size: 18px; }
.amount { font: 800 44px/1 var(--display); letter-spacing: -0.04em; margin: 16px 0 4px; }
.amount span { font: 400 15px var(--body); color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.price-col ul { list-style: none; padding: 0; margin: 20px 0 28px; display: grid; gap: 10px; font-size: 15.5px; color: var(--ink-2); flex: 1; }
.price-col li { padding-left: 22px; position: relative; }
.price-col li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 9px; height: 5px; border-left: 2px solid var(--won); border-bottom: 2px solid var(--won); transform: rotate(-45deg); }
.price-note { margin-top: 28px; font-size: 14.5px; color: var(--muted); }

/* Fiyat türü ve dönem seçimi (JS yoksa iki grup alt alta ve aylık fiyatlar görünür) */
.price-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 14px; }
.price-switch, .cycle-switch { display: none; }
.js .price-switch, .js .cycle-switch { display: inline-flex; gap: 4px; padding: 4px; background: var(--mist); border-radius: 999px; }
.cycle-btn { border: 0; background: transparent; font: 600 15px/1 var(--body); color: var(--ink-2); padding: 11px 18px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.cycle-btn span { font: 700 12px/1 var(--body); color: var(--won); background: var(--won-soft); padding: 5px 8px; border-radius: 99px; }
.cycle-btn[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 4px 14px -8px rgba(18, 26, 58, .35); }
.cycle-btn:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.cycle-note { display: none; margin: 0 0 22px; font-size: 14.5px; color: var(--muted); }
.js .cycle-note { display: block; }
.py { display: none; }
#fiyatlar.yearly .pm { display: none; }
#fiyatlar.yearly .py { display: inline; }
.amount strong { font: inherit; }
.amount-sub { margin: 6px 0 0; font-size: 14px; color: var(--muted); min-height: 1.4em; }
.price-tab { border: 0; background: transparent; font: 600 15.5px/1 var(--body); color: var(--ink-2); padding: 12px 20px; border-radius: 999px; cursor: pointer; }
.price-tab[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 4px 14px -8px rgba(18, 26, 58, .35); }
.price-tab:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.price-group + .price-group { margin-top: 56px; }
.js .price-group + .price-group { margin-top: 0; }
.price-lead { margin: 0 0 18px; font-size: 16px; color: var(--ink-2); max-width: 640px; }
.price-lead b { color: var(--ink); }
.price-col h3 em { display: inline-block; vertical-align: 2px; margin-left: 8px; font: 600 11.5px/1 var(--body); font-style: normal; letter-spacing: .02em; color: var(--indigo); background: #eceefe; padding: 5px 8px; border-radius: 99px; }
.amount.small { font-size: 34px; padding: 5px 0 3px; }
/* Kurumsal: koyu kart */
.price-col.custom { background: var(--ink); color: #fff; border-radius: 18px; padding: 32px 28px 24px; margin: 18px 0 18px 14px; border-right: 0; }
.price-col.custom + .price-col, .price-col + .price-col.custom { padding-left: 28px; }
.price-col.custom h3 { color: #c3c9f7; }
.price-col.custom .amount-sub { color: #a9b0cf; }
.price-col.custom ul { color: #dfe3f5; }
.price-col.custom li::before { border-color: #8ea0ff; }
.price-col.custom .btn-site.ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }
.price-col.custom .btn-site.ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }

/* SSS */
.faq { background: var(--mist); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; font: 600 18px/1.4 var(--body); position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; position: absolute; right: 6px; top: 30px; width: 10px; height: 10px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); transition: transform .2s; }
.faq-list details[open] summary::after { transform: rotate(-135deg); top: 34px; }
.faq-list details p { margin: 0 0 22px; color: var(--ink-2); max-width: 44em; }

/* Kapanış */
.closing { padding: 120px 0; text-align: left; }
.closing h2 { font-size: clamp(36px, 5vw, 64px); max-width: 12em; }
.closing .hero-actions { margin-top: 32px; }

/* Alt bilgi */
.site-foot { background: var(--paper); color: var(--ink-2); border-top: 1px solid var(--line); padding: 72px 0 28px; font-size: 14.5px; }
.site-foot a { color: var(--ink-2); text-decoration: none; }
.site-foot a:hover { color: var(--indigo); }
.site-foot .site-logo { color: var(--ink); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.foot-brand { max-width: 360px; }
.foot-desc { margin: 18px 0 0; line-height: 1.65; }
.foot-contact { margin: 18px 0 0; line-height: 1.7; }
.foot-contact b { color: var(--ink); font-weight: 600; }
.foot-social { display: flex; gap: 8px; margin-top: 22px; }
.foot-social a { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--ink); }
.foot-social a:hover { background: var(--mist); color: var(--indigo); }
.foot-col { display: flex; flex-direction: column; gap: 12px; }
.foot-col h3 { margin: 4px 0 6px; font: 700 15px/1.3 var(--display); color: var(--ink); letter-spacing: -0.01em; }
.foot-col a { line-height: 1.4; }
.foot-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.foot-legal { display: flex; align-items: flex-start; gap: 6px 0; flex-wrap: wrap; }
.foot-legal > * + *::before { content: "·"; margin: 0 8px; color: var(--muted); }
.foot-company summary { cursor: pointer; list-style: none; display: inline; }
.foot-company summary::-webkit-details-marker { display: none; }
.foot-company summary:hover, .foot-linkbtn:hover { color: var(--indigo); }
.foot-company[open] { flex-basis: 100%; order: 9; }
.foot-company[open]::before { display: none; }
.foot-company p { margin: 10px 0 4px; line-height: 1.6; color: var(--ink-2); }
.foot-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.foot-pay { display: flex; align-items: center; gap: 12px; }
.pay-3d { font-size: 12px; font-weight: 600; color: var(--won); background: var(--won-soft); border-radius: 999px; padding: 3px 10px; }
@media (max-width: 1080px) { .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; max-width: 520px; } }
@media (max-width: 640px) { .site-foot { padding-top: 56px; } .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; } .foot-col:last-child { grid-column: 1 / -1; } .foot-bar { margin-top: 40px; } }

/* İletişim */
.contact-page { padding: 72px 0 112px; background: linear-gradient(180deg, var(--mist) 0, var(--paper) 420px); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 64px; align-items: start; }
.contact-intro .eyebrow { display: inline-block; font: 600 13px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--indigo); margin-bottom: 18px; }
.contact-intro h1 { font: 800 clamp(36px, 4.6vw, 56px)/1.05 var(--display); letter-spacing: -0.035em; margin: 0; }
.contact-intro > p { color: var(--ink-2); font-size: 18px; margin: 20px 0 0; max-width: 30em; }
.contact-list { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 18px; }
.contact-list li { display: grid; gap: 2px; padding-left: 22px; position: relative; }
.contact-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--indigo); }
.contact-list b { font-weight: 600; }
.contact-list span { color: var(--ink-2); font-size: 15.5px; }
.contact-direct { margin-top: 36px !important; font-size: 15.5px !important; }
.contact-card { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 36px; box-shadow: var(--shot); }
.cf { display: grid; gap: 18px; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cf-row > * { min-width: 0; }
.cf-field { display: grid; gap: 7px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.cf-field small { font-weight: 400; color: var(--muted); }
.cf-field input, .cf-field select, .cf-field textarea { width: 100%; font: 400 16px/1.4 var(--body); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; transition: border-color .15s, box-shadow .15s; }
.cf-field textarea { resize: vertical; min-height: 130px; }
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(59, 78, 240, .15); }
.cf [aria-invalid="true"] { border-color: #c0262d; }
.cf-err { font-weight: 400; font-size: 13.5px; color: #c0262d; }
.cf-alert { margin: 0; padding: 12px 14px; border-radius: 10px; background: #fdecec; color: #8f1d22; font-size: 14.5px; }
.cf-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.cf-check input { width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--indigo); }
.cf-submit { width: 100%; margin-top: 4px; cursor: pointer; }
.cf-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cf-done { text-align: center; padding: 28px 8px; }
.cf-done svg { margin: 0 auto 18px; }
.cf-done h2 { font: 700 26px/1.2 var(--display); margin: 0 0 10px; }
.cf-done p { color: var(--ink-2); margin: 0 auto 24px; max-width: 28em; }
@media (max-width: 1080px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 640px) { .contact-page { padding: 40px 0 72px; } .contact-card { padding: 22px 18px; border-radius: 16px; } .cf-row { grid-template-columns: 1fr; } }

/* Yasal metinler */
.legal-page { padding: 56px 0 96px; }
.legal-page .wrap { max-width: 780px; }
.legal-page h1 { font-size: clamp(30px, 4vw, 42px); letter-spacing: -0.03em; }
.legal-meta { color: var(--muted); font-size: 14px; margin: 12px 0 36px; }
.legal-page h2 { font: 700 22px/1.3 var(--display); margin: 40px 0 10px; letter-spacing: -0.01em; }
.legal-page p, .legal-page li { color: var(--ink-2); }
.legal-page ul, .legal-page ol { padding-left: 22px; }
.legal-page li { margin: 6px 0; }
.legal-page table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 12px 0; }
.legal-page th, .legal-page td { text-align: left; border-bottom: 1px solid var(--line); padding: 10px 8px; vertical-align: top; }
.legal-toc { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14.5px; margin-bottom: 8px; }

@media (max-width: 1080px) {
  .hero-grid, .agency-grid, .mobile-grid, .tour-grid, .faq-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-visual { margin-right: 0; }
  .hero-visual .browser { width: 100%; }
  .hero-visual .phone { left: auto; right: 12px; bottom: -20px; width: 30%; }
  .notice { left: 12px; top: auto; bottom: 18%; }
  .step { grid-template-columns: 120px minmax(0, 1fr); gap: 16px 32px; }
  .step-shot { grid-column: 2; }
  .journey-list::before { left: 120px; }
  .step::before { left: 114px; }
  .tour-tabs { flex-direction: row; overflow-x: auto; gap: 6px; margin-top: 28px; }
  .tour-tab { flex: 0 0 auto; border-left: 0; border-bottom: 3px solid transparent; border-radius: 10px; padding: 10px 14px; }
  .tour-tab[aria-selected="true"] { border-bottom-color: var(--indigo); }
  .tour-tab[aria-selected="true"] span { display: none; }
  .js .tour-cap { display: block; color: var(--ink-2); margin: 0 0 16px; }
  .agency-visual .phone { right: 8px; }
}
@media (max-width: 640px) {
  body.site { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .site-nav .nav-anchor { display: none; }
  .site-nav { gap: 16px; }
  .sect { padding: 72px 0; }
  .sect-head { margin-bottom: 36px; }
  .hero { padding: 40px 0 64px; }
  .hero-actions .btn-site { flex: 1 1 auto; }
  .notice { position: relative; left: auto; bottom: auto; width: auto; margin: 0 0 16px; }
  .hero-visual { display: flex; flex-direction: column; }
  .hero-visual .notice { order: -1; }
  .journey-list::before { left: 6px; }
  .step { grid-template-columns: 1fr; padding-left: 32px; gap: 10px; padding-bottom: 56px; }
  .step::before { left: 0; }
  .step time { padding: 0; }
  .step-shot { grid-column: 1; margin-top: 8px; }
  .phones .phone { max-width: 46%; }
  .phones .phone:nth-child(2) { margin-top: 40px; }
  .price-col, .price-col + .price-col { padding: 28px 0 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .price-col.custom, .price-col + .price-col.custom { margin: 24px 0 8px; padding: 28px 22px 22px; border-bottom: 0; }
  .price-controls { flex-direction: column; align-items: stretch; }
  .js .price-switch, .js .cycle-switch { justify-content: center; }
  .price-tab, .cycle-btn { flex: 1 1 auto; justify-content: center; }
  .agency-visual .browser { display: none; }
  .agency-visual .phone { position: static; width: 64%; max-width: 240px; margin: 0 auto; }
  .bdemo { padding-bottom: 0; }
  .agency-visual.bdemo .phone { position: static; width: 64%; max-width: 240px; margin: 0 auto; }
  .closing { padding: 80px 0; }
}
.hero-grid > *, .tour-grid > *, .agency-grid > *, .mobile-grid > *, .faq-grid > * { min-width: 0; }
.tour-tab b { white-space: nowrap; }