/* ==========================================================================
   Vitrin teması (yalnızca public): yazılım / SaaS açılış sayfası dili.
   Yumuşak renk geçişli ve dekoratif şekilli giriş, ortada büyük başlık + panel görünümü ve yüzen kartlar,
   renkli ikon daireli özellik kartları, kesik çizgiyle bağlanan adımlar, iç sayfalarda başlık bandı + konum satırı,
   gölgeli ve üstüne gelince yükselen kartlar, renk geçişli kapanış bandı, koyu çok sütunlu alt bilgi.
   Ana renkler yönetimden seçilen temadan (tokens.css) gelir.
   ========================================================================== */
:root { --view-pad: clamp(1rem, 4vw, 2rem); --wrap: 72rem; --sh-1: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px -6px rgba(16, 24, 40, .08); --sh-2: 0 2px 4px rgba(16, 24, 40, .04), 0 22px 44px -18px rgba(16, 24, 40, .22); --sh-3: 0 40px 80px -30px rgba(16, 24, 40, .35), 0 0 0 1px rgba(16, 24, 40, .04); }
:root[data-theme="dark"] { --sh-1: 0 0 0 1px rgba(255, 255, 255, .06); --sh-2: 0 0 0 1px rgba(255, 255, 255, .08), 0 22px 44px -18px rgba(0, 0, 0, .7); --sh-3: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 80px -30px rgba(0, 0, 0, .8); }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--view-pad)); margin-inline: auto; padding-inline: var(--view-pad); }
.page { padding-block: clamp(1.75rem, 3.5vw, 2.75rem) 0; }

/* ── Ortak süsler: bulanık renk lekeleri, nokta ızgarası ── */
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; }
.blob--a { width: 26rem; height: 26rem; top: -8rem; left: -6rem; background: rgba(var(--accent-rgb), .35); }
.blob--b { width: 22rem; height: 22rem; bottom: -10rem; right: -4rem; background: color-mix(in srgb, var(--signal) 70%, transparent); opacity: .45; }
.dotgrid { position: absolute; width: 9rem; height: 9rem; background-image: radial-gradient(rgba(var(--accent-rgb), .35) 1.5px, transparent 1.6px); background-size: 16px 16px; pointer-events: none; }
.dotgrid--l { top: 3rem; left: 2rem; } .dotgrid--r { top: 2rem; right: 2rem; }

/* ── Renkli ikon daireleri ── */
.ibadge { --c: var(--accent); display: inline-grid; place-items: center; width: 2.625rem; height: 2.625rem; border-radius: 13px; background: color-mix(in srgb, var(--c) 13%, var(--page)); color: var(--c); flex: none; }
.ibadge .icon { width: 1.25rem; height: 1.25rem; stroke-width: 1.7; }
.ibadge--blue { --c: #3b6cf6; } .ibadge--green { --c: #16a34a; } .ibadge--amber { --c: #d97706; } .ibadge--violet { --c: #7c3aed; } .ibadge--rose { --c: #e11d48; } .ibadge--teal { --c: #0d9488; }
.ibadge--white { background: rgba(255, 255, 255, .16); color: #fff; }
.kicker { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; font-size: var(--fs-xs) !important; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); font-size: var(--fs-sm); font-weight: 600; }
.kicker .icon { width: 1rem; height: 1rem; }
.hl { color: var(--accent); position: relative; white-space: nowrap; }
.hl::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .14em; border-radius: 99px; background: color-mix(in srgb, var(--signal) 85%, transparent); z-index: -1; }

