/* OLCEK-KAYNAGI: docs/html_web/assets/css/design.css
   Bu dosya tasarimin uzerine kod giydiriyor ve tasarimin KENDI olcegindeki
   degerleri tasiyor (tokens.css olcegi baska bir olcek). Kapi bu beyani
   dogruluyor: adi gecen dosyayi acip degerin orada gercekten gectigine bakiyor. */

/* URUNUN KENDI DOSYASI -- tasarimdan gelmez.
   14.09.2026: `site/design/assets/css/` altindan buraya tasindi. O klasoru artik
   `npm run design:site-import` yaziyor ve kaynakta ayni adda bir dosya cikarsa bu
   dosya sessizce uzerine yazilirdi -- urunun kendi kurallari bir tasarim guncellemesi
   sirasinda kaybolurdu. Olcek kurali (16.2) bu dosyaya AYNEN uygulanir; muafiyet
   yalniz tasarimdan bayt bayt gelen dosyalar icindir. */

/* Integration states only. Visual foundations remain in the approved html_web styles. */

/* Hukuki belgelerin sol menüsü. Yedi belge birbirinin devamı; biri açıkken ötekine
   geçilebilmeli ve hangisinde olunduğu görünmeli. Dokümantasyondaki `docs-shell` ile aynı
   iskelet: yapışkan bir sütun ve okuma genişliğini bozmayan bir gövde. */
.legal-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 55px;
  align-items: start;
  /* Ust bosluk eskiden `page-head` bolumunden geliyordu; baslik govdenin icine alininca
     o bolum kalkti ve bosluk buraya tasindi. Deger uydurulmadi, tasarimin kendi
     `legal.css`indeki `.legal-page .page-head` dolgusundan alindi (148px / 600px altinda
     120px). Menu `sticky top: 110px` ile duruyor, yani ust bosluk sart. */
  padding-top: 148px;
}

/* 15.09.2026 · urun sahibi karari. Belge basligi sayfanin ortasinda, metin sutunu ise
   izgaranin sag kolonunda duruyordu: baslik hicbir seyle hizali degildi. Tasarimda bu
   catisma YOK, cunku tasarimin hukuki sayfasi 341 karakterlik bir yer tutucu
   ("Icerik bekleniyor") ve yaninda belge menusu yok -- tek, ortalanmis bir sutun.
   Urun ayni kabuga yedi bolumluk dolu sozlesmeler koyuyor. Baslik govdenin icine
   alindi ve metin sola yaslandi. Puntolar tasarimindan: `legal.css`in kendi
   `.legal-page .page-head h1` kurali. */
.legal-title {
  margin-bottom: 44px;
}
/* Etiket diger sayfalardaki gibi kirmizi yazi (29.10.2026). */
.legal-title .eyebrow {
  justify-content: flex-start;
  color: var(--red-dark);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.legal-title h1 {
  max-width: none;
  margin: 24px 0 0;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.2;
}

/* Ortalanmis uzun metin iki kenarindan da tirtikli okunur; yer tutucunun tek paragrafi
   icin dogru olan, dolu bir sozlesme icin degil. Paragrafin yatay `auto` kenari da
   birakiliyor: sutun genisledikce metin blogu ortalanmasin. */
.legal-page .legal-body {
  /* `start`: Arapcada metin saga yaslanir (`left` RTL'de de sola yasliyordu). */
  text-align: start;
}
.legal-page .legal-body p {
  margin-inline: 0;
}
/* Ceviri yayinda degilken metin Ingilizce ve kendi yonunde (Legal.cshtml `contentDir`).
   Dar kutu sayfanin yonune yaslanir: Arapcada ozet paragrafi saga kayip bolumlerin sol
   kenarindan 48 px iceride kaliyordu. Kutu kendi baslangicina yaslanir. */
.legal-page .legal-body .page-lead[dir] {
  margin-inline-end: auto;
}
.legal-nav {
  position: sticky;
  top: 110px;
}
.legal-nav ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.legal-nav a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius-control, 3px);
  color: var(--tone-3);
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none;
  transition:
    background-color var(--motion-instant) var(--ease-settle),
    color var(--motion-instant) var(--ease-settle);
}
.legal-nav a:hover,
.legal-nav a:focus-visible {
  background: rgb(33 33 33 / 4%);
  color: var(--tone-1);
}
/* Açık olan belge işaretli: menü aynı zamanda "buradasınız" diyor. Gri dolgu yerine
   dokümanlardaki etkin madde: beyaz, ince halkalı, kalkık bir çip (29.10.2026). */
.legal-nav a.is-current {
  background: #fff;
  box-shadow:
    0 0 0 1px var(--hair),
    var(--shadow-1);
  color: var(--tone-1);
  font-weight: 600;
}
@media (max-width: 600px) {
  .legal-shell {
    padding-top: 120px;
  }
}
@media (max-width: 900px) {
  .legal-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .legal-nav {
    position: static;
  }
  /* Telefonda belgeler tek satirda yana kayar (uc-dort satira dolanan hap yigini yerine);
     kenarda silinir, acik belge gorunur yere kaydirilir (script.js). */
  .legal-nav ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin-inline: -20px;
    padding: 4px 20px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-padding-inline: 20px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  }
  .legal-nav ul::-webkit-scrollbar {
    display: none;
  }
  .legal-nav li {
    flex: none;
  }
  .legal-nav a {
    white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .legal-nav a {
    transition: none;
  }
}

/* Dokümantasyon araması standardın kendi alanı (elements.html · ui-search). O bileşen hesap
   kabuğunun components.css'inde tanımlı ve tanıtım kabuğu o dosyayı yüklemiyor; burada
   `docs-search` içine kapsanmış hâli duruyor, böylece ad çakışması olamaz. Ölçüler
   tasarımın kendi denetim diline göre: 3px yarıçap.
   29.10.2026: gri kutu + kırmızı odak kenarı kalktı. Kutu karşılama sayfasındaki aramanın
   küçük kardeşi: beyaz yüzey, ince çizgi, yumuşak gölge; odakta aynı koyu çizgi + hale. */
.docs-search .ui-control {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline-start: 12px;
  border: 0;
  border-radius: var(--radius-control, 3px);
  background: #fff;
  box-shadow:
    0 0 0 1px var(--hair-strong),
    var(--shadow-1);
  transition: box-shadow var(--motion-quick) var(--ease-settle);
}
.docs-search .ui-control:hover {
  box-shadow:
    0 0 0 1px rgb(33 33 33 / 30%),
    var(--shadow-1);
}
.docs-search .ui-control:focus-within {
  outline: 2px solid transparent;
  box-shadow:
    0 0 0 1px var(--tone-1),
    0 0 0 4px rgb(33 33 33 / 8%),
    var(--shadow-1);
}
.docs-search .ui-icon {
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  opacity: 0.55;
}
.docs-search .ui-control input {
  width: 100%;
  min-width: 0;
  padding-block: 12px;
  padding-inline: 0 14px;
  border: 0;
  background: transparent;
  font-size: 14px;
  outline: none;
}
/* Odak kutunun kendisinde (focus-within). Ortak `input:focus-visible` halkası kutunun
   icinde ikinci bir cerceve ciziyordu (urun sahibi, 28.10.2026: "focus olunca ic border
   istemiyorum"). */
:is(.docs-search, .docs-home-search) .ui-control input:focus-visible {
  box-shadow: none;
}

/* Demo'nun alt çubuğundaki tek sabit satır. Tasarımın script'i oraya adıma göre değişen üç
   cümle yazıyordu; üçü de kaldırıldı ve yerlerini değişmeyen tek cümle aldı. Öğenin
   `demo-help` kimliği kaldırıldığı için script artık buraya yazamıyor.
 *
 * Kendi dikey payını yazmıyor: alt çubuk zaten hizalı bir flex satırı ve `.demo-bottom .tiny`
 * ölçüyü oradan veriyor. */
.demo-privacy-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

/* Başlığın altındaki boşluk, ARDINDA bir paragraf olup olmamasına bağlı kalmasın. Tasarım o
   boşluğu `.demo-body > p`nin kendi payından veriyor; paragrafı kaldırılan panelde başlık
   doğrudan forma yapışıyordu. Kural yalnızca paragrafsız başlığa uygulanıyor, paragraflı
   panelin ölçüsü tasarımda kaldığı gibi. */
.demo-body > h2:not(:has(+ p)) {
  margin-bottom: 26px;
}
.demo-privacy-note .ui-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  opacity: 0.6;
}

/* Sonuç başlığı tek satır. İLK TEŞHİS YANLIŞTI: sınırı açmak yetmedi, çünkü kıran şey
   genişlik sınırı değil IZGARA idi. `.detail-workflow .result-copy` iki sütunlu bir grid ve
   tasarım başlığı `grid-column: 1`'e koyuyor; ikinci sütun oradaki paragraf için. Bu örnekte
   paragraf yok, yani başlık boş bir sütunun yanında yarım genişlikte sıkışıyor ve
   "The same template. Your information." ikiye bölünüyor. Başlık iki sütunu birden alıyor;
   `.actions`, `.tiny` ve `.text-link` zaten `1/-1` olduğu için ızgaranın geri kalanı aynı.
   Dar ekranda `.result-copy` tek sütuna düşüyor ve doğal kırılma kalıyor. */
.detail-workflow .result-copy h2.result-title {
  grid-column: 1 / -1;
  max-width: none;
}

/* Akordiyon girişi: başlık ve açıklama üst üste, ortalanmış. İki sütunlu ızgarada
   yan yana duruyorlardı ve başlık, kendi açıklamasından bir sütun uzağa düşüyordu. */
.platform-depth-intro {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 12px;
  text-align: center;
}
.platform-depth-intro > * {
  max-width: 680px;
}
.footer-language-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-control);
  color: var(--tone-1);
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--motion-instant) var(--ease-settle);
}

.footer-language-menu a:hover,
.footer-language-menu a:focus-visible {
  background: rgb(33 33 33 / 4%);
}
/* Secili dil: metindeki "✓" karakteri yerine urunun kendi onay ikonu (pg-check). Karakter
   isaretlemede duruyor (aria-hidden), yalniz gorunmuyor. */
.footer-language-menu .language-check {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  overflow: hidden;
  color: transparent;
  font-size: 0;
}
.footer-language-menu a[aria-current="true"] .language-check {
  background-color: var(--tone-1);
  -webkit-mask: url("/account/assets/icons/pg-check.svg") center / 16px 16px no-repeat;
  mask: url("/account/assets/icons/pg-check.svg") center / 16px 16px no-repeat;
}
.footer-language-menu a[aria-current="true"] {
  font-weight: 600;
}

.compare-live-row { display: contents; }

.billing-switch button:disabled {
  color: #777;
  cursor: not-allowed;
}

/* Doküman tabloları beyaz bir yüzeyde: ince halka + yumuşak gölge, sitenin kart dili
   (29.10.2026). Dar ekranda tablo yatay kayar; kayan kenarda beliren gölge tablonun
   devam ettiğini söyler (`local` zemin uca gelince gölgeyi örter, `scroll` gölge yerinde
   kalır). İki kenar simetrik, Arapçada da doğru kenarda çıkar. */
.docs-main .doc-table-scroll {
  max-width: 100%;
  margin: 24px 0;
  overflow-x: auto;
  border-radius: var(--radius-surface);
  background:
    linear-gradient(to right, var(--desk-0) 30%, rgb(255 255 255 / 0%)) left center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--desk-0) 30%, rgb(255 255 255 / 0%)) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(33 33 33 / 14%), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(33 33 33 / 14%), transparent) right center / 12px 100% no-repeat scroll,
    var(--desk-0);
  box-shadow:
    0 0 0 1px var(--hair),
    var(--shadow-1);
}
.docs-main .doc-table-scroll:focus-visible {
  outline: 2px solid transparent;
  box-shadow:
    0 0 0 1px var(--hair),
    var(--ring);
}
/* ── Doküman karşılama sayfası ───────────────────────────────────────────────────────
   DÜZEN REFERANSTAN (ürün sahibinin verdiği ekran görüntüsü, 26.09.2026): tam genişlikte
   ortalanmış bir üst bant — başlık, tek cümle, GENİŞ arama kutusu, "öne çıkanlar"
   hapları — ve altında "bütün konular" başlığı ile üç sütunlu tek satırlık kartlar.
   Kenar çubuğu ve "bu sayfada" rayı bu sayfada yok; okuyucu bir konunun içinde değil,
   konuların önünde duruyor.
   İlk denememde sayfa üç sütunlu kabuğun içinde, iki sütunlu iç içe listelerle kalmıştı
   ve referansla ilgisi yoktu; ürün sahibi haklı olarak reddetti.
   Ölçek tasarımın kendi dilinde: 1px #dedede kenar, 4px yarıçap, #fafafa dolgu, 14px
   gövde.
   Cila (28.10.2026, ürün sahibi: "önce Documentation ön sayfası"): düzen aynı. Üst bantta
   kenarlara silinen noktalı alan (ana sayfa hero'sunun ve Entegrasyonlar tuvalinin dili),
   etiket kırmızı yazı, arama bir komut paleti gibi kalkık beyaz yüzey (4px köşe, hap değil),
   çipler 3px. Konular çok açık gri bantta beyaz kartlar; ikon beyaz karoda, kart üzerine
   gelince kalkar, ok okuma yönüne kayar. Beş grup üç sütunda boşluk bırakıyordu: son satır
   kalan genişliği eşit paylaşır. */
