/* Mimari Planlar — aydınger, mürekkep ve fosforlu kalem */
@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(../fonts/archivo/archivo-latin-ext-wdth-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(../fonts/archivo/archivo-latin-wdth-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Kiril (Rusça) ve Arapça: Archivo bu harfleri içermez; yalnız o karakterler için devreye giren yazı tipleri */
@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/onest/onest-cyrillic-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/onest/onest-cyrillic-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 160 700;
  src: url(../fonts/readex/readex-pro-arabic-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

:root {
  --paper: #e6e9e2;      /* aydınger */
  --sheet: #f6f7f3;      /* pafta kâğıdı */
  --ink: #17202b;        /* rapido mürekkebi */
  --graphite: #59626d;   /* kurşun kalem */
  --rule: #c2c7be;       /* ince çizgi */
  --rule-soft: #d6dad2;
  --marker: #e2ee3c;     /* fosforlu kalem */
  --marker-deep: #c9d622;
  --cyan: #22448f;       /* ozalit */
  --cyan-deep: #172f66;
  --cyan-line: #dbe6ff;
  --danger: #a3261b;
  --ok: #1f6b3a;
  --font: "Archivo Variable", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --w-wide: 125%;
  --w-narrow: 78%;
  --gutter: clamp(16px, 3.2vw, 40px);
  --max: 1320px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  font-stretch: 100%;
  text-rendering: optimizeLegibility;
}
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--marker); }
::selection { background: var(--marker); color: var(--ink); }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3, h4 { margin: 0; font-weight: 640; line-height: 1.02; letter-spacing: -0.012em; }
.display { font-stretch: var(--w-wide); font-weight: 680; font-size: clamp(28px, 3.3vw, 48px); line-height: 1.02; letter-spacing: -0.02em; }
.h1 { font-stretch: 112%; font-size: clamp(32px, 4.2vw, 56px); }
.h2 { font-stretch: 112%; font-size: clamp(26px, 3vw, 38px); }
.h3 { font-size: 21px; font-stretch: 104%; }
.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--graphite); max-width: 60ch; }
.muted { color: var(--graphite); }
.small { font-size: 14px; }
.narrow { font-stretch: var(--w-narrow); }
p { margin: 0 0 1em; max-width: 72ch; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(48px, 7vw, 104px) 0; }
.stack > * + * { margin-top: 14px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }

/* ---------- üst bar */
.topbar { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.topbar .wrap { display: flex; align-items: center; gap: 20px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-stretch: var(--w-wide); font-weight: 720; font-size: 19px; letter-spacing: -0.02em; white-space: nowrap; }
.brand svg { width: 26px; height: 26px; flex: none; }
.nav { display: flex; gap: 4px; align-items: center; margin-left: auto; }
.nav a { text-decoration: none; padding: 8px 12px; border-radius: 3px; font-weight: 520; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--sheet); box-shadow: inset 0 -2px 0 var(--ink); }
.nav .balance { font-stretch: var(--w-narrow); font-weight: 600; padding: 6px 10px; border: 1px solid var(--ink); border-radius: 3px; background: var(--sheet); }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--ink); border-radius: 3px; padding: 8px 10px; font: inherit; }
@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }
  .nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--sheet); border-bottom: 1px solid var(--ink); padding: 8px var(--gutter) 16px; }
  .nav.open { display: flex; }
  .nav a { padding: 12px 8px; }
}