/* ── Başlık ── */
.hdr { position: sticky; top: 0; z-index: var(--z-header); background: color-mix(in srgb, var(--page) 92%, transparent); backdrop-filter: saturate(1.5) blur(16px); -webkit-backdrop-filter: saturate(1.5) blur(16px); box-shadow: 0 1px 0 var(--line), 0 10px 30px -24px rgba(16, 24, 40, .35); }
.hdr__in { display: flex; align-items: center; gap: 1.25rem; height: 4rem; }
.hdr__nav { display: flex; align-items: center; gap: .25rem; margin-inline: auto; }
.hdr__nav > a, .dd__btn { display: inline-flex; align-items: center; gap: .3rem; height: 2.25rem; padding: 0 .75rem; white-space: nowrap; border-radius: var(--r-pill); font-size: var(--fs-base); font-weight: 550; color: var(--text-2); transition: color var(--t-fast), background-color var(--t-fast); }
.hdr__nav > a:hover, .dd__btn:hover, .dd:focus-within .dd__btn { color: var(--accent-text); background: var(--accent-soft); }
.hdr__nav > a[aria-current="page"], .dd__btn[aria-current="page"] { color: var(--accent-text); font-weight: 650; }
.dd { position: relative; }
.dd__btn .icon { width: .9rem; height: .9rem; transition: transform var(--t-fast); }
.dd:hover .dd__btn .icon, .dd:focus-within .dd__btn .icon { transform: rotate(180deg); }
.dd__panel { position: absolute; top: calc(100% + .5rem); left: 50%; translate: -50% 0; width: 22rem; display: grid; gap: 2px; padding: .5rem; border-radius: 20px; background: var(--page); box-shadow: var(--sh-3); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--t), transform var(--t), visibility var(--t); }
.dd__panel::before { content: ""; position: absolute; inset: -.6rem 0 auto; height: .6rem; }
.dd:hover .dd__panel, .dd:focus-within .dd__panel { opacity: 1; visibility: visible; transform: none; }
.dd__panel a { display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem; border-radius: 14px; color: var(--text); }
.dd__panel a:hover { background: var(--band); color: var(--text); }
.dd__panel b { display: block; font-size: var(--fs-base); font-weight: 600; }
.dd__panel small { font-size: var(--fs-xs); color: var(--muted); }
.dd__all { margin-bottom: .25rem; background: var(--accent-soft); }
.dd__all:hover { background: color-mix(in srgb, var(--accent-soft) 70%, var(--band)) !important; }
.dd__ic { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 12px; background: var(--accent); color: var(--accent-ink); flex: none; }
.dd__ic--soft { background: var(--band); color: var(--accent-text); }
.dd__ic .icon { width: 1.125rem; height: 1.125rem; }
.hdr__act { display: flex; align-items: center; gap: .375rem; }
.hdr__icon { position: relative; display: inline-grid; place-items: center; width: 2.375rem; height: 2.375rem; border: 0; border-radius: 50%; background: var(--band); color: var(--text); cursor: pointer; transition: background-color var(--t-fast), color var(--t-fast); }
.hdr__icon:hover { background: var(--accent-soft); color: var(--accent-text); }
.hdr__act .theme-toggle { width: 2.375rem; min-height: 2.375rem; border-radius: 50%; background: var(--band); }
.hdr__cart .count { position: absolute; top: -2px; right: -2px; }
.hdr__login { padding: 0 .5rem; font-weight: 600; color: var(--text); white-space: nowrap; }
.hdr__login:hover { color: var(--accent-text); }
.nav__toggle { display: none; }
.mobile-nav[open] { display: flex; flex-direction: column; }
.mobile-nav__body { flex: 1; overflow-y: auto; display: grid; gap: 1rem; align-content: start; padding: .5rem 1.25rem 1rem; }
.m-search { display: flex; align-items: center; gap: .5rem; height: 2.75rem; padding: 0 1rem; border-radius: var(--r-pill); background: var(--band); color: var(--muted); }
.m-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 var(--fs-base) var(--font-sans); color: var(--text); }
.m-list { display: grid; }
.m-list a { display: flex; justify-content: space-between; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.m-list a.m-list__sub { padding-left: 1rem; font-size: var(--fs-base); font-weight: 500; color: var(--text-2); }
.m-list a b { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.m-list a[aria-current="page"] { color: var(--accent-text); }
.mobile-nav__cta { display: grid; gap: .5rem; padding: 1rem 1.25rem max(1rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
@media (max-width: 1240px) { .hdr__nav { display: none; } .nav__toggle { display: inline-grid; } .hdr__act { margin-left: auto; } }
@media (max-width: 640px) { .hide-sm { display: none !important; } .hdr__in { height: 4rem; gap: 1rem; } }

/* ── Bölüm iskeleti ── */
.sec { position: relative; padding-block: clamp(2.75rem, 5.5vw, 4.25rem); }
.sec--soft { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 55%, var(--page)), var(--page)); }
.sec--tight { padding-block: clamp(1.25rem, 3vw, 2rem) clamp(2.75rem, 5.5vw, 4rem); }
.sec--in { padding-block: clamp(2.25rem, 4.5vw, 3.25rem) 0; }
.sec__head { display: grid; justify-items: center; gap: .625rem; max-width: 42rem; margin: 0 auto clamp(1.5rem, 3vw, 2.25rem); text-align: center; }
.sec__head h2 { font-size: clamp(1.625rem, 2.6vw, 2.125rem); letter-spacing: -.04em; line-height: 1.1; }
.sec__head p { margin: 0; font-size: var(--fs-md); line-height: 1.65; color: var(--text-2); }
.sec__head--left { justify-items: start; text-align: left; margin-left: 0; max-width: none; }
.sec__head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.sec__head--row > div { display: grid; justify-items: start; gap: .875rem; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.125rem; }
.grid3--gap { margin-top: 1.5rem; }
@media (max-width: 1000px) { .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid3 { grid-template-columns: minmax(0, 1fr); } }
.box { padding: clamp(1.25rem, 3.5vw, 2rem); border-radius: 24px; background: var(--page); box-shadow: var(--sh-1); border: 1px solid var(--line); }
.box--soft { background: color-mix(in srgb, var(--accent-soft) 45%, var(--page)); }
.box__title { margin-bottom: 1rem; font-size: var(--fs-lg); letter-spacing: -.02em; }
.fine { display: flex; align-items: center; gap: .5rem; margin: 1.5rem 0 0; font-size: var(--fs-xs); color: var(--muted); }

/* ── Ana sayfa: giriş ── */
.hero { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 5.5vw, 4rem) clamp(3rem, 6vw, 4.5rem); background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 85%, var(--page)) 0%, var(--page) 78%); }
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.hero h1 { margin-top: 1rem; font-size: clamp(2rem, 4.2vw, 3.25rem); letter-spacing: -.045em; line-height: 1.08; max-width: 18ch; }
.hero__lead { margin: 1rem 0 0; font-size: 1.0625rem; line-height: 1.65; color: var(--text-2); max-width: 56ch; }
.hero__act { display: flex; flex-wrap: wrap; justify-content: center; gap: .625rem; margin-top: 1.5rem; }
.hero__checks { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.25rem; list-style: none; margin: 1.125rem 0 0; padding: 0; font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); }
.hero__checks li { display: inline-flex; align-items: center; gap: .4rem; }
.hero__checks .icon { color: var(--success); }
.mock { position: relative; width: 100%; max-width: 50rem; margin-top: clamp(2.25rem, 4.5vw, 3.25rem); text-align: left; }
.mock__bar { display: flex; align-items: center; gap: 6px; height: 2.5rem; padding: 0 1rem; background: var(--band); border-bottom: 1px solid var(--line); }
.mock__bar > i { width: 10px; height: 10px; border-radius: 50%; }
.mock__bar > i:nth-child(1) { background: #f26b5b; } .mock__bar > i:nth-child(2) { background: #f5bf4f; } .mock__bar > i:nth-child(3) { background: #61c454; }
.mock__bar span { display: inline-flex; align-items: center; gap: .3rem; margin: 0 auto; padding: 3px 14px; border-radius: 8px; background: var(--page); font-size: .75rem; color: var(--muted); }
.mock__bar span .icon { width: .8rem; height: .8rem; color: var(--success); }
.dash { display: grid; grid-template-columns: 6.5rem 1fr; min-height: 0; color: var(--text); }
.dash__side { display: grid; align-content: start; gap: .625rem; padding: 1.125rem .875rem; background: var(--stage); }
.dash__side b { height: .875rem; width: 70%; margin-bottom: 1rem; border-radius: 5px; background: rgba(255, 255, 255, .75); }
.dash__side span { height: .625rem; border-radius: 5px; background: rgba(255, 255, 255, .16); }
.dash__side span.is-on { background: var(--signal); width: 85%; }
.dash__main { display: grid; align-content: start; gap: 1rem; padding: 1.25rem 1.5rem 1.5rem; background: color-mix(in srgb, var(--band) 50%, var(--page)); }
.dash__top { display: flex; justify-content: space-between; align-items: center; }
.dash__top b { width: 30%; height: .875rem; border-radius: 5px; background: var(--text); opacity: .8; }
.dash__top em { width: 6rem; height: 1.75rem; border-radius: 99px; background: var(--accent); }
.dash__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .625rem; }
.dash__stats div { display: grid; gap: 2px; padding: .875rem; border-radius: 14px; background: var(--page); box-shadow: var(--sh-1); }
.dash__ic { width: 1.75rem; height: 1.75rem; margin-bottom: .375rem; border-radius: 9px; background: color-mix(in srgb, #3b6cf6 18%, var(--page)); }
.dash__ic--b { background: color-mix(in srgb, #16a34a 18%, var(--page)); } .dash__ic--c { background: color-mix(in srgb, #d97706 18%, var(--page)); } .dash__ic--d { background: color-mix(in srgb, #7c3aed 18%, var(--page)); }
.dash__stats small { font-size: .6875rem; color: var(--muted); }
.dash__stats strong { font-size: 1.125rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dash__grid { display: grid; grid-template-columns: 1fr 8.5rem; gap: .625rem; }
.dash__chart { display: flex; align-items: flex-end; gap: 6px; height: 7rem; padding: 1rem; border-radius: 14px; background: var(--page); box-shadow: var(--sh-1); }
.dash__chart span { flex: 1; border-radius: 5px 5px 2px 2px; background: color-mix(in srgb, var(--accent) 28%, var(--page)); }
.dash__chart span:nth-child(odd) { background: var(--accent); }
.dash__chart span:nth-child(1) { height: 35%; } .dash__chart span:nth-child(2) { height: 52%; } .dash__chart span:nth-child(3) { height: 44%; } .dash__chart span:nth-child(4) { height: 66%; } .dash__chart span:nth-child(5) { height: 50%; } .dash__chart span:nth-child(6) { height: 78%; } .dash__chart span:nth-child(7) { height: 60%; }
.dash__chart span:nth-child(8) { height: 88%; } .dash__chart span:nth-child(9) { height: 56%; } .dash__chart span:nth-child(10) { height: 72%; } .dash__chart span:nth-child(11) { height: 64%; } .dash__chart span:nth-child(12) { height: 92%; } .dash__chart span:nth-child(13) { height: 76%; } .dash__chart span:nth-child(14) { height: 98%; }
.dash__ring { display: grid; place-items: center; align-content: center; gap: .375rem; border-radius: 14px; background: var(--page); box-shadow: var(--sh-1); }
.dash__ring i { width: 4.25rem; height: 4.25rem; border-radius: 50%; background: conic-gradient(var(--accent) 0 72%, var(--band-2) 72% 100%); -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%); mask: radial-gradient(circle, transparent 54%, #000 55%); }
.dash__ring small { font-size: .6875rem; color: var(--muted); }
.dash__rows { display: grid; gap: .5rem; }
.dash__rows p { display: flex; align-items: center; gap: .75rem; margin: 0; padding: .625rem .875rem; border-radius: 12px; background: var(--page); box-shadow: var(--sh-1); }
.dash__rows i { width: 1.25rem; height: 1.25rem; border-radius: 50%; background: color-mix(in srgb, var(--accent) 30%, var(--page)); }
.dash__rows span { flex: 1; height: .5rem; border-radius: 5px; background: var(--line); }
.dash__rows em { font-size: .6875rem; font-style: normal; font-weight: 650; padding: 2px 9px; border-radius: 99px; background: var(--success-soft); color: var(--success-ink); }
.dash__rows em.wait { background: var(--warning-soft); color: var(--warning-ink); }
/* Giriş sahnesi: solda masaüstü monitör, sağda telefon (yalnızca CSS ile çizilmiş örnek panel) */
.mock { display: grid; grid-template-columns: minmax(0, 1fr) 13.5rem; gap: 2.5rem; align-items: end; max-width: 56rem; }
.desk { position: relative; display: grid; justify-items: center; }
.desk__screen { width: 100%; border: 10px solid #141a26; border-bottom-width: 22px; border-radius: 18px; overflow: hidden; background: var(--page); box-shadow: var(--sh-3); }
.desk__neck { width: 14%; height: 2rem; background: linear-gradient(90deg, #8f98a8, #c4cad5 45%, #8f98a8); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.desk__base { width: 32%; height: .5rem; border-radius: 6px 6px 99px 99px; background: linear-gradient(180deg, #b6bdc9, #8f98a8); box-shadow: 0 14px 24px -12px rgba(16, 24, 40, .45); }
.desk .mock__bar { height: 2rem; }
.desk .dash__main { gap: .75rem; padding: 1rem 1.125rem 1.125rem; }
.desk .dash__stats div { padding: .625rem .75rem; }
.desk .dash__stats strong { font-size: 1rem; }
.desk .dash__chart { height: 5.5rem; padding: .75rem; }
.desk .dash__grid { grid-template-columns: 1fr 6.5rem; }
.desk .dash__ring i { width: 3.5rem; height: 3.5rem; }
.desk .dash__rows p { padding: .5rem .75rem; }
.phone { position: relative; z-index: 1; margin-bottom: 1.5rem; padding: 9px; border-radius: 36px; background: #141a26; box-shadow: var(--sh-3), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.phone::before { content: ""; position: absolute; top: 15px; left: 50%; translate: -50% 0; width: 32%; height: 15px; border-radius: 99px; background: #141a26; z-index: 2; }
.phone__in { display: grid; gap: .625rem; padding: .75rem .75rem .625rem; border-radius: 28px; background: color-mix(in srgb, var(--band) 60%, var(--page)); color: var(--text); overflow: hidden; }
.phone__status { display: flex; justify-content: space-between; align-items: center; padding: 0 .375rem; font-size: .625rem; }
.phone__status span { display: flex; gap: 3px; }
.phone__status i { width: 10px; height: 6px; border-radius: 2px; background: var(--text); opacity: .7; }
.phone__head { display: flex; justify-content: space-between; align-items: center; padding: .25rem .25rem 0; }
.phone__head b { width: 45%; height: .625rem; border-radius: 4px; background: var(--text); opacity: .8; }
.phone__av { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); }
.phone__card { display: grid; gap: 2px; padding: .75rem; border-radius: 16px; background: linear-gradient(130deg, var(--accent), var(--stage)); color: #fff; }
.phone__card small { font-size: .5625rem; opacity: .8; }
.phone__card strong { font-size: 1.125rem; letter-spacing: -.02em; }
.phone__spark { display: flex; align-items: flex-end; gap: 3px; height: 1.75rem; margin-top: .25rem; }
.phone__spark i { flex: 1; border-radius: 2px; background: rgba(255, 255, 255, .85); }
.phone__spark i:nth-child(1) { height: 30%; } .phone__spark i:nth-child(2) { height: 48%; } .phone__spark i:nth-child(3) { height: 40%; } .phone__spark i:nth-child(4) { height: 62%; }
.phone__spark i:nth-child(5) { height: 55%; } .phone__spark i:nth-child(6) { height: 78%; } .phone__spark i:nth-child(7) { height: 70%; } .phone__spark i:nth-child(8) { height: 100%; }
.phone__stats { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.phone__stats div { display: grid; padding: .5rem .625rem; border-radius: 12px; background: var(--page); box-shadow: var(--sh-1); }
.phone__stats small { font-size: .5625rem; color: var(--muted); }
.phone__stats b { font-size: .9375rem; }
.phone__rows { display: grid; gap: .375rem; }
.phone__rows p { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .4375rem .5rem; border-radius: 10px; background: var(--page); box-shadow: var(--sh-1); }
.phone__rows i { width: .875rem; height: .875rem; border-radius: 50%; background: color-mix(in srgb, var(--accent) 30%, var(--page)); }
.phone__rows span { flex: 1; height: .375rem; border-radius: 3px; background: var(--line); }
.phone__rows em { font-size: .5rem; font-style: normal; font-weight: 650; padding: 1px 6px; border-radius: 99px; background: var(--success-soft); color: var(--success-ink); }
.phone__rows em.wait { background: var(--warning-soft); color: var(--warning-ink); }
.phone__tabs { display: flex; justify-content: space-around; margin: .125rem -.75rem -.625rem; padding: .625rem 0 .75rem; background: var(--page); border-top: 1px solid var(--line); }
.phone__tabs i { width: 1rem; height: 1rem; border-radius: 5px; background: var(--line-strong); }
.phone__tabs i.is-on { background: var(--accent); }
.mock__float--l { left: -3rem; top: 26%; }
.mock__float--r { right: -2.5rem; top: -1.5rem; animation-delay: -2s; z-index: 2; }
.mock__float--b { left: 46%; bottom: 3.5rem; animation-delay: -4s; z-index: 2; }
@media (max-width: 1100px) { .mock__float--l { left: -.75rem; } .mock__float--r { right: -.5rem; } }
@media (max-width: 760px) {
  .mock { grid-template-columns: minmax(0, 1fr); }
  .desk { margin-right: 4.5rem; }
  .desk .dash { grid-template-columns: 3.5rem 1fr; }
  .desk .dash__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .desk .dash__stats div:nth-child(3) { display: none; }
  .desk .dash__grid { grid-template-columns: 1fr; } .desk .dash__ring { display: none; }
  .phone { position: absolute; right: 0; bottom: 1.25rem; width: 8.5rem; margin: 0; padding: 6px; border-radius: 24px; }
  .phone::before { top: 10px; height: 10px; }
  .phone__in { border-radius: 19px; gap: .4rem; padding: .5rem .5rem .4rem; }
  .phone__rows p:nth-child(3), .phone__stats { display: none; }
  .mock__float--l { display: none; } .mock__float--r { top: -2rem; right: auto; left: 0; } .mock__float--b { left: auto; right: 6rem; bottom: -.5rem; }
}
.mock__float { position: absolute; display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem .75rem .75rem; border-radius: 18px; background: var(--page); box-shadow: var(--sh-3); animation: bob 6s ease-in-out infinite; }
.mock__float .ibadge { width: 2.5rem; height: 2.5rem; border-radius: 12px; }
.mock__float .ibadge .icon { width: 1.125rem; height: 1.125rem; }
.mock__float b { display: block; font-size: var(--fs-sm); }
.mock__float small { font-size: var(--fs-xs); color: var(--muted); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .mock__float { animation: none; } }

/* ── Ana sayfa: özellik kartları, adımlar, lisans bölümü ── */
.feat4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.feat3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.fcard { position: relative; display: grid; align-content: start; gap: .5rem; padding: 1.375rem 1.25rem; border-radius: 20px; background: var(--page); border: 1px solid var(--line); box-shadow: var(--sh-1); transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.fcard:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.fcard .ibadge { margin-bottom: .375rem; }
.fcard h3 { font-size: var(--fs-md); letter-spacing: -.015em; }
.fcard p { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-2); }
.fcard--sm { padding: 1.25rem; }
.fcard--sm .ibadge { width: 2.75rem; height: 2.75rem; border-radius: 14px; margin-bottom: .375rem; }
.fcard--sm .ibadge .icon { width: 1.25rem; height: 1.25rem; }
.fcard--sm h3 { font-size: var(--fs-md); }
.fcard--sm p { font-size: var(--fs-sm); }
@media (max-width: 1100px) { .feat4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feat3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .feat4, .feat3 { grid-template-columns: minmax(0, 1fr); } }
.steps4 { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.steps4::before { content: ""; position: absolute; top: 1.875rem; left: 12%; right: 12%; border-top: 2px dashed color-mix(in srgb, var(--accent) 35%, var(--line)); }
.steps4 li { position: relative; display: grid; justify-items: center; gap: .625rem; text-align: center; padding: 0 .5rem; }
.steps4 .ibadge { width: 3.75rem; height: 3.75rem; border-radius: 50%; background: var(--page); box-shadow: var(--sh-2), inset 0 0 0 6px color-mix(in srgb, var(--c) 12%, var(--page)); }
.steps4 .ibadge .icon { width: 1.375rem; height: 1.375rem; }
.steps4__n { position: absolute; top: -.25rem; left: calc(50% + 1.5rem); z-index: 1; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: var(--fs-sm); font-weight: 700; box-shadow: 0 0 0 4px var(--page); }
.steps4 h3 { margin-top: .5rem; font-size: var(--fs-md); letter-spacing: -.015em; }
.steps4 p { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-2); max-width: 24ch; }
@media (max-width: 900px) { .steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; } .steps4::before { display: none; } }
@media (max-width: 480px) { .steps4 { grid-template-columns: minmax(0, 1fr); } }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.split__copy { display: grid; justify-items: start; gap: 1rem; }
.split__copy h2 { font-size: clamp(1.625rem, 2.6vw, 2.125rem); letter-spacing: -.04em; line-height: 1.1; }
.split__copy > p { margin: 0; font-size: var(--fs-md); line-height: 1.65; color: var(--text-2); }
.checks { list-style: none; margin: .5rem 0 .75rem; padding: 0; display: grid; gap: 1rem; }
.checks li { display: flex; gap: .75rem; align-items: flex-start; line-height: 1.6; color: var(--text-2); }
.checks li .icon { flex: none; width: 1.375rem; height: 1.375rem; margin-top: 2px; color: var(--success); }
.checks b { color: var(--text); }
.split__art { position: relative; }
.own { position: relative; padding: 2rem; border-radius: 26px; background: linear-gradient(135deg, var(--accent), var(--stage)); min-height: 20rem; display: grid; align-items: center; overflow: hidden; }
.own::before { content: ""; position: absolute; width: 18rem; height: 18rem; right: -6rem; top: -6rem; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.own::after { content: ""; position: absolute; width: 12rem; height: 12rem; left: -4rem; bottom: -5rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .18); }
.own .dotgrid--art { right: 1.5rem; bottom: 1.5rem; background-image: radial-gradient(rgba(255, 255, 255, .45) 1.5px, transparent 1.6px); }
.own__card { position: relative; z-index: 1; border-radius: 20px; background: var(--page); box-shadow: var(--sh-3); color: var(--text); }
.own__card--main { padding: 1.25rem; max-width: 19rem; }
.own__head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.own__head b { display: block; } .own__head small { font-size: var(--fs-xs); font-weight: 600; color: var(--success); }
.own dl { display: grid; gap: .625rem; margin: 0; }
.own dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .625rem .875rem; border-radius: 12px; background: var(--band); font-size: var(--fs-sm); }
.own dt { color: var(--muted); } .own dd { margin: 0; font-weight: 600; }
.own__card--side { position: absolute; right: 1.5rem; bottom: 2rem; display: grid; justify-items: start; gap: .25rem; padding: 1rem 1.25rem; animation: bob 7s ease-in-out infinite; }
.own__card--side .ibadge { width: 2.5rem; height: 2.5rem; margin-bottom: .375rem; }
.own__card--side small { font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .own { padding: 1.25rem; } .own__card--side { position: static; margin-top: 1rem; } }

/* ── Blog kartları ── */
.bcard { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 20px; background: var(--page); border: 1px solid var(--line); box-shadow: var(--sh-1); color: var(--text); transition: transform var(--t), box-shadow var(--t); }
.bcard:hover { transform: translateY(-6px); box-shadow: var(--sh-2); color: var(--text); }
.bcard__img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--band-2); }
.bcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.bcard:hover .bcard__img img { transform: scale(1.05); }
.bcard__ph { display: grid; place-items: center; height: 100%; color: var(--muted); }
.bcard__tag { position: absolute; left: 1rem; top: 1rem; padding: .25rem .75rem; border-radius: var(--r-pill); background: var(--page); font-size: var(--fs-xs); font-weight: 650; color: var(--accent-text); box-shadow: var(--sh-1); }
.bcard__body { display: grid; align-content: start; gap: .5rem; padding: 1.125rem 1.25rem 1.25rem; }
.bcard__date { display: inline-flex; align-items: center; gap: .375rem; font-size: var(--fs-xs); color: var(--muted); }
.bcard__date .icon { width: .9rem; height: .9rem; }
.bcard__title { font-size: var(--fs-md); font-weight: 650; letter-spacing: -.02em; line-height: 1.3; }
.bcard:hover .bcard__title { color: var(--accent-text); }
.bcard__ex { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bcard__more { display: inline-flex; align-items: center; gap: .375rem; margin-top: .25rem; font-size: var(--fs-sm); font-weight: 650; color: var(--accent-text); }

/* ── Kapanış bandı ── */
.cta { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem 2.5rem; flex-wrap: wrap; padding: clamp(1.5rem, 3.5vw, 2.75rem); border-radius: 26px; background: linear-gradient(120deg, var(--accent) 0%, var(--stage) 100%); color: #fff; box-shadow: 0 30px 60px -30px rgba(var(--accent-rgb), .7); }
.cta__shape { position: absolute; border-radius: 50%; pointer-events: none; }
.cta__shape--a { width: 20rem; height: 20rem; right: -5rem; top: -9rem; background: rgba(255, 255, 255, .1); }
.cta__shape--b { width: 14rem; height: 14rem; left: 30%; bottom: -10rem; border: 2px solid rgba(255, 255, 255, .18); }
.cta__copy { position: relative; max-width: 36rem; }
.cta h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.04em; line-height: 1.1; }
.cta p { margin: .625rem 0 0; color: rgba(255, 255, 255, .85); font-size: var(--fs-base); line-height: 1.6; }
.cta__act { position: relative; display: flex; flex-wrap: wrap; gap: .75rem; }

/* ── İç sayfa başlık bandı ── */
.pbanner { position: relative; overflow: hidden; padding-block: clamp(2rem, 4.5vw, 3.25rem); background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 90%, var(--page)), color-mix(in srgb, var(--accent-soft) 35%, var(--page))); border-bottom: 1px solid var(--line); }
.pbanner--sm { padding-block: clamp(1.5rem, 3.5vw, 2.5rem); }
.pbanner__bg { position: absolute; inset: 0; pointer-events: none; }
.pbanner__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: .625rem; text-align: center; }
.pbanner h1 { font-size: clamp(1.75rem, 3.2vw, 2.375rem); letter-spacing: -.045em; line-height: 1.08; max-width: 22ch; }
.pbanner p { margin: 0; font-size: var(--fs-base); line-height: 1.6; color: var(--text-2); max-width: 58ch; }
.pbanner__meta { display: flex; align-items: center; gap: .75rem; font-size: var(--fs-sm) !important; }
.pbanner__meta span { display: inline-flex; align-items: center; gap: .375rem; }
.crumb { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; padding: .375rem 1rem; border-radius: var(--r-pill); background: color-mix(in srgb, var(--page) 75%, transparent); box-shadow: var(--sh-1); font-size: var(--fs-sm); color: var(--muted); }
.crumb a { color: var(--text-2); font-weight: 500; }
.crumb a:hover { color: var(--accent-text); }
.crumb b { color: var(--accent-text); font-weight: 600; }
.bsearch { display: flex; align-items: center; gap: .5rem; width: min(100%, 30rem); height: 3rem; margin-top: .5rem; padding: 0 .5rem 0 1.25rem; border-radius: var(--r-pill); background: var(--page); box-shadow: var(--sh-2); color: var(--muted); }
.bsearch:focus-within { box-shadow: var(--sh-2), var(--ring); }
.bsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 var(--fs-base) var(--font-sans); color: var(--text); }
.bsearch__n { padding: .375rem .875rem; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); font-size: var(--fs-xs); font-weight: 650; white-space: nowrap; }
.psteps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; width: min(100%, 34rem); list-style: none; margin: .5rem 0 0; padding: 0; counter-reset: ps; }
.psteps li { counter-increment: ps; display: grid; justify-items: center; align-content: start; gap: .375rem; font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; text-align: center; color: var(--muted); }
.psteps li::before { content: counter(ps); display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--page); box-shadow: var(--sh-1); color: var(--muted); }
.psteps li.is-done::before { content: "✓"; background: var(--success); color: #fff; }
.psteps li.is-current { color: var(--accent-text); }
.psteps li.is-current::before { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .18); }

/* ── Katalog: sekmeler, sıralama, ürün kartları ── */
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: .625rem; flex-wrap: wrap; margin-bottom: 1.375rem; }
.toolbar__sort { width: auto; }
.toolbar .ssel { flex: none; }
.toolbar .ssel__trigger { width: auto; min-height: 2.75rem; padding-block: 0; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; }
.pcard { position: relative; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; border-radius: 20px; background: var(--page); border: 1px solid var(--line); box-shadow: var(--sh-1); color: var(--text); transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.pcard:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); color: var(--text); }
.pcard__img { position: relative; display: block; aspect-ratio: 16 / 10; margin: .5rem .5rem 0; border-radius: 14px; overflow: hidden; background: var(--band-2); }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.pcard:hover .pcard__img img { transform: scale(1.05); }
.pcard__ph { display: grid; place-items: center; height: 100%; font-size: 2rem; font-weight: 700; color: var(--muted); }
.pcard__flag, .pcard__demo { position: absolute; top: .75rem; display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; border-radius: var(--r-pill); font-size: .75rem; font-weight: 650; box-shadow: var(--sh-1); }
.pcard__flag { left: .75rem; background: #fff; color: #b45309; }
.pcard__flag .icon { width: .85rem; height: .85rem; fill: currentColor; }
.pcard__demo { right: .75rem; background: rgba(0, 0, 0, .55); color: #fff; backdrop-filter: blur(6px); }
.pcard__demo .icon { width: .85rem; height: .85rem; }
.pcard__body { display: grid; align-content: start; gap: .375rem; padding: 1rem 1.125rem 0; }
.pcard__cat { justify-self: start; padding: .2rem .65rem; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); font-size: .75rem; font-weight: 650; }
.pcard__name { font-size: 1.125rem; letter-spacing: -.03em; line-height: 1.2; }
.pcard__name a:hover { color: var(--accent-text); }
.pcard:hover .pcard__name { color: var(--accent-text); }
.pcard__desc { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-2); }
.pcard__feat { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: .375rem; font-size: var(--fs-sm); color: var(--text-2); }
.pcard__feat li { display: flex; align-items: center; gap: .5rem; }
.pcard__feat .icon { width: 1rem; height: 1rem; padding: 2px; border-radius: 50%; background: var(--success-soft); color: var(--success); }
.pcard__foot { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: 1rem; padding: .875rem 1.125rem 1rem; border-top: 1px dashed var(--line-strong); }
.pcard__price { display: grid; margin: 0; }
.pcard__price small { font-size: .75rem; color: var(--muted); }
.pcard__price b, b.pcard__price { font-size: 1.125rem; font-weight: 700; letter-spacing: -.035em; color: var(--accent-text); }
.pcard__go { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); transition: background-color var(--t-fast), color var(--t-fast); }
.pcard:hover .pcard__go { background: var(--accent); color: var(--accent-ink); }
.pcard--mini .pcard__body { padding-top: 1rem; }
.pcard--mini .pcard__name { font-size: var(--fs-md); }
.pcard--mini .pcard__foot { margin-top: .75rem; padding-block: .75rem 1rem; }