/* Ust banttaki noktali alan kabugun yanlarina tasiyor; dar ekranda yatay kaydirma
   olmasin. */
body.detail-docs-home .docs-home {
  overflow-x: clip;
}
body.detail-docs-home .docs-home .wrap {
  /* Ust bar 83 piksel ve SAYFANIN USTUNE biniyor; olculdu (26.09.2026): 8 piksellik ust
     bosluk basligi yariya kesiyordu. */
  padding-top: 112px;
  padding-bottom: 0;
}
.docs-home-hero {
  position: relative;
  isolation: isolate;
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 0 56px;
  text-align: center;
}
.docs-home-hero::before {
  position: absolute;
  inset: -64px -22% 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background-image: radial-gradient(circle, rgb(0 0 0 / 14%) 0.8px, transparent 1px);
  background-size: 28px 28px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 56%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 56%, #000 30%, transparent 100%);
}
.docs-home-hero .eyebrow {
  justify-content: center;
  color: var(--red-dark);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.docs-home-hero h1 {
  /* NEGATIF HARF ARALIGI YOK: `quality:site` kapisi onu reddediyor ve haklı -- tasarimin
     baslik olcegi sikistirilmis harf araligi kullanmiyor. */
  margin: 10px 0 0;
  font-size: 56px;
  line-height: 1.08;
}
.docs-home-hero .lead {
  max-width: 620px;
  margin: 16px auto 0;
  font-size: 16px;
  line-height: 1.7;
  color: #666;
}
.docs-home-search {
  position: relative;
  max-width: 620px;
  margin: 28px auto 0;
  text-align: start;
}
.docs-home-search .ui-control.ui-search {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 0 12px 0 18px;
  border: 0;
  border-radius: var(--radius-surface);
  background: #fff;
  box-shadow:
    0 0 0 1px var(--hair-strong),
    var(--shadow-2);
  transition: box-shadow var(--motion-quick) var(--ease-settle);
}
.docs-home-search .ui-control.ui-search:hover {
  box-shadow:
    0 0 0 1px rgb(33 33 33 / 30%),
    var(--shadow-2);
}
.docs-home-search .ui-control.ui-search:focus-within {
  outline: 2px solid transparent;
  box-shadow:
    0 0 0 1px var(--tone-1),
    0 0 0 4px rgb(33 33 33 / 8%),
    var(--shadow-2);
}
.docs-home-search .ui-icon {
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  opacity: 0.55;
}
.docs-home-search .ui-control.ui-search input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding: 14px 0;
  border: 0;
  background: transparent;
  font-size: 15px;
  outline: none;
}
.docs-home-search kbd {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--desk-1);
  box-shadow: inset 0 0 0 1px var(--hair), inset 0 -1px 0 var(--hair-strong);
  color: var(--tone-3);
  font: 600 12px "Cascadia Code", Consolas, ui-monospace, monospace;
}
.docs-home-highlights {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
  color: #666;
  font-size: 14px;
}
.docs-home-highlights > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.docs-home-highlights a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-control);
  background: #fff;
  box-shadow: 0 0 0 1px var(--hair-strong);
  color: var(--tone-1);
  font-size: 14px;
  text-decoration: none;
  transition:
    box-shadow var(--motion-quick) var(--ease-settle),
    translate var(--motion-quick) var(--ease-settle);
}
@media (hover: hover) {
  .docs-home-highlights a:hover {
    translate: 0 -1px;
    box-shadow:
      0 0 0 1px var(--tone-1),
      var(--shadow-1);
  }
}
.docs-home-highlights a:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--ring);
}

/* Konular bandi: tam genislikte cok acik gri zemin (sayfanin geri kalaninda bolum ayrimi
   boyle). Bant kabugun icinde kaliyor; zemin golgeyle yanlara tasiyor, yatay kaydirma
   olmasin diye clip-path ile kesiliyor. */
.docs-home-topics {
  padding: 48px 0 88px;
  background: var(--desk-1);
  box-shadow: 0 0 0 100vmax var(--desk-1);
  clip-path: inset(0 -100vmax);
}
.docs-home-topics-head {
  /* Cizgi basligin ALTINDA; altindaki bosluk kartlari ondan ayiriyor. */
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hair);
}
.docs-home-topics-head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}
.docs-home-cards {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.docs-home-cards > li { grid-column: span 2; margin: 0; padding: 0; min-width: 0; }
/* Uc sutunda son satir eksik kalirsa kalan kartlar genisligi esit paylasir. */
.docs-home-cards > li:nth-last-child(2):nth-child(3n + 1),
.docs-home-cards > li:last-child:nth-child(3n + 2) { grid-column: span 3; }
.docs-home-cards > li:last-child:nth-child(3n + 1) { grid-column: span 6; }
/* Kart: beyaz yuzey; ustte grubun kendisi (baglanti), altinda grubun ilk uc sayfasi. */
.docs-home-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-surface);
  background: #fff;
  box-shadow:
    0 0 0 1px var(--hair),
    var(--shadow-1);
  transition:
    translate var(--motion-base) var(--ease-settle),
    box-shadow var(--motion-base) var(--ease-settle);
}
.docs-home-card-head {
  /* IKI SATIRLI KART: grup adi ve kenar cubugundaki ikincil metnin AYNISI. Iki yerde iki
     ayri metin olsa okuyucu ayni grubu iki farkli adla taniyacakti; ikisi de
     `web.docs.group.<ad>[.description]` anahtarlarindan geliyor. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 88px;
  padding: 20px;
  border-radius: var(--radius-surface) var(--radius-surface) 0 0;
  color: var(--tone-1);
  text-decoration: none;
}
/* Grubun sayfalari: satir satir; uzerine gelince satir murekkep olur, ok belirir. */
.docs-home-card-pages {
  display: grid;
  margin: 0 20px;
  padding: 8px 0 14px;
  border-top: 1px solid var(--hair);
  list-style: none;
}
.docs-home-card-pages a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  margin-inline: -8px;
  padding-inline: 8px;
  border-radius: var(--radius-control);
  color: var(--tone-2);
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
  transition:
    background-color var(--motion-quick) var(--ease-settle),
    color var(--motion-quick) var(--ease-settle);
}
.docs-home-card-pages a::after {
  flex: none;
  content: "→";
  color: var(--tone-4);
  opacity: 0;
  translate: calc(-4px * var(--dir)) 0;
  transition:
    opacity var(--motion-quick) var(--ease-settle),
    translate var(--motion-base) var(--ease-settle);
}
[dir="rtl"] .docs-home-card-pages a::after { content: "←"; }
.docs-home-card-pages a:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--ring);
}
/* Grupta uc sayfadan fazlasi varsa kac tane oldugu; tamami grubun ilk sayfasindan
   acilan kenar cubugunda. */
.docs-home-card-more {
  align-self: flex-start;
  margin: -6px 20px 16px;
  padding: 3px 7px;
  border-radius: var(--radius-control);
  box-shadow: inset 0 0 0 1px var(--hair-strong);
  color: var(--tone-3);
  font: 600 12px/1.2 "Cascadia Code", Consolas, ui-monospace, monospace;
  text-decoration: none;
  transition:
    box-shadow var(--motion-quick) var(--ease-settle),
    color var(--motion-quick) var(--ease-settle);
}
.docs-home-card-more:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--ring);
}
/* Altinci yuva: hizli baslangicin gercek cagrisi, koyu yuzeyde (Neden PDFgine'deki koyu
   kartin isigi). Imlec yanip soner; hareketi azalt tercihinde durur. */
.docs-home-card-code {
  --ring: var(--ring-on-ink);
  background:
    radial-gradient(60% 90% at 14% 0%, rgb(255 255 255 / 7%), transparent 68%),
    var(--ink-900);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 6%),
    var(--shadow-2);
}
[dir="rtl"] .docs-home-card-code {
  background:
    radial-gradient(60% 90% at 86% 0%, rgb(255 255 255 / 7%), transparent 68%),
    var(--ink-900);
}
.docs-home-card-code .docs-home-card-head { color: var(--on-ink-1); }
.docs-home-card-code .docs-home-card-text small { color: var(--on-ink-2); }
.docs-home-card-code .docs-home-card-arrow { color: var(--on-ink-2); }
.docs-home-card-code .ui-icon {
  background: rgb(255 255 255 / 6%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%);
  filter: invert(1);
}
.docs-home-code {
  flex: 1;
  margin: 0 20px 20px;
  padding-top: 14px;
  overflow: hidden;
  border-top: 1px solid rgb(255 255 255 / 10%);
  color: var(--on-ink-3);
  font: 11.5px/1.8 "Cascadia Code", Consolas, ui-monospace, monospace;
  white-space: pre;
  direction: ltr;
  text-align: left;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
  mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.docs-home-code .k { color: var(--on-ink-1); font-weight: 600; }
.docs-home-code .s { color: var(--on-ink-2); }
.docs-home-code .r { color: var(--on-ink-1); }
.docs-home-caret {
  display: inline-block;
  width: 7px;
  height: 13px;
  margin-left: 6px;
  vertical-align: -2px;
  background: var(--on-ink-2);
  animation: docs-caret 1060ms step-end infinite;
}
@keyframes docs-caret { 50% { opacity: 0; } }
.docs-home-card-text { min-width: 0; display: grid; gap: 2px; }
.docs-home-card-text strong {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.docs-home-card-text small {
  font-size: 13px;
  line-height: 1.45;
  /* #777 kucuk metinde 4.2:1 kaliyor (axe color-contrast, 27.09.2026); #666 5.5:1. */
  color: #666;
  overflow-wrap: anywhere;
}
/* Ikon beyaz karoda (Entegrasyonlar modul satirlariyla ayni karo). */
.docs-home-card-head .ui-icon {
  box-sizing: content-box;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 10px;
  border-radius: var(--radius-control);
  background: #fff;
  box-shadow:
    0 0 0 1px var(--hair),
    var(--shadow-1);
}
.docs-home-card-arrow {
  flex: 0 0 auto;
  color: var(--tone-4);
  transition:
    translate var(--motion-base) var(--ease-settle),
    color var(--motion-quick) var(--ease-settle);
}
@media (hover: hover) {
  .docs-home-card:has(.docs-home-card-head:hover) {
    translate: 0 -2px;
    box-shadow:
      0 0 0 1px var(--hair-strong),
      var(--shadow-2);
  }
  .docs-home-card-code:has(.docs-home-card-head:hover) {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 8%),
      var(--shadow-3);
  }
  .docs-home-card-head:hover .docs-home-card-arrow {
    translate: calc(3px * var(--dir)) 0;
    color: var(--tone-1);
  }
  .docs-home-card-code .docs-home-card-head:hover .docs-home-card-arrow { color: #fff; }
  .docs-home-card-pages a:hover {
    background-color: rgb(33 33 33 / 4%);
    color: var(--tone-1);
  }
  .docs-home-card-pages a:hover::after {
    opacity: 1;
    translate: 0 0;
  }
  .docs-home-card-more:hover {
    box-shadow: inset 0 0 0 1px var(--tone-1);
    color: var(--tone-1);
  }
}
.docs-home-card-head:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--ring);
}
[dir="rtl"] .docs-home-card-arrow { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .docs-home-card:has(.docs-home-card-head:hover),
  .docs-home-highlights a:hover,
  .docs-home-card-head:hover .docs-home-card-arrow,
  .docs-home-card-pages a::after { translate: none; }
  .docs-home-caret { animation: none; }
}

