[.description]` anahtarlarindan geliyor. */
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
min-height: 72px;
height: 100%;
padding: 14px 16px;
border: 1px solid #dedede;
border-radius: 4px;
background: #fafafa;
color: #222;
text-decoration: none;
}
.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;
}
.docs-home-cards .ui-icon { flex: 0 0 auto; width: 32px; height: 32px; opacity: 0.75; }
.docs-home-card-arrow { flex: 0 0 auto; color: #666; }
.docs-home-cards a:hover { border-color: #999; background: #f1f1f1; }
.docs-home-cards a:hover .docs-home-card-arrow { color: #222; }
.docs-home-cards a:focus-visible {
outline: 2px solid var(--red, #b82027);
outline-offset: 3px;
}
[dir="rtl"] .docs-home-card-arrow { transform: rotate(180deg); }
@media (max-width: 1080px) {
.docs-home-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.docs-home-hero h1 { font-size: 44px; }
}
@media (max-width: 680px) {
.docs-home-cards { grid-template-columns: minmax(0, 1fr); }
.docs-home-hero { padding: 16px 0 28px; }
.docs-home-hero h1 { font-size: 34px; }
.docs-home-search kbd { display: none; }
}
/* DOKUMAN GOVDE METNI TEK PUNTODA: 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 14px/1.7 -- tasarimin kendi `.notice` ve `.doc-table` satirlariyla
* ayni. Basliklar ve kod kutulari ayri register, onlara dokunulmuyor. Yeni bir blok
* eklendiginde punto yazmak gerekmiyor; miras dogru puntodan geliyor. */
.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: 14px;
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. */
.docs-main .doc-section :not(pre) > code {
font-size: 14px;
}
.docs-main .doc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.docs-main .doc-table th,
.docs-main .doc-table td { padding: 14px 12px; text-align: left; border-bottom: 1px solid #dedede; vertical-align: top; }
.docs-main .doc-table th { font-weight: 600; }
.docs-main .code-box pre { margin: 0; }
.docs-main .code-label { padding: 8px 0; font-size: 14px; }
.docs-main h1,
.docs-main h2,
.docs-main h3,
.docs-main .doc-section { scroll-margin-top: 112px; }
/* 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; }
/* 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. */
.legal-meta { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 16px; color: #696969; }
.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;
}
@media (max-width: 760px) {
body .header .brand .svg-asset,
body .footer .footer-wordmark img {
height: 36px;
}
}
/* 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. */
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 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
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). */
.pdf-paper-mount .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;
border: 1px solid var(--line, #e5e5e5);
border-radius: 6px;
background: #fff;
}
.docs-chart-art svg {
display: block;
width: 100%;
height: auto;
}
.docs-chart-gallery figcaption {
margin-top: 6px;
text-align: center;
}
/* Ornek tablo yatayda kaydirilir: dar ekranda sutunlari ezmek, olculeri gostermek icin
duran bir ornegi yalanlar. */
.docs-table-sample {
overflow-x: auto;
}
/* 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;
background: #fff;
}
.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(--muted, #595959);
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;
padding-left: 20px;
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;
}
/* 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: 1px solid #dedede;
border-radius: 8px;
background: #fff;
box-shadow: 0 18px 34px -18px rgba(0, 0, 0, 0.45);
}
.docs-search-results[hidden] { display: none; }
.docs-search-results a {
display: grid;
gap: 2px;
padding: 9px 12px;
border-radius: 6px;
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: #f2f2f2; }
.docs-search-results a:focus-visible {
outline: 2px solid var(--red, #b82027);
outline-offset: 2px;
}
.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 `` 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. */
.footer-language-menu {
max-height: var(--language-menu-available-height, calc(100dvh - 32px));
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 currentColor; outline-offset: 2px; }
.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; }
@media (max-width: 1000px) {
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 currentColor; outline-offset: 4px; }
.header-nav-menu {
position: absolute;
z-index: 50;
top: calc(100% + 8px);
inset-inline-start: 0;
width: 340px;
min-width: 0;
max-width: calc(100vw - 40px);
margin: 0;
padding: 8px;
list-style: none;
color: #202020;
background: #fff;
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0 12px 28px #00000012;
}
.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: #f2f2f2; }
@media (min-width: 1001px) {
body .header .nav,
body .header .account-nav { display: flex; }
body .header .nav { flex: 0 0 auto; }
body .header .menu-button,
.header .mobile-nav.open:not([hidden]) { display: none; }
}
@media (min-width: 1200px) {
body .header .nav { gap: 24px; }
}
@media (max-width: 1000px) {
.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;
padding-inline-start: 16px;
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); }
}
/* 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;
}
.header-nav-item-icon { display: grid; place-items: center; width: 32px; height: 32px; background: #f2f2f2; border-radius: 4px; }
.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: #e6e6e6; }
/* 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: 1000px) {
.header .mobile-nav .header-nav-menu a { justify-content: normal; padding: 12px 8px; }
.mobile-nav .header-nav-item-description { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.header-nav-chevron,
.header-nav-group::details-content,
.header-nav-group[open]::details-content { transition: none; }
}
@media (min-width: 1001px) {
.header-nav-item-description { font-size: 12px; }
.header-nav-item-copy { gap: 0; }
}