/* ── Ürün sayfası ── */
.pd { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.gallery__main { aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; background: var(--band-2); box-shadow: var(--sh-2); }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs { display: flex; gap: .75rem; margin-top: .875rem; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.gallery__thumbs button { flex: none; width: 6.25rem; aspect-ratio: 16 / 10; padding: 0; border: 2px solid transparent; border-radius: 14px; overflow: hidden; background: var(--band); cursor: pointer; opacity: .65; transition: opacity var(--t-fast), border-color var(--t-fast); }
.gallery__thumbs button:hover { opacity: 1; }
.gallery__thumbs button[aria-current="true"] { border-color: var(--accent); opacity: 1; }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pd__facts { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .875rem; }
.pd__facts li { display: flex; align-items: center; gap: .75rem; padding: .75rem .875rem; border-radius: 16px; background: var(--page); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.pd__facts .ibadge { width: 2.25rem; height: 2.25rem; border-radius: 11px; }
.pd__facts .ibadge .icon { width: 1.05rem; height: 1.05rem; }
.pd__facts small { display: block; font-size: var(--fs-xs); color: var(--muted); }
.pd__facts b { font-size: var(--fs-base); }
.pd__buy { position: sticky; top: 5rem; }
.buy { display: grid; gap: .875rem; padding: 1.375rem; border-radius: 22px; background: var(--page); border: 1px solid var(--line); box-shadow: var(--sh-2); }
.buy__head { display: grid; justify-items: start; gap: .5rem; }
.buy__cat { padding: .2rem .7rem; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); font-size: .75rem; font-weight: 650; }
.buy__head h2 { font-size: 1.375rem; letter-spacing: -.03em; }
.buy__head p { margin: 0; color: var(--text-2); line-height: 1.6; }
.buy__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .375rem; padding: .75rem 1rem; border-radius: 14px; background: color-mix(in srgb, var(--accent-soft) 60%, var(--page)); }
.buy__price b { font-size: 1.625rem; font-weight: 750; letter-spacing: -.045em; color: var(--accent-text); }
.buy__price span { color: var(--text-2); font-weight: 500; }
.opt-set { display: grid; gap: .5rem; }
.opt-set legend { margin-bottom: .5rem; font-size: var(--fs-base); font-weight: 650; }
.opt-set legend span { font-size: var(--fs-xs); font-weight: 450; color: var(--muted); }
.opt-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .5rem; }
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt__box { display: grid; gap: 2px; height: 100%; padding: .75rem .875rem; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--page); transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast); }
.opt:hover .opt__box { border-color: color-mix(in srgb, var(--accent) 50%, var(--line-strong)); }
.opt__box b { font-size: var(--fs-base); font-weight: 650; }
.opt__box small { font-size: var(--fs-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }
.opt__box em { font-style: normal; font-size: var(--fs-xs); color: var(--muted); }
.opt--line .opt__box { grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; }
.opt--line .opt__box em { grid-column: 1 / -1; }
.opt input:checked + .opt__box { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 60%, var(--page)); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .14); }
.opt input:checked + .opt__box b { color: var(--accent-text); }
.opt input:focus-visible + .opt__box { box-shadow: var(--ring); }
.seg-radio { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 4px; border-radius: var(--r-pill); background: var(--band); }
.seg-radio label { position: relative; cursor: pointer; }
.seg-radio input { position: absolute; opacity: 0; pointer-events: none; }
.seg-radio span { display: grid; place-items: center; min-height: 2.375rem; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.seg-radio input:checked + span { background: var(--page); color: var(--accent-text); box-shadow: var(--sh-1); }
.seg-radio input:focus-visible + span { box-shadow: var(--ring); }
.opt-set .field { margin-top: .25rem; }
.buy .btn--block + .btn--block { margin-top: -.375rem; }
.buy__trust { list-style: none; margin: 0; padding: .875rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.25rem; border-top: 1px dashed var(--line-strong); font-size: var(--fs-xs); font-weight: 500; color: var(--text-2); }
.buy__trust li { display: inline-flex; align-items: center; gap: .375rem; }
.buy__trust .icon { color: var(--success); }
@media (max-width: 1000px) { .pd { grid-template-columns: minmax(0, 1fr); } .pd__buy { position: static; } }
@media (max-width: 520px) { .pd__facts { grid-template-columns: minmax(0, 1fr); } }
.subnav { position: sticky; top: 4.5rem; z-index: 5; display: flex; gap: .375rem; overflow-x: auto; scrollbar-width: none; margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: .375rem; border-radius: var(--r-pill); background: color-mix(in srgb, var(--page) 92%, transparent); backdrop-filter: blur(12px); box-shadow: var(--sh-2); }
.subnav a { flex: none; padding: .4rem .95rem; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.subnav a:hover { background: var(--accent-soft); color: var(--accent-text); }
.demos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }
.demo { display: flex; align-items: center; gap: .875rem; padding: 1rem; border-radius: 18px; background: var(--page); border: 1px solid var(--line); box-shadow: var(--sh-1); color: var(--text); transition: transform var(--t), box-shadow var(--t); }
.demo:hover { transform: translateY(-4px); box-shadow: var(--sh-2); color: var(--text); }
.demo__t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.demo__t small { font-size: var(--fs-sm); color: var(--text-2); }
.demo__go { display: inline-flex; align-items: center; gap: .375rem; padding: .5rem .875rem; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); font-size: var(--fs-sm); font-weight: 650; white-space: nowrap; }
.terms { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.terms--solo { grid-template-columns: minmax(0, 1fr); }
.tlist, .rlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; }
.tlist li { display: flex; gap: .625rem; align-items: flex-start; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-2); }
.tlist li > .icon { flex: none; width: 1.75rem; height: 1.75rem; padding: .35rem; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); }
.tlist b { color: var(--text); }
.box--soft h3 { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; font-size: var(--fs-lg); }
.box--soft h3 .icon { color: var(--accent-text); }
.rlist li { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-base); color: var(--text-2); }
.rlist .icon { color: var(--success); flex: none; }
@media (max-width: 900px) { .terms { grid-template-columns: minmax(0, 1fr); } }

