/* ==========================================================================
   Kısa Digital — site stilleri
   Tasarımdaki satır içi stillerden çıkarıldı. Renkler yalnızca değişkenlerden
   gelir; koyu tema <html data-theme="dark"> ile açılır (assets/js/site.js).
   ========================================================================== */

/* ---------- 01. Tema değişkenleri ---------- */
:root {
  --bg: #F6F7F5; --surface: #FFFFFF; --surface2: #EFF0EE;
  --ink: #0B1220; --sub: #5B6474; --muted: #7A8396;
  --line: rgba(11,18,32,.08); --line2: rgba(11,18,32,.16);
  --primary: #2453FF; --primary-hover: #1B41CC; --primary-soft: #EDF1FF; --primary-ink: #FFFFFF;
  --nav-bg: rgba(246,247,245,.85); --shadow: rgba(11,18,32,.12); --glow: rgba(36,83,255,.14);
  --ok: #0BA562; --ok-soft: #E7F6EC; --err: #D6455D;

  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-head: 'Sora', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0B1220; --surface: #131C31; --surface2: #1B2540;
  --ink: #F2F4F8; --sub: #A5AEC2; --muted: #8C95A8;
  --line: rgba(255,255,255,.09); --line2: rgba(255,255,255,.16);
  --primary: #5E82FF; --primary-hover: #7C99FF; --primary-soft: rgba(94,130,255,.14); --primary-ink: #0B1220;
  --nav-bg: rgba(11,18,32,.85); --shadow: rgba(0,0,0,.45); --glow: rgba(94,130,255,.18);
  --ok: #34C98B; --ok-soft: rgba(52,201,139,.14); --err: #F0708A;
  color-scheme: dark;
}

/* ---------- 02. Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0; min-height: 100vh;
  background: var(--bg); color: var(--ink);
  font-family: var(--font-body); -webkit-font-smoothing: antialiased;
  transition: background .35s ease, color .35s ease;
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }
input, button { font-family: var(--font-body); }
input::placeholder { color: var(--muted); }
h1, h2, h3 { font-family: var(--font-head); color: var(--ink); font-weight: 800; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

.container { max-width: 1280px; margin: 0 auto; padding-inline: 24px; }
.accent { color: var(--primary); }
.only-dark { display: none; }
.only-light { display: contents; }
:root[data-theme="dark"] .only-dark { display: contents; }
:root[data-theme="dark"] .only-light { display: none; }

/* ---------- 03. Düğmeler ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 12px; font-weight: 700; cursor: pointer; border: none;
  transition: background .15s, color .15s, border-color .15s;
}
.btn--primary { background: var(--primary); color: var(--primary-ink); box-shadow: 0 8px 24px var(--glow); }
.btn--primary:hover { background: var(--primary-hover); color: var(--primary-ink); }
.btn--ghost { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line2); font-weight: 600; }
.btn--ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn--sm { border-radius: 10px; padding: 10px 18px; font-size: 14.5px; box-shadow: 0 4px 14px var(--glow); }
.btn--md { border-radius: 11px; padding: 12px 20px; font-size: 14px; box-shadow: 0 6px 16px var(--glow); }
.btn--ghost.btn--md { color: var(--sub); box-shadow: none; padding: 12px 18px; font-weight: 700; }
.btn--lg { padding: 15px 26px; font-size: 16px; }
.btn--ghost.btn--lg { padding: 14px 26px; }
.btn--block { width: 100%; padding: 15px; font-size: 15.5px; margin-top: 4px; box-shadow: 0 6px 18px var(--glow); }
.btn--danger-hover:hover { color: var(--err); border-color: var(--err); }

.icon-btn {
  width: 38px; height: 38px; border-radius: 10px; border: 1.5px solid var(--line2);
  background: transparent; color: var(--sub); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.icon-btn:hover { color: var(--primary); border-color: var(--primary); }
.text-link { font-size: 14.5px; font-weight: 600; color: var(--ink); padding: 8px 6px; }
.text-link:hover { color: var(--primary); }
.auth-links { display: flex; align-items: center; border: 1.5px solid var(--line2); border-radius: 10px; overflow: hidden; }
.auth-links a { padding: 8px 14px; font-size: 14px; font-weight: 600; color: var(--ink); transition: background .15s, color .15s; }
.auth-links a:hover { color: var(--primary); background: var(--surface2); }
.auth-links a.is-active { color: var(--primary); background: var(--primary-soft); }
.auth-links__sep { width: 1.5px; align-self: stretch; background: var(--line2); }

/* ---------- 04. Üst menü ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  max-width: 1280px; margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; gap: 14px; flex-wrap: nowrap;
}
.brand {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-head); font-weight: 700; font-size: 14.5px; letter-spacing: -.2px;
}
.brand__mark { flex: none; }
.brand__word { display: flex; gap: 1px; }
.brand__ink { color: var(--ink); }
.brand__accent { color: var(--primary); }
.brand__dot { display: none; }
.brand--sm { font-size: 14.5px; gap: 7px; }
.site-nav { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font-size: 13.5px; font-weight: 500; }
.site-nav a { color: var(--sub); }
.site-nav a:hover { color: var(--primary); }
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- 04b. Üst şerit: not + tema anahtarı + dil menüsü ---------- */
/* Kaydırınca yukarıda kalır; yalnızca header yapışkandır. Dil listesi header'ın
   üstüne açılabilsin diye z-index header'dan (50) yüksek. */
.topbar { position: relative; z-index: 60; background: var(--surface2); border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--sub); }
.topbar__inner { max-width: 1280px; margin: 0 auto; padding: 6px 24px; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topbar__note { margin: 0; display: flex; align-items: center; gap: 7px; font-weight: 500; min-width: 0; }
.topbar__note svg { color: var(--primary); flex: none; }
.topbar__note span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__tools { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.topbar__sep { width: 1px; height: 18px; background: var(--line2); }

.theme-switch { background: none; border: 0; padding: 2px; cursor: pointer; border-radius: 99px; display: flex; }
.theme-switch__track {
  position: relative; width: 50px; height: 26px; border-radius: 99px;
  background: var(--surface); border: 1.5px solid var(--line2);
  display: flex; align-items: center; justify-content: space-between; padding: 0 6px;
  transition: background .25s, border-color .25s;
}
.theme-switch:hover .theme-switch__track { border-color: var(--primary); }
.theme-switch__icon { display: flex; color: var(--muted); position: relative; z-index: 1; transition: color .25s; }
.theme-switch__knob {
  position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 2px 6px var(--glow);
  transition: transform .25s cubic-bezier(.4, .1, .2, 1);
}
/* Düğme aktif simgenin altında durur, simge düğmenin üstünde beyaz görünür */
.theme-switch__icon--sun { color: var(--primary-ink); }
:root[data-theme="dark"] .theme-switch__knob { transform: translateX(24px); }
:root[data-theme="dark"] .theme-switch__icon--sun { color: var(--muted); }
:root[data-theme="dark"] .theme-switch__icon--moon { color: var(--primary-ink); }

.flag { width: 20px; height: 14px; border-radius: 3px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px var(--line); background: var(--surface); }
.lang-menu { position: relative; }
.lang-menu__toggle {
  list-style: none; display: flex; align-items: center; gap: 7px; cursor: pointer; user-select: none;
  padding: 5px 8px 5px 9px; border-radius: 9px; border: 1.5px solid transparent;
  font-weight: 700; font-size: 12.5px; color: var(--ink);
}
.lang-menu__toggle::-webkit-details-marker { display: none; }
.lang-menu__toggle:hover, .lang-menu[open] .lang-menu__toggle { border-color: var(--line2); background: var(--surface); }
.lang-menu__chevron { display: flex; color: var(--muted); transition: transform .2s; }
.lang-menu[open] .lang-menu__chevron { transform: rotate(180deg); }
.lang-menu__list {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px; margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--line2); border-radius: 12px;
  box-shadow: 0 16px 40px var(--shadow); animation: fadeUp .16s ease both;
}
.lang-menu__item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--ink); font-size: 14px; font-weight: 600; }
.lang-menu__item:hover { background: var(--surface2); color: var(--ink); }
.lang-menu__item.is-active { color: var(--primary); }
.lang-menu__name { flex: 1; }
.lang-menu__check { display: flex; color: var(--primary); }

/* ---------- 05. Ortak bölüm öğeleri ---------- */
.section { padding-block: clamp(64px, 8vw, 100px); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band--top { border-bottom: none; }
.h2 { font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -1px; margin: 0 0 12px; }
.h2--sm { font-size: clamp(24px, 3vw, 34px); letter-spacing: -.8px; margin-bottom: 10px; }
.h2--md { font-size: clamp(26px, 3.4vw, 38px); }
.lead { color: var(--sub); font-size: 17px; margin: 0 0 44px; max-width: 560px; text-wrap: pretty; }
.lead--sm { font-size: 16px; margin-bottom: 36px; max-width: 520px; }
.eyebrow { color: var(--primary); font-weight: 700; font-size: 13.5px; margin-bottom: 16px; letter-spacing: 1px; text-transform: uppercase; }
.grid { display: grid; gap: 20px; }

/* ---------- 06. Hero ---------- */
.hero { overflow: hidden; position: relative; }
.hero__glow { position: absolute; border-radius: 50%; background: radial-gradient(circle, var(--glow), transparent 65%); pointer-events: none; }
.hero__glow--tr { top: -140px; right: -100px; width: 520px; height: 520px; }
.hero__glow--bl { bottom: -180px; left: -120px; width: 440px; height: 440px; }
.hero__inner {
  max-width: 1280px; margin: 0 auto; position: relative;
  padding: clamp(56px, 9vw, 110px) 24px clamp(64px, 9vw, 120px);
  display: flex; flex-wrap: wrap; gap: 48px; align-items: center;
}
.hero__copy { flex: 1 1 440px; min-width: min(300px, 100%); animation: fadeUp .6s ease both; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--primary-soft); border: 1px solid var(--line2); color: var(--primary);
  border-radius: 99px; padding: 6px 14px; font-size: 13px; font-weight: 700; margin-bottom: 22px;
}
.pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.hero__title { font-size: clamp(34px, 5.4vw, 60px); line-height: 1.08; letter-spacing: -1.5px; margin: 0 0 20px; }
.hero__sub { font-size: clamp(16px, 1.6vw, 18.5px); line-height: 1.6; color: var(--sub); margin: 0 0 32px; max-width: 520px; text-wrap: pretty; }
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__stats { display: flex; gap: 28px; margin-top: 44px; flex-wrap: wrap; }
.stat-num { font-family: var(--font-head); font-size: 26px; font-weight: 800; color: var(--ink); }
.stat-label { font-size: 13px; color: var(--muted); }