@media (max-width: 1080px) {
  .docs-home-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docs-home-cards > li,
  .docs-home-cards > li:nth-last-child(2):nth-child(3n + 1),
  .docs-home-cards > li:last-child:nth-child(3n + 2),
  .docs-home-cards > li:last-child:nth-child(3n + 1) { grid-column: auto; }
  .docs-home-cards > li:last-child:nth-child(odd) { grid-column: span 2; }
  .docs-home-hero h1 { font-size: 44px; }
}
@media (max-width: 680px) {
  .docs-home-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .docs-home-cards > li:last-child:nth-child(odd) { grid-column: auto; }
  .docs-home-card-head { min-height: 76px; padding: 16px; }
  .docs-home-card-pages { margin-inline: 16px; }
  .docs-home-card-more { margin-inline: 16px; }
  .docs-home-code { margin-inline: 16px; font-size: 11px; }
  .docs-home-topics { padding: 36px 0 56px; }
  .docs-home-hero { padding: 16px 0 36px; }
  .docs-home-hero h1 { font-size: 34px; }
  .docs-home-search kbd { display: none; }
}

/* DOKUMAN GOVDE METNI TEK PUNTODA: 15px (29.10.2026'ya kadar 14px).
 *
 * Olculdu (26.09.2026): ayni sayfada uc ayri punto vardi -- paragraf 15, liste maddesi 16,
 * ornek tablo hucresi 16, dokuman tablosu 14, uyari satiri 14. Uc tanesi benim ekledigim
 * bloklardan geliyordu ve hicbiri bir olcege dayanmiyordu: kural yazilmadigi icin tarayici
 * varsayilani (16px) miras kaliyordu. Urun sahibi bunu ust uste bildirdi ve hakliydi.
 *
 * Olcek artik tek: govde 15px/1.7; uyari ve dokuman tablosu ayni puntoda. Basliklar ve kod
 * kutulari ayri register. Yeni bir blok eklendiginde punto yazmak gerekmiyor; miras dogru
 * puntodan geliyor.
 *
 * 29.10.2026, urun sahibi ("yazilar cok kucuk ya da buyuk olmasin"): 14px dokumanda kucuk
 * kaliyordu; govde tasarimin ilk degeri olan 15px'e cikti. Duz metin SUTUNUN TAM
 * GENISLIGINI kullanir: once 40em'lik bir satir siniri denendi, urun sahibi "yazilar
 * genisligi kullanmiyor, kullanmali" dedi ve kaldirildi. */
.docs-main .doc-section,
.docs-main .doc-section p,
.docs-main .doc-section li,
.docs-main .doc-section dt,
.docs-main .doc-section dd,
.docs-main .doc-section td,
.docs-main .doc-section th,
.docs-main .doc-section figcaption {
  font-size: 15px;
  line-height: 1.7;
}
/* Satir ici kod govde metninin icinde yasiyor: onunla ayni puntoda okunmali, yoksa satir
   yuksekligi her `code` gecen satirda degisiyor. Kod KUTUSU bunun disinda.
   Cascadia'nin x yuksekligi (0.518) DM Sans'tan (0.496) buyuk; ayni puntoda kod komsu
   sozcuklerden iri gorunuyordu. `font-size-adjust` x yuksekligini govdeye esitliyor;
   hesaplanan punto ayni kaliyor, tipografi kapisi tek olcegi gormeye devam ediyor. */
.docs-main .doc-section :not(pre) > code {
  font-size: 15px;
  font-size-adjust: 0.496;
  color: var(--tone-1);
}
/* Akan metindeki kod bir jeton: çok açık zemin, içte ince halka (ikon karolarının dili),
   3px köşe. Satır kırılırsa her parça kendi kenarını alır. Tablo hücresinde ve grafik
   altyazısında zemin yok: orada sütunun kendisi kod, jeton gürültü olurdu.
   Cascadia 400, 14px'te DM Sans gövdenin yanında kalın okunuyordu; 350 aynı puntoda dengeli
   (değişken yazı tipi; Consolas'a düşen sistemde 400 kalır). */
.docs-main .doc-section :is(p, li) > code,
.docs-main .doc-table td > code { font-weight: 350; }
.docs-main .doc-section :is(p, li) > code {
  padding: 1px 5px;
  border-radius: var(--radius-control);
  background: var(--desk-1);
  box-shadow: inset 0 0 0 1px var(--hair);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.docs-main .doc-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.docs-main .doc-table th,
.docs-main .doc-table td { padding: 14px 16px; text-align: start; border-bottom: 1px solid var(--hair); vertical-align: top; }
.docs-main .doc-table th { font-weight: 600; }
/* Başlık satırı çok açık bir bant. Renk yarı saydam: kayma gölgesi altından görünsün. */
.docs-main .doc-table thead th {
  border-bottom-color: var(--hair-strong);
  background: rgb(33 33 33 / 2.5%);
  color: var(--tone-3);
}
.docs-main .doc-table tbody tr:last-child > * { border-bottom: 0; }
.docs-main .doc-table tbody th { color: var(--tone-1); font-weight: 500; }
.docs-main .doc-table td { color: var(--tone-2); }
/* Telefonda üç ve dört sütunlu tablo ezilmez, kayar. Ölçüldü (29.10.2026): dört sütunlu
   yazı tipi tablosu 390px'te 4332px boyundaydı, açıklama sütunu 80px'e iniyordu. */
@media (max-width: 680px) {
  .docs-main .doc-table th,
  .docs-main .doc-table td { padding: 12px 14px; }
  .docs-main .doc-table:has(tr > :nth-child(3)) { min-width: 560px; }
  .docs-main .doc-table:has(tr > :nth-child(4)) { min-width: 640px; }
}
.docs-main .code-box pre {
  margin: 0;
  padding: 20px;
  border-radius: 0 0 var(--radius-surface) var(--radius-surface);
  color: rgb(245 245 245 / 84%);
  font-family: "Cascadia Code", Consolas, ui-monospace, Menlo, monospace;
  /* Kod kutusu 13px: Cascadia 15px'lik govdenin yaninda ayni boyda okunuyor, telefonda
     satirlar gec kiriliyor. */
  font-size: 13px;
  font-weight: 350;
  line-height: 1.75;
  letter-spacing: 0;
  font-variant-ligatures: none;
  tab-size: 2;
  overflow: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / 22%) transparent;
}
.docs-main .code-box pre:focus-visible {
  outline: 2px solid transparent;
  box-shadow: none;
}
@supports not selector(:has(*)) {
  .docs-main .code-box pre:focus-visible { box-shadow: inset 0 0 0 2px var(--on-ink-2); }
}
/* KOD KUTUSU (29.10.2026): koyu yuzey kaldi, agirligi gitti.
 *
 * Ayni malzeme dokuman ana sayfasindaki onayli kod kartinda: `--ink-900` uzerinde baslangic
 * kosesinden gelen yumusak isik, ustte 1px isik cizgisi, sayfadan `--shadow-2` ile kalkis.
 * Acik zemin de denendi: beyaz kagit uzerinde beyaz kod kutusu paragraflarin arasinda
 * kayboluyor, okur "kopyalayacagim sey nerede" diye sayfayi taradiginda tutunacak yer
 * kalmiyordu. Koyu yuzey dogruydu; agirlik duz #141414 levhadan, saf beyaz metinden, kutu
 * ici harf araligindan ve #333 baslik cizgisinden geliyordu. Satir araligi govdeyle ayni
 * ritme (1.7) indi; punto (14px) ayni. Bitisik harfler (Cascadia `=>`, `!=`) kapali:
 * okur ekranda gordugunu yaziyor. */
.docs-main .code-box {
  --code-glow-x: 0%;
  background:
    radial-gradient(560px 260px at var(--code-glow-x) 0, rgb(255 255 255 / 6%), transparent 70%),
    var(--ink-900);
  color: var(--on-ink-1);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 6%),
    var(--shadow-2);
}
[dir="rtl"] .docs-main .code-box { --code-glow-x: 100%; }
/* Istek ve yanit, Node ve C# gibi ardisik ornekler tek levha gibi birlesiyordu. */
.docs-main .code-box + .code-box { margin-block-start: 16px; }
/* Kutunun kendisi odak gostermez; kaydirilabilir ornek klavyeyle secilince halka kutunun
   disina, sayfanin ortak halkasiyla cizilir (arama kutusundaki focus-within dersi). */
.docs-main .code-box:has(> pre:focus-visible) {
  box-shadow:
    var(--ring),
    var(--shadow-2);
}
.docs-main .code-head {
  --ring: var(--ring-on-ink);
  min-height: 44px;
  padding-inline: 20px 8px;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  color: var(--on-ink-2);
}
.docs-main .code-label {
  min-width: 0;
  padding-block: 8px;
  font: 500 12px/1.3 "Cascadia Code", Consolas, ui-monospace, monospace;
  letter-spacing: 0.02em;
  color: var(--on-ink-2);
  overflow-wrap: anywhere;
}
/* Dugme 44px dokunma alani; gorunen kutu icinde 30px'lik ince cizgili bir yuva. Odak
   halkasi o yuvada cizilir, boylece 44px'lik gorunmez alanin etrafinda dolasmaz. */
.docs-main .copy-btn {
  position: relative;
  isolation: isolate;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding-inline: 10px;
  color: var(--on-ink-2);
  font-size: 14px;
  font-weight: 500;
  transition: color var(--motion-quick) var(--ease-settle);
}
.docs-main .copy-btn::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  mask: no-repeat center / 14px 14px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='6' width='13' height='15' rx='2.2'/%3E%3Cpath d='M6.5 6V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2'/%3E%3C/svg%3E");
}
.docs-main .copy-btn[data-copied]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.4 4.6 4.6L19 7.6'/%3E%3C/svg%3E");
}
.docs-main .copy-btn::after {
  content: "";
  position: absolute;
  inset: 7px 0;
  z-index: -1;
  border-radius: var(--radius-control);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%);
  transition:
    background-color var(--motion-quick) var(--ease-settle),
    box-shadow var(--motion-quick) var(--ease-settle);
}
.docs-main .copy-btn[data-copied] { color: var(--on-ink-1); }
.docs-main .copy-btn:focus-visible { box-shadow: none; }
.docs-main .copy-btn:focus-visible::after {
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 20%),
    var(--ring);
}
@media (hover: hover) {
  .docs-main .copy-btn:hover { color: var(--on-ink-1); }
  .docs-main .copy-btn:hover::after {
    background-color: rgb(255 255 255 / 6%);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 20%);
  }
}
/* Kopyalaninca ornegin kendisi bir an aydinlanir: neyin panoya gittigi gorulur. Hareketi
   azalt tercihinde tasarimin genel kurali animasyonu kapatir; onay isareti yine gorunur. */
.docs-main .code-box:has(.copy-btn[data-copied]) pre {
  animation: docs-code-copied var(--motion-slow) var(--ease-settle);
}
@keyframes docs-code-copied {
  from { background-color: rgb(255 255 255 / 5%); }
}
/* Arapca sayfada da ornek soldan akar: `ui-languages.css`in satir basina yon bulan
   `plaintext` kurali Arapca yorum satirini saga yaslayip kodun ortasinda kopariyordu. Satir
   LTR kalir, icindeki Arapca yorum yine kendi yonunde okunur. Yorum ve etiket duz yazi:
   Arapca, Japonca ve Korecede dilin arayuz harfiyle dizilir (Cascadia'nin es aralikli Arapcasi
   harfleri birbirinden ayiriyordu). */
[dir="rtl"] .docs-main .code-box :is(pre, code) { unicode-bidi: isolate; }
html:is(:lang(ar), :lang(ja), :lang(ko)) .docs-main :is(.code-label, pre.code .tok-c) {
  font-family: var(--locale-sans), sans-serif;
}
/* Ton: yalniz notr palet. Yapi (anahtar, bayrak, noktalama, yorum) geri cekilir; deger ve
   komut parlak kalir -- doldurulmus bir form gibi: etiket gri, yazilan murekkep. Sinifleri
   `docs-live.js` ekler; metin ayni kalir, Kopyala ayni metni alir. */
.docs-main pre.code .tok-c,
.docs-main pre.code .tok-p { color: var(--on-ink-3); }
.docs-main pre.code .tok-k,
.docs-main pre.code .tok-f { color: var(--on-ink-2); }
.docs-main pre.code .tok-s,
.docs-main pre.code .tok-n { color: var(--on-ink-1); }
.docs-main pre.code .tok-x { color: var(--on-ink-1); font-weight: 600; }
.docs-main .code-box pre ::selection,
.docs-main .code-box pre::selection {
  background: rgb(255 255 255 / 22%);
  color: #fff;
}
@media (max-width: 760px) {
  .docs-main .code-head { padding-inline: 16px 4px; }
  .docs-main .code-box pre { padding: 16px; }
}
.docs-main h1,
.docs-main h2,
.docs-main h3,
.docs-main .doc-section { scroll-margin-top: 112px; }
/* Makale ustbasligi sitenin etiket dili: kirmizi yazi (karsilama sayfasi, Entegrasyonlar).
   Murekkep tonunda kalan tek ustbaslik buydu. */