/* ── Sepet ve ödeme ── */
.cart-grid { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.25rem; align-items: start; }
.cart-grid__main { display: grid; gap: 1.25rem; min-width: 0; }
.glist { list-style: none; margin: 0; padding: 0; border-radius: 24px; background: var(--page); border: 1px solid var(--line); box-shadow: var(--sh-1); overflow: hidden; }
.glist__row { display: flex; align-items: center; gap: .875rem; padding: 1rem 1.25rem; }
.glist__row + .glist__row { border-top: 1px solid var(--line); }
.glist__row:has(> .glist__link) { padding: 0; }
.glist__link { flex: 1; display: flex; align-items: center; gap: .875rem; min-width: 0; padding: 1rem 1.25rem; color: var(--text); transition: background-color var(--t-fast); }
.glist__link:hover { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); color: var(--text); }
.glist__chev { width: 1rem; height: 1rem; color: var(--muted); transform: rotate(-90deg); flex: none; }
.glist__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.glist__text b { font-size: .96875rem; font-weight: 600; }
.glist__text small { font-size: var(--fs-sm); color: var(--text-2); }
.kv-list .glist__row { justify-content: space-between; gap: 1.5rem; }
.kv-list dt { font-size: var(--fs-sm); color: var(--text-2); }
.kv-list dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.cart-item { display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; gap: 1rem; align-items: start; padding: 1rem; }
.cart-item + .cart-item { border-top: 1px solid var(--line); }
.cart-item__shot { display: block; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--band); }
.cart-item__shot img { width: 100%; height: 100%; object-fit: cover; }
.cart-item__body { display: grid; gap: .25rem; justify-items: start; min-width: 0; }
.cart-item__name { font-size: var(--fs-md); font-weight: 650; letter-spacing: -.015em; }
.cart-item__name:hover { color: var(--accent-text); }
.cart-item__meta { padding: .15rem .6rem; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); font-size: var(--fs-xs); font-weight: 600; }
.cart-item__opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; font-size: var(--fs-sm); color: var(--text-2); }
.cart-item__opts span { color: var(--muted); font-variant-numeric: tabular-nums; }
.cart-item__domain { margin-top: .25rem; }
.cart-item__domain summary { display: inline-flex; align-items: center; gap: .5rem; list-style: none; cursor: pointer; font-size: var(--fs-sm); }
.cart-item__domain summary::-webkit-details-marker { display: none; }
.cart-item__form { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .625rem; }
.cart-item__form .ssel, .cart-item__form .select { width: auto; }
.cart-item__form .input { flex: 1; width: auto; min-width: 9rem; }
.cart-item__side { display: grid; justify-items: end; gap: .125rem; text-align: right; }
.cart-item__side .price { font-size: 1.0625rem; font-weight: 750; letter-spacing: -.03em; color: var(--accent-text); white-space: nowrap; }
.cart-item__remove { margin-top: .375rem; padding: .25rem .625rem; border: 0; border-radius: var(--r-pill); background: var(--danger-soft); font-size: var(--fs-xs); font-weight: 600; color: var(--danger-ink); cursor: pointer; }
.sum { position: sticky; top: 5rem; display: grid; gap: .875rem; padding: 1.375rem; border-radius: 22px; background: var(--page); border: 1px solid var(--line); box-shadow: var(--sh-2); }
.sum h2 { font-size: var(--fs-lg); letter-spacing: -.025em; }
.sum__coupon { display: grid; gap: .5rem; padding: 1rem; border-radius: 18px; background: var(--band); }
.sum .summary__row--total span:last-child { color: var(--accent-text); }
.sum-items { list-style: none; margin: 0; padding: 0 0 1rem; display: grid; gap: .625rem; border-bottom: 1px dashed var(--line-strong); }
.sum-items li { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--fs-sm); }
.sum-items li > span:first-child { display: grid; gap: 1px; }
.sum-items b { font-size: var(--fs-base); font-weight: 600; }
.sum-items small { font-size: var(--fs-xs); color: var(--muted); }
.sum-items .num { white-space: nowrap; font-weight: 550; }
.co-sec { border-radius: 24px; background: var(--page); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.co-sec__head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: 1.125rem 1.25rem .75rem; }
.co-sec__head h2 { margin-right: auto; font-size: var(--fs-lg); letter-spacing: -.025em; }
.co-sec__n { display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: var(--fs-sm); font-weight: 700; flex: none; box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .15); }
.co-sec__body { display: grid; gap: .625rem; padding: 0 1.25rem 1.25rem; }
.co-sec__body > p { margin: 0; }
.choice__main { flex: 1; display: grid; gap: 2px; }
.choice__main strong { display: inline-flex; align-items: center; gap: .5rem; }
.choice__price { font-weight: 700; white-space: nowrap; color: var(--accent-text); }
.disclosure { padding: 1.125rem 1.25rem; border-radius: 18px; background: color-mix(in srgb, var(--warning-soft) 70%, var(--page)); }
.disclosure > strong { display: flex; align-items: center; gap: .5rem; color: var(--warning-ink); }
.disclosure ul { margin: .625rem 0 0; padding-left: 1.15em; font-size: var(--fs-sm); line-height: 1.65; color: var(--text-2); }
.disclosure li + li { margin-top: .375rem; }
.co-checks { display: grid; gap: .625rem; }
.check--all { padding-bottom: .625rem; border-bottom: 1px solid var(--line); }
.empty--box { border-radius: 24px; background: var(--page); border: 1px solid var(--line); box-shadow: var(--sh-1); padding: clamp(2rem, 5vw, 3rem); justify-items: center; text-align: center; }
.empty__icon { width: 4rem; height: 4rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); }
@media (max-width: 1100px) { .cart-grid { grid-template-columns: minmax(0, 1fr); } .sum { position: static; } }
@media (max-width: 640px) { .cart-item { grid-template-columns: 5.5rem minmax(0, 1fr); } .cart-item__side { grid-column: 2; justify-items: start; text-align: left; } }