.hero__visual { flex: 1 1 340px; min-width: min(280px, 100%); display: flex; justify-content: center; }
.growth { width: min(360px, 100%); animation: floaty 5s ease-in-out infinite; }
.growth__card {
  background: linear-gradient(135deg, #1B2C6E 0%, #2453FF 60%, #3E6BFF 100%);
  border-radius: 20px; padding: 24px; color: #fff; box-shadow: 0 30px 60px var(--shadow);
  aspect-ratio: 1.4; display: flex; flex-direction: column;
}
.growth__head { display: flex; justify-content: space-between; align-items: flex-start; }
.growth__label { font-size: 12px; opacity: .75; font-weight: 600; }
.growth__value { font-family: var(--font-head); font-weight: 800; font-size: 28px; margin-top: 4px; }
.growth__brand { font-family: var(--font-head); font-weight: 700; font-size: 13px; opacity: .9; }
.growth__bars { display: flex; gap: 8px; align-items: flex-end; flex: 1; margin-top: 18px; }
.growth__bar { flex: 1; background: rgba(255,255,255,.28); border-radius: 5px; }
.growth__bar.is-bright { background: rgba(255,255,255,.4); }
.growth__bar.is-top { background: #fff; }
.growth__axis { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11px; opacity: .75; font-family: var(--font-mono); }
.toast {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 18px; display: flex; align-items: center; gap: 12px;
  box-shadow: 0 18px 40px var(--shadow); margin: -22px 18px 0; position: relative;
}
.toast__icon { width: 34px; height: 34px; border-radius: 50%; background: var(--ok-soft); display: flex; align-items: center; justify-content: center; flex: none; }
.toast__body { flex: 1; }
.toast__title { font-weight: 700; font-size: 14px; }
.toast__sub { font-size: 12px; color: var(--muted); }

/* ---------- 07. Logo şeridi ---------- */
.logo-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.logo-strip__inner {
  max-width: 1280px; margin: 0 auto; padding: 26px 24px;
  display: flex; gap: 16px clamp(24px, 4vw, 48px); align-items: center; flex-wrap: wrap;
  color: var(--muted);
}
.logo-strip__label { flex: none; font-size: 12.5px; font-weight: 600; font-family: var(--font-body); letter-spacing: .5px; }

/* Referans kaydırıcısı (Swiper) */
.partners {
  flex: 1 1 320px; min-width: 0; margin: 0;
  /* kenarlarda yumuşak kaybolma */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.partners .swiper-wrapper { align-items: center; }
.partners__slide { width: auto; padding-inline: 4px; }
.partner {
  display: flex; align-items: center; height: 44px; padding: 6px 4px;
  color: var(--muted); filter: grayscale(1); opacity: .6;
  transition: opacity .2s, filter .2s, color .2s;
}
.partner:hover, .partner:focus-visible { filter: none; opacity: 1; color: var(--ink); }
.partner__logo { display: block; height: 30px; width: auto; max-width: 180px; object-fit: contain; }
.partner__logo--dark { display: none; }
:root[data-theme="dark"] .partner__logo--light:not(.partner__logo--any) { display: none; }
:root[data-theme="dark"] .partner__logo--dark { display: block; }
.partner__word { font-family: var(--font-head); font-weight: 600; font-size: 19px; letter-spacing: -.2px; white-space: nowrap; }
.partner__dot { color: var(--partner-accent, var(--primary)); }

/* ---------- 08. Hizmetler ---------- */
.grid--services { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 26px;
  display: flex; flex-direction: column; gap: 14px; transition: border-color .2s, box-shadow .2s;
}
.card:hover { border-color: var(--primary); box-shadow: 0 12px 30px var(--glow); }
.card--link { text-decoration: none; }
.card--link .card__title, .card--link .card__desc { color: inherit; }
.card__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--primary-soft); display: flex; align-items: center; justify-content: center; color: var(--primary); }
.card__title { font-weight: 700; font-size: 17px; margin: 0; }
.card__desc { font-size: 14.5px; line-height: 1.55; color: var(--sub); text-wrap: pretty; flex: 1; margin: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 12px; font-weight: 600; color: var(--sub); background: var(--surface2); border-radius: 99px; padding: 4px 10px; }

/* ---------- 11. İletişim formu ---------- */
.contact-section { border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--bg), var(--surface2)); }
.contact-wrap {
  padding-block: clamp(64px, 8vw, 100px);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 64px); align-items: start;
}
.contact-info { position: sticky; top: 96px; }
.contact-info__sub { color: var(--sub); font-size: 16.5px; line-height: 1.6; margin: 0 0 28px; max-width: 440px; text-wrap: pretty; }
.perks { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.perk { display: flex; gap: 14px; align-items: flex-start; }
.perk__no {
  flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--primary-soft); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12.5px; font-weight: 600;
}
.perk__title { font-weight: 700; color: var(--ink); font-size: 15px; margin-bottom: 2px; }
.perk__desc { color: var(--sub); font-size: 14px; line-height: 1.5; }
.channels { border-top: 1px solid var(--line); padding-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.channels__title { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .5px; text-transform: uppercase; margin-bottom: 2px; }
.channel { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); }
.channel:hover { border-color: var(--primary); color: var(--ink); }
.channel__icon { width: 36px; height: 36px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; flex: none; }
.channel__label { display: block; font-size: 12px; color: var(--muted); }
.channel__value { display: block; font-weight: 700; font-size: 14.5px; }

.contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: clamp(22px, 3vw, 36px); box-shadow: 0 24px 60px var(--shadow); }
.cform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field--full { grid-column: 1 / -1; }
.field__label { font-size: 13.5px; font-weight: 700; color: var(--ink); padding: 0; }
/* fieldset içindeki legend flex gap'e katılmaz; boşluk elle verilir */
legend.field__label { margin-bottom: 12px; }
.field__hint { font-weight: 500; color: var(--muted); font-size: 12.5px; margin-left: 4px; }
.req { color: var(--err); }
.field__error { margin: 0; color: var(--err); font-size: 12.5px; font-weight: 600; }
.field__foot { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.counter { margin-left: auto; font-size: 12px; color: var(--muted); font-family: var(--font-mono); flex: none; }
.counter.is-over { color: var(--err); }
.form-alert { grid-column: 1 / -1; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--err); color: var(--err); font-weight: 600; font-size: 13.5px; }