/* ---------- düğmeler */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 620; font-size: 16px; padding: 12px 20px; min-height: 46px; border-radius: 3px; border: 1.5px solid var(--ink); background: var(--sheet); color: var(--ink); text-decoration: none; cursor: pointer; transition: transform .12s ease, background-color .12s ease; }
.btn:hover { text-decoration: none; background: #fff; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--marker); }
.btn-primary:hover { background: var(--marker-deep); }
.btn-ink { background: var(--ink); color: var(--sheet); }
.btn-ink:hover { background: #2a3645; }
.btn-ghost { border-color: transparent; background: transparent; text-decoration: underline; text-underline-offset: 4px; }
.btn-small { padding: 7px 12px; min-height: 36px; font-size: 14px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn-danger { border-color: var(--danger); color: var(--danger); }

/* ---------- pafta çerçevesi */
.sheet { position: relative; background: var(--sheet); border: 1.5px solid var(--ink); }
.sheet::before { content: ""; position: absolute; inset: 7px; border: 0.75px solid var(--ink); pointer-events: none; z-index: 2; }
.sheet-zones { position: absolute; inset: 0; pointer-events: none; z-index: 2; font-stretch: var(--w-narrow); font-size: 10px; color: var(--graphite); }
.sheet-zones span { position: absolute; transform: translate(-50%, -50%); }
.mm-grid { background-image: linear-gradient(var(--rule-soft) 1px, transparent 1px), linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px); background-size: 24px 24px; }

/* antet: paftanın başlık bloğu */
.antet { display: grid; grid-template-columns: repeat(4, 1fr); border: 1.5px solid var(--ink); background: var(--sheet); }
.antet > div { padding: 8px 12px; border-right: 0.75px solid var(--ink); border-bottom: 0.75px solid var(--ink); min-width: 0; }
.antet > div:nth-child(4n) { border-right: 0; }
.antet .k { display: block; font-size: 12px; color: var(--graphite); font-stretch: var(--w-narrow); line-height: 1.2; }
.antet .v { display: block; font-weight: 620; font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.antet .span2 { grid-column: span 2; }
.antet .span4 { grid-column: 1 / -1; border-right: 0; }
.antet .title-cell .v { font-stretch: 112%; font-size: 22px; font-weight: 680; }
.antet .last { border-bottom: 0; }

/* ---------- hero */
.hero { padding: 18px 0 0; }
.hero-sheet { min-height: min(820px, calc(100svh - 96px)); display: grid; }
.hero-canvas { position: absolute; inset: 8px; z-index: 1; }
.hero-canvas canvas { width: 100% !important; height: 100% !important; cursor: grab; touch-action: pan-y; }
.hero-canvas canvas:active { cursor: grabbing; }
.hero-copy { position: relative; z-index: 3; padding: clamp(28px, 4vw, 56px); max-width: 720px; pointer-events: none; }
.hero-copy > * { pointer-events: auto; }
.hero-copy .lead { margin-top: 18px; color: var(--ink); max-width: 46ch; }
.hero-copy .row { margin-top: 26px; }
.hero-hint { position: absolute; z-index: 3; left: 26px; bottom: 22px; font-size: 13px; color: var(--graphite); font-stretch: var(--w-narrow); }
@media (max-width: 900px) {
  .hero-sheet { min-height: 0; display: block; }
  .hero-canvas { position: relative; inset: auto; height: 62vw; min-height: 300px; margin: 0 8px; }
  .hero-hint { display: none; }
}

/* ---------- plan kartları */
.section-head { display: flex; align-items: end; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.section-head p { margin: 8px 0 0; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 22px; }
.plan-card { position: relative; display: flex; flex-direction: column; background: var(--sheet); border: 1.5px solid var(--ink); text-decoration: none; color: inherit; }
.plan-card:hover { text-decoration: none; }
.plan-card .media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1.5px solid var(--ink); background: #fff; }
.plan-card .media img, .plan-card .media video, .plan-card .media svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plan-card .media .plan-thumb { object-fit: contain; padding: 14px; }
.plan-card .media video { opacity: 0; transition: opacity .25s ease; }
.plan-card.playing .media video { opacity: 1; }
.plan-card .badge { position: absolute; z-index: 2; left: 10px; top: 10px; }
.plan-card .cardantet { display: grid; grid-template-columns: 1fr auto; }
.plan-card .cardantet > div { padding: 10px 14px; }
.plan-card .cardantet .t { border-right: 0.75px solid var(--ink); }
.plan-card h3 { font-size: 20px; font-stretch: 108%; }
.plan-card .facts { display: flex; gap: 14px; font-size: 14px; color: var(--graphite); margin-top: 6px; font-stretch: var(--w-narrow); flex-wrap: wrap; }
.plan-card .price { display: flex; flex-direction: column; justify-content: center; align-items: end; font-weight: 700; font-stretch: 104%; white-space: nowrap; }
.plan-card .price small { font-weight: 450; color: var(--graphite); font-size: 12px; }
.plan-card:hover, .plan-card:focus-visible { outline: none; box-shadow: 6px 6px 0 var(--ink); transform: translate(-2px, -2px); }
.plan-card { transition: box-shadow .15s ease, transform .15s ease; }
.badge { display: inline-block; padding: 3px 9px; font-size: 12px; font-weight: 600; background: var(--marker); border: 1px solid var(--ink); border-radius: 2px; font-stretch: var(--w-narrow); }
.badge.ink { background: var(--ink); color: var(--sheet); }
.badge.soft { background: var(--sheet); }

/* ---------- filtre */
.filters { display: grid; grid-template-columns: 2fr repeat(5, 1fr) auto; gap: 10px; align-items: end; margin-bottom: 26px; }
@media (max-width: 900px) { .filters { grid-template-columns: 1fr 1fr; } .filters .q { grid-column: 1 / -1; } }

/* ---------- formlar */
label { display: block; font-size: 14px; font-weight: 560; margin-bottom: 5px; }
.field { margin-bottom: 14px; }
.input, select, textarea { width: 100%; font: inherit; font-size: 16px; padding: 11px 12px; color: var(--ink); background: #fff; border: 1.5px solid var(--ink); border-radius: 3px; }
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 4px var(--marker); }
.check { display: flex; gap: 10px; align-items: start; font-weight: 450; }
.check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--ink); }
.help { font-size: 13px; color: var(--graphite); margin-top: 4px; }
.form-card { max-width: 480px; margin: 0 auto; padding: clamp(22px, 4vw, 40px); }
.alert { padding: 12px 14px; border: 1.5px solid var(--ink); background: #fff; margin-bottom: 16px; border-left-width: 6px; }
.alert.error { border-color: var(--danger); color: var(--danger); }
.alert.ok { border-color: var(--ok); color: var(--ok); }
.alert.note { background: var(--marker); }

/* ---------- plan detay */
.detail { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1000px) { .detail { grid-template-columns: 1fr; } }
.viewer-sheet { padding: 8px; }
.viewer-stage { position: relative; aspect-ratio: 16 / 11; background: #fff; overflow: hidden; }
.viewer-stage canvas { width: 100% !important; height: 100% !important; touch-action: none; }
.viewer-stage video, .viewer-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.viewer-stage .plan-svg { width: 100%; height: 100%; }
.viewer-tabs { display: flex; gap: 0; border-bottom: 1.5px solid var(--ink); margin: -8px -8px 8px; position: relative; z-index: 3; background: var(--sheet); flex-wrap: wrap; }
.viewer-tabs button { font: inherit; font-weight: 580; padding: 12px 16px; border: 0; border-right: 0.75px solid var(--ink); background: transparent; cursor: pointer; }
.viewer-tabs button[aria-selected="true"] { background: var(--marker); }
.viewer-tools { position: absolute; z-index: 3; left: 10px; top: 10px; display: flex; gap: 6px; flex-wrap: wrap; max-width: calc(100% - 20px); }
.viewer-tools button, .viewer-tools label.tool { font: inherit; font-size: 13px; font-weight: 580; padding: 7px 10px; border: 1.2px solid var(--ink); background: var(--sheet); border-radius: 3px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.viewer-tools button[aria-pressed="true"] { background: var(--marker); }
.viewer-tools input[type="range"] { width: 110px; accent-color: var(--ink); }
.viewer-status { position: absolute; z-index: 3; right: 12px; bottom: 10px; font-size: 13px; color: var(--graphite); background: color-mix(in srgb, var(--sheet) 85%, transparent); padding: 4px 8px; }
.viewer-status:empty { display: none; }
.viewer-loading { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; font-stretch: var(--w-narrow); color: var(--graphite); }
.measure-label { position: absolute; z-index: 4; pointer-events: none; background: var(--ink); color: var(--sheet); font-size: 13px; padding: 3px 7px; font-weight: 600; transform: translate(-50%, -140%); white-space: nowrap; }
.buybox { padding: 0; }
.buybox .antet { border: 0; grid-template-columns: 1fr 1fr; }
.buybox .antet > div:nth-child(4n) { border-right: 0.75px solid var(--ink); }
.buybox .antet > div:nth-child(2n) { border-right: 0; }
.buybox .pricebar { padding: 18px; display: grid; gap: 10px; border-top: 1.5px solid var(--ink); }
.buybox .price-big { font-size: 34px; font-weight: 720; font-stretch: 108%; line-height: 1; }
.includes { margin: 0; padding: 0; list-style: none; }
.includes li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 0.75px dashed var(--rule); font-size: 15px; }
.includes li span:last-child { color: var(--graphite); white-space: nowrap; font-stretch: var(--w-narrow); }
.sheets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 18px; }
.sheets-grid figure { margin: 0; }
.sheets-grid figcaption { padding: 10px 14px; border-top: 0.75px solid var(--ink); font-weight: 600; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.gallery a { display: block; border: 1.5px solid var(--ink); }
.gallery img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.prose { max-width: 70ch; }
.prose p { white-space: pre-line; }

/* ---------- akış (satın alma adımları gerçekten sıralı) */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); border: 1.5px solid var(--ink); background: var(--sheet); counter-reset: step; }
.steps > div { padding: 22px; border-right: 0.75px solid var(--ink); }
.steps > div:last-child { border-right: 0; }
.steps h3::before { counter-increment: step; content: counter(step); display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 10px; border: 1.5px solid var(--ink); border-radius: 50%; font-size: 15px; vertical-align: 2px; }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } .steps > div { border-right: 0; border-bottom: 0.75px solid var(--ink); } }