/* ── Yazı ve kurumsal sayfa: içerik + yan sütun ── */
.side-layout { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1.25rem; align-items: start; }
.side-layout--solo { grid-template-columns: minmax(0, 52rem); justify-content: center; }
.box--read { padding: clamp(1.25rem, 3.5vw, 2.25rem); }
.box--read .prose { max-width: none; }
.read__lead { margin: 0 0 1.25rem; font-size: 1.0625rem; line-height: 1.6; color: var(--text-2); }
.read__cover { width: 100%; margin-bottom: 2rem; border-radius: 18px; }
.read__note { margin-bottom: 1.5rem; }
.side-stack { position: sticky; top: 6rem; display: grid; gap: 1.25rem; }
.recent { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.recent a { display: grid; gap: .25rem; padding: .75rem; margin: 0 -.75rem; border-radius: 14px; color: var(--text); }
.recent a:hover { background: var(--band); color: var(--accent-text); }
.recent b { font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; }
.recent small { display: inline-flex; align-items: center; gap: .375rem; font-size: var(--fs-xs); color: var(--muted); }
.recent small .icon { width: .85rem; height: .85rem; }
.side-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.side-links a { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .625rem .875rem; border-radius: 12px; font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); }
.side-links a .icon { width: .9rem; height: .9rem; opacity: 0; transition: opacity var(--t-fast); }
.side-links a:hover, .side-links a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.side-links a:hover .icon, .side-links a[aria-current="page"] .icon { opacity: 1; }
.box--cta { display: grid; justify-items: start; gap: .625rem; background: linear-gradient(140deg, var(--accent), var(--stage)); border: 0; color: #fff; }
.box--cta h2 { color: #fff; font-size: var(--fs-lg); }
.box--cta p { margin: 0 0 .5rem; color: rgba(255, 255, 255, .85); font-size: var(--fs-sm); }
.contract { max-width: 52rem; margin-inline: auto; }
.contract__head { margin-bottom: 1.5rem; }
.contract__head h1 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); letter-spacing: -.04em; }
.kv-list { margin-bottom: 2rem; box-shadow: none; }
@media (max-width: 1000px) { .side-layout { grid-template-columns: minmax(0, 1fr); } .side-stack { position: static; } }