/* Hizmet seçimi: onay kutulu kartlar */
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.chip { position: relative; display: flex; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  flex: 1; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px;
  border: 1.5px solid var(--line2); border-radius: 12px; color: var(--sub);
  font-size: 14px; font-weight: 600; line-height: 1.3; transition: border-color .15s, background .15s, color .15s;
}
.chip span::before {
  content: ''; flex: none; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line2);
  background: var(--surface) center / 12px no-repeat; transition: background-color .15s, border-color .15s;
}
.chip:hover span { border-color: var(--primary); }
.chip input:checked + span { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.chip input:checked + span::before {
  background-color: var(--primary); border-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.chip input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

/* İletişim tercihi: bölmeli seçici */
.segmented { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface2); border: 1.5px solid transparent; }
.segmented__opt { position: relative; display: flex; }
.segmented__opt input { position: absolute; opacity: 0; pointer-events: none; }
.segmented__opt span { flex: 1; text-align: center; padding: 10px 6px; border-radius: 9px; font-size: 13.5px; font-weight: 700; color: var(--sub); cursor: pointer; transition: background .15s, color .15s; }
.segmented__opt span:hover { color: var(--ink); }
.segmented__opt input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 2px 8px var(--shadow); }
.segmented__opt input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Seçim kutusu. JS yoksa yerel <select> (sadeleştirilmiş), JS varsa .is-enhanced bileşen */
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.select:not(.is-enhanced) > svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.select__native { position: absolute; inset: 0; width: 100%; opacity: 0; pointer-events: none; }
.select__btn { display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.select__btn:hover { border-color: var(--primary); }
.select__btn[aria-expanded="true"] { border-color: var(--primary); box-shadow: 0 0 0 4px var(--glow); }
.select__value { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.select__value.is-placeholder { color: var(--muted); }
.select__chevron { flex: none; color: var(--muted); transition: transform .2s, color .2s; }
.select__btn[aria-expanded="true"] .select__chevron { transform: rotate(180deg); color: var(--primary); }

.select__pop {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 200px;
  background: var(--surface); border: 1px solid var(--line2); border-radius: 14px; padding: 6px;
  box-shadow: 0 18px 44px var(--shadow); animation: fadeUp .16s ease both;
}
.select__pop[hidden] { display: none; }
.select__pop.is-up { top: auto; bottom: calc(100% + 6px); }
.select__head { display: none; }
.select__list { list-style: none; margin: 0; padding: 0; max-height: 264px; overflow-y: auto; outline: none; overscroll-behavior: contain; }
.select__opt {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px;
  font-size: 14.5px; font-weight: 600; color: var(--ink); cursor: pointer; user-select: none;
}
.select__opt + .select__opt { margin-top: 2px; }
.select__opt.is-active { background: var(--surface2); }
.select__opt.is-placeholder { color: var(--muted); font-weight: 500; }
.select__opt[aria-selected="true"]:not(.is-placeholder) { background: var(--primary-soft); color: var(--primary); }
.select__check { margin-left: auto; flex: none; color: var(--primary); opacity: 0; }
.select__opt[aria-selected="true"]:not(.is-placeholder) .select__check { opacity: 1; }

/* Mobil: alttan açılan panel */
.select-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(11, 18, 32, .45); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.select-backdrop.is-open { opacity: 1; pointer-events: auto; }
html.sheet-open { overflow: hidden; }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
.select__pop.is-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 91; min-width: 0; max-height: 78vh;
  display: flex; flex-direction: column; border-radius: 20px 20px 0 0; border-bottom: 0;
  padding: 8px 12px calc(14px + env(safe-area-inset-bottom)); animation: sheetUp .24s cubic-bezier(.2, .8, .2, 1) both;
}
.select__pop.is-sheet::before { content: ''; align-self: center; width: 40px; height: 4px; border-radius: 99px; background: var(--line2); margin: 2px 0 6px; }
.is-sheet .select__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 4px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
  font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--ink);
}
.select__close { width: 36px; height: 36px; border-radius: 10px; border: 0; background: var(--surface2); color: var(--sub); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.is-sheet .select__list { max-height: none; flex: 1; }
.is-sheet .select__opt { padding: 14px 12px; font-size: 16px; border-radius: 12px; }
.textarea { resize: vertical; min-height: 130px; line-height: 1.5; font-family: inherit; }

.consent { position: relative; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 13.5px; line-height: 1.5; color: var(--sub); }
.consent input { position: absolute; opacity: 0; pointer-events: none; }
.consent__box {
  flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; border: 1.5px solid var(--line2);
  background: var(--surface); color: transparent; display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
}
.consent input:checked + .consent__box { background: var(--primary); border-color: var(--primary); color: #fff; }
.consent input:focus-visible + .consent__box { outline: 2px solid var(--primary); outline-offset: 2px; }

.input[aria-invalid="true"], .chips[aria-invalid="true"] .chip span, .segmented[aria-invalid="true"],
.consent input[aria-invalid="true"] + .consent__box { border-color: var(--err); }

.cform__submit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.cform__submit .btn { box-shadow: 0 6px 18px var(--glow); }
.cform__submit .btn[disabled] { opacity: .7; cursor: progress; }
.cform__note { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }

/* Gönderildi */
.sent { text-align: center; padding: 28px 8px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sent__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; animation: fadeUp .4s ease both; }
.sent__title { margin: 0; font-size: 22px; }
.sent__text { margin: 0; color: var(--sub); }
.sent__ref { margin: 8px 0 14px; padding: 10px 16px; border-radius: 10px; background: var(--surface2); font-size: 14px; color: var(--sub); }
.sent__ref strong { color: var(--ink); font-family: var(--font-mono); }

.input {
  width: 100%; padding: 14px 16px; border: 1.5px solid var(--line2); border-radius: 12px;
  font-size: 15px; outline: none; background: var(--surface); color: var(--ink);
}
.input:focus { border-color: var(--primary); }
.input--bg { background: var(--bg); }
.form-error { color: var(--err); font-size: 13.5px; font-weight: 600; margin-top: 12px; }
.form-error--left { margin-top: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 13. Giriş / kayıt ---------- */
/* İki sütun: solda marka paneli, sağda form */
.auth { padding: clamp(24px, 4vw, 56px) 24px clamp(40px, 5vw, 72px); }
.auth__shell {
  max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  background: var(--surface); border: 1px solid var(--line); border-radius: 24px; overflow: hidden;
  box-shadow: 0 30px 70px var(--shadow); animation: fadeUp .4s ease both;
}
.auth__main { padding: clamp(28px, 4vw, 52px); min-width: 0; }
.tabs { display: flex; background: var(--surface2); border-radius: 12px; padding: 4px; margin-bottom: 28px; }
.tabs__btn { flex: 1; text-align: center; border-radius: 9px; padding: 11px; font-size: 14.5px; font-weight: 700; color: var(--sub); }
.tabs__btn:hover { color: var(--ink); }
.tabs__btn.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 2px 8px var(--shadow); }
.auth__title { font-size: clamp(22px, 2.4vw, 28px); margin: 0 0 6px; letter-spacing: -.6px; }
.auth__sub { color: var(--sub); font-size: 15px; margin: 0 0 24px; }
.auth__main .form-alert { margin-bottom: 18px; }
.aform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
.aform .btn--block { margin-top: 4px; }
.aform .btn[disabled] { opacity: .7; cursor: progress; }
.auth__switch { margin: 22px 0 0; text-align: center; font-size: 14px; color: var(--sub); }
.auth__switch a { font-weight: 700; margin-left: 4px; }

/* Marka paneli */
.auth-aside {
  position: relative; overflow: hidden; color: #fff; padding: clamp(28px, 4vw, 48px);
  background: linear-gradient(150deg, #13235F 0%, #2453FF 62%, #3E6BFF 100%);
  display: flex; flex-direction: column; gap: 32px;
}
.auth-aside__glow { position: absolute; width: 420px; height: 420px; right: -160px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22), transparent 65%); pointer-events: none; }
.auth-aside__brand { position: relative; font-family: var(--font-head); font-weight: 800; font-size: 20px; letter-spacing: -.5px; color: #fff; }
.auth-aside__brand span { opacity: .7; }
.auth-aside__brand:hover { color: #fff; }
.auth-aside__body { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.auth-aside__badge { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .4px; padding: 5px 12px; border-radius: 99px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); margin-bottom: 18px; }
.auth-aside__title { color: #fff; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.15; letter-spacing: -1px; margin: 0 0 12px; }
.auth-aside__sub { margin: 0 0 24px; font-size: 15px; line-height: 1.6; opacity: .82; max-width: 380px; }
.auth-aside__perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; font-weight: 600; }
.auth-aside__perks li { display: flex; align-items: center; gap: 10px; }
.auth-aside__check { width: 24px; height: 24px; flex: none; border-radius: 50%; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; }
.auth-aside__bars { position: relative; height: 72px; display: flex; align-items: flex-end; gap: 8px; opacity: .9; }
.auth-aside__bars span { flex: 1; border-radius: 5px 5px 2px 2px; background: rgba(255,255,255,.22); }
.auth-aside__bars span:last-child { background: #fff; }

/* Şifre alanı: göster/gizle + güç göstergesi */
.pass { position: relative; }
.pass .input { padding-right: 48px; }
.pass__toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px;
  border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pass__toggle:hover { color: var(--primary); background: var(--surface2); }
.pass__eye-off, .pass__toggle[aria-pressed="true"] .pass__eye { display: none; }
.pass__toggle[aria-pressed="true"] .pass__eye-off { display: flex; }
.pass__eye { display: flex; }
.strength { display: flex; align-items: center; gap: 10px; }
.strength[hidden] { display: none; }
.strength__bars { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.strength__bars span { height: 4px; border-radius: 99px; background: var(--surface2); transition: background .2s; }
.strength__label { font-size: 12px; font-weight: 700; min-width: 64px; text-align: right; color: var(--muted); }
.strength[data-score="0"] span:nth-child(-n+1), .strength[data-score="1"] span:nth-child(-n+1) { background: var(--err); }
.strength[data-score="2"] span:nth-child(-n+2) { background: #E39A2D; }
.strength[data-score="3"] span:nth-child(-n+3) { background: var(--primary); }
.strength[data-score="4"] span { background: var(--ok); }
.strength[data-score="0"] .strength__label, .strength[data-score="1"] .strength__label { color: var(--err); }
.strength[data-score="4"] .strength__label { color: var(--ok); }
.field__ok { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--ok); font-size: 12.5px; font-weight: 600; }
.field__ok[hidden] { display: none; }

/* intl-tel-input: sitenin girdi stiline ve temasına uyarlanır */
.iti { display: block; width: 100%; }
.iti .input { width: 100%; }
.iti__selected-country { border-radius: 12px 0 0 12px; }
.iti__selected-country-primary { padding: 0 6px 0 14px; }
.iti__selected-country:hover .iti__selected-country-primary, .iti__selected-country[aria-expanded="true"] .iti__selected-country-primary { background: var(--surface2); }
.iti__selected-dial-code { color: var(--ink); font-weight: 600; font-size: 15px; }
.iti__arrow { border-top-color: var(--muted); }
.iti__arrow--up { border-bottom-color: var(--muted); }
.iti__dropdown-content {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line2) !important; border-radius: 12px;
  box-shadow: 0 18px 44px var(--shadow); overflow: hidden; margin-top: 6px;
}
.iti__search-input { width: 100%; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 15px; outline: none; }
.iti__country-list { max-height: 260px; }
.iti__country { padding: 9px 12px; font-size: 14.5px; }
.iti__country.iti__highlight { background: var(--surface2); }
.iti__country-name { color: var(--ink); }
.iti__dial-code { color: var(--muted); }
.iti--fullscreen-popup.iti--container { background: rgba(11, 18, 32, .5); padding: 24px 16px; z-index: 100; }
.iti--fullscreen-popup .iti__dropdown-content { margin-top: 0; }
.iti--fullscreen-popup .iti__search-input { font-size: 16px; }
.iti--fullscreen-popup .iti__country { padding: 12px 14px; font-size: 16px; }
:root[data-theme="dark"] .iti__flag { box-shadow: 0 0 0 1px rgba(255,255,255,.12); }

/* ---------- 14. Panel ---------- */
.dash { max-width: 1280px; margin: 0 auto; padding: clamp(24px, 4vw, 44px) 24px 80px; animation: fadeUp .4s ease both; }
.dash__head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.dash__greeting { flex: 1 1 260px; }
.dash__title { font-size: clamp(22px, 3vw, 30px); letter-spacing: -.8px; margin: 0 0 4px; }
.dash__date { font-size: 13.5px; color: var(--muted); }
.dash__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dash__actions form { margin: 0; }
.dash__row { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.panel__title { font-family: var(--font-head); font-weight: 700; font-size: 15.5px; margin: 0 0 20px; }

.grid--stats { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat { padding: 20px 22px; }
.stat form { margin: 0; }
.stat__label { font-size: 12.5px; font-weight: 700; color: var(--muted); letter-spacing: .4px; margin-bottom: 8px; }
.stat__value { font-family: var(--font-head); font-size: 26px; font-weight: 800; color: var(--ink); margin-bottom: 12px; }
.stat__note { font-size: 12.5px; color: var(--muted); }
.chip-btn {
  display: inline-block; border: 1.5px solid var(--line2); background: transparent; color: var(--primary);
  border-radius: 9px; padding: 7px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.chip-btn:hover:not(:disabled) { border-color: var(--primary); }
.chip-btn:disabled { color: var(--muted); cursor: not-allowed; }
.chip-btn.is-done { border-color: var(--ok); color: var(--ok); cursor: default; }
.trend { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; border-radius: 99px; padding: 3px 10px; }
.trend--up { color: var(--ok); background: var(--ok-soft); }
.trend--down { color: var(--err); background: var(--surface2); }
.meter { height: 6px; background: var(--surface2); border-radius: 99px; overflow: hidden; }
.meter__fill { height: 100%; background: var(--primary); border-radius: 99px; }

.chart { flex: 1 1 320px; min-width: min(280px, 100%); }
.chart__bars { display: flex; gap: 10px; align-items: flex-end; height: 170px; }
.chart__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.chart__val { font-size: 10.5px; font-weight: 700; color: var(--muted); font-family: var(--font-mono); white-space: nowrap; }
.chart__bar { width: 100%; max-width: 34px; min-height: 8px; background: var(--primary-soft); border-radius: 7px 7px 3px 3px; }
.chart__bar.is-today { background: var(--primary); }
.chart__label { font-size: 11.5px; font-weight: 600; color: var(--muted); }

.tx { flex: 1.7 1 420px; min-width: min(300px, 100%); }
.tx__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.tx__title { flex: 1; margin: 0; }
.tx__filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filter {
  border: 1.5px solid var(--line2); background: transparent; color: var(--sub);
  border-radius: 99px; padding: 6px 13px; font-size: 12.5px; font-weight: 700;
}
.filter:hover { color: var(--ink); }
.filter.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tx__list { display: flex; flex-direction: column; }
.tx__row { display: flex; align-items: center; gap: 12px; padding: 13px 4px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.tx__icon { width: 38px; height: 38px; border-radius: 10px; background: var(--surface2); display: flex; align-items: center; justify-content: center; flex: none; color: var(--sub); }
.tx__who { flex: 1 1 130px; min-width: 120px; }
.tx__customer { font-weight: 700; font-size: 14px; color: var(--ink); }
.tx__meta { font-size: 12px; color: var(--muted); font-family: var(--font-mono); }
.tx__amount { font-weight: 700; font-size: 14.5px; color: var(--ink); font-family: var(--font-mono); }
.tx__empty { padding: 28px 4px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; text-align: center; }
.badge { font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 99px; flex: none; }
.badge--ok { background: var(--ok-soft); color: var(--ok); }
.badge--pend { background: var(--surface2); color: var(--sub); }
.badge--ref { background: var(--primary-soft); color: var(--primary); }

/* ==========================================================================
   15. Mobil menü
   1024px altında masaüstü menü öğeleri gizlenir, hamburger + tam ekran panel gelir.
   ========================================================================== */
.mobile-only { display: none; }
.burger {
  width: 42px; height: 42px; border-radius: 11px; border: 1.5px solid var(--line2);
  background: var(--surface); cursor: pointer; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.burger__line {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform .25s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] .burger__line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__line:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: var(--menu-top, 104px) 0 0 0; z-index: 49;
  background: var(--bg); overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 16px calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 20px;
  opacity: 0; transform: translateY(-8px); transition: opacity .22s ease, transform .22s ease;
}
.mobile-menu.is-open { opacity: 1; transform: none; }
.mobile-menu[hidden] { display: none; }
.mobile-menu__nav { display: flex; flex-direction: column; }
.mobile-menu__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 4px; border-bottom: 1px solid var(--line);
  font-family: var(--font-head); font-weight: 700; font-size: 22px; letter-spacing: -.4px; color: var(--ink);
}
.mobile-menu__link svg { color: var(--muted); transition: transform .2s, color .2s; }
.mobile-menu__link:hover, .mobile-menu__link:active { color: var(--primary); }
.mobile-menu__link:hover svg { color: var(--primary); transform: translateX(3px); }
.mobile-menu__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }
.mobile-menu__actions .btn { padding: 15px 12px; font-size: 15px; }
.mobile-menu__wide { grid-column: 1 / -1; }
html.menu-open { overflow: hidden; }

/* ==========================================================================
   16. Duyarlı düzen
   ========================================================================== */

/* ---- ≤1024px: menü hamburgere geçer ---- */
@media (max-width: 1024px) {
  .desktop-only, .site-nav { display: none; }
  .mobile-only { display: flex; }
  .site-header__inner { flex-wrap: nowrap; gap: 12px; }
  .site-header__actions { gap: 8px; }

  .hero__inner { gap: 40px; }

  /* 4'lü ızgaralar 3+1 kalmasın: 2'li */
  .grid--services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- ≤768px: tablet / büyük telefon ---- */
@media (max-width: 768px) {
  .container { padding-inline: 20px; }
  .section { padding-block: 56px; }
  .section--tight { padding-block: 48px; }
  .h2, .h2--md { font-size: 28px; letter-spacing: -.7px; }
  .h2--sm { font-size: 26px; }
  .lead { font-size: 15.5px; margin-bottom: 28px; }
  .lead--sm { margin-bottom: 24px; }
  .grid--stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .input { font-size: 16px; } /* 16px: iOS/iPadOS odakta yakınlaştırmasın */

  /* Hero: metin üstte, görsel altta ortalı */
  .hero__inner { padding: 40px 20px 56px; flex-direction: column; align-items: stretch; gap: 44px; }
  .hero__copy, .hero__visual { flex: none; min-width: 0; }
  .hero__glow--tr { width: 360px; height: 360px; top: -120px; right: -140px; }
  .hero__glow--bl { display: none; }
  .hero__title { font-size: 38px; letter-spacing: -1.2px; }
  .hero__sub { font-size: 16px; margin-bottom: 26px; }
  .hero__stats { margin-top: 32px; }

  .logo-strip__inner { padding: 20px; flex-direction: column; align-items: stretch; gap: 14px; }
  .logo-strip__label { text-align: center; }
  .partners { flex: none; width: 100%; }
  .partner { height: 38px; }
  .partner__logo { height: 26px; max-width: 150px; }
  .partner__word { font-size: 17px; }

  /* İletişim: bilgi sütunu üstte, form altta */
  .contact-wrap { grid-template-columns: 1fr; padding-block: 56px; gap: 28px; }
  .contact-info { position: static; }
  .contact-info__sub { max-width: none; margin-bottom: 22px; }
  .perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
  .perk { flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
  .perk__desc { font-size: 13px; }




  /* Panel */
  .dash { padding: 24px 20px 56px; }
  .dash__head { margin-bottom: 20px; }
  .dash__actions { width: 100%; display: grid; grid-template-columns: 1fr auto; }
  .dash__actions .btn { width: 100%; }
  .chart, .tx { flex: 1 1 100%; min-width: 0; }
  .tx__head { flex-direction: column; align-items: stretch; }
  .tx__filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding: 2px 4px; }
  .tx__filters::-webkit-scrollbar { display: none; }
  .filter { flex: none; }

  /* İşlem satırı: ikon | müşteri | tutar üstte, durum altta */
  .tx__row {
    display: grid; grid-template-columns: 38px minmax(0, 1fr) auto;
    grid-template-areas: "icon who amount" "icon who badge";
    column-gap: 12px; row-gap: 4px; padding: 12px 2px;
  }
  .tx__icon { grid-area: icon; align-self: center; }
  .tx__who { grid-area: who; min-width: 0; align-self: center; }
  .tx__customer { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tx__amount { grid-area: amount; justify-self: end; font-size: 13.5px; }
  .badge { grid-area: badge; justify-self: end; font-size: 11px; padding: 3px 9px; }

  /* Giriş / kayıt: marka paneli formun üstünde kısa bir şerit olur */
  .auth { padding: 24px 20px 48px; }
  .auth__shell { grid-template-columns: 1fr; max-width: 560px; }
  .auth-aside { padding: 24px; gap: 14px; }
  .auth-aside__glow { width: 300px; height: 300px; right: -120px; top: -140px; }
  .auth-aside__body { justify-content: flex-start; }
  .auth-aside__badge { margin-bottom: 10px; }
  .auth-aside__title { font-size: 22px; margin-bottom: 12px; }
  .auth-aside__sub, .auth-aside__bars { display: none; }
  .auth-aside__perks { flex-direction: row; flex-wrap: wrap; gap: 8px; font-size: 12.5px; }
  .auth-aside__perks li { gap: 6px; padding: 6px 10px 6px 6px; border-radius: 99px; background: rgba(255,255,255,.12); }
  .auth-aside__check { width: 18px; height: 18px; }
  .auth-aside__check svg { width: 10px; height: 10px; }
  .auth__main { padding: 28px 24px 32px; }
}

/* ---- ≤640px: telefon, kartlar 2'li ızgara ---- */
@media (max-width: 640px) {
  .container { padding-inline: 16px; }
  .topbar__inner { padding: 4px 16px; min-height: 38px; gap: 10px; }
  .topbar__note { font-size: 12px; }
  .site-header__inner { padding: 10px 16px; }
  .brand { font-size: 15px; gap: 8px; }
  .brand__mark { width: 24px; height: 24px; }
  .header-cta { padding: 9px 13px; font-size: 13.5px; box-shadow: none; }
  .section { padding-block: 48px; }
  .h2, .h2--md, .h2--sm { font-size: 24px; letter-spacing: -.5px; margin-bottom: 8px; }
  .lead { font-size: 14.5px; line-height: 1.55; margin-bottom: 22px; }
  .eyebrow { font-size: 12px; margin-bottom: 10px; }

  /* Hero */
  .hero__inner { padding: 32px 16px 48px; gap: 36px; }
  .pill { font-size: 12px; padding: 5px 12px; margin-bottom: 16px; }
  .hero__title { font-size: 33px; line-height: 1.1; margin-bottom: 14px; }
  .hero__sub { font-size: 15px; line-height: 1.55; }
  .hero__ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero__ctas .btn { padding: 14px 10px; font-size: 14.5px; }
  .hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
  .hero__stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .hero__stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__stats--1 { grid-template-columns: minmax(0, 1fr); }
  .hero__stats > div { text-align: center; }
  .stat-num { font-size: 22px; }
  .stat-label { font-size: 11.5px; line-height: 1.3; }
  .growth { width: min(320px, 100%); margin-inline: auto; }
  .growth__card { padding: 20px; border-radius: 18px; }
  .growth__value { font-size: 24px; }
  .toast { padding: 12px 14px; margin: -20px 12px 0; }

  /* Hizmetler: 2'li */
  .grid--services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card { padding: 16px 14px; gap: 10px; border-radius: 14px; }
  .card__icon { width: 36px; height: 36px; border-radius: 10px; }
  .card__icon svg { width: 18px; height: 18px; }
  .card__title { font-size: 14.5px; line-height: 1.3; }
  .card__desc { font-size: 12.5px; line-height: 1.5; }
  .tags { gap: 4px; }
  .tag { font-size: 10.5px; padding: 3px 7px; }


  /* İletişim formu: alanlar tek sütun, hizmet seçimi 2'li */
  .contact-wrap { padding-block: 48px; gap: 24px; }
  .contact-info__sub { font-size: 14.5px; }
  .perks { grid-template-columns: 1fr; gap: 8px; }
  .perk { flex-direction: row; align-items: center; padding: 12px; gap: 12px; }
  .perk__no { width: 32px; height: 32px; font-size: 12px; }
  .perk__title { font-size: 14px; }
  .perk__desc { font-size: 12.5px; }
  .contact-card { padding: 18px 16px; border-radius: 16px; }
  /* 2 sütun korunur: kısa alanlar (telefon|şirket, bütçe|zaman) yan yana, gerisi tam satır.
     align-items:end — etiketi iki satıra inen alanda kutular yine aynı hizada kalır. */
  .cform { gap: 16px 10px; align-items: end; }
  .cform > * { grid-column: 1 / -1; }
  .cform > .field--pair { grid-column: auto; }
  .field--pair .field__label { font-size: 13px; line-height: 1.3; }
  .field--pair .field__hint { display: block; margin: 1px 0 0; font-size: 11.5px; }
  .field--pair .input { padding: 13px 12px; }
  .field--pair .select select { padding-right: 32px; }
  .field--pair .select svg { right: 10px; }
  .chip span { min-height: 46px; padding: 9px 10px; gap: 8px; font-size: 13px; }
  .chip span::before { width: 16px; height: 16px; }
  .segmented__opt span { padding: 10px 4px; font-size: 13px; }
  .cform__submit .btn { width: 100%; }
  .cform__note { width: 100%; justify-content: center; }

  /* Panel: istatistikler 2'li */
  .dash { padding: 20px 16px 48px; }
  .dash__title { font-size: 22px; }
  .dash__actions .btn { padding: 12px; font-size: 13.5px; }
  .grid--stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
  .stat { padding: 14px; border-radius: 14px; }
  .stat__label { font-size: 10.5px; letter-spacing: .3px; margin-bottom: 6px; line-height: 1.3; }
  .stat__value { font-size: 18px; margin-bottom: 10px; letter-spacing: -.3px; }
  .stat__note { font-size: 11.5px; }
  .chip-btn { padding: 6px 10px; font-size: 12px; }
  .dash__row { gap: 12px; }
  .panel { padding: 16px; border-radius: 14px; }
  .panel__title { font-size: 15px; margin-bottom: 14px; }
  .chart__bars { gap: 6px; height: 150px; }
  .chart__val { font-size: 9px; letter-spacing: -.3px; }
  .chart__label { font-size: 10.5px; }

  .auth { padding: 16px 12px 40px; }
  .auth__shell { border-radius: 18px; }
  .svc-hero { padding-block: 40px; }
  .svc-hero__title { font-size: 28px; }
  .svc-hero__sub { font-size: 15px; }
  .svc-hero__ctas { flex-direction: column; }
  .grid--features { grid-template-columns: 1fr; gap: 10px; }
  .auth-aside { padding: 20px 18px; }
  .auth-aside__brand { font-size: 18px; }
  .auth-aside__title { font-size: 19px; letter-spacing: -.5px; margin-bottom: 10px; }
  .auth__main { padding: 22px 16px 26px; }
  .tabs { margin-bottom: 22px; }
  .auth__title { font-size: 21px; }
  .auth__sub { font-size: 14px; margin-bottom: 20px; }
  .aform { gap: 14px 10px; }
}

/* ---- ≤380px: küçük telefonlar ---- */
@media (max-width: 380px) {
  .topbar__note svg { display: none; }
  .header-cta { display: none; }
  .hero__title { font-size: 29px; }
  .hero__ctas { grid-template-columns: 1fr; }
  .card__desc { font-size: 12px; }
  .stat__value { font-size: 16px; }
  .chart__val { display: none; }
}

/* ==========================================================================
   17. Hizmet detay sayfaları
   ========================================================================== */
.svc-hero { border-bottom: 1px solid var(--line); padding-block: clamp(48px, 6vw, 72px); }
.svc-hero__inner { max-width: 1280px; margin: 0 auto; padding-inline: 24px; }
.svc-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 20px; flex-wrap: wrap; }
.svc-crumbs a { color: var(--muted); }
.svc-crumbs a:hover { color: var(--primary); }
.svc-crumbs__sep { color: var(--line2); }
.svc-hero__title { font-size: clamp(30px, 4vw, 46px); letter-spacing: -1px; margin: 0 0 16px; }
.svc-hero__sub { font-size: 17px; color: var(--sub); line-height: 1.6; margin: 0; max-width: 560px; text-wrap: pretty; }

.grid--features { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.section--alt { background: var(--surface2); }
.container--narrow { max-width: 760px; margin-inline: auto; }

.svc-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; }
.svc-head--row .lead { margin-bottom: 0; }
.lead--wide { max-width: 820px; }
.svc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.svc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.svc-feature { gap: 10px; }
.svc-feature__num { font-family: var(--font-head); font-weight: 800; font-size: 13px; color: var(--primary); letter-spacing: .5px; }

.svc-note { margin-top: 24px; padding: 24px 28px; border-radius: 18px; background: var(--primary-soft); border: 1px solid var(--line); }
.svc-note__title { font-size: 16px; margin: 0 0 8px; }
.svc-note__text { font-size: 15px; line-height: 1.65; color: var(--sub); margin: 0; }

.svc-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.svc-chips--mb { margin-bottom: 24px; }
.svc-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink); }
.svc-chip svg { color: var(--primary); }
.svc-chips--lg .svc-chip { padding: 14px 22px; font-size: 15px; }

.svc-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.svc-checks__item { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); font-weight: 600; font-size: 15px; }
.svc-checks__ic { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }

.svc-swipe { display: none; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 0 0 10px; }
.svc-price { overflow-x: auto; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
.svc-price__table { width: 100%; min-width: 680px; border-collapse: collapse; }
.svc-price__table th, .svc-price__table td { padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: center; font-weight: 400; vertical-align: middle; }
.svc-price__table tbody th { text-align: left; width: 40%; }
.svc-price__table tr:last-child > * { border-bottom: 0; }
.svc-price__table .is-featured { background: var(--primary-soft); }
.svc-price__label { text-align: left !important; vertical-align: bottom !important; font-size: 13px; font-weight: 600 !important; color: var(--sub); }
.svc-price__plan { padding-top: 22px !important; padding-bottom: 20px !important; }
.svc-price__plan > span { display: block; }
.svc-price__badge { display: inline-block !important; margin-bottom: 8px; padding: 4px 10px; border-radius: 99px; background: var(--primary); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.svc-price__name { font-weight: 800; font-size: 15px; color: var(--ink); }
.svc-price__amount { font-family: var(--font-head); font-weight: 800; font-size: 24px; color: var(--primary); margin: 4px 0 2px; }
.svc-price__amount small { font-size: 12px; font-weight: 500; color: var(--sub); margin-left: 3px; }
.svc-price__note { font-size: 12px; color: var(--sub); margin-bottom: 12px; }
.svc-price__row { display: block; font-weight: 600; font-size: 14px; color: var(--ink); }
.svc-price__desc { display: block; font-size: 12.5px; color: var(--sub); margin-top: 2px; }
.svc-price__yes { color: var(--primary); display: inline-flex; }
.svc-price__no { color: var(--muted); opacity: .5; }
.svc-price__table td strong { font-size: 14px; color: var(--ink); }
.svc-price__foot th { font-size: 14px; font-weight: 600 !important; color: var(--sub); }

.svc-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.svc-stats__item { display: flex; flex-direction: column; padding: 16px 24px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); min-width: 130px; }
.svc-stats__val { font-family: var(--font-head); font-weight: 800; font-size: 26px; color: var(--primary); line-height: 1.1; }
.svc-stats__label { font-size: 13px; color: var(--sub); font-weight: 600; }
.svc-groups { display: flex; flex-direction: column; gap: 12px; }
.svc-group { border-radius: 18px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.svc-group__head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; cursor: pointer; list-style: none; }
.svc-group__head::-webkit-details-marker { display: none; }
.svc-group__name { font-weight: 700; font-size: 16px; }
.svc-group__count { font-size: 12.5px; font-weight: 600; color: var(--primary); background: var(--primary-soft); padding: 3px 10px; border-radius: 99px; }
.svc-group__icon { margin-left: auto; color: var(--sub); display: inline-flex; transition: transform .2s; }
.svc-group[open] .svc-group__icon { transform: rotate(180deg); }
.svc-group__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 24px; list-style: none; margin: 0; padding: 4px 22px 22px; }
.svc-group__list li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--sub); line-height: 1.45; }
.svc-group__list svg { flex: none; margin-top: 3px; color: var(--primary); }

.svc-plan { max-width: 560px; padding: 32px; border-radius: 22px; background: var(--surface); border: 2px solid var(--primary); box-shadow: 0 18px 40px var(--glow); }
.svc-plan__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.svc-plan__name { font-size: 22px; margin: 0 0 6px; }
.svc-plan__desc { font-size: 14.5px; color: var(--sub); margin: 0; }
.svc-plan__badge { flex: none; padding: 5px 12px; border-radius: 99px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.svc-plan__price { font-family: var(--font-head); font-weight: 800; font-size: 22px; color: var(--primary); margin: 22px 0 18px; }
.svc-plan__list { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.svc-plan__list li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; }
.svc-plan__list svg { color: var(--primary); flex: none; }
.svc-plan__btn { width: 100%; justify-content: center; }

.svc-faq { display: flex; flex-direction: column; gap: 10px; }
.svc-faq__item { border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.svc-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-weight: 600; font-size: 16px; cursor: pointer; list-style: none; }
.svc-faq__q::-webkit-details-marker { display: none; }
.svc-faq__icon { flex: none; color: var(--sub); display: inline-flex; transition: transform .2s; }
.svc-faq__item[open] .svc-faq__icon { transform: rotate(180deg); }
.svc-faq__a { margin: 0; padding: 0 22px 20px; font-size: 15px; line-height: 1.65; color: var(--sub); }

.svc-cta { border-top: 1px solid var(--line); background: var(--surface2); }
.svc-cta__inner { max-width: 680px; margin: 0 auto; padding: clamp(48px, 6vw, 72px) 24px; text-align: center; }
.svc-cta__title { font-size: clamp(24px, 3vw, 34px); letter-spacing: -.8px; margin: 0 0 12px; }
.svc-cta__sub { color: var(--sub); font-size: 16px; margin: 0 0 28px; }

@media (max-width: 1024px) {
  .svc-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svc-checks, .svc-group__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .grid--features, .svc-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-grid-2 { grid-template-columns: 1fr; }
  .svc-hero__sub { font-size: 15.5px; }
  .svc-swipe { display: flex; }
}
@media (max-width: 640px) {
  .grid--features, .svc-grid-4, .svc-checks, .svc-group__list { grid-template-columns: 1fr; }
  .svc-plan { padding: 24px 20px; }
  .svc-stats__item { flex: 1; min-width: 0; padding: 14px 16px; }
}

/* ==========================================================================
   18. Ödeme sayfaları (/odeme/{token}: PayTR iframe, test sağlayıcısı, geçersiz link)
   ========================================================================== */
.pay-body { background: var(--surface2); }
.pay { max-width: 560px; margin: 0 auto; padding: 24px 16px 48px; display: flex; flex-direction: column; gap: 16px; }
.pay__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 8px; }
.pay__secure { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ok); }
.pay__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 18px 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line);
}
.pay__label { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .3px; }
.pay__amount { font-family: var(--font-head); font-size: 26px; font-weight: 800; color: var(--ink); }
.pay__desc { text-align: right; font-size: 14px; font-weight: 600; color: var(--ink); max-width: 60%; }
.pay__order { margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.pay__mono { font-family: var(--font-mono); }
.pay__frame { border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.pay__frame iframe { display: block; width: 100%; min-height: 560px; border: 0; }
.pay__cancel { align-self: center; display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 700; color: var(--sub); padding: 8px; }
.pay__cancel:hover { color: var(--err); }
.pay__test { padding: 22px 20px; border-radius: 16px; background: var(--surface); border: 1.5px dashed var(--line2); text-align: center; }
.pay__test p { margin: 12px 0 18px; color: var(--sub); font-size: 14px; line-height: 1.55; }
.pay__badge { display: inline-block; padding: 4px 12px; border-radius: 99px; background: color-mix(in srgb, #E39A2D 18%, transparent); color: #B87512; font-size: 12px; font-weight: 700; }
.pay__test-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pay__invalid { padding: 40px 24px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); text-align: center; }
.pay__invalid h1 { margin: 0 0 8px; font-size: 22px; }
.pay__invalid p { margin: 0; color: var(--sub); }
@media (max-width: 480px) {
  .pay__summary { flex-direction: column; align-items: flex-start; }
  .pay__desc { text-align: left; max-width: none; }
  .pay__test-actions { grid-template-columns: 1fr; }
}

/* ==========================================================================
   18. Panel → API & Entegrasyon
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dev { display: flex; flex-direction: column; gap: 16px; }
.dev__back { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 700; color: var(--sub); }
.dev__head .dash__title { margin-bottom: 6px; }
.dev__sub { margin: 0; color: var(--sub); font-size: 15px; max-width: 720px; }
.dev__notice { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; background: var(--ok-soft); color: var(--ok); font-weight: 600; font-size: 14px; }
.dev__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.dev__card { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dev__card .panel__title { margin: 0; }
/* Yan yana kartlarda son satır (düğme / form) kartın dibine: düğmeler aynı hizada */
.dev__grid > .dev__card > :last-child { margin-top: auto; }
.dev__docs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dev__locked { align-items: center; text-align: center; padding: clamp(28px, 5vw, 56px) 20px; display: flex; flex-direction: column; gap: 12px; }
.dev__locked p { margin: 0; max-width: 520px; color: var(--sub); font-size: 15px; line-height: 1.6; }
.dev__locked-icon { width: 60px; height: 60px; border-radius: 18px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.dev__locked-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.dev__muted { margin: 0; color: var(--sub); font-size: 13.5px; line-height: 1.55; }
.dev__small { font-size: 12.5px; }
.dev__empty { margin: 0; padding: 18px; border-radius: 12px; background: var(--surface2); color: var(--muted); font-size: 14px; text-align: center; }
.dev__mono, .dev__copy code, .dev__endpoints code, .dev__table code, .dev__chip { font-family: var(--font-mono); font-size: 12.5px; }
.dev__inline { display: flex; gap: 8px; }
.dev__inline .input { flex: 1; min-width: 0; }
.dev__inline .btn, .dev__copy .btn { flex: none; }
.dev__keys { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dev__key { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.dev__key > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dev__key strong { font-size: 14.5px; }
.dev__key form { margin: 0; }
.dev__newkey { padding: 14px; border-radius: 12px; border: 1.5px solid var(--ok); background: var(--ok-soft); }
.dev__newkey p { margin: 0 0 10px; font-size: 13.5px; font-weight: 700; color: var(--ok); }
.dev__copy { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dev__copy code { flex: 1; min-width: 0; padding: 11px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line2); overflow-x: auto; white-space: nowrap; color: var(--ink); }
.dev__secret { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.dev__secret form { margin: 0; }
.dev__link { background: none; border: 0; padding: 0; color: var(--err); font-weight: 700; font-size: 13px; cursor: pointer; }
.dev__providers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dev__chip { padding: 3px 10px; border-radius: 99px; background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.dev__warn { color: var(--err); font-weight: 600; font-size: 13.5px; }
.dev__endpoints { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--surface2); }
.dev__endpoints div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dev__endpoints code { overflow-x: auto; white-space: nowrap; }
.dev__verb { flex: none; min-width: 46px; text-align: center; padding: 2px 8px; border-radius: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; background: var(--ok-soft); color: var(--ok); }
.dev__verb--post { background: var(--primary-soft); color: var(--primary); }
.dev__step { margin: 10px 0 0; font-size: 16px; }
.dev__code { margin: 0; padding: 14px 16px; border-radius: 12px; background: #0B1220; color: #E3E8F2; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; overflow-x: auto; white-space: pre; }
:root[data-theme="dark"] .dev__code { background: #060A14; border: 1px solid var(--line); }
.dev__params summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--primary); padding: 4px 0; }
.dev__table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13.5px; }
.dev__table td { padding: 8px 10px; border-top: 1px solid var(--line); vertical-align: top; color: var(--sub); }
.dev__table td:first-child { white-space: nowrap; color: var(--ink); width: 1%; }
.dev__req { margin-left: 6px; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--surface2); color: var(--muted); }
.dev__req.is-req { background: var(--primary-soft); color: var(--primary); }
.dev__status--succeeded { background: var(--ok-soft); color: var(--ok); }
.dev__status--failed { background: color-mix(in srgb, var(--err) 12%, transparent); color: var(--err); }
.dev__status--processing { background: var(--primary-soft); color: var(--primary); }
.dev__status--pending, .dev__status--cancelled, .dev__status--expired { background: var(--surface2); color: var(--muted); }
@media (max-width: 900px) { .dev__grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .dev__inline { flex-direction: column; }
  .dev__inline .btn { width: 100%; }
  .dev__copy { flex-wrap: wrap; }
  .dev__copy code { flex-basis: 100%; }
  .dev__key { flex-direction: column; align-items: stretch; }
  .dev__key .btn { width: 100%; }
  .dev__table td { display: block; width: auto; border-top: 0; padding: 2px 0; }
  .dev__table tr { display: block; padding: 8px 0; border-top: 1px solid var(--line); }
  .dev__table td:first-child { width: auto; }
}

/* ==========================================================================
   19. API dokümantasyonu (/tr/api-dokumantasyon, /en/api-docs)
   ========================================================================== */
.docs { max-width: 1240px; margin: 0 auto; padding: 32px 24px 80px; display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 48px; align-items: start; }
.docs__side { position: sticky; top: calc(var(--header-h, 64px) + 24px); max-height: calc(100vh - var(--header-h, 64px) - 48px); overflow-y: auto; }
.docs__toc { display: flex; flex-direction: column; gap: 18px; }
.docs__group { display: flex; flex-direction: column; gap: 2px; }
.docs__group-title { font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.docs__toc a { padding: 6px 10px; border-radius: 8px; border-left: 2px solid transparent; font-size: 14px; font-weight: 500; color: var(--sub); }
.docs__toc a:hover { color: var(--ink); background: var(--surface2); }
.docs__toc a.is-active { color: var(--primary); background: var(--primary-soft); border-left-color: var(--primary); font-weight: 700; }
.docs__main { min-width: 0; max-width: 860px; }
.docs__hero { padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.docs__eyebrow { display: inline-block; padding: 4px 12px; border-radius: 99px; background: var(--primary-soft); color: var(--primary); font-size: 12.5px; font-weight: 700; margin-bottom: 14px; }
.docs__hero h1 { font-size: clamp(30px, 4vw, 42px); letter-spacing: -1px; margin: 0 0 12px; }
.docs__lead { margin: 0; font-size: 17px; line-height: 1.65; color: var(--sub); }
.docs__lead strong { color: var(--ink); }
.docs__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.docs__facts div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.docs__facts span { font-size: 12px; font-weight: 700; color: var(--muted); }
.docs__facts code { font-family: var(--font-mono); font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
/* html zaten 80px scroll-padding-top veriyor (header); bölüm payı onun üstüne eklenir */
.docs__section, #overview { scroll-margin-top: 16px; }
.docs__section { padding: 36px 0 8px; }
.docs__section h2 { font-size: 26px; letter-spacing: -.5px; margin: 0 0 14px; }
.docs__section h3 { font-size: 17px; margin: 26px 0 10px; }
.docs__section p, .docs__list li, .docs__steps li { font-size: 15.5px; line-height: 1.7; color: var(--sub); }
.docs__section p { margin: 0 0 14px; }
.docs__section strong { color: var(--ink); }
.docs__main :not(pre) > code { font-family: var(--font-mono); font-size: .88em; padding: 2px 6px; border-radius: 6px; background: var(--surface2); color: var(--ink); overflow-wrap: anywhere; }
.docs__list { margin: 0 0 16px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.docs__steps { counter-reset: step; list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.docs__steps li { counter-increment: step; position: relative; padding: 14px 16px 14px 56px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.docs__steps li::before { content: counter(step); position: absolute; left: 16px; top: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: var(--primary-ink); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 13px; font-weight: 800; }
.docs__checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.docs__checklist li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.6; color: var(--sub); }
.docs__checklist li::before { content: "\2713"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 6px; background: var(--ok-soft); color: var(--ok); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

.docs-endpoint { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.docs-endpoint code { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.docs-verb { flex: none; padding: 3px 9px; border-radius: 7px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.docs-verb--get { background: var(--ok-soft); color: var(--ok); }
.docs-verb--post { background: var(--primary-soft); color: var(--primary); }

/* Kod blokları: iki temada da koyu zemin */
.docs-code { position: relative; margin: 0 0 16px; border-radius: 12px; overflow: hidden; background: #0B1220; border: 1px solid #1B2540; }
:root[data-theme="dark"] .docs-code { background: #060A14; border-color: var(--line); }
.docs-code pre { margin: 0; padding: 16px 18px; overflow-x: auto; font-family: var(--font-mono); font-size: 13px; line-height: 1.65; color: #E3E8F2; tab-size: 4; }
.docs-code__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 8px 16px; border-bottom: 1px solid #1B2540; font-size: 12px; font-weight: 700; color: #8C95A8; }
.docs-code__copy { border: 1px solid #2A3550; background: #131C31; color: #C9D2E3; border-radius: 7px; padding: 4px 10px; font-size: 12px; font-weight: 700; cursor: pointer; }
.docs-code__copy:hover { color: #fff; border-color: #5E82FF; }
.docs-code > .docs-code__copy { position: absolute; top: 8px; right: 8px; opacity: 0; transition: opacity .15s; }
.docs-code:hover > .docs-code__copy, .docs-code > .docs-code__copy:focus-visible { opacity: 1; }
@media (hover: none) { .docs-code > .docs-code__copy { opacity: 1; } }

.docs-tabs { margin: 0 0 16px; }
.docs-tabs__list { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-bottom: -1px; }
.docs-tabs__list::-webkit-scrollbar { display: none; }
.docs-tabs__list button { flex: none; padding: 8px 14px; border: 1px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0; background: transparent; color: var(--sub); font-size: 13px; font-weight: 700; cursor: pointer; }
.docs-tabs__list button:hover { color: var(--ink); }
.docs-tabs__list button[aria-selected="true"] { background: #0B1220; color: #fff; border-color: #1B2540; }
:root[data-theme="dark"] .docs-tabs__list button[aria-selected="true"] { background: #060A14; border-color: var(--line); }
.docs-tabs .docs-code { border-top-left-radius: 0; margin: 0; }

.docs-params { margin: 0 0 18px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.docs-param { display: grid; grid-template-columns: minmax(180px, 34%) minmax(0, 1fr); gap: 16px; padding: 12px 16px; }
.docs-param + .docs-param { border-top: 1px solid var(--line); }
.docs-param__name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.docs-param__name code { font-family: var(--font-mono); font-size: 13.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.docs-param__type { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.docs-param__req { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--surface2); color: var(--muted); }
.docs-param__req.is-req { background: color-mix(in srgb, var(--err) 12%, transparent); color: var(--err); }
.docs-param__desc { font-size: 14.5px; line-height: 1.6; color: var(--sub); }

.docs-table { margin: 0 0 18px; border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; background: var(--surface); }
.docs-table table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.docs-table th { text-align: left; padding: 10px 14px; font-size: 12px; font-weight: 700; letter-spacing: .3px; color: var(--muted); background: var(--surface2); white-space: nowrap; }
.docs-table td { padding: 10px 14px; border-top: 1px solid var(--line); color: var(--sub); vertical-align: top; }
.docs-table td:first-child { color: var(--ink); white-space: nowrap; }

.docs-callout { display: flex; gap: 12px; margin: 0 0 18px; padding: 14px 16px; border-radius: 12px; font-size: 14.5px; line-height: 1.6; background: var(--primary-soft); color: var(--ink); }
.docs-callout > svg { flex: none; margin-top: 3px; color: var(--primary); }
.docs-callout--warn { background: color-mix(in srgb, #E39A2D 14%, transparent); }
.docs-callout--warn > svg { color: #B87512; }
.docs-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 14px; color: var(--muted); }

@media (max-width: 1024px) {
  /* minmax(0, …): uzun kod satırları sütunu genişletmesin, blok kendi içinde kaysın */
  .docs { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; }
  /* İçindekiler: header'ın altında yatay kayan şerit */
  .docs__side { position: sticky; top: var(--header-h, 64px); z-index: 20; max-height: none; overflow: visible; margin: 0 -24px; padding: 10px 24px; background: var(--nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
  .docs__toc { flex-direction: row; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .docs__toc::-webkit-scrollbar { display: none; }
  .docs__group { flex-direction: row; gap: 4px; }
  .docs__group-title { display: none; }
  .docs__toc a { flex: none; white-space: nowrap; border-left: 0; padding: 7px 12px; border-radius: 99px; font-size: 13px; }
  .docs__toc a.is-active { border-left: 0; }
  .docs__main { max-width: none; padding-top: 24px; }
  .docs__section, #overview { scroll-margin-top: 56px; } /* + mobil içindekiler şeridi */
}
@media (max-width: 640px) {
  .docs { padding: 0 16px 56px; }
  .docs__side { margin: 0 -16px; padding: 8px 16px; }
  .docs__facts { grid-template-columns: 1fr; }
  .docs__lead { font-size: 15.5px; }
  .docs__section { padding-top: 28px; }
  .docs__section h2 { font-size: 22px; }
  .docs__section p, .docs__list li, .docs__steps li { font-size: 15px; }
  .docs-param { grid-template-columns: 1fr; gap: 4px; }
  .docs__steps li { padding-left: 50px; }
  .docs-code pre { font-size: 12.5px; padding: 14px; }
}

/* ==========================================================================
   20. Müşteri paneli → faturalama (genel bakış, ödeme yap, bakiye, ödemelerim)
   ========================================================================== */
.panel-page { display: flex; flex-direction: column; gap: 16px; }
.panel-page .dash__head { margin-bottom: 0; }
.pnav { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface2); overflow-x: auto; scrollbar-width: none; }
.pnav::-webkit-scrollbar { display: none; }
.pnav__item { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--sub); white-space: nowrap; }
.pnav__item svg { color: var(--muted); }
.pnav__item:hover { color: var(--ink); }
.pnav__item.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 2px 8px var(--shadow); }
.pnav__item.is-active svg { color: var(--primary); }

.bill-alert { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, #E39A2D 14%, var(--surface)); border: 1px solid color-mix(in srgb, #E39A2D 40%, transparent); font-size: 14px; font-weight: 600; color: var(--ink); }
.bill-alert > svg { color: #B87512; flex: none; }
.bill-alert span { flex: 1 1 260px; }

.bill-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.bill-balance, .bill-kpi { display: flex; flex-direction: column; gap: 6px; }
.bill-balance__value { font-family: var(--font-head); font-size: clamp(26px, 3.4vw, 34px); font-weight: 800; letter-spacing: -.5px; color: var(--ink); }
.bill-balance__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; }
.bill-muted { margin: 0; color: var(--sub); font-size: 14px; line-height: 1.55; }
.bill-small { font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.bill-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.bill-head .panel__title { margin: 0; }
.bill-link { font-size: 13.5px; font-weight: 700; }
.bill-empty { margin: 0; padding: 24px 12px; border-radius: 12px; background: var(--surface2); color: var(--muted); font-size: 14px; text-align: center; }

.bill-row__title { color: var(--ink); }
.bill-row__title:hover { color: var(--primary); }
.bill-row__pdf { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--line2); font-size: 12px; font-weight: 700; color: var(--sub); flex: none; }
.bill-row__pdf:hover { color: var(--primary); border-color: var(--primary); }
.bill-row__pdf.is-cancelled { text-decoration: line-through; opacity: .6; }
.bill-status--paid { background: var(--ok-soft); color: var(--ok); }
.bill-status--pending { background: var(--primary-soft); color: var(--primary); }
.bill-status--failed { background: color-mix(in srgb, var(--err) 12%, transparent); color: var(--err); }
.bill-status--expired { background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--sub); }
.bill-status--cancelled, .bill-status--refunded { background: var(--surface2); color: var(--muted); }

/* Formlar */
.bill-form { display: flex; flex-direction: column; gap: 18px; }
.bill-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bill-options { display: grid; gap: 10px; }
.bill-options--services { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.bill-options--methods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bill-options--methods.bill-options--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bill-options--methods.bill-options--1 { grid-template-columns: minmax(0, 1fr); }
.bill-opt { position: relative; display: flex; cursor: pointer; }
.bill-opt input { position: absolute; opacity: 0; pointer-events: none; }
.bill-opt__body { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 14px 44px; border: 1.5px solid var(--line2); border-radius: 14px; background: var(--surface); transition: border-color .15s, background .15s, box-shadow .15s; }
.bill-opt__body::before { content: ''; position: absolute; left: 16px; top: 17px; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line2); background: var(--surface); transition: border .15s; }
.bill-opt__title { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14.5px; color: var(--ink); }
.bill-opt__desc { font-size: 12.5px; color: var(--sub); line-height: 1.45; }
.bill-opt:hover .bill-opt__body { border-color: var(--primary); }
.bill-opt input:checked + .bill-opt__body { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 3px var(--glow); }
.bill-opt input:checked + .bill-opt__body::before { border: 5px solid var(--primary); }
.bill-opt input:focus-visible + .bill-opt__body { outline: 2px solid var(--primary); outline-offset: 2px; }
.bill-opt input:disabled + .bill-opt__body { opacity: .5; cursor: not-allowed; }
.bill-amount { position: relative; }
.bill-amount__cur { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--muted); pointer-events: none; }
.bill-amount .input { padding-left: 34px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bill-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.bill-quick .filter { cursor: pointer; background: transparent; }
.bill-provider[hidden] { display: none; }
/* Fatura bilgileri: türe/ülkeye göre gizlenen alanlar (.field display:flex hidden'ı ezmesin) */
[data-show-if][hidden] { display: none !important; }
/* Ara toplam / KDV / ödenecek tutar özeti */
.bill-sum { margin: 0; padding: 14px 18px; border: 1px solid var(--line2); border-radius: 14px; background: var(--surface2); display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.bill-sum[hidden] { display: none; }
.bill-sum > div { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--sub); }
.bill-sum dt, .bill-sum dd { margin: 0; }
.bill-sum dd { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.bill-sum__total { padding-top: 8px; border-top: 1px solid var(--line2); }
.bill-sum__total dt { color: var(--ink); font-weight: 700; }
.bill-sum__total dd { font-family: var(--font-head); font-size: 18px; font-weight: 800; }
.bill-submit { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 6px; }
.bill-type { max-width: 360px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Sipariş sonucu */
.bill-result { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: clamp(24px, 4vw, 40px) 20px; }
.bill-result__icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary); margin-bottom: 4px; }
.bill-result--ok .bill-result__icon { background: var(--ok-soft); color: var(--ok); }
.bill-result--err .bill-result__icon { background: color-mix(in srgb, var(--err) 12%, transparent); color: var(--err); }
.bill-result--muted .bill-result__icon { background: var(--surface2); color: var(--muted); }
.bill-result__amount { font-family: var(--font-head); font-size: 32px; font-weight: 800; color: var(--ink); }
.bill-result__vat { margin: -4px 0 0; font-size: 13px; color: var(--muted); }
.bill-result__title { margin: 0; font-size: 18px; }
.bill-result__msg { margin: 0 0 6px; color: var(--sub); max-width: 460px; }
.bill-dl { margin: 0; display: flex; flex-direction: column; }
.bill-dl div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.bill-dl dt { color: var(--sub); }
.bill-dl dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.bill-invoice-no { margin: 0 0 12px; font-size: 14px; font-weight: 600; }

@media (max-width: 768px) {
  .bill-overview, .bill-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .pnav__item { padding: 9px 12px; font-size: 13px; }
  .bill-options--services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bill-options--methods, .bill-options--methods.bill-options--3 { grid-template-columns: minmax(0, 1fr); }
  .bill-opt__body { padding: 12px 12px 12px 38px; }
  .bill-opt__body::before { left: 12px; top: 14px; }
  .bill-opt__title { font-size: 13.5px; }
  .bill-submit .btn { width: 100%; justify-content: center; }
  .bill-row__pdf { order: 5; }
  .bill-type { max-width: none; }
}

/* ---------- 21. İçerik sayfaları (sözleşmeler, politikalar) ---------- */

.cms { padding: clamp(28px, 4vw, 56px) 24px clamp(48px, 6vw, 88px); }
.cms__inner { max-width: 820px; margin: 0 auto; }
.cms__draft { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 10px 14px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); font-size: 13.5px; font-weight: 600; }
.cms__crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--muted); margin-bottom: 14px; }
.cms__crumbs a { color: var(--muted); }
.cms__crumbs a:hover { color: var(--primary); }
.cms__crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.cms__title { font-size: clamp(28px, 4vw, 40px); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 28px; }

/* Yöneticinin girdiği ham HTML */
.prose { color: var(--ink); font-size: 15.5px; line-height: 1.75; overflow-wrap: anywhere; }
.prose > :first-child { margin-top: 0; }
.prose h2, .prose h3, .prose h4 { line-height: 1.3; margin: 1.8em 0 .6em; }
.prose h2 { font-size: 1.45em; }
.prose h3 { font-size: 1.18em; }
.prose h4 { font-size: 1.05em; }
.prose p { margin: 0 0 1.1em; }
.prose ul, .prose ol { padding-left: 1.5em; margin: 0 0 1.1em; }
.prose li { margin-bottom: .4em; }
.prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 14px; }
.prose th, .prose td { border: 1px solid var(--line2); padding: .6em .9em; text-align: left; vertical-align: top; }
.prose th { background: var(--surface2); font-weight: 700; }
.prose code { font-family: var(--font-mono); font-size: .88em; background: var(--surface2); padding: .15em .4em; border-radius: 5px; }
.prose img { max-width: 100%; height: auto; border-radius: 12px; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }

/* İçerik açık zemine göre satır içi renklerle yazılmış (eski siteden birebir);
   koyu temada kutular temanın yüzeyine çekilir, yazı okunur kalır */
:root[data-theme="dark"] .prose [style*="background"] { background: var(--surface) !important; color: var(--ink) !important; border-color: var(--line2) !important; }
:root[data-theme="dark"] .prose [style*="border-left"] { border-left-color: var(--primary) !important; }
:root[data-theme="dark"] .prose [style*="#ef4444"] { border-left-color: var(--err) !important; }
:root[data-theme="dark"] .prose [style*="color:"]:not([style*="background"]) { color: var(--sub) !important; }
:root[data-theme="dark"] .prose button[style*="background"] { background: var(--primary) !important; color: var(--primary-ink) !important; }

@media (max-width: 640px) {
  .cms { padding: 24px 20px 56px; }
  .cms__title { margin-bottom: 20px; }
  .prose { font-size: 15px; }
  /* İki sütunlu bilgi kutuları alt alta; geniş tablolar kendi içinde kayar */
  .prose [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .prose table { display: block; overflow-x: auto; }
}

/* ---------- 22. 404 ---------- */
.nf { padding: clamp(56px, 10vw, 120px) 24px clamp(64px, 10vw, 128px); text-align: center; }
.nf__inner { max-width: 560px; margin: 0 auto; }
.nf__code { margin: 0; font-family: var(--font-head); font-size: clamp(88px, 18vw, 160px); font-weight: 800; line-height: 1; letter-spacing: -.04em; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nf__title { margin: 12px 0 10px; font-size: clamp(24px, 4vw, 32px); }
.nf__text { margin: 0 0 28px; color: var(--sub); line-height: 1.7; }
.nf__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- 23. Çerez onayı ---------- */
.cc { position: fixed; left: 20px; bottom: 20px; z-index: 80; width: min(440px, calc(100vw - 40px)); }
.cc[hidden] { display: none; }
.cc__card { background: var(--surface); border: 1px solid var(--line2); border-radius: 18px; padding: 20px; box-shadow: 0 18px 50px rgba(11, 18, 32, .22); }
.cc__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cc__icon { display: flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 10px; background: var(--primary-soft); color: var(--primary); flex: none; }
.cc__title { margin: 0; font-size: 16px; }
.cc__text { margin: 0 0 14px; font-size: 13.5px; line-height: 1.6; color: var(--sub); }
.cc__text a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.cc__prefs { display: flex; flex-direction: column; gap: 4px; margin: 0 0 14px; }
.cc__prefs[hidden] { display: none; }
.cc__cat { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border-radius: 12px; background: var(--surface2); cursor: pointer; }
.cc__cat-text { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--sub); line-height: 1.45; }
.cc__cat-text strong { color: var(--ink); font-size: 13.5px; }
.cc__switch { position: relative; flex: none; }
.cc__switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cc__track { display: block; width: 40px; height: 24px; border-radius: 99px; background: var(--line2); transition: background .2s; }
.cc__knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.cc__switch input:checked + .cc__track { background: var(--primary); }
.cc__switch input:checked + .cc__track .cc__knob { transform: translateX(16px); }
.cc__switch input:disabled + .cc__track { opacity: .55; }
.cc__switch input:focus-visible + .cc__track { outline: 2px solid var(--primary); outline-offset: 2px; }
.cc__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cc__actions [hidden] { display: none; }
.cc__actions .btn { box-shadow: none; font-size: 13.5px; padding: 9px 14px; }
@media (max-width: 640px) {
  .cc { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; }
  .cc__card { padding: 16px; }
  .cc__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .cc__actions [data-cc-all], .cc__actions [data-cc-save] { grid-column: 1 / -1; }
}

/* ---------- 24. Bildirim satırı, şifre bağlantısı ---------- */
.form-notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 18px; border-radius: 10px; background: var(--ok-soft); color: var(--ok); font-weight: 600; font-size: 13.5px; line-height: 1.5; }
.form-notice svg { flex: none; margin-top: 2px; }
.field__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.field__link { font-size: 13px; font-weight: 600; color: var(--primary); }
.field__link:hover { text-decoration: underline; }
.auth__switch a { display: inline-flex; align-items: center; gap: 6px; }
.verify-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 18px; padding: 12px 16px; border-radius: 14px; background: var(--primary-soft); color: var(--ink); font-size: 14px; }
.verify-bar svg { color: var(--primary); flex: none; }
.verify-bar span { flex: 1 1 260px; }
.verify-bar form { margin: 0; }

/* ---------- 25. Havale/EFT ---------- */
.pay__eft { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px; border-radius: 14px; background: var(--primary-soft); text-align: center; }
.pay__eft p { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.55; color: var(--ink); text-align: left; }
.pay__eft svg { color: var(--primary); flex: none; margin-top: 2px; }

/* ---------- 26. Bildirim pencereleri (popup) ---------- */
.ntf-stack { position: fixed; top: 20px; right: 20px; z-index: 120; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 40px)); pointer-events: none; }
.ntf {
  position: relative; overflow: hidden; pointer-events: auto; display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line2);
  box-shadow: 0 16px 40px rgba(11, 18, 32, .18); opacity: 0; transform: translateX(24px); transition: opacity .25s ease, transform .25s ease;
}
.ntf.is-in { opacity: 1; transform: none; }
.ntf__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; }
.ntf--ok .ntf__icon { background: var(--ok-soft); color: var(--ok); }
.ntf--err .ntf__icon { background: color-mix(in srgb, var(--err) 14%, transparent); color: var(--err); }
.ntf--info .ntf__icon { background: var(--primary-soft); color: var(--primary); }
.ntf__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ntf__title { font-size: 14px; color: var(--ink); }
.ntf__text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--sub); overflow-wrap: anywhere; }
.ntf__link { margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--primary); }
.ntf__link:hover { text-decoration: underline; }
.ntf__close { flex: none; display: flex; padding: 4px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.ntf__close:hover { background: var(--surface2); color: var(--ink); }
.ntf__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; background: currentColor; opacity: .5; }
.ntf--ok .ntf__bar { color: var(--ok); }
.ntf--err .ntf__bar { color: var(--err); }
.ntf--info .ntf__bar { color: var(--primary); }
.ntf.is-running .ntf__bar { animation: ntf-bar var(--ntf-ms, 4500ms) linear forwards; }
@keyframes ntf-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 640px) {
  /* Mobilde üstte: alttaki çerez bildirimi ve yönetim sekme çubuğuyla çakışmasın */
  .ntf-stack { top: calc(10px + env(safe-area-inset-top)); left: 12px; right: 12px; width: auto; }
  .ntf { transform: translateY(-16px); }
}
@media (prefers-reduced-motion: reduce) { .ntf { transition: none; } .ntf.is-running .ntf__bar { animation: none; } }


/* ---------- 28. Ödeme yap / Bakiye yükle (checkout) ---------- */
/* Masaüstü: solda adımlar, sağda yapışkan özet. Mobil: tek sütun, özet en altta. */
.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.checkout__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.checkout__step { display: flex; flex-direction: column; gap: 14px; }
.checkout__title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; }
.checkout__title .field__hint { font-family: var(--font-body); font-weight: 600; }
.checkout__num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--primary); color: var(--primary-ink); font-size: 13px; font-weight: 800; }
.checkout__side { position: sticky; top: 92px; min-width: 0; }
.checkout__summary { display: flex; flex-direction: column; gap: 16px; }
.checkout__sum-title { margin: 0; font-size: 16px; }
.checkout__lines { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.checkout__lines > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13.5px; color: var(--sub); }
.checkout__lines dt, .checkout__lines dd { margin: 0; }
.checkout__lines dd { color: var(--ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.checkout__total { padding-top: 12px; border-top: 1px dashed var(--line2); }
.checkout__total dt { color: var(--ink); font-weight: 700; font-size: 14.5px; }
.checkout__total dd { font-family: var(--font-head); font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.checkout__cta { width: 100%; justify-content: center; }
.checkout__secure { margin: -6px 0 0; display: flex; gap: 6px; align-items: flex-start; font-size: 12px; line-height: 1.5; color: var(--muted); }
.checkout__secure svg { flex: none; margin-top: 1px; color: var(--ok); }
.checkout .bill-terms .consent { font-size: 12.5px; }

/* Ödeme altyapısı: logolu kartlar */
.checkout__providers { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line); gap: 10px; }
.checkout__providers[hidden] { display: none; }
.pay-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.pay-logo { position: relative; display: flex; cursor: pointer; }
.pay-logo input { position: absolute; opacity: 0; pointer-events: none; }
.pay-logo__body { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; height: 64px; padding: 0 18px; border: 1.5px solid var(--line2); border-radius: 14px; background: var(--surface); transition: border-color .15s, box-shadow .15s, background .15s; }
.pay-logo__mark { display: flex; align-items: center; justify-content: center; height: 24px; color: var(--sub); transition: color .15s, opacity .15s; opacity: .75; }
.pay-logo__mark svg { height: 100%; width: auto; max-width: 110px; }
.pay-logo--paytr .pay-logo__mark { height: 20px; }
.pay-logo__text { font-weight: 800; font-size: 14px; }
.pay-logo__check { position: absolute; top: -7px; right: -7px; display: none; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: var(--primary-ink); box-shadow: 0 0 0 3px var(--surface); }
.pay-logo:hover .pay-logo__body { border-color: var(--primary); }
.pay-logo:hover .pay-logo__mark { opacity: 1; }
.pay-logo input:checked + .pay-logo__body { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 3px var(--glow); }
.pay-logo input:checked + .pay-logo__body .pay-logo__check { display: flex; }
.pay-logo input:checked + .pay-logo__body .pay-logo__mark { opacity: 1; }
/* Seçiliyken marka rengi (koyu temada beyaz kalır) */
.pay-logo--iyzico input:checked + .pay-logo__body .pay-logo__mark { color: #1E64FF; }
.pay-logo--paytr input:checked + .pay-logo__body .pay-logo__mark { color: #0060D9; }
.pay-logo--stripe input:checked + .pay-logo__body .pay-logo__mark { color: #635BFF; }
:root[data-theme="dark"] .pay-logo input:checked + .pay-logo__body .pay-logo__mark { color: var(--ink); }
.pay-logo input:focus-visible + .pay-logo__body { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (max-width: 1024px) {
  .checkout { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 860px) {
  .checkout { grid-template-columns: minmax(0, 1fr); }
  .checkout__side { position: static; }
}
@media (max-width: 640px) {
  .checkout__title { font-size: 15px; }
  .pay-logos { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
  .pay-logo__mark { height: 20px; }
  .pay-logo__mark svg { max-width: 100%; }
  .pay-logo--paytr .pay-logo__mark { height: 16px; }
  .pay-logo__body { height: 54px; padding: 0 10px; }
  .checkout__total dd { font-size: 20px; }
  .bill-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bill-quick .filter { justify-content: center; text-align: center; }
}

/* ---------- 29. Altbilgi ---------- */
/* Masaüstü: marka sütunu + 3 bağlantı sütunu. Mobil (≤768): bağlantı sütunları akordiyon. */
.site-footer { margin-top: auto; border-top: 1px solid var(--line); background: var(--surface); }
.site-footer__inner { max-width: 1280px; margin: 0 auto; padding: 56px 24px 0; }
.site-footer__top { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 2fr); gap: 40px; }
/* Masaüstünde uzun "Yasal" listesi iki sütun: sütun boyları dengede kalsın */
@media (min-width: 769px) { .footer-col--legal .footer-col__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; } }
@media (min-width: 769px) and (max-width: 1024px) { .footer-col--legal .footer-col__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.site-footer__brand { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.site-footer__about { margin: 0; max-width: 340px; font-size: 14px; line-height: 1.65; color: var(--sub); }
.site-footer__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.site-footer__contact a { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); font-weight: 600; }
.site-footer__contact a svg { flex: none; color: var(--primary); }
.site-footer__contact a:hover span { color: var(--primary); }
.site-footer__social { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.site-footer__social a { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line2); color: var(--sub); transition: color .15s, border-color .15s, background .15s; }
.site-footer__social a:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }

.footer-col { min-width: 0; }
.footer-col__title { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 16px; font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--ink); cursor: default; }
.footer-col__title::-webkit-details-marker { display: none; }
.footer-col__chevron { display: none; color: var(--muted); transition: transform .2s ease; }
.footer-col__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-col__list a { font-size: 14px; color: var(--sub); line-height: 1.4; }
.footer-col__list a:hover, .footer-col__list a[aria-current] { color: var(--primary); }

.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding: 20px 0 calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.site-footer__bottom p { margin: 0; }

@media (max-width: 1024px) {
  .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .footer-col--legal { grid-column: 1 / -1; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__about { max-width: 560px; }
}
@media (max-width: 768px) {
  .site-footer__inner { padding: 36px 20px 0; }
  .site-footer__top { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .site-footer__brand { padding-bottom: 24px; }
  /* Akordiyon */
  .footer-col { border-top: 1px solid var(--line); }
  .footer-col:last-child { border-bottom: 1px solid var(--line); }
  .footer-col__title { margin: 0; padding: 16px 0; cursor: pointer; font-size: 15px; -webkit-tap-highlight-color: transparent; }
  .footer-col__chevron { display: flex; }
  .footer-col[open] .footer-col__chevron { transform: rotate(180deg); }
  .footer-col__list { padding: 0 0 18px; gap: 14px; }
  .footer-col__list a { font-size: 14.5px; }
  .site-footer__bottom { flex-direction: column; margin-top: 0; border-top: 0; text-align: center; align-items: center; }
}

/* ---------- 30. Görsel logo (Yönetim → Ayarlar → Marka) ---------- */
.brand-img { display: block; width: auto; height: 26px; max-width: 180px; object-fit: contain; }
.brand-img--dark { display: none; }
:root[data-theme="dark"] .brand-img--light { display: none; }
:root[data-theme="dark"] .brand-img--dark { display: block; }
.brand:has(.brand-img) { align-items: center; }
@media (max-width: 640px) { .brand-img { max-width: 160px; } }