.docs-main > .eyebrow {
  color: var(--red-dark);
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* ── Doküman gövdesi: ritim, uyarı, sık takılınan yerler, sonraki sayfa (29.10.2026) ──
   Kapsam `.docs-shell`: onaylı karşılama sayfası ve hata sayfasının `div.docs-main`'i
   dışarıda. Punto ve satır yüksekliği yukarıdaki 14px/1.7 kuralında; burada yalnız aralık,
   renk ve yüzey var. Paragraf #686868, liste maddesi #212121'di: aynı metin iki tonda
   okunuyordu; ikisi de --tone-2. */
/* Bolum ayraci 32px: onceki paragrafin 17px'iyle baslik ustu ~49px. 54px'te 71px oluyordu,
   basliklar sayfada kopuk duruyordu (urun sahibi, 29.10.2026: "biraz fazla"). */
.docs-shell .docs-main > .doc-section { padding-top: 32px; }
.docs-shell .docs-main > h1 + .doc-section { padding-top: 20px; }
/* Basliksiz bolum oncekinin devami: ayrac payi yok, paragraf ritmi surer (urun sahibi,
   29.10.2026: "aradaki bosluklar fazla"). Olculdu: async'te iki paragraf arasi 88px'ti
   (17 + 54 + 17); 11 sayfada ayni yapi. Sonraki sayfa baglantisiyla baslayan bolum
   (`a`) kendi 24px'lik payini koruyor. */
.docs-shell .docs-main > .doc-section + .doc-section:has(> :is(p, ul, ol, div):first-child) {
  padding-top: 0;
}
/* Japoncada "/history、/assets、/marketplace/templates…" bölünmeyen tek bir sözcük gibi
   davranıyor ve 390px'te sayfayı 113px taşırıyordu (29.10.2026, base-address). Kod
   kutusu `white-space: pre` olduğu için bundan etkilenmez. Almancada tek sözcüklük başlık
   ("Tabellendatenersteller", 42px) 320px'te sayfayı 96px taşırıyordu; punto aynı, sözcük
   yalnız satıra sığmazsa kırılır. */
.docs-shell .docs-main > h1,
.docs-shell .docs-main .doc-section { overflow-wrap: break-word; }
.docs-shell .docs-main .doc-section p:not(.docs-sample-note) { color: var(--tone-2); }

/* Uyarı: gri kutu ve kırmızı sol çubuk yerine beyaz yüzey, ince halka, yumuşak gölge ve
   satır başında bilgi işareti. Kırmızı etiketlere ait, uyarıyı süslemiyor. */
.docs-shell .docs-main .notice {
  position: relative;
  margin: 24px 0;
  padding: 16px 20px;
  padding-inline-start: 48px;
  border: 0;
  background: var(--desk-0);
  font-size: 15px;
  line-height: 1.7;
  box-shadow:
    0 0 0 1px var(--hair),
    var(--shadow-1);
  color: var(--tone-2);
}
.docs-shell .docs-main .notice::before {
  position: absolute;
  top: 19px;
  inset-inline-start: 18px;
  width: 18px;
  height: 18px;
  background-color: var(--tone-3);
  content: "";
  mask: no-repeat center / 18px 18px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath stroke-width='2' d='M12 16.5v-4.8M12 7.9h.01'/%3E%3C/svg%3E");
}

/* Sık takılınan yerler sayfanın kapanışı: çerçevesiz, çok açık bir bant. Bölüm başlık
   kimliğinden tanınıyor (`*-mistakes`, 19 sayfada aynı ad). */
.docs-shell .docs-main > .doc-section[aria-labelledby$="-mistakes"] {
  margin-top: 40px;
  padding: 28px 32px;
  border-radius: var(--radius-surface);
  background: var(--desk-1);
}
.docs-shell .docs-main > .doc-section[aria-labelledby$="-mistakes"] > ul:last-child { margin-bottom: 0; }

/* Sonraki sayfa bağlantısı bir kart: karşılama sayfasındaki konu kartlarıyla aynı yüzey ve
   aynı kalkış; ok bağlantının yönünde kayar (`--dir`, Arapçada ters). */
.docs-shell .docs-main .doc-section > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: fit-content;
  min-width: min(100%, 280px);
  min-height: 52px;
  margin-top: 24px;
  padding: 12px 20px;
  border-bottom: 0;
  border-radius: var(--radius-surface);
  background: var(--desk-0);
  box-shadow:
    0 0 0 1px var(--hair),
    var(--shadow-1);
  color: var(--tone-1);
  font-weight: 500;
  text-decoration: none;
  transition:
    translate var(--motion-base) var(--ease-settle),
    box-shadow var(--motion-base) var(--ease-settle);
}
.docs-shell .docs-main .doc-section > a > span[aria-hidden="true"] {
  transition: translate var(--motion-base) var(--ease-settle);
}
@media (hover: hover) {
  .docs-shell .docs-main .doc-section > a:hover {
    translate: 0 -2px;
    box-shadow:
      0 0 0 1px var(--hair-strong),
      var(--shadow-2);
  }
  .docs-shell .docs-main .doc-section > a:hover > span[aria-hidden="true"] {
    translate: calc(3px * var(--dir)) 0;
  }
}
.docs-shell .docs-main .doc-section > a:focus-visible {
  outline: 2px solid transparent;
  box-shadow:
    0 0 0 1px var(--hair),
    var(--ring);
}
@media (prefers-reduced-motion: reduce) {
  .docs-shell .docs-main .doc-section > a,
  .docs-shell .docs-main .doc-section > a > span[aria-hidden="true"] { transition: none; }
  .docs-shell .docs-main .doc-section > a:hover,
  .docs-shell .docs-main .doc-section > a:hover > span[aria-hidden="true"] { translate: none; }
}
@media (max-width: 680px) {
  .docs-shell .docs-main > .doc-section { padding-top: 26px; }
  .docs-shell .docs-main > .doc-section[aria-labelledby$="-mistakes"] { margin-top: 32px; padding: 24px 20px; }
  .docs-shell .docs-main .notice { padding: 14px 16px; padding-inline-start: 44px; }
  .docs-shell .docs-main .notice::before { top: 17px; inset-inline-start: 16px; }
  .docs-shell .docs-table-sample { padding: 20px 16px; }
}
/* Bulunulan maddenin rengi 28.09.2026'da `docs/html_web/assets/css/dokumanlar.css`e tasindi:
   verilmis bir tasarim karariydi ve tasarim tarafinda durmasi gerekiyordu. */
.docs-nav-children a[hidden],
.docs-nav-group[hidden] { display: none; }

/* DAR EKRANDA KATLANIR GEZINME (29.10.2026). Telefonda butun agac makaleden once
   geliyordu: yaziya ulasmak icin 680 piksellik bir listeyi gecmek gerekiyordu. Ust barin
   altinda yapiskan tek bir satir bulunulan yeri gosteriyor (grup + sayfa); dokununca
   arama ve agac onun altinda bir sayfa gibi acilir. Sinifi `docs-live.js` koyuyor:
   betik calismazsa agac bugunku gibi acik kalir. Genis ekranda dugme yok, duzen ayni. */
.docs-nav-toggle {
  display: none;
}
@media (max-width: 760px) {
  /* Satir ust barin (71px) hemen altindan basliyor ve orada kaliyor: yapistiginda kaymiyor.
     Opak: arkadan gecen koyu kod kutusu ust barla arasinda cizgi gibi gorunuyordu. */
  .docs-shell:has(> .docs-sidebar.is-collapsible) {
    padding-top: 72px;
  }
  .docs-sidebar.is-collapsible {
    position: sticky;
    top: 71px;
    z-index: 30;
    max-height: none;
    margin: -1px -20px 28px;
    padding: 8px 12px;
    overflow: visible;
    border: 0;
    border-radius: 0 !important;
    background: #fff;
    box-shadow: 0 1px 0 var(--hair);
  }
  .docs-sidebar.is-collapsible .docs-nav-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 6px 8px;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--tone-1);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--motion-instant) var(--ease-settle);
  }
  .docs-sidebar.is-collapsible .docs-nav-toggle:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--ring);
  }
  .docs-nav-toggle-text {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
    gap: 2px;
  }
  .docs-nav-toggle-text small {
    color: var(--tone-4);
    font-size: 12px;
    line-height: 1.4;
  }
  .docs-nav-toggle-text strong {
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Sitenin ikon karosu: beyaz, ince cizgili, 3px. */
  .docs-nav-toggle-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-control);
    background: #fff;
    box-shadow:
      0 0 0 1px var(--hair),
      var(--shadow-1);
  }
  .docs-nav-toggle .docs-group-chevron {
    translate: 0 -2px;
    transition:
      transform var(--motion-quick) var(--ease-settle),
      translate var(--motion-quick) var(--ease-settle);
  }
  .docs-sidebar.is-open .docs-nav-toggle .docs-group-chevron {
    transform: rotate(225deg);
    translate: 0 2px;
  }
  .docs-sidebar.is-collapsible .docs-sidebar-panel {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    max-height: calc(100svh - 160px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px 20px 24px;
    border-radius: 0 0 var(--radius-surface) var(--radius-surface);
    background: #fff;
    box-shadow:
      0 1px 0 var(--hair),
      var(--shadow-3);
    scrollbar-width: thin;
    transition:
      opacity var(--motion-quick) var(--ease-settle),
      translate var(--motion-quick) var(--ease-settle);
  }
  .docs-sidebar.is-collapsible:not(.is-open) .docs-sidebar-panel {
    display: none;
  }
  @starting-style {
    .docs-sidebar.is-open .docs-sidebar-panel {
      opacity: 0;
      translate: 0 -4px;
    }
  }
  .docs-sidebar.is-collapsible .docs-sidebar-intro {
    margin-bottom: 16px;
  }
}
@media (max-width: 760px) and (hover: hover) {
  .docs-sidebar.is-collapsible .docs-nav-toggle:hover {
    background: rgb(33 33 33 / 4%);
  }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .docs-nav-toggle,
  .docs-nav-toggle .docs-group-chevron,
  .docs-sidebar.is-collapsible .docs-sidebar-panel {
    transition: none;
  }
}
/* Surum/guncelleme satiri govdenin geri kalaniyla ayni kenardan baslar. `justify-content`
   ortaliydi: govde ortalanmisken dogruydu, sola yaslandiktan sonra tek basina ortada
   kaliyordu. Flex satiri oldugu icin `text-align` yetmez, hizalama burada degisir. */
/* Surum ve guncelleme: belgenin kunyesi; govdeden ayri, sakin bir satir, degerler es
   aralikli (teknik bilgi). Altinda ince cizgi govdeyi baslatir. */
.legal-meta { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 8px 24px; padding-bottom: 20px; border-bottom: 1px solid var(--hair); color: var(--tone-4); font-size: 14px; }
.legal-meta b { color: var(--tone-2); font-family: "Cascadia Code", Consolas, ui-monospace, monospace; font-size: 13px; font-weight: 500; }
.contact-honeypot { display: none; }
.contact-form .validation-summary-valid { display: none; }
.contact-form .validation-summary-errors { color: var(--red-dark); font-size: 14px; }
.contact-form .validation-summary-errors ul { padding-left: 20px; }
.contact-form [aria-invalid="true"] { border-color: var(--red); }
.contact-form button:disabled { cursor: not-allowed; opacity: .55; }

/* One tax note for the whole price list, under the cards rather than inside them. Beside a
   54px figure it had to break onto its own line, crowded the card, and repeated the same
   sentence four times; the condition is not a property of any one plan. Sits in the same
   .wrap as the grid, so it is already the width of the cards. */
.pricing-tax-note {
  margin-top: 16px;
  text-align: center;
  /* 14px tasarimin kendi ince yazi basamagi -- plan kotalari da bu boyutta. 13 ise olcekte
     olmayan, benim uydurdugum bir ara degerdi. */
  font-size: 14px;
  color: var(--muted-ink);
}

/* Sozlesme sayfalarinin baslik alani ortali. Tasarimin `.page-head.center` degistiricisi bu is
   icin degil: adina ragmen iki kolonlu bir grid kurar ve text-align'i acikca `left` birakir --
   fiyat sayfasinin basligi ile yanindaki lead'i yan yana koymak icindir. Burada yanina konacak
   bir sey yok, yalnizca bir eyebrow ve bir baslik var.
   Eyebrow bir flex satiri (isaret noktasi + metin), onun icin text-align yetmez. */