/* ── Sıkça sorulanlar ── */
.faq-groups { display: grid; gap: 1.75rem; }
.faq-group { display: grid; gap: 1rem; }
.faq-group__title { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-lg); letter-spacing: -.025em; }
.faq-group__title::before { content: ""; width: .5rem; height: 1.5rem; border-radius: 99px; background: var(--accent); }
.ask { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; margin-top: clamp(2.25rem, 4.5vw, 3rem); padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: 22px; background: linear-gradient(120deg, var(--accent), var(--stage)); color: #fff; }
.ask h2 { color: #fff; font-size: var(--fs-xl); letter-spacing: -.03em; }
.ask p { margin: .5rem 0 0; color: rgba(255, 255, 255, .85); max-width: 60ch; }
.ask__act { display: flex; gap: .625rem; flex-wrap: wrap; }
.ask__act .btn--primary { --btn-bg: #fff; --btn-fg: #0d1528; --btn-bd: #fff; box-shadow: none; }
.ask__act .btn:not(.btn--primary) { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .55); }

/* ── İletişim: üstte iletişim kanalları + harita yan yana, altta tam genişlik form ── */
.ct-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.25rem; align-items: stretch; }
.ct-top--solo { grid-template-columns: minmax(0, 1fr); }
.ct-top--solo .ct-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.ct-top--solo .ct-list .glist__row + .glist__row { border-top: 0; }
.ct-ic { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 12px; background: var(--ct, var(--accent-soft)); color: #fff; flex: none; }
.ct-ic .icon { width: 1.125rem; height: 1.125rem; }
.ct-ic:not([style]) { color: var(--accent-text); }
.ct-ic--accent { background: var(--accent-soft); color: var(--accent-text) !important; }
.ct-ic--info { background: var(--info-soft); color: var(--info-ink) !important; }
.ct-ic--text { background: var(--text); color: var(--page) !important; }
.ct-list .glist__text small { font-size: var(--fs-xs); color: var(--muted); }
.ct-list .glist__text b { font-size: var(--fs-base); overflow-wrap: anywhere; }
.ct-map { min-height: 20rem; border-radius: 22px; overflow: hidden; background: var(--band); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.ct-map iframe { display: block; width: 100%; height: 100%; min-height: 20rem; border: 0; }
.ct-form { margin-top: 1.25rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 22px; background: var(--page); border: 1px solid var(--line); box-shadow: var(--sh-2); }
.ct-form__head { display: flex; align-items: center; gap: .875rem; margin-bottom: 1.25rem; }
.ct-form__head h2 { font-size: var(--fs-xl); letter-spacing: -.025em; }
.ct-form__head p { margin: .125rem 0 0; font-size: var(--fs-sm); color: var(--text-2); }
.ct-form__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ct-form__grid .field + .field { margin-top: 0; }
.ct-form__wide { grid-column: 1 / -1; }
.ct-form__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.25rem; padding-top: 1.125rem; border-top: 1px dashed var(--line-strong); }
.ct-form__foot .hint { max-width: 48ch; }
@media (max-width: 900px) { .ct-top { grid-template-columns: minmax(0, 1fr); } .ct-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ct-form__grid .field:nth-child(3) { grid-column: 1 / -1; } }
@media (max-width: 560px) { .ct-form__grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Giriş / kayıt / parola ── */
.auth-page { display: grid; justify-items: center; padding-bottom: 1rem; }
.auth-page--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); justify-items: stretch; align-items: stretch; gap: 1.25rem; max-width: calc(60rem + 2 * var(--view-pad)); }
.auth-side { position: relative; overflow: hidden; display: grid; align-content: center; gap: 1.25rem; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 24px; background: linear-gradient(140deg, var(--accent), var(--stage)); color: #fff; }
.auth-side .blob--a { background: rgba(255, 255, 255, .25); top: auto; bottom: -10rem; left: auto; right: -8rem; }
.auth-side .dotgrid { background-image: radial-gradient(rgba(255, 255, 255, .4) 1.5px, transparent 1.6px); }
.auth-side h2 { position: relative; color: #fff; font-size: clamp(1.5rem, 2.4vw, 1.875rem); letter-spacing: -.04em; line-height: 1.12; max-width: 18ch; }
.auth-side ul { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; }
.auth-side li { display: flex; align-items: center; gap: .625rem; font-weight: 500; color: rgba(255, 255, 255, .92); }
.auth-side li .icon { color: var(--signal); }
.auth-side__card { position: relative; display: flex; align-items: center; gap: .75rem; justify-self: start; padding: .875rem 1.125rem .875rem .875rem; border-radius: 18px; background: var(--page); color: var(--text); box-shadow: var(--sh-3); }
.auth-side__card b { display: block; font-size: var(--fs-sm); } .auth-side__card small { font-size: var(--fs-xs); color: var(--muted); }
.auth-side__card .ibadge { width: 2.5rem; height: 2.5rem; border-radius: 12px; }
.auth-page--split .auth-box { width: 100%; }
.auth-box { width: min(100%, 28rem); }
.auth-box--wide { width: min(100%, 38rem); }
.auth-card { padding: clamp(1.25rem, 3vw, 1.875rem); border-radius: 24px; background: var(--page); border: 1px solid var(--line); box-shadow: var(--sh-2); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-bottom: 1.75rem; }
.auth-tabs a { justify-content: center; }
.auth-head { display: grid; gap: .375rem; margin-bottom: 1.5rem; }
.auth-head h1 { font-size: var(--fs-2xl); letter-spacing: -.04em; }
.auth-head p { margin: 0; color: var(--text-2); }
.auth-head .auth-warn { display: flex; gap: .5rem; align-items: flex-start; margin-top: .5rem; padding: .75rem .875rem; border-radius: 14px; background: var(--warning-soft); color: var(--warning-ink); font-size: var(--fs-sm); line-height: 1.5; }
.auth-head .auth-warn .icon { margin-top: 2px; }
.auth-card .demo-login { margin-bottom: 1.25rem; }
.auth-card .btn--block { margin-top: 1.25rem; }
.auth-label-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.auth-label-row a { font-size: var(--fs-sm); font-weight: 600; color: var(--accent-text); }
.auth-pw { display: flex; gap: .5rem; }
.auth-pw .input { flex: 1; }
.auth-pw .btn { flex: none; width: 3rem; min-height: 3rem; padding: 0; }
.auth-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 1rem; }
.auth-pair .field + .field { margin-top: 0; }
.auth-pair > .hint { margin-top: -.5rem; }
.auth-terms { display: grid; gap: .625rem; padding-top: 1rem; }
.auth-foot { margin: 1.5rem 0 0; text-align: center; font-size: var(--fs-sm); color: var(--text-2); }
.auth-foot a { font-weight: 650; color: var(--accent-text); }
.auth-safe { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 1.25rem 0 0; font-size: var(--fs-xs); color: var(--muted); text-align: center; }
dialog.auth-doc { max-width: min(760px, calc(100vw - 2rem)); }
@media (max-width: 1000px) { .auth-page--split { grid-template-columns: minmax(0, 1fr); } .auth-side { display: none; } .auth-page--split .auth-box { max-width: 38rem; justify-self: center; } }

/* ── Hata ve bakım ── */
.err { display: grid; justify-items: center; gap: 1rem; max-width: 40rem; margin-inline: auto; text-align: center; }
.err__art { position: relative; display: grid; place-items: center; width: 100%; }
.err__art .blob { position: absolute; inset: auto; width: 16rem; height: 16rem; top: 50%; left: 50%; translate: -50% -50%; }
.err__art b { position: relative; font-size: clamp(4.5rem, 12vw, 7rem); font-weight: 800; letter-spacing: -.06em; line-height: 1; background: linear-gradient(135deg, var(--accent), var(--stage)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.err h1 { font-size: clamp(1.5rem, 2.8vw, 2rem); letter-spacing: -.04em; }
.err p { margin: 0; font-size: 1.0625rem; color: var(--text-2); }
.err__act { display: flex; flex-wrap: wrap; justify-content: center; gap: .625rem; margin-top: .5rem; }
.maintenance { position: relative; overflow: hidden; min-height: 100vh; display: grid; place-items: center; padding: var(--gutter); background: linear-gradient(140deg, var(--accent), var(--stage)); color: #fff; }
.maintenance__in { position: relative; max-width: 36rem; text-align: center; }
.maintenance .brand { color: #fff; justify-content: center; }
.maintenance .brand__mark { background: #fff; color: var(--stage); }
.maintenance h1 { margin: 2.5rem 0 1rem; color: #fff; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.045em; line-height: 1.08; }
.maintenance p { margin: 0; color: rgba(255, 255, 255, .85); font-size: 1.0625rem; line-height: 1.6; }

/* ── Alt bilgi (koyu) ── */
.foot { position: relative; overflow: hidden; margin-top: clamp(3rem, 6vw, 4.5rem); background: var(--stage); color: var(--stage-muted); }
main:has(> .sec--tight:last-child) + .foot { margin-top: 0; }
.foot__shape { position: absolute; width: 34rem; height: 34rem; right: -12rem; top: -18rem; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb), .45), transparent 70%); pointer-events: none; }
.foot__top { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 2rem; padding-block: clamp(2.5rem, 5vw, 3.5rem) 2.25rem; }
.foot .brand { color: var(--stage-text); }
.foot .brand__mark { background: var(--stage-text); color: var(--stage); }
.foot__text { margin-top: 1rem; font-size: var(--fs-sm); line-height: 1.7; max-width: 36ch; }
.foot__text p { margin: 0; }
.foot__social { display: flex; gap: .5rem; margin-top: 1.5rem; }
.foot__social a { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--stage-text); transition: background-color var(--t-fast); }
.foot__social a:hover { background: var(--accent); color: var(--accent-ink); }
.foot__col { display: grid; align-content: start; gap: .5rem; }
.foot__col h2 { margin-bottom: .25rem; font-size: var(--fs-base); letter-spacing: -.01em; color: var(--stage-text); }
.foot__col a { display: inline-flex; align-items: flex-start; gap: .5rem; font-size: var(--fs-sm); color: var(--stage-muted); transition: color var(--t-fast); }
.foot__col a:hover { color: var(--stage-text); }
.foot__col a .icon { margin-top: 2px; flex: none; }
.foot__bottom { position: relative; display: flex; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; flex-wrap: wrap; padding-block: 1.5rem; border-top: 1px solid var(--stage-line); font-size: var(--fs-xs); }
.foot__links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.foot__links a { display: inline-flex; align-items: center; gap: .25rem; color: var(--stage-muted); }
.foot__links a:hover { color: var(--stage-text); }
@media (max-width: 1000px) { .foot__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot__about { grid-column: 1 / -1; } }
@media (max-width: 560px) { .foot__top { grid-template-columns: minmax(0, 1fr); } }

/* ── Köşe iletişim düğmesi ── */
.float-contact { position: fixed; right: 20px; bottom: 20px; z-index: 50; }
.float-contact > a, .float-contact > summary { display: inline-flex; align-items: center; gap: .5rem; height: 2.875rem; padding: 0 1.1rem 0 .9rem; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-weight: 650; font-size: var(--fs-base); box-shadow: 0 14px 30px -12px rgba(var(--accent-rgb), .8); cursor: pointer; list-style: none; }
.float-contact > summary::-webkit-details-marker { display: none; }
.float-contact .icon--lg { width: 1.25rem; height: 1.25rem; }
.float-contact__list { position: absolute; right: 0; bottom: calc(100% + 10px); min-width: 240px; background: var(--page); border-radius: 20px; box-shadow: var(--sh-3); padding: 6px; display: grid; }
.float-contact__item { display: flex; align-items: center; gap: .7rem; padding: .55rem .65rem; border-radius: 14px; color: var(--text); font-size: var(--fs-base); font-weight: 500; }
.float-contact__item:hover { background: var(--band); color: var(--text); }
.float-contact__item > span { display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border-radius: 50%; background: var(--band); color: var(--text-2); }
.float-contact__item > .is-wa { background: #25d366; color: #fff; }
.float-contact__item > .is-tg { background: #229ed9; color: #fff; }
@media (max-width: 640px) { .float-contact > a span, .float-contact > summary span { display: none; } .float-contact > a, .float-contact > summary { padding: 0; width: 3.25rem; justify-content: center; } }

/* ── Ortak bileşenlerin bu temadaki hâli ── */
.tabs { gap: .5rem; padding: 0; background: none; }
.tabs a, .tabs button { min-height: 2.375rem; padding: 0 1rem; border-radius: var(--r-pill); background: var(--page); border: 1px solid var(--line); box-shadow: var(--sh-1); font-size: var(--fs-sm); font-weight: 600; }
.tabs a:hover, .tabs button:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); color: var(--accent-text); }
.tabs [aria-selected="true"], .tabs [aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 22px -12px rgba(var(--accent-rgb), .8); }
.tabs [aria-selected="true"] b, .tabs [aria-current="page"] b { color: color-mix(in srgb, var(--accent-ink) 75%, transparent); }
.tabs [aria-selected="true"]:hover { color: var(--accent-ink); }
.accordion { gap: .75rem; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.accordion details { border-radius: 16px; background: var(--page); border: 1px solid var(--line); box-shadow: var(--sh-1); transition: box-shadow var(--t), border-color var(--t); }
.accordion details + details { border-top: 1px solid var(--line); }
.accordion details[open] { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: var(--sh-2); }
.accordion summary { padding: .875rem 1.125rem; border-radius: 16px; font-size: var(--fs-base); }
.accordion summary:hover { background: none; color: var(--accent-text); }
.accordion summary::after { width: 1.75rem; height: 1.75rem; margin: 0; border: 0; border-radius: 50%; transform: none; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23778' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 14px no-repeat; }
.accordion details[open] summary::after { transform: rotate(45deg); background-color: var(--accent); }
.accordion .accordion__body { padding: 0 1.125rem 1.125rem; font-size: var(--fs-sm); }
.faq-block { gap: 1.5rem; }
.faq-block__head { display: grid; justify-content: center; justify-items: center; text-align: center; gap: .75rem; }
.faq-block__head > div { justify-items: center; }
.faq-block__head h2 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); letter-spacing: -.04em; }
.faq-block__head p { font-size: var(--fs-base); }
.faq-block__all { padding: .5rem 1.125rem; border-radius: var(--r-pill); background: var(--accent-soft); }
.faq-block__cols--2 { gap: .75rem; }
.card, .card--sunken { border-radius: 24px; }
.cookie-consent { left: auto; right: 20px; border-radius: 24px; }
@media (max-width: 600px) { .cookie-consent { left: 12px; right: 12px; } }
.box.prose { max-width: none; }
.sec__more { display: flex; justify-content: center; margin: 1.75rem 0 0; }
/* Gece modu: renk geçişli kutularda ana renk açık tonda olduğundan geçiş koyulaştırılır */
:root[data-theme="dark"] .cta, :root[data-theme="dark"] .ask, :root[data-theme="dark"] .box--cta, :root[data-theme="dark"] .own, :root[data-theme="dark"] .auth-side, :root[data-theme="dark"] .maintenance { background: linear-gradient(130deg, color-mix(in srgb, var(--accent) 42%, var(--stage)) 0%, var(--stage) 100%); }
:root[data-theme="dark"] .btn--white { --btn-fg: var(--stage); }
/* Giriş sahnesi, dar ekran: yüzen kart konumları (genel .mock__float kuralından sonra gelmeli) */
@media (max-width: 760px) {
  .mock__float--l { display: none; }
  .mock__float--r { top: -2.25rem; right: auto; left: 0; }
  .mock__float--b { left: auto; right: 6.5rem; bottom: -.75rem; }
}
/* Ürün sayfası: aramasız açılır seçimler (lisans süresi, modül grupları); site.js data-bsel ile açar / kapatır */
.bsel { position: relative; display: grid; gap: .45rem; }
.bsel > .label .muted { font-weight: 450; font-size: var(--fs-xs); }
.bsel__trigger { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; min-height: 2.875rem; padding: 0 .875rem 0 1rem; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--page); color: var(--text); font: 600 var(--fs-base)/1.3 var(--font-sans); text-align: left; cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.bsel__trigger:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line-strong)); }
.bsel.is-open .bsel__trigger { border-color: var(--accent); box-shadow: var(--ring); }
.bsel.has-value .bsel__value { color: var(--accent-text); }
.bsel__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bsel__chev { flex: none; color: var(--muted); transition: transform var(--t-fast); }
.bsel.is-open .bsel__chev { transform: rotate(180deg); }
.bsel__panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; display: grid; gap: 2px; padding: 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--page); box-shadow: var(--sh-3); }
.bsel__panel--scroll { overflow-y: auto; overscroll-behavior: contain; }
.bsel__opt { position: relative; display: block; cursor: pointer; }
.bsel__opt input { position: absolute; opacity: 0; pointer-events: none; }
.bsel__opt > span { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px .625rem; padding: .625rem .75rem; border-radius: 12px; transition: background-color var(--t-fast); }
.bsel__opt > span::before { content: ""; grid-row: span 2; align-self: start; margin-top: .2rem; width: 1rem; height: 1rem; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--page); }
.bsel__opt input[type="checkbox"] + span::before { border-radius: 5px; }
.bsel__opt:hover > span { background: var(--band); }
.bsel__opt b { font-size: var(--fs-sm); font-weight: 600; }
.bsel__opt small { font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bsel__opt em { grid-column: 2 / -1; font-style: normal; font-size: var(--fs-xs); color: var(--muted); }
.bsel__opt input:checked + span { background: var(--accent-soft); }
.bsel__opt input:checked + span::before { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 70% no-repeat; }
.bsel__opt input:checked + span b { color: var(--accent-text); }
.bsel__opt input:focus-visible + span { box-shadow: var(--ring); }
/* Ürün sayfası bölüm menüsü: bağlantıyla gelinen bölüm başlığı yapışkan başlık + menünün altında kalmaz; seçili sekme renkli */
.pd ~ .sec--in[id] { scroll-margin-top: 9.5rem; }
.subnav { background: color-mix(in srgb, var(--page) 97%, transparent); }
.subnav a { transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
.subnav a[aria-current="true"], .subnav a[aria-current="true"]:hover { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 18px -10px rgba(var(--accent-rgb), .8); }
.buy__kicker { flex-basis: 100%; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.buy > .badge { justify-self: start; }
/* Ürün sayfası: galerinin altında demolar — panel demoları iki kutu yan yana, tema demoları yana kaydırmalı */
.pd-demos { display: grid; gap: .875rem; margin-top: 1.25rem; }
.pd-demos__panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .875rem; }
.pd-demos__head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: .25rem; }
.pd-demos__head b { font-size: var(--fs-base); }
.pd-demos__rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * .875rem) / 3); gap: .875rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 2px 6px; margin: -2px; }
.pd-demos__rail::-webkit-scrollbar { display: none; }
.theme-tile { scroll-snap-align: start; display: grid; overflow: hidden; border-radius: 16px; border: 1px solid var(--line); background: var(--page); box-shadow: var(--sh-1); color: var(--text); transition: border-color var(--t), box-shadow var(--t); }
.theme-tile:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: var(--sh-2); color: var(--text); }
.theme-tile__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--band-2); }
.theme-tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.theme-tile:hover .theme-tile__img img { transform: scale(1.05); }
.theme-tile__b { display: grid; gap: 1px; padding: .625rem .75rem .75rem; }
.theme-tile__b b { font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-tile__b small { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--fs-xs); font-weight: 600; color: var(--accent-text); }
.theme-tile__b small .icon { width: .8rem; height: .8rem; }
@media (max-width: 560px) { .pd-demos__panels { grid-template-columns: minmax(0, 1fr); } .pd-demos__rail { grid-auto-columns: 68%; } }
/* Ürün görselleri: büyük görüntüleyici — kutu yok; karartılmış tam ekran zemin üzerinde görsel, yanlarda oklar */
.gallery__main img { cursor: zoom-in; }
dialog.lightbox, body dialog.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: hidden; animation: lb-in .2s ease; }
dialog.lightbox[open] { display: block; }
dialog.lightbox::backdrop { background: rgba(6, 9, 16, .9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
html:has(dialog.lightbox[open]) { overflow: hidden; }
@keyframes lb-in { from { opacity: 0; } }
.lightbox__track { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.lightbox__track::-webkit-scrollbar { display: none; }
.lightbox__slide { flex: 0 0 100%; display: grid; place-items: center; margin: 0; padding: 4.5rem 5.5rem; scroll-snap-align: center; cursor: zoom-out; }
.lightbox__slide img { max-width: 100%; max-height: calc(100dvh - 9rem); width: auto; height: auto; object-fit: contain; border-radius: 12px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7); cursor: default; }
.lightbox__close, .lightbox__nav { position: fixed; display: grid; place-items: center; width: 3rem; height: 3rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; transition: background-color var(--t-fast), opacity var(--t-fast); }
.lightbox__close:hover, .lightbox__nav:hover:not(:disabled) { background: rgba(255, 255, 255, .24); }
.lightbox__close { top: 1.25rem; right: 1.25rem; }
.lightbox__nav { top: 50%; translate: 0 -50%; }
.lightbox__nav--prev { left: 1.25rem; } .lightbox__nav--next { right: 1.25rem; }
.lightbox__nav:disabled { opacity: .3; cursor: default; }
.lightbox__close .icon, .lightbox__nav .icon { width: 1.25rem; height: 1.25rem; }
.lightbox__count { position: fixed; left: 50%; bottom: 1.5rem; translate: -50% 0; padding: .35rem .875rem; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.lightbox.is-single .lightbox__nav, .lightbox.is-single .lightbox__count { display: none; }
@media (max-width: 640px) { .lightbox__slide { padding: 4rem .75rem; } .lightbox__nav { display: none; } .lightbox__slide img { border-radius: 8px; } }
/* Genel pencere kurallarını (yükseklik sınırı, alttan çıkan sayfa, iç kaydırma) görüntüleyicide geçersiz kılar */
body dialog.lightbox[open]:not(.drawer) { display: block; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; border-radius: 0; overflow: hidden; animation: lb-in .2s ease; }
body dialog.lightbox[open]:not(.drawer) > .lightbox__track { overflow-x: auto; overflow-y: hidden; min-height: 0; height: 100%; }
/* Panel demoları: iki belirgin düğme (yönetim ana renkte dolu, müşteri ana renk çerçeveli); tek satır */
.demo-btn { display: flex; align-items: center; justify-content: center; gap: .55rem; min-width: 0; height: 3.25rem; padding: 0 1.125rem; border-radius: 999px; font-size: var(--fs-base); font-weight: 650; white-space: nowrap; transition: transform var(--t), box-shadow var(--t), background-color var(--t-fast), color var(--t-fast); }
.demo-btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.demo-btn .icon { flex: none; width: 1.15rem; height: 1.15rem; }
.demo-btn .demo-btn__ext { width: .95rem; height: .95rem; opacity: .8; }
.demo-btn--admin { background: var(--accent); color: var(--accent-ink); box-shadow: 0 12px 24px -12px rgba(var(--accent-rgb), .8); }
.demo-btn--admin:hover { background: var(--accent-hover); color: var(--accent-ink); transform: translateY(-2px); box-shadow: 0 16px 28px -12px rgba(var(--accent-rgb), .85); }
.demo-btn--customer { background: var(--page); color: var(--accent-text); box-shadow: inset 0 0 0 2px var(--accent); }
.demo-btn--customer:hover { background: var(--accent-soft); color: var(--accent-text); transform: translateY(-2px); }
/* Panel demoları: tema kartları gibi görselli büyük kartlar; altta belirgin düğme */
.panel-tile { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 18px; border: 1px solid var(--line); background: var(--page); box-shadow: var(--sh-1); color: var(--text); transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.panel-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); color: var(--text); }
.panel-tile__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--band-2); }
.panel-tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.panel-tile:hover .panel-tile__img img { transform: scale(1.04); }
.panel-tile__ph { display: grid; place-items: center; height: 100%; color: var(--accent-text); }
.panel-tile__ph .icon { width: 2.5rem; height: 2.5rem; }
.panel-tile__b { display: grid; align-content: start; gap: .5rem; padding: .875rem 1rem 1rem; }
.panel-tile__name { display: flex; align-items: center; gap: .5rem; }
.panel-tile__name .icon { width: 1.75rem; height: 1.75rem; padding: .375rem; border-radius: 9px; background: var(--accent-soft); color: var(--accent-text); flex: none; }
.panel-tile__name b { font-size: var(--fs-md); }
.panel-tile__b > small { font-size: var(--fs-sm); line-height: 1.5; color: var(--text-2); }
.panel-tile .demo-btn { height: 2.75rem; margin-top: .25rem; font-size: var(--fs-sm); }
.panel-tile:hover .demo-btn--admin { background: var(--accent-hover); }
.panel-tile:hover .demo-btn--customer { background: var(--accent-soft); }
.panel-tile__b { display: flex; flex-direction: column; }
.panel-tile__b > small { margin-bottom: .375rem; }
.panel-tile .demo-btn { margin-top: auto; }