/* ---------- Mimar AI tanıtım şeridi (ozalit) */
.blueprint { background: var(--cyan); color: var(--cyan-line); background-image: linear-gradient(rgba(219,230,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(219,230,255,.12) 1px, transparent 1px); background-size: 28px 28px; }
.blueprint .muted, .blueprint .lead { color: #b9c9ef; }
.blueprint .btn { border-color: var(--cyan-line); }
.blueprint a:not(.btn) { color: #fff; }
.ai-teaser { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.ai-teaser .demo { border: 1.5px solid var(--cyan-line); padding: 8px; }
.ai-teaser .demo .prompt { border: 1px solid rgba(219,230,255,.6); padding: 12px 14px; margin-bottom: 8px; font-size: 15px; }
.ai-teaser .demo svg { width: 100%; height: auto; }
@media (max-width: 900px) { .ai-teaser { grid-template-columns: 1fr; } }

/* ---------- Mimar AI stüdyo */
.studio { display: grid; grid-template-columns: 400px minmax(0, 1fr); min-height: calc(100svh - 64px); }
.studio-side { border-right: 1.5px solid var(--ink); background: var(--sheet); display: flex; flex-direction: column; min-height: 0; }
.studio-side .head { padding: 18px 20px; border-bottom: 0.75px solid var(--ink); }
.chat { flex: 1; overflow: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; min-height: 160px; }
.msg { padding: 10px 12px; border: 1px solid var(--ink); background: #fff; font-size: 15px; white-space: pre-line; }
.msg.user { align-self: flex-end; background: var(--marker); max-width: 90%; }
.msg.assistant { align-self: flex-start; max-width: 96%; }
.msg .meta { display: block; font-size: 12px; color: var(--graphite); margin-top: 6px; font-stretch: var(--w-narrow); }
.composer { border-top: 1.5px solid var(--ink); padding: 14px 20px 18px; }
.composer textarea { min-height: 96px; }
.cost-line { font-size: 13px; color: var(--graphite); margin-top: 8px; font-stretch: var(--w-narrow); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.chips button { font: inherit; font-size: 13px; padding: 5px 9px; border: 1px solid var(--ink); background: #fff; border-radius: 999px; cursor: pointer; }
.chips button:hover { background: var(--marker); }
.studio-main { position: relative; display: flex; flex-direction: column; background: var(--cyan); color: var(--cyan-line); min-width: 0; }
.studio-bar { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-bottom: 1px solid rgba(219,230,255,.45); flex-wrap: wrap; }
.studio-bar .seg { display: inline-flex; border: 1px solid var(--cyan-line); border-radius: 3px; overflow: hidden; }
.studio-bar .seg button { font: inherit; font-size: 14px; padding: 7px 12px; border: 0; background: transparent; color: var(--cyan-line); cursor: pointer; }
.studio-bar .seg button[aria-pressed="true"] { background: var(--cyan-line); color: var(--cyan-deep); font-weight: 650; }
.studio-bar .btn { min-height: 34px; padding: 6px 12px; font-size: 14px; background: transparent; color: var(--cyan-line); border-color: var(--cyan-line); }
.studio-canvas { position: relative; flex: 1; min-height: 420px; background-image: linear-gradient(rgba(219,230,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(219,230,255,.1) 1px, transparent 1px); background-size: 28px 28px; }
.studio-canvas > .pane { position: absolute; inset: 0; }
.studio-canvas .plan-svg { width: 100%; height: 100%; }
.studio-canvas canvas { width: 100% !important; height: 100% !important; }
.studio-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 30px; }
.studio-empty p { margin: 10px auto 0; color: #b9c9ef; }
.studio-info { padding: 12px 16px; border-top: 1px solid rgba(219,230,255,.45); font-size: 14px; display: flex; gap: 18px; flex-wrap: wrap; }
.studio-info b { color: #fff; }
.drafting { position: absolute; inset: 0; display: none; place-items: center; z-index: 5; background: rgba(23,47,102,.55); }
.drafting.on { display: grid; }
.drafting .box { border: 1.5px solid var(--cyan-line); background: var(--cyan-deep); padding: 22px 26px; max-width: 380px; }
.drafting .bar { height: 4px; background: rgba(219,230,255,.2); margin-top: 14px; overflow: hidden; }
.drafting .bar i { display: block; height: 100%; width: 30%; background: var(--marker); animation: draft 1.6s ease-in-out infinite; }
@keyframes draft { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@media (max-width: 960px) {
  .studio { grid-template-columns: 1fr; }
  .studio-side { border-right: 0; border-bottom: 1.5px solid var(--ink); }
  .chat { max-height: 42vh; }
  .studio-canvas { min-height: 70vw; }
}

/* ---------- tablolar, hesap */
.table { width: 100%; border-collapse: collapse; background: var(--sheet); border: 1.5px solid var(--ink); font-size: 15px; }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 0.75px solid var(--rule); vertical-align: top; }
.table th { font-weight: 600; font-size: 13px; color: var(--graphite); background: #fff; border-bottom: 1.5px solid var(--ink); }
.table td.num, .table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }
.cards2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.stat { padding: 18px; }
.stat .v { font-size: 30px; font-weight: 700; font-stretch: 108%; line-height: 1.05; }
.stat .k { color: var(--graphite); font-size: 14px; }
.tabs-inline { display: flex; gap: 4px; border-bottom: 1.5px solid var(--ink); margin-bottom: 22px; flex-wrap: wrap; }
.tabs-inline a { padding: 10px 14px; text-decoration: none; font-weight: 560; }
.tabs-inline a[aria-current="page"] { background: var(--ink); color: var(--sheet); }

/* ---------- ödeme */
.pay { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
@media (max-width: 900px) { .pay { grid-template-columns: 1fr; } }
.card-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.amounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 14px; }
.amounts label { margin: 0; }
.amounts input { position: absolute; opacity: 0; }
.amounts span { display: block; text-align: center; padding: 12px 8px; border: 1.5px solid var(--ink); background: #fff; cursor: pointer; font-weight: 640; }
.amounts input:checked + span { background: var(--marker); }
.amounts input:focus-visible + span { outline: 3px solid var(--ink); }

/* ---------- alt bilgi */
.footer { border-top: 1.5px solid var(--ink); margin-top: 40px; padding: 36px 0 48px; font-size: 15px; }
.footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin: 6px 0; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }
@media (max-width: 760px) { .footer .cols { grid-template-columns: 1fr; } }
.paylogos { display: flex; gap: 8px; align-items: center; margin-top: 14px; color: var(--graphite); font-size: 13px; }

.empty { padding: 40px; text-align: center; border: 1.5px dashed var(--ink); background: var(--sheet); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ================================================================ hareket */
/* Sayfa geçişleri */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .22s ease both; }
::view-transition-new(root) { animation: vt-in .38s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* Piksel piksel belirme örtüsü */
.px-veil { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); z-index: 8; pointer-events: none; image-rendering: pixelated; image-rendering: crisp-edges; }

/* Kelime kelime yükselen başlıklar */
.motion [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.motion [data-split] .w > span { display: inline-block; transform: translateY(108%) rotate(2deg); transition: transform .9s cubic-bezier(.16,.84,.24,1); }
.motion [data-split].in .w > span { transform: none; }

/* Düğmeler: fosforlu kalem sürmesi + mıknatıs */
.btn { position: relative; isolation: isolate; overflow: hidden; transform: translate(var(--mx, 0px), var(--my, 0px)); transition: transform .28s cubic-bezier(.2,.8,.2,1), color .25s ease, box-shadow .25s ease, background-color .2s ease; }
.btn::before { content: ""; position: absolute; inset: -2px -14px; z-index: -1; background: var(--marker); transform: scaleX(0) skewX(-14deg); transform-origin: 0 50%; transition: transform .42s cubic-bezier(.2,.8,.2,1); }
.btn:hover { background: var(--sheet); box-shadow: 3px 3px 0 var(--ink); }
.btn:hover::before { transform: scaleX(1) skewX(-14deg); }
.btn:active { transform: translate(var(--mx, 0px), calc(var(--my, 0px) + 2px)) scale(.98); box-shadow: 0 0 0 var(--ink); }
.btn-primary:hover { background: var(--marker); color: var(--marker); }
.btn-primary::before { background: var(--ink); }
.btn-ink::before { background: var(--marker); }
.btn-ink:hover { background: var(--ink); color: var(--ink); }
.btn-ghost:hover { box-shadow: none; }
.btn-danger::before { background: #f7d6d1; }
.btn[disabled]::before { display: none; }
.btn[disabled]:hover { box-shadow: none; }
.blueprint .btn:hover { box-shadow: 3px 3px 0 var(--cyan-line); }
.studio-bar .btn::before { background: var(--cyan-line); }
.studio-bar .btn:hover { background: transparent; box-shadow: none; }
.studio-bar .btn:hover:not([disabled]) { color: var(--cyan-deep); box-shadow: 3px 3px 0 #0e1f47; }
.nav .btn { box-shadow: none; }

/* Menü: kalemle çizilen alt çizgi */
.nav a { position: relative; transform: translate(var(--mx, 0px), var(--my, 0px)); transition: transform .28s cubic-bezier(.2,.8,.2,1), background-color .2s; }
.nav a:not(.btn):not(.balance)::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .38s cubic-bezier(.2,.8,.2,1); }
.nav a:not(.btn):not(.balance):hover, .nav a[aria-current="page"] { background: transparent; box-shadow: none; }
.nav a:not(.btn):not(.balance):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav .balance { transition: transform .28s cubic-bezier(.2,.8,.2,1), background-color .2s; }
.nav .balance:hover { background: var(--marker); }

/* Plan kartı: pafta kesim işaretleri, görsel yakınlaşması */
.plan-card::after { content: ""; position: absolute; inset: -11px; pointer-events: none; opacity: 0; transform: scale(.94); transition: opacity .3s ease, transform .45s cubic-bezier(.2,.8,.2,1);
  background:
    linear-gradient(var(--ink), var(--ink)) 0 0 / 16px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) 0 0 / 1.5px 16px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 0 / 16px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) 100% 0 / 1.5px 16px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 100% / 16px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) 0 100% / 1.5px 16px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 100% / 16px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) 100% 100% / 1.5px 16px no-repeat; }
.plan-card:hover::after, .plan-card:focus-visible::after { opacity: 1; transform: scale(1); }
.plan-card .media img, .plan-card .media svg { transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.plan-card:hover .media img, .plan-card:hover .media svg { transform: scale(1.045); }
.plan-card .price span:first-child { transition: background-color .25s; padding: 0 4px; margin-right: -4px; }
.plan-card:hover .price span:first-child { background: var(--marker); }

/* Tablo satırları, sekmeler, çipler */
.table tbody tr { transition: background-color .2s; }
.table tbody tr:hover { background: color-mix(in srgb, var(--marker) 24%, transparent); }
.viewer-tabs button, .viewer-tools button, .chips button, .tabs-inline a { transition: background-color .2s, transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .2s; transform: translate(var(--mx, 0px), var(--my, 0px)); }
.viewer-tools button:hover, .chips button:hover { box-shadow: 2px 2px 0 var(--ink); }
.tabs-inline a:hover:not([aria-current]) { background: var(--marker); }

/* Ana sayfa: CAD imleci */
.xh { position: absolute; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .25s ease; will-change: transform; }
.xh-on .xh, .xh-on .xh-tag { opacity: 1; }
.xh-h { left: 8px; right: 8px; top: 0; border-top: 1px dashed rgba(23,32,43,.7); }
.xh-v { top: 8px; bottom: 8px; left: 0; border-left: 1px dashed rgba(23,32,43,.7); }
.xh-tag { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .25s; background: var(--ink); color: var(--sheet); font-size: 11px; font-stretch: 78%; font-weight: 600; padding: 2px 6px; white-space: pre; will-change: transform; }

/* Mimar AI şeridi: ozalit makinesi taraması */
.ai-teaser .demo { position: relative; overflow: hidden; }
.motion .ai-teaser .demo svg { clip-path: inset(0 100% 0 0); }
.motion .ai-teaser .demo.scan svg { animation: ozalit 2.1s cubic-bezier(.55,0,.25,1) .2s forwards; }
.ai-teaser .demo::after { content: ""; position: absolute; top: 0; bottom: 0; left: -90px; width: 70px; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, rgba(226,238,60,.45) 40%, rgba(255,255,255,.95) 55%, rgba(219,230,255,.5) 70%, transparent); filter: blur(3px); }
.ai-teaser .demo.scan::after { animation: ozalit-bar 2.1s cubic-bezier(.55,0,.25,1) .2s forwards; }
@keyframes ozalit { to { clip-path: inset(0 0 0 0); } }
@keyframes ozalit-bar { 0% { left: -90px; opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

/* Mobil düzeltmeleri */
@media (max-width: 900px) {
  .hero-sheet { display: flex; flex-direction: column; }
  .hero-copy { order: -1; }
}
@media (max-width: 600px) {
  .viewer-tools { gap: 4px; left: 6px; top: 6px; }
  .viewer-tools button, .viewer-tools label.tool { font-size: 12px; padding: 5px 8px; }
}

/* Okunurluk: sarı (fosforlu) zeminde yazı her zaman mürekkep rengi */
.btn-primary, .blueprint .btn-primary, .nav .btn-primary { color: var(--ink); }
.blueprint .btn:not(.btn-primary) { color: var(--ink); }
.btn-primary:hover, .nav .btn-primary:hover, .blueprint .btn-primary:hover { color: var(--marker); transition: transform .28s cubic-bezier(.2,.8,.2,1), color .18s ease .14s, box-shadow .25s ease; }
.viewer-tabs button, .viewer-tools button, .chips button, .amounts span, .badge, .msg.user, .status, .nav .balance, .studio-bar .seg button[aria-pressed="true"] { color: var(--ink); }
.studio-bar .seg button[aria-pressed="true"] { color: var(--cyan-deep); }

/* Giriş */
.login-card { max-width: 460px; }
.login-steps { display: flex; gap: 0; list-style: none; padding: 0; margin: -6px 0 22px; border: 1px solid var(--ink); counter-reset: ls; }
.login-steps li { flex: 1; text-align: center; padding: 7px 4px; font-size: 13px; font-weight: 600; font-stretch: var(--w-narrow); color: var(--graphite); border-right: 1px solid var(--ink); counter-increment: ls; }
.login-steps li:last-child { border-right: 0; }
.login-steps li::before { content: counter(ls) ". "; }
.login-steps li[aria-current="step"] { background: var(--marker); color: var(--ink); }
.phone-input { font-size: 22px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.code-input { font-size: 30px; letter-spacing: 0.5em; text-align: center; font-variant-numeric: tabular-nums; padding: 12px; }

/* Mimarlar */
.arch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 22px; }
.arch-card { display: block; position: relative; text-decoration: none; color: inherit; background: var(--sheet); border: 1.5px solid var(--ink); transition: box-shadow .15s ease, transform .15s ease; }
.arch-card:hover { box-shadow: 6px 6px 0 var(--ink); transform: translate(-2px, -2px); text-decoration: none; }
.arch-covers { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 16 / 9; border-bottom: 1.5px solid var(--ink); background: #fff; }
.arch-covers > div { position: relative; overflow: hidden; border-left: 0.75px solid var(--ink); }
.arch-covers > div:first-child { grid-row: span 2; border-left: 0; }
.arch-covers > div:nth-child(3) { border-top: 0.75px solid var(--ink); }
.arch-covers img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.arch-covers img.svg { object-fit: contain; padding: 8px; }
.arch-card:hover .arch-covers img { transform: scale(1.04); }
.arch-antet { border: 0; }

/* İletişim */
.contact { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.topics { border: 0; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.topics legend { font-size: 14px; font-weight: 560; margin-bottom: 8px; padding: 0; }
.topics label { margin: 0; position: relative; }
.topics input { position: absolute; opacity: 0; }
.topics span { display: inline-block; padding: 8px 14px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 560; cursor: pointer; color: var(--ink); transition: background-color .2s, transform .2s; }
.topics span:hover { background: color-mix(in srgb, var(--marker) 45%, #fff); }
.topics input:checked + span { background: var(--marker); }
.topics input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }

/* ================================================================ hero: içeriğe göre yükseklik */
.hero-sheet { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: stretch; }
.hero-copy { position: relative; z-index: 3; padding: clamp(28px, 3.6vw, 52px); max-width: none; pointer-events: auto; display: flex; flex-direction: column; }
.hero-copy .lead { margin-top: 16px; max-width: 52ch; }
.hero-copy .row { margin-top: 22px; }
.hero-stage { position: relative; min-height: 440px; border-left: 0.75px dashed var(--rule); }
.hero-stage .hero-canvas { position: absolute; inset: 8px 8px 8px 0; }
.hero-hint { position: absolute; left: 16px; bottom: 14px; z-index: 3; }
@media (max-width: 900px) {
  .hero-sheet { display: flex; flex-direction: column; }
  .hero-stage { order: 2; min-height: 0; height: 72vw; max-height: 460px; border-left: 0; border-top: 0.75px dashed var(--rule); }
  .hero-stage .hero-canvas { inset: 0 8px; height: auto; margin: 0; }
  .hero-copy { padding: 26px 22px 20px; }
  .hero-hint { display: none; }
}

/* Kategori şeridi, sayfa yolu, SSS */
.cat-strip { display: flex; gap: 8px; overflow-x: auto; padding-top: 18px; padding-bottom: 4px; scrollbar-width: none; }
.cat-strip::-webkit-scrollbar { display: none; }
.cat-strip a { flex: none; padding: 8px 14px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--sheet); text-decoration: none; font-weight: 560; font-size: 14px; color: var(--ink); transition: background-color .2s, transform .28s cubic-bezier(.2,.8,.2,1); transform: translate(var(--mx, 0px), var(--my, 0px)); }
.cat-strip a:hover { background: var(--marker); }
.cat-inline { padding: 0 0 22px; }
.crumbs { margin-bottom: 12px; color: var(--graphite); }
.crumbs a { color: var(--graphite); }
.faq-wrap { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); gap: clamp(20px, 4vw, 60px); align-items: start; }
@media (max-width: 860px) { .faq-wrap { grid-template-columns: 1fr; } }
.faq { border-top: 1.5px solid var(--ink); }
.faq details { border-bottom: 0.75px solid var(--ink); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 44px 18px 0; position: relative; font-weight: 620; font-size: 18px; font-stretch: 104%; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: linear-gradient(var(--ink), var(--ink)) center / 100% 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2px 100% no-repeat; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.faq details[open] summary::after { transform: rotate(135deg); }
.faq summary:hover { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--marker) 70%, transparent) 62%) no-repeat 0 0 / 100% 100%; }
.faq details p { margin: 0 0 18px; color: var(--graphite); max-width: 64ch; animation: faq-in .4s cubic-bezier(.2,.8,.2,1); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }

/* ================================================================ mobil üst bar + alt menü */
.mbar { display: none; }
.dock, .search-sheet { display: none; }
@media (max-width: 820px) {
  .nav, .nav-toggle { display: none !important; }
  .topbar { border-bottom: 0; }
  .topbar .wrap { height: 58px; gap: 10px; }
  .topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background:
      repeating-linear-gradient(90deg, var(--ink) 0 22px, var(--sheet) 22px 44px) 0 0 / 100% 2px no-repeat,
      linear-gradient(var(--ink), var(--ink)) 0 2px / 100% 0.75px no-repeat; }
  .brand { font-size: 17px; }
  .brand svg { width: 24px; height: 24px; }
  .mbar { display: flex; align-items: center; gap: 8px; margin-left: auto; }
  .mbar-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--sheet); color: var(--ink); padding: 0; cursor: pointer; transition: background-color .2s, transform .15s; }
  .mbar-btn svg { width: 20px; height: 20px; }
  .mbar-btn:active { transform: scale(.92); }
  .mbar-bal { font-stretch: var(--w-narrow); font-weight: 680; font-size: 14px; padding: 7px 12px; border-radius: 999px; background: var(--ink); color: var(--marker); text-decoration: none; }

  body { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .dock { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; position: fixed; z-index: 60; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); height: 66px; padding: 0 4px; background: var(--ink); color: var(--sheet); border-radius: 20px; box-shadow: 0 10px 30px rgba(23,32,43,.28), 0 1px 0 rgba(255,255,255,.05) inset; transition: transform .35s cubic-bezier(.2,.8,.2,1), height .3s cubic-bezier(.2,.8,.2,1), opacity .25s; }
  .dock-scale { position: absolute; left: 18px; right: 18px; top: 7px; height: 3px; border-radius: 2px; opacity: .55; background: repeating-linear-gradient(90deg, var(--marker) 0 10px, transparent 10px 20px, var(--sheet) 20px 30px, transparent 30px 40px); }
  .dock-item { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; height: 100%; padding-bottom: 10px; color: rgba(246,247,243,.72); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: color .25s; }
  .dock-item:hover { text-decoration: none; }
  .dock-ic { display: grid; place-items: center; width: 30px; height: 26px; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
  .dock-ic svg { width: 24px; height: 24px; }
  .dock-label { font-size: 11px; font-weight: 600; font-stretch: var(--w-narrow); letter-spacing: .01em; line-height: 1; transition: opacity .2s, transform .3s; }
  .dock-item[aria-current="page"] { color: var(--marker); }
  .dock-item[aria-current="page"] .dock-ic { transform: translateY(-2px); }
  .dock-item:active .dock-ic { transform: scale(.86); }
  /* Ortadaki Mimar AI düğmesi: çubuğun üstüne taşan fosforlu daire */
  .dock-ai .dock-ic { position: absolute; top: -22px; left: 50%; width: 58px; height: 58px; margin-left: -29px; border-radius: 50%; background: var(--marker); color: var(--ink); border: 3px solid var(--paper); box-shadow: 0 6px 16px rgba(23,32,43,.3); }
  .dock-ai .dock-ic svg { width: 26px; height: 26px; }
  .dock-ai .dock-ic::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px dashed rgba(226,238,60,.6); animation: dock-orbit 14s linear infinite; }
  .dock-ai[aria-current="page"] .dock-ic { transform: translateY(-3px) rotate(-8deg); }
  .dock-ai:active .dock-ic { transform: scale(.9); }
  .dock-ai { color: var(--sheet); }
  .dock-ai[aria-current="page"] { color: var(--marker); }
  @keyframes dock-orbit { to { transform: rotate(360deg); } }
  /* Etkin sekme: fosforlu kalem çizgisi, sekmeler arasında kayar */
  .dock-mark { position: absolute; z-index: 1; bottom: 6px; left: 4px; height: 3px; width: calc((100% - 8px) / 5); display: flex; justify-content: center; pointer-events: none; transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .2s; }
  .dock-mark::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: var(--marker); transform: skewX(-18deg); }
  .dock[data-active="-1"] .dock-mark, .dock[data-active="2"] .dock-mark { opacity: 0; }
  /* Klavye açılınca çekilir */
  .dock.away { transform: translateY(140%); opacity: 0; }
  .studio { min-height: calc(100svh - 58px); }

  .search-sheet[open] { display: block; position: fixed; inset: 0 0 auto 0; margin: 0; width: 100%; max-width: none; max-height: none; border: 0; border-bottom: 1.5px solid var(--ink); padding: calc(14px + env(safe-area-inset-top)) 16px 20px; background: var(--paper); color: var(--ink); animation: sheet-in .38s cubic-bezier(.2,.8,.2,1); }
  .search-sheet::backdrop { background: rgba(23,32,43,.45); backdrop-filter: blur(2px); animation: fade-in .3s ease; }
  .search-form { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--ink); border-radius: 14px; background: #fff; padding: 4px 6px 4px 14px; }
  .search-form svg { width: 20px; height: 20px; flex: none; }
  .search-form input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 17px; padding: 10px 0; background: transparent; color: var(--ink); }
  .ss-close { border: 0; background: transparent; font: inherit; font-weight: 600; font-size: 15px; padding: 8px 10px; color: var(--ink); cursor: pointer; }
  .ss-title { margin: 18px 0 10px; font-size: 13px; color: var(--graphite); font-weight: 600; }
  .ss-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .ss-chips a { padding: 9px 14px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--sheet); text-decoration: none; font-weight: 560; font-size: 15px; color: var(--ink); animation: chip-in .4s cubic-bezier(.2,.8,.2,1) both; }
  .ss-chips a:nth-child(2) { animation-delay: .03s; } .ss-chips a:nth-child(3) { animation-delay: .06s; } .ss-chips a:nth-child(4) { animation-delay: .09s; } .ss-chips a:nth-child(5) { animation-delay: .12s; } .ss-chips a:nth-child(6) { animation-delay: .15s; } .ss-chips a:nth-child(7) { animation-delay: .18s; }
  .ss-chips a:active { background: var(--marker); }
  @keyframes sheet-in { from { transform: translateY(-100%); } }
  @keyframes fade-in { from { opacity: 0; } }
  @keyframes chip-in { from { opacity: 0; transform: translateY(8px); } }
}


/* ================================================================ dil seçici */
.lang-pick { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 600; font-size: 14px; padding: 7px 10px; border: 1.2px solid var(--rule); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; transition: border-color .2s, background-color .2s; }
.lang-btn svg { width: 18px; height: 18px; }
.lang-btn:hover { border-color: var(--ink); background: var(--sheet); }
.mbar-lang span { font-size: 12px; font-weight: 700; font-stretch: var(--w-narrow); }
.lang-sheet { display: none; }
.lang-sheet[open] { display: block; border: 1.5px solid var(--ink); background: var(--sheet); color: var(--ink); padding: 18px; width: min(360px, calc(100vw - 32px)); border-radius: 4px; box-shadow: 8px 8px 0 var(--ink); animation: chip-in .3s cubic-bezier(.2,.8,.2,1); }
.lang-sheet::backdrop { background: rgba(23,32,43,.35); }
.lang-title { margin: 0 0 10px; font-weight: 680; font-size: 18px; }
.lang-sheet ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.lang-sheet li a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1.2px solid var(--rule); text-decoration: none; color: var(--ink); font-weight: 560; transition: background-color .2s, border-color .2s; }
.lang-sheet li a:hover { border-color: var(--ink); background: #fff; }
.lang-sheet li a[aria-current="true"] { border-color: var(--ink); background: var(--marker); }
.lang-sheet .lc { display: inline-grid; place-items: center; width: 34px; height: 24px; border: 1px solid var(--ink); font-size: 12px; font-weight: 700; font-stretch: var(--w-narrow); }
.foot-langs { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 14px; font-size: 14px; }
.foot-langs a { color: var(--graphite); }
.foot-langs a[aria-current="true"] { color: var(--ink); font-weight: 650; text-decoration: none; background: var(--marker); padding: 0 4px; }
@keyframes chip-in { from { opacity: 0; transform: translateY(8px); } }

/* ================================================================ sağdan sola (Arapça) */
[dir="rtl"] body { letter-spacing: 0; }
[dir="rtl"] .display, [dir="rtl"] .h1, [dir="rtl"] .h2, [dir="rtl"] .h3, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; line-height: 1.25; }
[dir="rtl"] .display { font-size: clamp(26px, 3vw, 44px); }
[dir="rtl"] .nav { margin-left: 0; margin-right: auto; }
[dir="rtl"] .mbar { margin-left: 0; margin-right: auto; }
[dir="rtl"] .antet > div { border-right: 0; border-left: 0.75px solid var(--ink); }
[dir="rtl"] .antet > div:nth-child(4n) { border-left: 0; }
[dir="rtl"] .plan-card .badge { left: auto; right: 10px; }
[dir="rtl"] .plan-card .cardantet .t { border-right: 0; border-left: 0.75px solid var(--ink); }
[dir="rtl"] .plan-card .price { align-items: start; }
[dir="rtl"] .viewer-tools { left: auto; right: 10px; }
[dir="rtl"] .viewer-status { right: auto; left: 12px; }
[dir="rtl"] .hero-stage { border-left: 0; border-right: 0.75px dashed var(--rule); }
[dir="rtl"] .hero-stage .hero-canvas { inset: 8px 0 8px 8px; }
[dir="rtl"] .hero-hint { left: auto; right: 16px; }
[dir="rtl"] .faq summary { padding: 18px 0 18px 44px; }
[dir="rtl"] .faq summary::after { right: auto; left: 6px; }
[dir="rtl"] .alert { border-left-width: 1.5px; border-right-width: 6px; }
[dir="rtl"] .studio-side { border-right: 0; border-left: 1.5px solid var(--ink); }
[dir="rtl"] .msg.user { align-self: flex-start; }
[dir="rtl"] .msg.assistant { align-self: flex-end; }
[dir="rtl"] .check input { margin-left: 0; }
[dir="rtl"] .table th, [dir="rtl"] .table td { text-align: right; }
[dir="rtl"] .table td.num, [dir="rtl"] .table th.num { text-align: left; }
[dir="rtl"] .includes li span:last-child { direction: ltr; }
[dir="rtl"] .phone-input, [dir="rtl"] .code-input, [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"], [dir="rtl"] #cc-number { direction: ltr; text-align: right; }
[dir="rtl"] .xh-tag { direction: ltr; }
[dir="rtl"] .btn::before { transform-origin: 100% 50%; }
[dir="rtl"] .nav a:not(.btn):not(.balance)::after, [dir="rtl"] .faq summary:hover { transform-origin: 100% 50%; }
[dir="rtl"] .plan-svg, [dir="rtl"] .viewer-stage canvas, [dir="rtl"] .hero-canvas canvas { direction: ltr; }
@media (max-width: 820px) {
  [dir="rtl"] .dock-mark { left: auto; right: 4px; transform: translateX(calc(var(--i, 0) * -100%)); }
}

/* ================================================================ ferahlık katmanı
   Kimlik aynı (kâğıt, mürekkep, fosforlu kalem); ışık, boşluk ve çizgi dozu değişti:
   açık zemin, ince açık çizgiler, mürekkep yalnız vurguda, rahat tipografi. */
:root {
  --paper: #f4f5f1;
  --sheet: #fcfcfa;
  --rule: #d8dcd4;
  --rule-soft: #e8eae5;
  --graphite: #5b6470;
  --text: #222b36;
  --radius: 8px;
  --lift: 0 22px 44px -24px rgba(23, 32, 43, .32);
}
body { background: var(--paper); color: var(--text); font-size: 18px; line-height: 1.68; }
p { max-width: 64ch; }
.lead { line-height: 1.62; color: var(--graphite); }
.display { font-stretch: 112%; font-weight: 640; line-height: 1.07; letter-spacing: -0.016em; }
.h1 { font-stretch: 106%; font-weight: 630; line-height: 1.1; letter-spacing: -0.012em; }
.h2 { font-stretch: 106%; font-weight: 620; line-height: 1.14; letter-spacing: -0.01em; }
.h3 { font-weight: 620; }
.muted { color: var(--graphite); }
.section { padding: clamp(68px, 9vw, 136px) 0; }
.section-head { margin-bottom: 40px; }
.section-head p { margin-top: 12px; }

/* Üst bar ve alt bilgi: ince ayraç */
.topbar { border-bottom-color: var(--rule-soft); background: color-mix(in srgb, var(--paper) 88%, transparent); }
.footer { border-top: 1px solid var(--rule); background: var(--sheet); }

/* Kutular: çift çerçeve yalnız hero'da; diğerleri ince, açık, hafif yuvarlak */
.sheet { border: 1px solid var(--rule); border-radius: var(--radius); }
.sheet::before { display: none; }
.hero-sheet { border: 1px solid var(--rule); border-radius: var(--radius); background-image: none; }
.hero-sheet::before { display: block; inset: 9px; border: 0.75px solid var(--rule-soft); border-radius: 4px; }
.hero-stage { background-image: linear-gradient(var(--rule-soft) 1px, transparent 1px), linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px); background-size: 28px 28px; border-left-color: var(--rule-soft); border-radius: 0 var(--radius) var(--radius) 0; }
[dir="rtl"] .hero-stage { border-radius: var(--radius) 0 0 var(--radius); }
.mm-grid { background-image: none; }

/* Antet: künye çizgileri açık; anahtar küçük ve sakin */
.antet { border: 1px solid var(--rule); border-radius: 6px; background: var(--sheet); overflow: hidden; }
.antet > div { border-right-color: var(--rule-soft); border-bottom-color: var(--rule-soft); padding: 10px 14px; }
[dir="rtl"] .antet > div { border-left-color: var(--rule-soft); }
.antet .k { font-size: 12px; letter-spacing: .01em; }
.antet .v { font-weight: 600; }

/* Plan kartları: çizgisiz nefes, üzerine gelince yükselir */
.plan-grid { gap: 30px; }
.plan-card { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--sheet); }
.plan-card .media { border-bottom: 1px solid var(--rule-soft); border-radius: var(--radius) var(--radius) 0 0; }
.plan-card .cardantet > div { padding: 14px 16px; }
.plan-card .cardantet .t { border-right-color: var(--rule-soft); }
[dir="rtl"] .plan-card .cardantet .t { border-left-color: var(--rule-soft); }
.plan-card:hover, .plan-card:focus-visible { box-shadow: var(--lift); transform: translateY(-4px); border-color: var(--ink); }
.plan-card { transition: box-shadow .35s cubic-bezier(.2,.8,.2,1), transform .35s cubic-bezier(.2,.8,.2,1), border-color .25s; }
.arch-card { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.arch-card:hover { box-shadow: var(--lift); transform: translateY(-4px); border-color: var(--ink); }
.arch-covers { border-bottom: 1px solid var(--rule-soft); }
.arch-covers > div { border-color: var(--rule-soft); }

/* Düğmeler ve alanlar: yumuşak köşe, sakin gölge */
.btn { border-radius: 8px; border-width: 1.5px; }
.btn:hover { box-shadow: 0 10px 22px -12px rgba(23, 32, 43, .45); }
.btn-small { border-radius: 7px; }
.input, select, textarea { border: 1px solid var(--rule); border-radius: 8px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.input:hover, select:hover, textarea:hover { border-color: #b9beb5; }
.input:focus, select:focus, textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marker) 55%, transparent); }
.alert { border-radius: 8px; border-width: 1px; border-left-width: 5px; }
.badge { border-radius: 999px; padding: 3px 10px; border-color: transparent; }
.badge.soft { background: #fff; border-color: var(--rule); }

/* Diğer bloklar */
.steps { border: 1px solid var(--rule); border-radius: var(--radius); }
.steps > div { border-right-color: var(--rule-soft); padding: 28px; }
.table { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.table th { border-bottom-color: var(--rule); }
.table th, .table td { border-bottom-color: var(--rule-soft); }
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom-color: var(--rule); }
.cat-strip a { border: 1px solid var(--rule); background: var(--sheet); }
.cat-strip a:hover { border-color: var(--ink); }
.viewer-tabs { border-bottom: 1px solid var(--rule); }
.viewer-tabs button { border-right-color: var(--rule-soft); }
.viewer-tools button, .viewer-tools label.tool { border-color: var(--rule); border-radius: 7px; background: rgba(252,252,250,.92); backdrop-filter: blur(4px); }
.empty { border: 1px dashed var(--rule); border-radius: var(--radius); }
.blueprint { background-image: linear-gradient(rgba(219,230,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(219,230,255,.07) 1px, transparent 1px); }
.ai-teaser .demo { border-color: rgba(219,230,255,.45); border-radius: var(--radius); }
.login-steps { border-color: var(--rule); border-radius: 8px; overflow: hidden; }
.login-steps li { border-right-color: var(--rule); }
.topics span { border-width: 1px; border-color: var(--rule); }
.topics input:checked + span { border-color: var(--ink); }
.amounts span { border-width: 1px; border-color: var(--rule); border-radius: 8px; }
.amounts input:checked + span { border-color: var(--ink); }
.lang-sheet[open] { border-radius: 12px; box-shadow: var(--lift); border-color: var(--rule); }
.studio-side { border-right-color: var(--rule); }
.panel { border: 1px solid var(--rule); border-radius: var(--radius); }
.admin-nav { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 820px) {
  .topbar::after { background: repeating-linear-gradient(90deg, var(--ink) 0 22px, transparent 22px 44px) 0 0 / 100% 1.5px no-repeat; opacity: .55; height: 2px; }
  body { font-size: 17px; }
}

/* ---------------------------------------------------------------- hesap değiştirici ve hesap seçimi */
.acct-switch { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 0 0 16px; padding: 4px; border: 1px solid var(--rule); border-radius: 999px; background: var(--sheet); }
.acct-switch .k { font-size: 12px; color: var(--graphite); padding: 0 6px 0 10px; letter-spacing: .04em; text-transform: uppercase; }
.acct-switch form { display: contents; }
.acct-switch button { font: inherit; font-size: 14px; font-weight: 560; padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; transition: background-color .15s ease; }
.acct-switch button:hover:not([disabled]) { background: var(--paper); }
.acct-switch button[aria-current="true"] { background: var(--ink); color: var(--sheet); cursor: default; }
.acct-choices { display: grid; gap: 10px; }
.acct-choices form { margin: 0; }
.acct-choice { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; font: inherit; text-align: start; color: var(--ink); background: #fff; border: 1.5px solid var(--ink); border-radius: 6px; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.acct-choice:hover { transform: translateY(-1px); box-shadow: 0 3px 0 var(--ink); }
.acct-choice .role { font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border: 1px solid var(--ink); border-radius: 999px; background: var(--sheet); }
.acct-choice .role-admin { background: var(--marker); }
.acct-choice .name { font-weight: 600; }
.acct-choice .go { font-size: 18px; }
[dir="rtl"] .acct-choice .go { transform: scaleX(-1); }
/* Dar ekranda yönetici/mimar kısayoluyla dört öğe sığmaz: düğmeler sıkışmaz, logo yalnız simgeye iner */
@media (max-width: 440px) {
  .mbar > * { flex-shrink: 0; }
  .mbar-bal { white-space: nowrap; padding: 7px 10px; }
  .topbar:has(.mbar > :nth-child(4)) .brand span { display: none; }
}