.legal-page .page-head > .wrap {
  text-align: center;
}
.legal-page .page-head > .wrap > .eyebrow {
  justify-content: center;
}

/* Karsilastirma tablosu, canli surum. Tasarimin statik tablosunda her hucre elle yazilmisti;
   burada ayni hucreler plan katalogundan uretiliyor. Uc fark bilincli: */

/* 1) Onay/yokluk isareti metin degil ikon. Tasarim "✓" ve "—" karakterlerini kullaniyordu;
   ikisi de yazi tipine gore degisen, hizalanmasi oynak isaretler. Urunun kendi ikon
   takimindaki check ve minus maskeleri ayni gorsel dilde ve currentColor'dan renk aliyor,
   yani .compare-cell.yes / .muted renklendirmesi oldugu gibi calisiyor. */
.compare-cell > .compare-mark {
  width: 24px;
  height: 24px;
}

/* 2) Deger hucrelerinin punto'su. 21px tasarimdan geliyor ama orada hucrelerde yalnizca
   "100" gibi kisa sayilar vardi; canli tabloda ayni hucreye "En fazla 30 gun" ya da
   "Kota dolunca durur" giriyor ve 21px'te satir kiriyor. */
.compare-cell > span {
  font-size: 16px;
}

/* 3) Olmayan ozellikte yalnizca tek bir cizgi gorunur. Ikonun altina ayrica "—" yazan bir
   satir daha koymak ayni bilgiyi iki kez, iki farkli boyutta gosteriyordu. Metin duruyor
   ama yalnizca ekran okuyucu icin: aria-hidden ikonun tek basina birakacagi hucre, sesli
   okumada bos bir hucredir. */
/* Hucrenin KENDISI kapsayan blok olmali. Notun `position: absolute`i, hucre
   konumlandirilmamisken kapsayan blogunu `.compare-plans`in DISINDA bir ataya
   baglar; o kabin `overflow-x: auto` kirpmasi 1x1'lik kutuyu kirpmaz ve kutu
   sayfanin kaydirma alanina girer. Olculdu (15.09.2026): bes not x=520'ye
   dusuyordu ve `/pricing` 375px'te 145px yatay tasiyordu -- tasarimin ayni
   sayfasi tasimiyor. Tasarimda ayni desen var ama kacmiyor, cunku oradaki
   mutlak konumlu rozetin kapsayicisi (`.compare-plan-head`) `position: relative`.
   Bu satirin gorunume bedeli yok: 375px ve 1440px'te bolumun ekran goruntusu
   bayt bayt ayni kaldi. Kapi: `tests/ui/site-acceptance.mjs` (375px tasma). */
.compare-cell {
  position: relative;
}

.compare-cell > .compare-cell-note {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Header ve footer logolari ayni yuksekligi kullanir. width:auto, yeni
   442.2x130.4 SVG oranini masaustunde ve mobilde korur. */
body .header .brand .svg-asset,
body .footer .footer-wordmark img {
  width: auto;
  height: 44px;
}

/* Telefonda 40px (29.10.2026, urun sahibi): 36px'te 42px'lik dolu menu dugmesi logonun
   onune geciyordu; 40px'te logo ile dugme ayni agirlikta okunuyor. */
@media (max-width: 760px) {
  body .header .brand .svg-asset,
  body .footer .footer-wordmark img {
    height: 40px;
  }
}

/* Mobil footer: hukuki baglantilar ustteki iki sutunla hizalanir;
   dil secimi ve alt kisayollar ayni merkez cizgisini kullanir. */
@media (max-width: 760px) {
  .footer-revised .footer-top {
    padding-bottom: 32px;
  }

  .footer-revised .footer-social {
    width: fit-content;
    justify-self: center;
    justify-content: center;
    margin: 32px auto 0;
  }

  .footer-revised .footer-nav > div:last-child {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: inherit;
  }

  .footer-revised .footer-nav > div:last-child > h4 {
    grid-column: 1 / -1;
  }

  .footer-revised .footer-nav > div:last-child > a {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .footer-revised .footer-bottom {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
    padding-top: 0;
  }

  .footer-revised .footer-bottom > span {
    grid-column: 1;
    grid-row: 3;
  }

  .footer-revised .footer-preferences,
  .footer-revised .footer-backlinks {
    justify-self: center;
  }

  .footer-revised .footer-backlinks {
    grid-row: 2;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 100%;
    column-gap: 12px;
  }

  .footer-revised .footer-language-menu {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Compact primary groups leave room for translated account actions. Masaustunde aralik
   menu genisligi elverdikce acilir (urun sahibi 29.10.2026: "menuler cok yakin"); olculdu,
   en uzun dil Almanca: 1101 px'te 20 px aralikla 26 px, 1200 px'te 36 px aralikla 51 px bos
   alan kaliyor. */
body .header .nav {
  gap: 12px;
}

/* Baslik menusu 600'de. Tasarimin kendi style.css'i zaten `.header .nav a` icin 600 yaziyor;
   design.css onun ustune `body .header .nav a` ozgullugunde ve !important ile 500 koyup
   geri aliyor. Menunun yanindaki dugme ve altindaki aktif sayfa isareti daha kalin kaldigi
   icin 500 aradaki farki menunun aleyhine aciyordu. Secici ve !important, kaynaktaki
   bildirimi gecebilmek icin birebir ayni olmak zorunda. */
body .header .nav a,
body .header .login-link {
  font-weight: 600 !important;
}

/* Menü altındaki işaret tasarımın kendi ölçüsüne dönüyor: 2px ve satırın dibinde.
   `style.css` zaten böyle yazıyor; `design.css` onun üstüne `height: 1px; bottom: -4px`
   koyup işareti inceltip aşağı kaydırıyor. Aynı özgüllük, daha sonra yüklendiği için
   buradaki kazanıyor — `!important` gerekmiyor. */
.header .nav a:after {
  height: 2px;
  bottom: 0;
}

/* Yıllık ödeme notu: aya düşen karşılığın altındaki ikinci satır.
 *
 * Büyük rakam aylık karşılık, bu satır yıllık toplam. Sebep: anahtarın tek amacı aylıkla
 * karşılaştırmak ve $199'u $19'un yanına koymak okuyucuya bölme işlemi yaptırırdı.
 *
 * Satır fiyatın HEMEN altında. İki şey araya giriyordu. Biri: kart bir flex sütunu, yani
 * dikey boşluklar BİRLEŞMİYOR, fiyatın 28px'lik alt payı ile notun üst payı toplanıyordu.
 * Not görünürken fiyatın alt payı notun payına bırakılıyor; not gizliyken (aylık sekme)
 * tasarımın kendi 28px'i olduğu gibi kalıyor.
 *
 * Diğeri daha sinsiydi: not bir <p> idi ve tasarımın `.detail-pricing .plan p` kuralı plan
 * AÇIKLAMASI için yazılmış — `min-height: 63px` ve `margin-top: 12px`. Not o kuralı da
 * alıyor, hem 12px fazladan pay hem de altında 63px yüksekliğinde görünmez bir blok
 * bırakıyordu. Çözüm özgüllük yarışı değil: not artık <p> değil, o kuralın kapsamı dışında. */
.plan .price:has(+ [data-annual-note]:not([hidden])) {
  margin-bottom: 6px;
}
.plan-annual-note {
  margin: 0 0 22px;
  color: #6f6f6f;
  font-size: 14px;
}

/* Olumlu durum rengi. Kaynagi shared/tokens.css; tanitim kabugu o dosyayi YUKLEMIYOR --
   yuklerse tasarimin kendi :root'undaki --ink/--paper/--red degerlerinin ustune yazar ve
   butun sitenin paleti degisir. Iki deger burada tekrar ediyor, tokens.css'teki ile
   birebir ayni. */
:root {
  --ok: #12603a;
  --ok-soft: #e7f3ec;
}

/* Tasarruf rozeti BASLIGIN ICINDE, plan adinin hemen ardinda.
 *
 * `plan-pick` sinifini KULLANMIYOR, cunku o sinif iki sey birden soyluyor: kartin sag ust
 * kosesine mutlak konum ve kirmizi cerceve. Tasarruf rozeti oraya konuldugunda hem
 * "Onerilen" ile ayni noktaya biniyor hem de kirmizi gorunup uyari gibi okunuyordu.
 * Tasarruf olumlu bir bilgi; rengi de onu soyluyor. "Onerilen" kendi yerinde kaliyor ve Go
 * kartinda ikisi birlikte goruluyor: kosede o, basligin yaninda bu.
 *
 * Fiyatin yaninda da denendi: o satir dar ve rozet karttan tasip yanindaki kartin ustune
 * biniyordu. Baslik satiri hem genis hem de rozetin niteledigi seyin -- planin -- yaninda. */
.plan-saving {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 8px;
  border: 1px solid var(--ok);
  border-radius: 999px;
  background: var(--ok-soft);
  color: var(--ok);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: middle;
}

/* Ornek belge kagidi, icinde bulundugu panenin genisligine gore kuculuyor. Olcegi
   `index.js` olcup `--sample-paper-zoom` olarak yaziyor; bildirim burada duruyor ki
   isaretlemede satir ici bicim kalmasin (bkz. `no-inline-style`, 17.09.2026). */
/* Word kagidi da ayni olcegi alir: `index.js` olcegi iki paneye de yaziyordu ama
   bildirim yalniz PDF kabini seciyordu; telefonda Word'un 600 px'lik kagidi 324 px'lik
   panelde iki yandan kesiliyordu (28.10.2026). */
.pdf-paper-mount .sample-document.business-sheet,
.output-pane[data-pane="word"] > .sample-document.business-sheet {
  zoom: var(--sample-paper-zoom, 1);
}

/* Dokumanlardaki ornek cizimler. Grafikleri urunun kendi motoru ciziyor
   (`TemplateChartSamples`), tablonun olculeri `DocumentPrintRules`tan geliyor; bu kurallar
   yalnizca o orneklerin dokuman sayfasindaki kutusunu veriyor. */
.docs-chart-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.docs-chart-gallery figure {
  margin: 0;
}
.docs-chart-art {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  /* 6px köşe ve gri çerçeve sitenin dışındaydı: kart dili, 4px. */
  border-radius: var(--radius-surface);
  background: var(--desk-0);
  box-shadow:
    0 0 0 1px var(--hair),
    var(--shadow-1);
}
.docs-chart-art svg {
  display: block;
  width: 100%;
  height: auto;
}
.docs-chart-gallery figcaption {
  margin-top: 10px;
  text-align: center;
}
.docs-main .doc-section .docs-chart-gallery figcaption > code { color: var(--tone-3); }
/* Ornek tablo yatayda kaydirilir: dar ekranda sutunlari ezmek, olculeri gostermek icin
   duran bir ornegi yalanlar. */
.docs-table-sample {
  overflow-x: auto;
  margin-top: 24px;
  padding: 36px 32px;
  border-radius: var(--radius-surface);
  /* Örnek, basılmış bir kâğıt gibi masada durur: çok açık zemin ve kenara varmadan sönen
     nokta ızgarası (ana sayfa hero'sunun dili). Tablonun ölçüleri aşağıda, ona dokunulmadı. */
  background:
    radial-gradient(ellipse closest-side at 50% 50%, rgb(250 250 250 / 0%) 55%, var(--desk-1) 100%),
    radial-gradient(circle, rgb(33 33 33 / 16%) 1px, transparent 1.5px) 0 0 / 14px 14px,
    var(--desk-1);
}
/* ORNEK TABLONUN OLCULERI URUNUN VARSAYILANLARININ IKIZIDIR.
   Kaynak: PDFgine.Application.Templates.DocumentPrintRules
     DefaultTableHeaderHeightPixels  40
     DefaultTableRowHeightPixels     40
     DefaultTableCellPaddingPixels   10
     DefaultTableBorderWidthPixels    1
     DefaultTableBorderColor         #d9d9d9
     DefaultTableHeaderBackgroundColor #f3f1ec
     DefaultTableHeaderTextColor     #4b463d
   Baglayan sinama: DocsTableSampleTests. Bir varsayilan degisip buradaki deger
   degismezse sinama duser; yani dokuman urunun artik uretmedigi bir goruntu vaat edemez. */
.docs-table-sample table {
  border-collapse: collapse;
  min-width: 420px;
  margin-inline: auto;
  background: #fff;
  box-shadow: var(--shadow-paper);
}
.docs-table-sample th,
.docs-table-sample td {
  padding: 10px;
  border: 1px solid #d9d9d9;
}
.docs-table-sample th {
  height: 40px;
  background: #f3f1ec;
  color: #4b463d;
  text-align: left;
}
.docs-table-sample td {
  height: 40px;
}
.docs-sample-note {
  color: var(--tone-3);
  font-size: 14px;
}

/* Kartın özellik satırları: kota satırının altında, düğmeden önce.
 *
 * NEDEN VAR. Kartta fiyatın altında tek bir satır vardı ve o da sayfa sayısıydı; müşteri
 * $19 ile $299 arasındaki farkı sayı olarak görüyor, değer olarak görmüyordu (ürün sahibi,
 * 26.09.2026). Karşılaştırma tablosu aşağıda duruyor ama kartı okuyan kişi oraya inmeden
 * karar veriyor.
 *
 * YER ZATEN BOŞTU. Ölçüldü: 1280px'te kota satırı ile düğme arasında 85,4 piksel
 * kullanılmayan boşluk vardı (grid kartları eşit yüksekliğe çekiyor). Dört satır bunun
 * 39'unu alıyor, geriye 46 piksel kalıyor; kartlar 520'den 596,6 piksele çıkıyor ve dördü
 * de eşit kalıyor. Dört genişlikte (375 / 768 / 1280 / 1440) sayfa taşması ve kart içi
 * taşma yok, her satır tek satıra sığıyor.
 *
 * `plan-quotas` İÇİNE EK SATIR DEĞİL. O liste sayı dili: `dd` 21px ve tabular-nums. Özellik
 * satırları 14px metin; aynı `dl`'e konulsalar kartta dört sayı daha varmış gibi görünürdü.
 *
 * `margin-top: auto` YOK: satırlar kotaya yapışık durmalı, boşluk düğmenin üstünde kalmalı.
 * Aksi halde kısa listeli kart (Ücretsiz, üç satır) satırlarını düğmeye yapıştırıp kotayı
 * havada bırakırdı. */
.plan-highlights {
  /* ALT BOSLUK DUGMEYE NEFES PAYI. Olculdu (26.09.2026): en uzun listeli kartta son madde
     dugmeye DEGIYORDU (nefes payi 0), kisa listeli kartta 48 piksel vardi -- yani bosluk
     listenin uzunluguna gore degisiyordu, bir olcege gore degil. Alt bosluk sabit; gerisi
     kartin kendi bos alani. */
  /* UST BOSLUK 0 (urun sahibi, 26.09.2026): kota blogu ile ozellik listesi arasindaki
     ayrimi zaten ust cizgi ve ic bosluk veriyor; bir de dis bosluk koymak araligi
     iki kat gosteriyordu. */
  margin: 0 0 24px;
  padding: 14px 0 0;
  /* KOTA SATIRINDAN GORSEL AYRIM. Ilk yazilista yalnizca bir ust bosluk vardi ve kota ile
     ozellikler AYNI BLOK gibi okunuyordu (urun sahibi, ekran goruntusu 26.09.2026). Cizgi
     tasarimin kendi sac teli tonunda; kart cercevesiyle ayni dil. */
  border-top: 1px solid #e5e5e5;
  list-style: none;
  color: #4a4a4a;
  font-size: 14px;
  line-height: 20px;
}

/* MADDE ISARETI VE SARMA HIZASI BIR ARADA COZULUYOR.
 *
 * Satirlar ciplak metin olarak duruyordu; uzun bir satir iki satira dustugunde ikinci satir
 * madde isaretinin altina kayiyor ve komsu maddeyle karisiyordu. Her madde iki kolonlu bir
 * grid: isaret sabit kolonda, metin kendi kolonunda sariyor -- yani ikinci satir birincinin
 * ALTINA degil HIZASINA geliyor (asili girinti). `list-style` ile bu yapilamaz. */
.plan-highlights li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.plan-highlights li + li {
  margin-top: 8px;
}

/* Isaret bir onay: "bu plana gecince acilan sey". Nokta da denendi, ama nokta bir liste
   suslemesi; onay bir kazanimi soyluyor ve kartin isi tam olarak o. */
.plan-highlights li::before {
  content: "";
  width: 16px;
  height: 20px;
  background-color: var(--red);
  /* Cizim satir icine gomuluyor: tanitim kabugu ikon dosyalarini ayri istekle cekiyor ve
     kartta dort ikon dort istek demekti. Maske ile renk tek yerden (`--red`) geliyor. */
  mask: no-repeat center / 14px 14px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.2 5.2L20 7'/%3E%3C/svg%3E");
}

/* "Önerilen" rozeti: kartın ÜST KENARINA oturan şerit.
 *
 * Tasarım rozeti kartın sağ üst köşesine mutlak konumla koyuyor ve üst başlıkla aynı satıra
 * denk geliyor. Ölçüldü (26.09.2026): dört genişlikte ve İKİ DİLDE de metnin üstüne biniyor —
 * TR'de 66,5–67,5 piksel, İngilizce'de 111,4–112,4 (çünkü "Recommended" "Önerilen"den uzun).
 * Kart iç genişliği 218–270 piksel; üst başlık metni + rozet 256 (TR) / 317 (EN) istiyor,
 * yani yan yana sığmıyorlar.
 *
 * İki aday ölçüldü. Akış satırı (rozet mutlak konumdan çıkıp üst başlıkla aynı satıra girer)
 * yalnız metin kısa kaldığında çalışıyor: 1280 pikselde ve İngilizce'de alt satıra kayıp
 * köşeden çıkıyordu. Şerit metin uzunluğundan BAĞIMSIZ, o yüzden seçildi (ürün sahibi
 * onayı): "bir gün sessizce bozulan" çözüm değil.
 *
 * YER HER KARTTA AYRILIYOR, yalnız öne çıkanda boyanıyor. Yoksa öne çıkan kartın içeriği
 * 30 piksel aşağıdan başlar ve fiyat satırları kartlar arasında hizasını kaybeder — ürün
 * sahibinin aynı turda bildirdiği kusurun ta kendisi. */
/* SECICI TASARIMIN KENDI SECICISIYLE AYNI. Ilk yazilista `.detail-pricing .plan` yazildi ve
   tasarimin `.detail-pricing .pricing-grid .plan` kurali (34px / mobilde 30px) daha ozgul
   oldugu icin kazandi: serit yine metnin uzerine biniyordu. Ozgulluk yarisi degil, ayni
   seviyeden konusmak -- ve iki kirilim icin ayri deger, cunku tasarimin dolgusu da ayri. */
.detail-pricing .pricing-grid .plan {
  padding-top: 68px;
}

@media (max-width: 900px) {
  .detail-pricing .pricing-grid .plan {
    padding-top: 64px;
  }
}

/* ACIKLAMA ALANI SABIT: uc satirlik yer ayriliyor.
 *
 * Olculdu (26.09.2026): aciklamalar 2 ile 4 satir arasinda oynuyordu (49,5 / 63 / 74,25 / 99
 * piksel) ve fiyat satirlari kartlar arasinda farkli yerden basliyordu. Tasarimin kendi
 * `min-height: 63px` degeri yalnizca bazi kartlara uygulaniyordu; burada dordune de ayni
 * rezerv veriliyor. Metinler de uc satira sigacak kadar kisaltildi -- alan hizayi garanti
 * ediyor, kisaltma satirin bos gorunmesini engelliyor. */
.detail-pricing .pricing-grid .plan > p {
  min-height: 75px;
}
.detail-pricing .plan .plan-pick {
  top: 0;
  right: 0;
  left: 0;
  padding: 7px 0;
  border: 0;
  border-radius: 4px 4px 0 0;
  background: var(--red);
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.4;
}


/* KOTA SATIRI DA SABİT: iki satırlık yer ayrılıyor.
 *
 * Üst başlık ve açıklama hizalandıktan sonra kalan tek kayma buradaydı (ölçüldü 26.09.2026,
 * İngilizce 768 ve 1440 pikselde): Max'in kotası — "25,000 document pages / month" —
 * iki satıra düşüyor, komşularınınki tek satırda kalıyordu; 55'e karşı 75 piksel. Sonuç,
 * özellik listelerinin kartlar arasında 20 piksel farklı yerden başlamasıydı. Sayı
 * büyüdükçe satır uzuyor, yani bu kendiliğinden geçen bir durum değil. Üstteki iki alanla
 * aynı çözüm: yer ayrılıyor, metin değil. */
/* KOTA BLOGU HER KARTTA AYNI YAPIDA: etiket ustte, sayi altta, sabit yukseklik.
 *
 * Tasarim etiketi ve sayiyi YAN YANA koyuyor (`minmax(0,1fr) auto`). Olculdu (26.09.2026):
 * dar kartta uzun etiket sariyor ve sayinin genisligi kart basina degistigi icin blok
 * kimi kartta tek, kimisinde iki satir oluyordu -- Ingilizce 768 ve 1440 piksellerde
 * "Max'te iki satir, otekilerde tek". Hizali gorunen kart tesadufen hizaliydi.
 *
 * Dikey yigin bu degiskeni ortadan kaldiriyor: etiket her kartta ayni genisligi buluyor,
 * yani ayni sekilde sariyor. Sabit yukseklik de bir cevirinin uzamasina karsi duruyor.
 * Tasarim kaynagina ayni degisiklik yazilacak; kapi bu yuzden farki bildirecek. */
.detail-pricing .plan-quotas > div,
.detail-pricing .plan.featured .plan-quotas > div {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  align-items: start;
  gap: 2px;
  min-height: 74px;
}

/* EDITOR MAKETI ARTIK TASARIMDA. Isaretleme `docs/html_web/platform.html`, stil
   `docs/html_web/assets/css/platform.css` icinde (28.09.2026). Onceki hali bu dosyadaydi ve
   tasarim kaynagi hala ESKI maketi (`studio-*`) tasiyordu -- iki taraf iki ayri maket
   gosteriyordu. Kopyayi burada tutmak, ayrisabilecekleri tek noktaydi. */

/* Doküman listeleri okunaklı olsun.
   ÖLÇÜLDÜ (26.09.2026): tasarımın genel `ul { list-style: none; padding: 0 }` kuralı
   doküman gövdesindeki listeleri de sıfırlıyordu; "sık takılınan yerler" maddeleri
   işaretsiz ve aralıksız, yani üst üste binmiş bir metin bloğu olarak çıkıyordu
   (madde arası ölçüldü: 0px). Ritim paragrafınkiyle aynı: 17px dış boşluk, madde
   arası 8px, punto zaten 14px.
   KAPSAM YALNIZ SINIFSIZ LİSTELER: `docs-chart-gallery` ve `docs-start-links`
   tasarımın kendi ızgaraları ve onlara dokunulmuyor. */
.docs-main .doc-section ul:not([class]),
.docs-main .doc-section ol:not([class]) {
  margin: 17px 0;
  /* Mantıksal girinti: Arapçada işaret sağda; `padding-left` girintiyi yanlış kenara
     veriyordu. */
  padding-inline-start: 20px;
  color: var(--tone-2);
  list-style: disc;
}
.docs-main .doc-section ol:not([class]) {
  list-style: decimal;
}
.docs-main .doc-section ul:not([class]) > li + li,
.docs-main .doc-section ol:not([class]) > li + li {
  margin-top: 8px;
}
.docs-main .doc-section ul:not([class]) > li::marker,
.docs-main .doc-section ol:not([class]) > li::marker {
  color: #999;
}
/* Sıra numarası bir adım: işaretten koyu, rakamlar eşit genişlikte. */
.docs-main .doc-section ol:not([class]) > li::marker {
  color: var(--tone-3);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Arama sonuç paneli: kutunun altında, sayfanın akışını itmeden. */
.docs-search-results {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: 360px;
  overflow-y: auto;
  padding: 6px;
  border: 0;
  border-radius: var(--radius-surface);
  background: #fff;
  box-shadow:
    0 0 0 1px var(--hair),
    var(--shadow-3);
}
.docs-search-results[hidden] { display: none; }
.docs-search-results a {
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  border-radius: var(--radius-control);
  color: #222;
  text-decoration: none;
}
.docs-search-results a strong { font-size: 14px; font-weight: 650; line-height: 1.4; }
.docs-search-results a small { color: #666; font-size: 12px; }
.docs-search-results a:hover,
.docs-search-results a.is-active { background: rgb(33 33 33 / 5%); }
.docs-search-results a:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--ring);
}
.docs-search-none { margin: 0; padding: 10px 12px; color: #666; font-size: 14px; }
/* Kenar çubuğundaki kutu da aynı paneli kullanıyor; kutu göreli konumlanıyor. */
.docs-sidebar .docs-search { position: relative; }
/* Üst katmanda açılan panel (docs-search.js): görünüm alanına sabit, konumu betikten;
   kayan kenar çubuğu onu kesmesin. */
.docs-search-results[popover] {
  position: fixed;
  inset: auto;
  margin: 0;
  color: inherit;
}

/* Fiyat kartlarinin ritmi (urun sahibi, 26.09.2026).
   - Plan adi 500 agirlikta soluktu; kartin en onemli sozcugu o.
   - Kota blogunun alt boslugu ustbaslik kalkinca fazlaligi buyuttu.
   - Donem anahtari hap bicimi: icindeki dugmeler de ayni yaricapta olmali, yoksa
     secili dugme kabin kosesinden tasiyor. */
.detail-pricing .plan h2 {
  font-weight: 800;
}
.detail-pricing .plan-quotas {
  margin: 0;
}
.detail-pricing .billing-switch {
  border-radius: 999px;
}
.detail-pricing .billing-switch button {
  border-radius: 999px;
}

/* Plan secme yardimcisinin sonucu: ad + fiyat, altinda o planin ICERDIKLERI.
   Panel tek satirla bos kaliyordu (urun sahibi, 27.09.2026). */
.estimate-facts {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.estimate-facts li {
  position: relative;
  padding-left: 20px;
  color: #4a4a4a;
  font-size: 14px;
  line-height: 20px;
}
.estimate-facts li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red, #b82027);
}
.estimate-action {
  display: inline-flex;
  margin-top: 14px;
  font-size: 14px;
}
.estimate-action[hidden] { display: none; }

/* Anasayfa "Belgenin her asamasi" kartlarinin fotografi.
   04.10.2026 · urun sahibi karari. Uc kart icin gercek fotograf cektirildi (kisi urunu
   kullaniyor, ekranda urunun kendi arayuzu ve dogru dil). Fotograf `.tile-art` kutusunun
   ICINE, tasarimin cizdigi maketin UZERINE biniyor.

   NEDEN MAKET SILINMEDI. Iki olculmus sebep:
   1. Maketin dokuz metni (`web.copy.7967ab6f3e00`, `9aee6b1bcdf6`, `5cde0f1298f4`,
      `a0723218fce6`, `e904c9ccfa42`, `c35b21d6ca39`, `787eeb51f267`, `4b6a3fa09acd`,
      `5fb222e8c0cd`) BASKA HICBIR YERDE gecmiyor -- tarandi. Isaretleme silinseydi dokuz
      anahtar oksuz kalir ve `quality:i18n` ile `SiteCopyIndex.cs` ayrisirdi.
   2. Maket, fotograf inmezse geride duran seydir. `alt=""` tasiyan bir resim yuklenemezse
      tarayici hicbir sey cizmez; altindaki maket gorunur kalir ve kutu bos durmaz.
   Fotograf begenilmezse geri alma su an uc `<partial>` satirini silmek.

   TASARIM KAYNAGINA DOKUNULMADI. `design.css` maketi ciziyor ve oyle kaliyor; tasarim
   referans sayfasi (`/site-design`, `docs/html_web/index.html` aynasi) maketi gostermeye devam
   ediyor. Fotograf URUNUN icerigi, tasarimin degil -- bu yuzden kural urunun dosyasinda.
   `.tile-photo` tasarimda hic yok, yani bu kural tasarimin hicbir ogesinin hesaplanmis
   bicimini degistirmiyor.

   OLCU TASARIMDAN: kutu yuksekligi `design.css` icinde sabit (masaustu 190px, 760px alti
   180px). Resim kutuyu doldurur, kutuyu BUYUTMEZ -- bu yuzden `position: absolute` ve
   `inset: 0`; akista yer tutsaydi kart uzar ve duzen kayardi.

   `object-position` ortanin bir tik ustu: kaynagin orani 1,75, kutununki masaustunde 1,85
   ve telefonda 1,68 -- yani kirpma her iki eksende de %5'in altinda. Ortalamak kisinin
   yuzunu de ekrani da kutuda tutuyor; ust tarafa kaydirmak tavani, alta kaydirmak masayi
   buyutuyordu. */
.tile-art .tile-photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

/* Let all language choices fit naturally; only the actual viewport limits them.
   Genislik dil adlarina gore (29.10.2026, urun sahibi: "fazla genis"); yuzey ustteki acilir
   menulerle ayni: cercevesiz, ince halka, yumusak golge, 4px. Ust bar ve footer ayni menu. */
.footer-language-menu {
  width: max-content;
  min-width: 200px;
  max-height: var(--language-menu-available-height, calc(100dvh - 32px));
  padding: 6px;
  border: 0;
  border-radius: var(--radius-surface);
  /* Yalniz --shadow-3: kendi ince halkasini (%6) zaten tasiyor; ustune eklenen %10'luk halka
     kenari koyulastiriyordu (urun sahibi: "border fazla koyu"). Ust bardaki menulerle ayni. */
  box-shadow: var(--shadow-3);
  overscroll-behavior: contain;
}

@media (min-width: 761px) {
  html[dir="rtl"] .footer-revised .footer-language-menu { right: 0; left: auto; }
}

/* Desktop language control shares the footer choices and opens below the header. */
.header-language { flex: 0 0 auto; }
.header-language summary { justify-content: center; width: 40px; min-height: 44px; color: #202020; border-radius: 3px; }
.header-language summary img { width: 20px; height: 20px; filter: brightness(0); }
.header-language summary:hover { background: #f2f2f2; }
.header-language summary:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
.header-language .footer-language-menu { top: calc(100% + 10px); bottom: auto; left: auto; right: 0; }
.header-language .footer-language-menu a { min-height: 44px; }

/* The three primary groups fit beside translated account actions. The globe
   stays available when the navigation changes to its mobile disclosure. */
body .header .header-in,
body .header.scrolled .header-in { gap: 12px; }
body .header .account-nav { gap: 12px; }
body .header .account-nav .btn { padding-inline: 16px; gap: 8px; }
/* Sayfanin kendi "Ucretsiz basla"si (ana sayfa hero'su) ekrandayken ust bardaki ayni dugme
   geri cekilir: cerceveli, murekkep yazili. Hero dugmesi ekrandan cikinca (`is-loud`,
   script.js) doluya doner. Gecis dugmenin kendi renk gecisiyle (design.css `.btn`). */
body:has([data-hero-cta]) .header .account-nav [data-header-cta]:not(.is-loud) {
  border-color: var(--hair-strong);
  background: transparent;
  color: var(--tone-1);
}
@media (hover: hover) {
  body:has([data-hero-cta]) .header .account-nav [data-header-cta]:not(.is-loud):hover {
    border-color: var(--tone-1);
    background: transparent;
  }
}
/* Masaustu menu 1101 px'ten itibaren (tasarimin esigi, design.css `max-width: 1100px`). Sirket
   grubu eklenince (29.10.2026) uzun dillerde 1001-1099 px'te baslik tasiyordu: de 61 px. */
@media (max-width: 1100px) {
  body .header .nav { display: none; }
  body .header .account-nav { display: flex; margin-inline-start: auto; }
  body .header .account-nav > a { display: none; }
  body .header .menu-button { display: grid; margin: 0; }
  .header .mobile-nav.open:not([hidden]) { display: block; }
}
@media (max-width: 760px) {
  body .header .mobile-nav .mobile-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  body .header .mobile-nav .mobile-actions .btn {
    min-width: 0;
    white-space: normal;
    text-align: center;
    justify-content: center;
    gap: 12px;
  }
  body .header .account-nav .header-language .footer-language-menu {
    position: fixed;
    top: 80px;
    right: 20px;
    bottom: auto;
    left: 20px;
    width: auto;
    max-width: none;
    max-height: var(--language-menu-available-height, calc(100dvh - 104px));
    transform: none;
  }
}
/* Shared native disclosures: desktop dropdowns and inline mobile submenus. */
.header-nav-group { position: relative; flex: 0 0 auto; }
.header-nav-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  line-height: 30px;
  white-space: nowrap;
}
.header-nav-group > summary::-webkit-details-marker { display: none; }
.header-nav-group > summary::after { display: none; }
.header-nav-chevron { display: block; width: 12px; height: 8px; flex: 0 0 auto; margin-inline: 4px; transition: transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.header-nav-group[open] > summary .header-nav-chevron { transform: rotate(180deg); }
.header-nav-group > summary:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
.header-nav-menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 8px);
  /* Menudeki basliklar nav etiketinin tam altinda baslar: ic bosluk 8 + oge bosluk 12 +
     ikon 32 + aralik 12 = 64 px. Fare asagi indiginde dogrudan metnin ustune gelir
     (urun sahibi, 28.10.2026). RTL'de mantiksal ozellik aynalar. */
  inset-inline-start: -64px;
  width: 340px;
  min-width: 0;
  max-width: calc(100vw - 40px);
  margin: 0;
  padding: 8px;
  list-style: none;
  color: #202020;
  background: #fff;
  /* Katman (E4): kenarlik yerine golgenin icindeki %6 halka; #ddd agir duruyordu. */
  border: 0;
  border-radius: 4px;
  box-shadow: var(--shadow-3);
}
.header-nav-group[open] { z-index: 70; }

.header .header-nav-menu a::after { display: none; }
.header .header-nav-menu a:hover,
.header .header-nav-menu a:focus-visible { color: #202020; background: rgb(17 17 17 / 4%); }
@media (min-width: 1101px) {
  body .header .nav,
  body .header .account-nav { display: flex; }
  body .header .nav { flex: 0 0 auto; gap: 20px; }
  body .header .menu-button,
  .header .mobile-nav.open:not([hidden]) { display: none; }
}
@media (min-width: 1200px) {
  body .header .nav { gap: 36px; }
}
@media (max-width: 1100px) {
  .header .mobile-nav { max-height: calc(100svh - 82px); overflow-y: auto; }
  .mobile-nav .header-nav-group > summary { min-height: 51px; border-top: 1px solid #ddd; font-size: 18px; font-weight: 500; }
  .mobile-nav .header-nav-menu {
    position: static;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0 0 12px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .header .mobile-nav .header-nav-menu a { min-height: 44px; border: 0; font-size: 16px; }
}
@media (max-width: 760px) {
  .header .mobile-nav { max-height: calc(100svh - 70px); }
}

/* Mobil menu (28.10.2026, Baski Masasi). Acikken arka sayfa kayiyordu (1500 -> 3420),
   perde ve gecis yoktu; ustte iki cizgi ust uste biniyor, "Fiyatlar" satiri digerlerinden
   kucuk kaliyor, "Giris yap" cercevesiz bir metne donuyordu. Simdi: murekkep perde ve
   kaydirma kilidi (script.js `site-menu-open`), 240 ms yumusak acilis, tek satir dili,
   altta esit iki dugme. Perde header'in (z-index 50) altinda durur. */
@media (max-width: 1100px) {
  html.site-menu-open { overflow: hidden; }
  html.site-menu-open body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgb(17 17 17 / 40%);
    animation: site-scrim-in var(--motion-base) var(--ease-settle);
  }
  .header .mobile-nav { border-top: 0; }
  .header .mobile-nav.open:not([hidden]) {
    box-shadow: var(--shadow-3);
    animation: site-menu-in var(--motion-base) var(--ease-settle);
  }
  .mobile-nav .header-nav-group:first-child > summary { border-top: 0; }
  .mobile-nav .header-nav-group > summary { min-height: 56px; }
  .header .mobile-nav > a {
    min-height: 56px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    font-size: 18px;
    font-weight: 500;
  }
  /* Fiyatlar'dan sonra Sirket grubu (29.10.2026): iki cizgi ust uste binip 2px olmasin;
     liste son grubun altinda kapanir (acik alt menu de cizginin ustunde kalir). */
  .header .mobile-nav > a + .header-nav-group > summary { border-top: 0; }
  .header .mobile-nav > .header-nav-group:last-of-type { border-bottom: 1px solid #ddd; }
  /* Iki dugme yan yana sigarsa esit paylasir, sigmazsa (320 px, uzun ceviriler)
     alt alta tam genislige gecer; etiket hicbir zaman iki satira kirilmaz. */
  body .header .mobile-nav .mobile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
  }
  body .header .mobile-nav .mobile-actions .btn {
    flex: 1 0 auto;
    min-height: 48px;
    padding-inline: 16px;
    white-space: nowrap;
  }
  body .header .mobile-nav .mobile-actions .btn-outline {
    border: 1px solid var(--hair-strong);
    background: #fff;
    color: var(--tone-1);
  }
}
@keyframes site-menu-in {
  from { opacity: 0; translate: 0 -6px; }
}
@keyframes site-scrim-in {
  from { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .header .mobile-nav.open:not([hidden]),
  html.site-menu-open body::after { animation: none; }
}

/* Keep each row compact while giving the destination a useful explanation. */
.header .header-nav-menu a {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 4px;
  min-height: 44px;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: start;
  transition: background-color var(--motion-quick) var(--ease-settle);
}
.header-nav-item-icon { display: grid; place-items: center; width: 32px; height: 32px; background: rgb(17 17 17 / 5%); border-radius: 4px; transition: background-color var(--motion-quick) var(--ease-settle), box-shadow var(--motion-quick) var(--ease-settle); }
.header-nav-item-icon img { display: block; width: 20px; height: 20px; object-fit: contain; }
.header-nav-item-copy { display: grid; min-width: 0; gap: 4px; }
.header-nav-item-title { font-size: 16px; font-weight: 600; line-height: 1.4; }
.header-nav-item-description { color: #737373; font-size: 14px; font-weight: 400; line-height: 1.5; }
.header .header-nav-menu a:hover .header-nav-item-icon,
.header .header-nav-menu a:focus-visible .header-nav-item-icon { background: #fff; box-shadow: 0 0 0 1px var(--hair), var(--shadow-1); }
/* Native details keeps its no-script fallback. Modern browsers transition the
   native content wrapper; JS makes closing links inert immediately. */
@supports selector(details::details-content) {
  .header-nav-group::details-content {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
    transform-origin: top left;
    transition: opacity 200ms ease, transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1), content-visibility 200ms allow-discrete;
  }
  html[dir="rtl"] .header-nav-group::details-content { transform-origin: top right; }
  .header-nav-group[open]::details-content {
    content-visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    /* Opening content must enter the focus order before its first paint. */
    transition: opacity 200ms ease, transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  @starting-style {
    .header-nav-group[open]::details-content { opacity: 0; transform: translateY(6px) scale(0.98); }
  }
}
@media (max-width: 1100px) {
  /* Alt menu ust satirlarla ayni sol hizada: ikon, etiketin oldugu cizgiden baslar. */
  .header .mobile-nav .header-nav-menu a { justify-content: normal; padding: 12px 0; }
  .header .mobile-nav .header-nav-menu a:hover { background: transparent; }
  .mobile-nav .header-nav-item-description { font-size: 14px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .header .mobile-nav { padding-inline: 56px; }
}
/* Korecede sozcuk ortasindan kirilmaz; Japonca basliklar ifade sinirindan kirilir
   (29.10.2026, Hakkimizda incelemesi; ana sayfada da "ド/キュメント" bolunuyordu). */
:lang(ko) { word-break: keep-all; overflow-wrap: break-word; }
:lang(ja) :is(h1, h2, h3) { word-break: auto-phrase; }
@media (prefers-reduced-motion: reduce) {
  .header-nav-chevron,
  .header-nav-group::details-content,
  .header-nav-group[open]::details-content { transition: none; }
}

@media (min-width: 1101px) {
  .header .nav .header-nav-chevron { margin-inline-end: 0; }
  .header-nav-item-description { font-size: 12px; }
  .header-nav-item-copy { gap: 0; }
}

/* ── Fiyatlar cilasi (29.10.2026) ─────────────────────────────────────────────────────
   Yapi, metinler ve fiyatlar ayni. "Her yer kirmizi" hissi bu sayfada en yogundu: dolu
   kirmizi "Onerilen" seridi, kirmizi kart kenari ve dugmesi, kartlarda ve tabloda onlarca
   kirmizi onay, tablo gruplarinin onunde kirmizi nokta ve pembe bir sutun. Kirmizi artik
   yalniz etikette (ustbaslik ve "Onerilen" yazisi); vurgu murekkep halka ve kalkisla.
   Gri cerceveli kutular sitenin cok acik bandina doner. */

/* Donem anahtari: hap bicimi urun sahibinin karari (26.09.2026), korunuyor. Secim artik
   dugmeden dugmeye ziplamiyor; murekkep bir parca altta kayiyor. */
body.detail-pricing .billing-switch {
  position: relative;
  isolation: isolate;
  border-color: var(--hair);
  background: var(--desk-1);
}
body.detail-pricing .billing-switch::before {
  position: absolute;
  top: 4px;
  bottom: 4px;
  inset-inline-start: 4px;
  z-index: -1;
  width: calc(50% - 6px);
  content: "";
  border-radius: 999px;
  background: var(--ink-900);
  box-shadow: var(--shadow-1);
  transition: translate var(--motion-gentle) var(--ease-settle);
}
body.detail-pricing .billing-switch:has(button[data-live-billing="yearly"][aria-pressed="true"])::before {
  translate: calc(100% * var(--dir) + 4px * var(--dir)) 0;
}
body.detail-pricing .billing-switch button {
  color: var(--tone-3);
  transition: color var(--motion-quick) var(--ease-settle);
}
body.detail-pricing .billing-switch button[aria-pressed="true"] {
  background: transparent;
  color: #fff;
}
@media (hover: hover) {
  body.detail-pricing .billing-switch button[aria-pressed="false"]:not(:disabled):hover {
    color: var(--tone-1);
  }
}

/* Onerilen plan: serit ayni yerde (urun sahibi onayi, 26.09.2026) ama dolu kirmizi degil;
   kirmizi yazili bir etiket, altinda ince cizgi. Kart murekkep halkayla ve hafif kalkisla
   one cikar; dugmesi kirmizi degil, murekkep dolu (sayfanin birincil dugmesi). */
body.detail-pricing .pricing-grid .plan.featured {
  border-color: var(--tone-1);
  box-shadow:
    0 0 0 1px var(--tone-1),
    var(--shadow-2);
}
body.detail-pricing .plan .plan-pick {
  border-bottom: 1px solid var(--hair);
  background: transparent;
  color: var(--red-dark);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body.detail-pricing .plan .plan-action-red {
  border-color: var(--ink-900);
  background: var(--ink-900);
  color: #fff;
}
@media (hover: hover) {
  body.detail-pricing .plan .plan-action-red:hover {
    border-color: #000;
    background: #000;
    color: #fff;
  }
}

/* Onaylar murekkep: bir kazanim isareti, uyari degil. */
body.detail-pricing .plan-highlights li::before {
  background-color: var(--tone-1);
}
body.detail-pricing .compare-cell.yes > span {
  color: var(--tone-1);
}

/* Karsilastirma: grup basligi kirmizi nokta yerine kucuk buyuk harf etiket, zemin sitenin
   cok acik bandi; onerilen sutunun pembe tonu notr. */
body.detail-pricing .compare-group-title {
  border-color: var(--hair);
  background: var(--desk-1);
}
body.detail-pricing .compare-group-title::before {
  display: none;
}
body.detail-pricing .compare-group-title span {
  color: var(--tone-2);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Opak: plan basliklari satiri yapiskan, yari saydam zemin alttan kayan hucreleri
   basligin icinden gosteriyordu. */
body.detail-pricing :is(.compare-plan-head.recommended, .compare-cell.hot, .compare-action.hot) {
  background: var(--desk-1);
}

/* Plan yardimcisi: gri cerceveli kutu yerine cok acik bant; sonuc maddeleri murekkep. */
body.detail-pricing .estimator {
  border-color: transparent;
  background: var(--desk-1);
}
body.detail-pricing .estimator li::before {
  background: var(--tone-1);
}

/* Musteri deneyimleri: kart sitenin yuzeyi; tirnak isareti kirmizi degil, golge gibi. */
body.detail-pricing .customer-voice-row {
  border-color: var(--hair);
  background: #fff;
  box-shadow: var(--shadow-1);
}
body.detail-pricing .customer-voice-identity::after {
  color: rgb(33 33 33 / 22%);
}

/* SSS: Neden PDFgine'nin acilir dili -- arti kutuda, acilinca eksiye doner, icerik
   yumusakca acilir. */
body.detail-pricing .faq-section {
  interpolate-size: allow-keywords;
}
body.detail-pricing .faq {
  border-color: var(--hair);
}
body.detail-pricing .faq summary::after {
  display: block;
  flex: none;
  width: 34px;
  height: 34px;
  content: "";
  border: 1px solid #dedede;
  border-radius: var(--radius-control);
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px 1.5px, 1.5px 12px;
  transition:
    background-size var(--motion-base) var(--ease-settle),
    border-color var(--motion-quick) var(--ease-settle);
}
body.detail-pricing .faq[open] summary::after {
  content: "";
  background-size: 12px 1.5px, 1.5px 0;
}
@media (hover: hover) {
  body.detail-pricing .faq summary:hover::after {
    border-color: var(--tone-1);
  }
}
@supports selector(details::details-content) {
  body.detail-pricing .faq::details-content {
    block-size: 0;
    overflow: clip;
    transition:
      block-size var(--motion-gentle) var(--ease-settle),
      content-visibility var(--motion-gentle) allow-discrete;
  }
  body.detail-pricing .faq[open]::details-content {
    block-size: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.detail-pricing .billing-switch::before,
  body.detail-pricing .billing-switch button,
  body.detail-pricing .faq summary::after,
  body.detail-pricing .faq::details-content {
    transition: none;
  }
}

/* Karsilastirma: ozellik aciklamalari balonda (29.10.2026). Satirlar 88px'ten 64px'e iner,
   tablo hizli taranir. Ad noktali cizgiyle "burada aciklama var" der; 16 satirda 16 ikon
   kalabalik olurdu. Balon fareyle, odakla ya da tiklayinca (`is-open`) acilir; dokunmatikte
   balon yerine satirin icinde acilir (kayan tabloda balon kesilirdi). Yalniz betik
   calistiysa (`has-feature-hints`): yoksa aciklamalar satirda kalir. */
body.detail-pricing .compare-plans.has-feature-hints :is(.compare-feature, .compare-cell) {
  min-height: 64px;
  padding-block: 14px;
}
body.detail-pricing .compare-plans.has-feature-hints .compare-feature {
  position: relative;
}
body.detail-pricing .compare-plans.has-feature-hints .compare-feature > b {
  align-self: flex-start;
}
body.detail-pricing .compare-hint-name {
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  text-decoration: underline dotted var(--tone-4);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  cursor: help;
}
body.detail-pricing .compare-hint-name:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--ring);
}
@media (hover: hover) {
  body.detail-pricing .compare-plans.has-feature-hints .compare-feature > small {
    position: absolute;
    top: calc(100% - 12px);
    inset-inline-start: 14px;
    z-index: 30;
    width: max-content;
    max-width: min(300px, calc(100vw - 48px));
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--radius-surface);
    background: var(--ink-900);
    box-shadow: var(--shadow-3);
    color: var(--on-ink-1);
    font-size: 13px;
    line-height: 1.5;
    opacity: 0;
    visibility: hidden;
    translate: 0 -4px;
    pointer-events: none;
    transition:
      opacity var(--motion-quick) var(--ease-settle),
      translate var(--motion-quick) var(--ease-settle),
      visibility 0s linear var(--motion-quick);
  }
  body.detail-pricing .compare-plans.has-feature-hints .compare-feature > small::before {
    position: absolute;
    top: -5px;
    inset-inline-start: 14px;
    width: 10px;
    height: 10px;
    content: "";
    background: var(--ink-900);
    rotate: 45deg;
  }
  body.detail-pricing .compare-plans.has-feature-hints .compare-feature:is(:hover, .is-open, :has(.compare-hint-name:focus-visible)) > small {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    transition-delay: 0s;
  }
}
@media (hover: none) {
  body.detail-pricing .compare-plans.has-feature-hints .compare-feature > small {
    display: none;
  }
  body.detail-pricing .compare-plans.has-feature-hints .compare-feature.is-open > small {
    display: block;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.detail-pricing .compare-plans.has-feature-hints .compare-feature > small {
    transition: none;
  }
}
/* Tablonun alt satirindaki Go dugmesi de kart gibi murekkep dolu (kirmizi degil). */
body.detail-pricing .compare-action .btn-red {
  border-color: var(--ink-900);
  background: var(--ink-900);
  color: #fff;
}
@media (hover: hover) {
  body.detail-pricing .compare-action .btn-red:hover {
    border-color: #000;
    background: #000;
  }
}

/* Standalone navigation links retain the adjacent disclosure target height. */
.header .nav > a { min-height: 44px; display: inline-flex; align-items: center; }