/* Cardarb ve MotoQuick ürün kataloğu — tasarım sistemi v2
   ────────────────────────────────────────────────────────────────────────
   Bu dosyada GÖRÜNÜR METİN YOKTUR. Tüm metin icerik/<dil>.json içindedir.

   Yön (soldan sağa / sağdan sola) için yalnızca mantıksal özellikler kullanılır:
   margin-inline-*, padding-inline-*, inset-inline-*, text-align: start/end,
   border-inline-*. Fiziksel left/right burada kullanılmaz ki Arapça sürümde
   düzen kendiliğinden aynalansın. Tek istisna: kesim işaretleri ve başparmak
   sekmesinin dış kenarı — ikisi de fiziksel olmak zorunda.

   Tipografi:  Oswald (sıkışık, sanayi karakterli) başlık, sayı ve etiket için
               Lato                                  gövde metni için
   Renk:       bölüm bazlı; --bolum-renk her bölümde yeniden tanımlanır.
*/

/* ───────────────────────────────────────────────────────────── yazı tipleri */
@font-face { font-family: "Lato Katalog"; src: url("font/LatoWeb-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato Katalog"; src: url("font/LatoWeb-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Lato Katalog"; src: url("font/LatoWeb-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato Katalog"; src: url("font/LatoWeb-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato Katalog"; src: url("font/LatoWeb-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Oswald Katalog"; src: url("font/Oswald-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
/* Arapça: IBM Plex Sans Arabic (SIL OFL). Sistemdeki Segoe UI yerine seçildi;
   küçük puntoda dokusu daha eşit ve Lato ile aynı humanist aileden. */




/* ───────────────────────────────────────────────────────────── değişkenler */
:root {
  /* marka renkleri — kaynak: logonun kendisi + 04-web/otobakimsetim/tasarim-brifi.md bölüm 3 */
  --kirmizi: #E91E2F;
  --kirmizi-koyu: #A5121D;
  --mavi: #0484BF;
  --mavi-koyu: #03628F;
  --gri: #BAB2AC;
  --mq-kirmizi: #E8483C;
  --mq-koyu: #1F2933;

  /* kağıt ve mürekkep — saf beyaz ve saf siyah kullanılmaz */
  --kagit: #F5F2ED;
  --kagit-2: #EBE6DE;
  --kart: #FFFFFF;
  --murekkep: #14161A;
  --murekkep-2: #5C5F66;
  --cizgi: #DCD6CC;
  --antrasit: #14161A;

  /* bölüm rengi — sayfa sınıfıyla değişir */
  --bolum-renk: var(--kirmizi);
  --bolum-koyu: var(--kirmizi-koyu);
  --koyu: var(--antrasit);

  /* sayfa: 210×297 mm kesim + 3 mm taşma */
  --tasma: 3mm;
  --sayfa-en: 216mm;
  --sayfa-boy: 303mm;
  --kenar: 15mm;
  --ic-kenar: calc(var(--tasma) + var(--kenar));
  --sekme-en: 7mm;
  --band-boy: 52mm;

  --yazi-baslik: "Oswald Katalog", "Lato Katalog", "Plex Arabic", sans-serif;
  --yazi-govde: "Lato Katalog", "Plex Arabic", sans-serif;
  /* Arapça: IBM Plex Sans Arabic, projeye gömülü (SIL OFL). */
  --yazi-arapca: "Plex Arabic", "Lato Katalog", "Segoe UI", sans-serif;
  --yazi-arapca-baslik: "Plex Arabic", "Lato Katalog", "Segoe UI", sans-serif;
  --agir: 700;
}

/* bölüm renkleri */
.s-kirmizi { --bolum-renk: var(--kirmizi);    --bolum-koyu: var(--kirmizi-koyu); }
.s-mavi    { --bolum-renk: var(--mavi);       --bolum-koyu: var(--mavi-koyu); }
.s-gri     { --bolum-renk: #33363B;           --bolum-koyu: #23262A; }
.s-mq      { --bolum-renk: var(--mq-kirmizi); --bolum-koyu: #B32E24; }
.s-slate   { --bolum-renk: #46586B;           --bolum-koyu: #2D3B49; }
.motoquick { --koyu: var(--mq-koyu); }

/* Katalogun markasi <html> uzerinde. Bolume bagli olmayan sayfalarin
   (kunye, uretici, kanallar, iletisim) vurgu rengi buradan miras alinir;
   bolum sayfalarinda section uzerindeki .s-* sinifi bunu ezer. */
html.marka-cardarb   { --bolum-renk: var(--kirmizi);    --bolum-koyu: var(--kirmizi-koyu); }
html.marka-motoquick { --bolum-renk: var(--mq-kirmizi); --bolum-koyu: #B32E24; }

/* Tek dilli Arapça sürüm. İki dilli sürümde geçerli DEĞİL: orada Latin metin
   Lato/Oswald ile, Arapça metin .ml-ar kuralıyla dizilir. */
html[lang="ar"]:not(.iki-dil) {
  --yazi-baslik: var(--yazi-arapca-baslik);
  --yazi-govde: var(--yazi-arapca);
  font-size: 108%;
}
html[lang="ar"]:not(.iki-dil) body { line-height: 1.75; }

/* ─────────────────────────────────────────── iki dilli bloklar (EN + AR)
   Her metin, dil başına bir blok olarak basılır. İngilizce üstte, Arapça altta.
   Arapça blokta letter-spacing SIFIRLANIR: harf aralığı Arapça'da bitişik
   yazımı görsel olarak bozar. Punto %8 büyütülür, Arapça aynı puntoda
   Latin'den küçük görünür. */
.ml { display: block; }
html.iki-dil { --gk: 1; --sekme-en: 11mm; --band-boy: 62mm; }
html.iki-dil .rakam-band { height: 58mm; padding-bottom: 13mm; }
html.iki-dil .markalar { margin-bottom: 66mm; }
html.iki-dil .rakam span { letter-spacing: .06em; line-height: 1.45; }
html.iki-dil .rakam { padding-inline-start: 4mm; }
/* Başparmak sekmesinde iki dil: dikey yazımda bloklar yan yana dizilir */
html.iki-dil .sekme span .ml { display: block; }
html.iki-dil .sekme span { font-size: 6.2pt; letter-spacing: .1em; }
html.iki-dil .giris { line-height: 1.5; }
html.iki-dil .harita-grup li { line-height: 1.55; }
html.iki-dil .metin-govde p { line-height: 1.55; }
html.iki-dil .foto-serit img { height: calc(26mm * var(--gk, 1)); }
html.iki-dil .k6 .kart .foto { height: calc(29mm * var(--gk, 1)); }
html.iki-dil .k4 .kart .foto { height: calc(42mm * var(--gk, 1)); }
html.iki-dil .set-liste div { padding: calc(2.6mm * var(--gk, 1)) 0; }
html.iki-dil .kahraman-sag .ozet { font-size: calc(10.5pt * var(--gk, 1)); }
html.iki-dil .kart .kullanim li { line-height: 1.35; }
/* Tek kart kalan sayfa: iki dil yan yana dizilince bilgi sutunu ikiye
   boluniyor. Fotografi daraltip metne yer aciyoruz. */
html.iki-dil .k2.tek .kart .foto { width: 62mm; }
html.iki-dil .k2.tek .kart .foto img { max-height: 132mm; }
html.iki-dil .k2.tek .kart h3 { font-size: calc(15.5pt * var(--gk, 1)); }
html.iki-dil .k2.tek .kart .ozet { font-size: calc(9.6pt * var(--gk, 1)); max-width: none; }
html.iki-dil .k2.tek .kart ul.faydalar li { font-size: calc(8.6pt * var(--gk, 1)); }
html.iki-dil .kart .ozet { max-width: none; }

/* ── İki dilli düzenin üç kuralı ────────────────────────────────────────
   Dubai'de yaygın olan bilingual katalog düzeni: her metin çifti ya TEK
   SATIRDA ayıraçla birleşir (kısa etiketler), ya da İngilizce solda /
   Arapça sağda İKİ SÜTUNDA dizilir ve aralarına ince bir çizgi girer.
   Çizgi olmadan iki dilin kırık kenarları birbirine giriyor ve okuyucu
   hangi satırın hangisinin karşılığı olduğunu seçemiyor.

   1. Çift sütun  — paragraf, madde listesi, kart içeriği
   2. Tek satır   — başlık üstü, etiket, tablo başlığı, künye satırı
   3. Yaslama     — dar tablo hücrelerinde iki dil de sayfanın kendi
                    kenarına yaslanır; sağa/sola savrulmaz.
   ---------------------------------------------------------------------- */

/* 1. ÇİFT SÜTUN ------------------------------------------------------- */
html.iki-dil .kart .bilgi > * > .ml,
html.iki-dil .kart .bilgi > .ml,
html.iki-dil .kart li > .ml,
html.iki-dil .kart p > .ml,
html.iki-dil .kart h3 > .ml,
html.iki-dil .kart b > .ml,
html.iki-dil .harita-grup li > .ml,
html.iki-dil .giris > .ml,
html.iki-dil .dipnot > .ml,
html.iki-dil .kahraman-sag .ozet > .ml,
html.iki-dil .kahraman-sag ul.ana-faydalar li > .ml,
html.iki-dil .marka-satir p > .ml,
html.iki-dil .bolum-band p > .ml,
html.iki-dil .basvuru-serit p > .ml,
html.iki-dil .guvenlik-liste p > .ml,
html.iki-dil .set-liste div > b > .ml,
html.iki-dil .set-liste div > span > .ml {
  display: inline-block;
  vertical-align: top;
  margin-top: 0;
}
html.iki-dil .kart .bilgi > * > .ml-en,   html.iki-dil .kart .bilgi > * > .ml-tr,
html.iki-dil .kart .bilgi > .ml-en,       html.iki-dil .kart .bilgi > .ml-tr,
html.iki-dil .kart li > .ml-en,           html.iki-dil .kart li > .ml-tr,
html.iki-dil .kart p > .ml-en,            html.iki-dil .kart p > .ml-tr,
html.iki-dil .kart h3 > .ml-en,           html.iki-dil .kart h3 > .ml-tr,
html.iki-dil .kart b > .ml-en,            html.iki-dil .kart b > .ml-tr,
html.iki-dil .harita-grup li > .ml-en,    html.iki-dil .harita-grup li > .ml-tr,
html.iki-dil .giris > .ml-en,             html.iki-dil .giris > .ml-tr,
html.iki-dil .dipnot > .ml-en,            html.iki-dil .dipnot > .ml-tr,
html.iki-dil .kahraman-sag .ozet > .ml-en,
html.iki-dil .kahraman-sag .ozet > .ml-tr,
html.iki-dil .kahraman-sag ul.ana-faydalar li > .ml-en,
html.iki-dil .kahraman-sag ul.ana-faydalar li > .ml-tr,
html.iki-dil .marka-satir p > .ml-en,     html.iki-dil .marka-satir p > .ml-tr,
html.iki-dil .bolum-band p > .ml-en,      html.iki-dil .bolum-band p > .ml-tr,
html.iki-dil .basvuru-serit p > .ml-en,   html.iki-dil .basvuru-serit p > .ml-tr,
html.iki-dil .guvenlik-liste p > .ml-en,  html.iki-dil .guvenlik-liste p > .ml-tr,
html.iki-dil .set-liste div > b > .ml-en, html.iki-dil .set-liste div > b > .ml-tr,
html.iki-dil .set-liste div > span > .ml-en,
html.iki-dil .set-liste div > span > .ml-tr {
  width: 47%;
  padding-inline-end: 2mm;
}
html.iki-dil .kart .bilgi > * > .ml-ar,
html.iki-dil .kart .bilgi > .ml-ar,
html.iki-dil .kart li > .ml-ar,
html.iki-dil .kart p > .ml-ar,
html.iki-dil .kart h3 > .ml-ar,
html.iki-dil .kart b > .ml-ar,
html.iki-dil .harita-grup li > .ml-ar,
html.iki-dil .giris > .ml-ar,
html.iki-dil .dipnot > .ml-ar,
html.iki-dil .kahraman-sag .ozet > .ml-ar,
html.iki-dil .kahraman-sag ul.ana-faydalar li > .ml-ar,
html.iki-dil .marka-satir p > .ml-ar,
html.iki-dil .bolum-band p > .ml-ar,
html.iki-dil .basvuru-serit p > .ml-ar,
html.iki-dil .guvenlik-liste p > .ml-ar,
html.iki-dil .set-liste div > b > .ml-ar,
html.iki-dil .set-liste div > span > .ml-ar {
  width: 53%;
  margin-inline-start: 0;
  margin-top: 0;
  padding-inline-end: 3mm;
  border-inline-end: .2mm solid var(--cizgi);
}
/* koyu zeminde ayıraç çizgisi açık renk */
html.iki-dil .koyu .ml-ar,
html.iki-dil .bolum-band p > .ml-ar,
html.iki-dil .basvuru-serit p > .ml-ar { border-inline-end-color: rgba(255,255,255,.28); }

/* iki sütunda iken sola/sağa yaslama sütunun kendi yönüne göre */
html.iki-dil .giris { max-width: none; }

/* Marka acilis sayfasinin metin sutunu sayfanin yarisi kadar; orada iki
   sutun fotografin uzerine tasiyor. O sayfada iki dil alt alta kalir ve
   araya yatay ayirac girer. Ayni sey yarim genislikteki vurgu listesinde. */
html.iki-dil .marka-acilis .giris { max-width: 86mm; }

/* Kapak basligi: Arapca satir Ingilizceyle ayni kenardan bassin.
   Arka kapak ortalanmis bir blok: orada Arapca da ortalanir. */
html.iki-dil:not([dir="rtl"]) .kapak h1 .ml-ar { text-align: left; }
html.iki-dil[dir="rtl"] .kapak h1 .ml-en,
html.iki-dil[dir="rtl"] .kapak h1 .ml-tr { text-align: right; }
html.iki-dil .kapak h1 .ml-ar { font-size: .8em; margin-top: 1.5mm; }
html.iki-dil .arka .cumle .ml-ar,
html.iki-dil .arka .alt .ml-ar,
html.iki-dil .arka .cumle .ml-en,
html.iki-dil .arka .cumle .ml-tr { text-align: center; }
html.iki-dil .arka .cumle .ml-ar { font-size: .84em; margin-top: 2mm; }
html.iki-dil:not([dir="rtl"]) .vurgu-liste p > .ml-ar { text-align: left; }
html.iki-dil[dir="rtl"] .vurgu-liste p > .ml-en,
html.iki-dil[dir="rtl"] .vurgu-liste p > .ml-tr { text-align: right; }

/* Kahraman sayfasinin basligi iki dilde dort satir oluyor ve fotografin
   uzerine biniyordu: punto kuculur, fotograf asagi iner. */
html.iki-dil .kahraman-sol h1 { font-size: calc(26pt * var(--gk, 1)); max-width: 168mm; }
html.iki-dil .kahraman-sol h1 .ml-ar { font-size: .8em; margin-top: 1.2mm; }
html.iki-dil .kahraman-sol .hacim { margin-top: 3.5mm; }
html.iki-dil .kahraman-sol .foto { inset-block-start: 78mm; height: 148mm; }
html.iki-dil .kahraman-sol::before { inset-block-start: 86mm; height: 134mm; }
html.iki-dil .marka-acilis .giris > .ml,
html.iki-dil .vurgu-liste p > .ml,
html.iki-dil .vurgu-liste b > .ml {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
}
html.iki-dil .marka-acilis .giris > .ml-ar,
html.iki-dil .vurgu-liste p > .ml-ar {
  margin-top: 2.4mm;
  padding-top: 2.4mm;
  border-top: .2mm solid rgba(255,255,255,.26);
}
html.iki-dil:not([dir="rtl"]) .vurgu-liste b .ml-ar { text-align: left; }
html.iki-dil[dir="rtl"] .vurgu-liste b .ml-en,
html.iki-dil[dir="rtl"] .vurgu-liste b .ml-tr { text-align: right; }
html.iki-dil .vurgu-liste b .ml-ar { margin-top: .6mm; font-size: .84em; }

/* 2. TEK SATIR: kısa etiket çiftleri ayıraçla birleşir ----------------- */
html.iki-dil .ustbaslik .ml,
html.iki-dil .ic-satir .ad .ml,
html.iki-dil .iletisim-govde .satir > span .ml,
html.iki-dil .rakam span .ml,
html.iki-dil .kahraman-sol .puan div span .ml,
html.iki-dil .kunye-band .tescil span .ml,
html.iki-dil .urun-tablo th .ml,
html.iki-dil .set-tablo th .ml,
html.iki-dil .kart .rozet .ml,
html.iki-dil .kart .set-icerik > b .ml {
  display: inline;
  unicode-bidi: isolate;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
}
html.iki-dil:not([dir="rtl"]) .ustbaslik .ml-en::after,
html.iki-dil:not([dir="rtl"]) .ic-satir .ad .ml-en::after,
html.iki-dil:not([dir="rtl"]) .iletisim-govde .satir > span .ml-en::after,
html.iki-dil:not([dir="rtl"]) .rakam span .ml-en::after,
html.iki-dil:not([dir="rtl"]) .kahraman-sol .puan div span .ml-en::after,
html.iki-dil:not([dir="rtl"]) .kunye-band .tescil span .ml-en::after,
html.iki-dil:not([dir="rtl"]) .urun-tablo th .ml-en::after,
html.iki-dil:not([dir="rtl"]) .set-tablo th .ml-en::after,
html.iki-dil:not([dir="rtl"]) .kart .rozet .ml-en::after,
html.iki-dil:not([dir="rtl"]) .kart .set-icerik > b .ml-en::after,
html.iki-dil:not([dir="rtl"]) .ustbaslik .ml-tr::after,
html.iki-dil:not([dir="rtl"]) .ic-satir .ad .ml-tr::after,
html.iki-dil:not([dir="rtl"]) .iletisim-govde .satir > span .ml-tr::after,
html.iki-dil:not([dir="rtl"]) .rakam span .ml-tr::after,
html.iki-dil:not([dir="rtl"]) .kahraman-sol .puan div span .ml-tr::after,
html.iki-dil:not([dir="rtl"]) .kunye-band .tescil span .ml-tr::after,
html.iki-dil:not([dir="rtl"]) .urun-tablo th .ml-tr::after,
html.iki-dil:not([dir="rtl"]) .set-tablo th .ml-tr::after,
html.iki-dil:not([dir="rtl"]) .kart .rozet .ml-tr::after,
html.iki-dil:not([dir="rtl"]) .kart .set-icerik > b .ml-tr::after,
html.iki-dil[dir="rtl"] .ustbaslik .ml-ar::after,
html.iki-dil[dir="rtl"] .ic-satir .ad .ml-ar::after,
html.iki-dil[dir="rtl"] .iletisim-govde .satir > span .ml-ar::after,
html.iki-dil[dir="rtl"] .rakam span .ml-ar::after,
html.iki-dil[dir="rtl"] .kahraman-sol .puan div span .ml-ar::after,
html.iki-dil[dir="rtl"] .kunye-band .tescil span .ml-ar::after,
html.iki-dil[dir="rtl"] .urun-tablo th .ml-ar::after,
html.iki-dil[dir="rtl"] .set-tablo th .ml-ar::after,
html.iki-dil[dir="rtl"] .kart .rozet .ml-ar::after,
html.iki-dil[dir="rtl"] .kart .set-icerik > b .ml-ar::after {
  content: " · ";
  color: inherit;
  opacity: .5;
  font-weight: 400;
}

/* Dar kutuda iki dil yan yana sığmaz; alt alta dizilir ve aralarına
   yatay bir ayıraç girer. Çizgi olmadan iki paragraf tek blok gibi okunuyor. */
html.iki-dil .toptan-kart p > .ml-ar,
html.iki-dil .metin-govde p > .ml-ar {
  margin-top: 2.6mm;
  padding-top: 2.6mm;
  border-top: .2mm solid var(--cizgi);
}

/* Uzun bağlantı ve kod satırları dar sütunda taşmasın */
.ml { overflow-wrap: break-word; }

/* 3. DAR TABLO HÜCRESİ: iki dil de sayfanın aynı kenarına yaslanır ----- */
html.iki-dil .set-tablo td .ml,
html.iki-dil .urun-tablo td .ml { margin-top: .6mm; }
html.iki-dil:not([dir="rtl"]) .set-tablo td .ml-ar,
html.iki-dil:not([dir="rtl"]) .urun-tablo td .ml-ar { text-align: left; }
html.iki-dil[dir="rtl"] .set-tablo td .ml-en,
html.iki-dil[dir="rtl"] .set-tablo td .ml-tr,
html.iki-dil[dir="rtl"] .urun-tablo td .ml-en,
html.iki-dil[dir="rtl"] .urun-tablo td .ml-tr { text-align: right; }

/* Sayfa ve bölüm başlığı: Arapça satır İngilizce satırla AYNI kenardan
   başlar. Yan yana sığmıyorlar (başlık puntosu büyük), sayfanın ortasında
   savrulmasınlar diye ikisi de aynı hizaya yaslanır. */
html.iki-dil:not([dir="rtl"]) .sayfa-basligi .ml-ar,
html.iki-dil:not([dir="rtl"]) .bolum-band h1 .ml-ar,
html.iki-dil:not([dir="rtl"]) .marka-acilis h1 .ml-ar,
html.iki-dil:not([dir="rtl"]) .kahraman-sag h1 .ml-ar { text-align: left; }
html.iki-dil[dir="rtl"] .sayfa-basligi .ml-en,
html.iki-dil[dir="rtl"] .sayfa-basligi .ml-tr,
html.iki-dil[dir="rtl"] .bolum-band h1 .ml-en,
html.iki-dil[dir="rtl"] .bolum-band h1 .ml-tr,
html.iki-dil[dir="rtl"] .marka-acilis h1 .ml-en,
html.iki-dil[dir="rtl"] .marka-acilis h1 .ml-tr,
html.iki-dil[dir="rtl"] .kahraman-sag h1 .ml-en,
html.iki-dil[dir="rtl"] .kahraman-sag h1 .ml-tr { text-align: right; }
html.iki-dil .sayfa-basligi .ml-ar,
html.iki-dil .bolum-band h1 .ml-ar { margin-top: 1.5mm; }
/* uzun ara başlıklar da aynı kenara yaslanır */
html.iki-dil:not([dir="rtl"]) .harita-grup h3 .ml-ar,
html.iki-dil:not([dir="rtl"]) .toptan-kart h3 .ml-ar,
html.iki-dil:not([dir="rtl"]) .basvuru-serit h3 .ml-ar,
html.iki-dil:not([dir="rtl"]) .iletisim-govde h3 .ml-ar,
html.iki-dil:not([dir="rtl"]) .marka-satir b .ml-ar { text-align: left; }
html.iki-dil[dir="rtl"] .harita-grup h3 .ml-en,
html.iki-dil[dir="rtl"] .harita-grup h3 .ml-tr,
html.iki-dil[dir="rtl"] .toptan-kart h3 .ml-en,
html.iki-dil[dir="rtl"] .toptan-kart h3 .ml-tr,
html.iki-dil[dir="rtl"] .basvuru-serit h3 .ml-en,
html.iki-dil[dir="rtl"] .basvuru-serit h3 .ml-tr,
html.iki-dil[dir="rtl"] .iletisim-govde h3 .ml-en,
html.iki-dil[dir="rtl"] .iletisim-govde h3 .ml-tr,
html.iki-dil[dir="rtl"] .marka-satir b .ml-en,
html.iki-dil[dir="rtl"] .marka-satir b .ml-tr { text-align: right; }
html.iki-dil .harita-grup h3 .ml-ar,
html.iki-dil .toptan-kart h3 .ml-ar,
html.iki-dil .basvuru-serit h3 .ml-ar,
html.iki-dil .iletisim-govde h3 .ml-ar { margin-top: .8mm; font-size: .84em; }

/* kart içi istisnalar */
html.iki-dil .kart .kimlik .ml,
html.iki-dil .kart .hacim .ml { width: auto; margin-inline-start: 0; }
html.iki-dil .kart .yuzeyler span .ml { width: auto; margin-inline-start: 0; }
html.iki-dil .kart .set-icerik ul { columns: 1; }
html.iki-dil .kart .set-icerik li > .ml-en,
html.iki-dil .kart .set-icerik li > .ml-tr { width: 43%; }
html.iki-dil .kart .set-icerik li > .ml-ar { width: 50%; }
.ml-ar {
  font-family: var(--yazi-arapca) !important;
  direction: rtl;
  text-align: right;
  letter-spacing: normal !important;
  text-transform: none;
  font-size: 1.08em;
  line-height: 1.7;
}
h1 .ml-ar, h2 .ml-ar, h3 .ml-ar, h4 .ml-ar,
.sayfa-basligi .ml-ar, .bolum-band h1 .ml-ar, .kart h3 .ml-ar {
  font-family: var(--yazi-arapca-baslik) !important;
  font-weight: 700;
  font-size: .86em;
  line-height: 1.35;
}
.ustbaslik .ml-ar, .hacim .ml-ar, .sekme .ml-ar,
.kimlik .ml-ar, .kimlik-serit .ml-ar, .yuzeyler span .ml-ar,
.urun-tablo th .ml-ar, .bolum-band .no .ml-ar {
  font-family: var(--yazi-arapca) !important;
  font-weight: 600;
}

/* Sağdan sola sayfada İngilizce blok kendi yönünü korur */
.ml-en, .ml-tr { direction: ltr; unicode-bidi: isolate; }
/* İngilizce bloktan sonra gelen Arapça bloğa nefes payı */
.ml-en + .ml-ar, .ml-tr + .ml-ar { margin-top: 1.1mm; }
h1 .ml-en + .ml-ar, .sayfa-basligi .ml-en + .ml-ar { margin-top: 2mm; }

/* sağdan sola blok, soldan sağa bir kutunun içindeyken hizası şaşmasın */
[dir="rtl"].ml-ar bdi { unicode-bidi: isolate; }
.ml-ar .yuzeyler, .ml-ar ul, .ml-ar ol { direction: rtl; }
.ml-ar ul, .ml-ar ol { padding-inline-start: 4mm; padding-inline-end: 0; }

/* ───────────────────────────────────────────────────────────── temel */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #6f6f6f;
  font-family: var(--yazi-govde);
  color: var(--murekkep);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

@page { size: 216mm 303mm; margin: 0; }

.sayfa {
  position: relative;
  width: var(--sayfa-en);
  height: var(--sayfa-boy);
  overflow: hidden;
  background: var(--kagit);
  page-break-after: always;
  break-after: page;
}
.sayfa:last-child { page-break-after: auto; break-after: auto; }

@media screen {
  body { padding: 10mm 0; }
  .sayfa { margin: 0 auto 8mm; box-shadow: 0 2mm 7mm rgba(0,0,0,.4); }
}

.govde {
  position: absolute;
  inset: var(--ic-kenar);
  /* alt bilgi sayfanin 10 mm altinda duruyor; icerik alani onun uzerinde
     en az 8 mm bosluk birakacak sekilde yukari cekiliyor */
  bottom: calc(var(--ic-kenar) + 7mm);
  display: flex;
  flex-direction: column;
}
/* Sekme yeri her iki kenarda da ayrilir: boylece icerik blogu tek/cift sayfada
   yana kaymaz. Sekme yine dis kenarda durur, ama yazi alani sabit kalir. */
.sayfa.sekmeli .govde {
  left:  calc(var(--ic-kenar) + var(--sekme-en));
  right: calc(var(--ic-kenar) + var(--sekme-en));
}

.tam { position: absolute; inset: 0; }

/* kesim işaretleri — taşma payı içinde kalır, kesim çizgisini aşmaz */
.kesim i { position: absolute; background: #000; }
.kesim i.yatay { height: .25pt; width: 2.5mm; }
.kesim i.dikey { width: .25pt; height: 2.5mm; }
.kesim i.ust { top: var(--tasma); }
.kesim i.alt { bottom: var(--tasma); }
.kesim i.solk { left: var(--tasma); }
.kesim i.sagk { right: var(--tasma); }
.kesim i.sol0 { left: 0; }
.kesim i.sag0 { right: 0; }
.kesim i.ust0 { top: 0; }
.kesim i.alt0 { bottom: 0; }
.sayfa.koyu .kesim i { background: rgba(255,255,255,.7); }

/* ───────────────── başparmak sekmesi: bayi kataloğu kapalıyken bölümü bulsun
   Konum fizikseldir: tek sayfalar sağ, çift sayfalar sol dış kenarda. */
.sekme {
  position: absolute;
  width: var(--sekme-en);
  background: var(--bolum-renk);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sayfa.sag .sekme { right: 0; }
.sayfa.sol .sekme { left: 0; }
.sekme span {
  font-family: var(--yazi-baslik);
  font-size: calc(7pt * var(--gk, 1));
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  writing-mode: vertical-rl;
}
.sayfa.sol .sekme span { transform: rotate(180deg); }

/* ───────────────────────────────────────────────────────────── alt bilgi */
.alt-bilgi {
  position: absolute;
  inset-inline: var(--ic-kenar);
  bottom: calc(var(--tasma) + 7mm);
  display: flex;
  justify-content: space-between;
  align-items: baseline;          /* kutu ortasi degil, taban cizgisi */
  font-size: calc(6.6pt * var(--gk, 1));
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--murekkep-2);
}
.sayfa.sekmeli .alt-bilgi {
  left:  calc(var(--ic-kenar) + var(--sekme-en));
  right: calc(var(--ic-kenar) + var(--sekme-en));
}
.alt-bilgi .no {
  font-family: var(--yazi-baslik);
  font-size: calc(12pt * var(--gk, 1));
  letter-spacing: 0;
  color: var(--bolum-renk);
}
.sayfa.koyu .alt-bilgi { color: rgba(255,255,255,.5); }
.sayfa.koyu .alt-bilgi .no { color: #fff; }

/* ───────────────────────────────────────────────────────────── tipografi */
h1, h2, h3, h4 { font-family: var(--yazi-baslik); margin: 0; font-weight: 400; }

.sayfa-basligi {
  font-family: var(--yazi-baslik);
  font-size: calc(30pt * var(--gk, 1));
  line-height: 1.04;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--koyu);
  max-width: 140mm;
}
.giris {
  font-size: calc(9.6pt * var(--gk, 1));
  line-height: 1.6;
  color: var(--murekkep-2);
  max-width: 118mm;
  margin-top: 4mm;
}
.ustbaslik {
  font-family: var(--yazi-baslik);
  font-size: calc(7.5pt * var(--gk, 1));
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bolum-renk);
  margin-bottom: 3mm;
}

/* ───────────────────────────────────── bölüm başlık bandı (kenara taşan) */
.bolum-band {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--band-boy);
  background: var(--bolum-renk);
  color: #fff;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--ic-kenar) 8mm;
  gap: 7mm;
}
.sayfa.sekmeli .bolum-band {
  padding-left:  calc(var(--ic-kenar) + var(--sekme-en));
  padding-right: calc(var(--ic-kenar) + var(--sekme-en));
}
.bolum-band .no {
  font-family: var(--yazi-baslik);
  font-size: calc(42pt * var(--gk, 1));
  line-height: .78;
  color: rgba(255,255,255,.45);
}
.bolum-band .yazi { flex: 1; }
.bolum-band h1 { font-size: calc(26pt * var(--gk, 1)); line-height: 1; text-transform: uppercase; }
.bolum-band p {
  margin: 2.5mm 0 0;
  font-size: calc(8.4pt * var(--gk, 1));
  line-height: 1.5;
  color: rgba(255,255,255,.84);
  max-width: 122mm;
}
.govde.bandli { padding-top: calc(var(--band-boy) - var(--ic-kenar) + 7mm); }

/* ───────────────────────────────────────────────────────────── kapak */
.kapak { background: var(--antrasit); color: #fff; }
.kapak .fon {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(56% 34% at 50% 38%, rgba(255,255,255,.34) 0%, rgba(255,255,255,.07) 55%, rgba(255,255,255,0) 76%),
    linear-gradient(to bottom, #1E2126 0%, #14161A 45%, #0B0C0E 100%);
}
.kapak .kose {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 0; height: 0;
  border-top: 44mm solid var(--kirmizi);
  border-left: 44mm solid transparent;
}
html[dir="rtl"] .kapak .kose { border-left: 0; border-right: 44mm solid transparent; }
.kapak .serit {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 5mm;
  background: linear-gradient(to right, var(--kirmizi) 0 34%, var(--mavi) 34% 67%, var(--gri) 67% 100%);
}
.kapak .urun-foto {
  position: absolute;
  inset-block-start: 44mm;
  inset-inline: 0;
  height: 182mm;
  width: 100%;
  object-fit: contain;
}
.kapak .ust {
  position: absolute;
  inset-block-start: 20mm;
  inset-inline: var(--ic-kenar);
}
.kapak .logolar { display: flex; gap: 9mm; align-items: center; }
.kapak .logolar img { height: 10mm; width: auto; display: block; }
.kapak .logolar span { width: .3mm; height: 11mm; background: rgba(255,255,255,.3); }

.kapak .alt {
  position: absolute;
  inset-block-end: 22mm;
  inset-inline: var(--ic-kenar);
}
.kapak h1 { font-size: calc(47pt * var(--gk, 1)); line-height: .94; text-transform: uppercase; }
.kapak .yil {
  font-family: var(--yazi-baslik);
  font-size: calc(47pt * var(--gk, 1));
  line-height: .94;
  color: var(--kirmizi);
}
.kapak .alt-baslik {
  margin-top: 6mm;
  font-size: calc(9.4pt * var(--gk, 1));
  color: rgba(255,255,255,.7);
  border-top: .4mm solid rgba(255,255,255,.2);
  padding-top: 4mm;
  display: flex;
  justify-content: space-between;
  gap: 6mm;
}
.kapak .alt-baslik b {
  font-family: var(--yazi-baslik);
  font-weight: 400;
  color: var(--gri);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ───────────────────────────────────────────────────────────── künye */
.kunye-tablo { width: 100%; border-collapse: collapse; margin-top: 4mm; }
.kunye-tablo td {
  padding: calc(2.4mm * var(--gk, 1)) 0;
  border-bottom: .25mm solid var(--cizgi);
  font-size: calc(8.6pt * var(--gk, 1));
  vertical-align: top;
}
.kunye-tablo td:first-child {
  width: 40mm;
  color: var(--murekkep-2);
  font-family: var(--yazi-baslik);
  font-size: calc(7.4pt * var(--gk, 1));
  text-transform: uppercase;
  letter-spacing: .1em;
  padding-top: 3mm;
}
.kunye-tablo td:last-child { font-weight: 700; }
.kunye-tablo bdi { unicode-bidi: isolate; }

.not-kutu {
  margin-top: 8mm;
  background: var(--kagit-2);
  border-inline-start: 1.4mm solid var(--kirmizi);
  padding: 6mm 7mm;
}
.not-kutu h3 {
  font-size: calc(9pt * var(--gk, 1));
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kirmizi-koyu);
  margin-bottom: 3.5mm;
}
.not-kutu ol { margin: 0; padding-inline-start: 5mm; }
.not-kutu li { font-size: calc(7.8pt * var(--gk, 1)); line-height: 1.5; margin-bottom: 2.2mm; }

/* künye sayfasının alt kenarına taşan marka bandı */
.kunye-band {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 46mm;
  background: var(--antrasit);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 var(--ic-kenar) 8mm;
  gap: 12mm;
}
.kunye-band .marka { flex: 1; display: flex; align-items: center; gap: 6mm; }
.kunye-band .plaka { background: #fff; padding: 3mm 4mm; }
.kunye-band .plaka img { height: 7mm; display: block; }
.kunye-band .tescil span {
  display: block;
  font-family: var(--yazi-baslik);
  font-size: calc(6.4pt * var(--gk, 1));
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 1mm;
}
.kunye-band .tescil b { font-family: var(--yazi-baslik); font-weight: 400; font-size: calc(11pt * var(--gk, 1)); }

/* ───────────────────────────────────────────────────────────── içindekiler */
.ic-liste { margin-top: 6mm; }
.ic-satir {
  display: flex;
  align-items: baseline;
  gap: 3mm;
  padding: calc(2.8mm * var(--gk, 1)) 0;
  border-bottom: .25mm solid var(--cizgi);
}
.ic-satir .bno {
  font-family: var(--yazi-baslik);
  font-size: calc(9pt * var(--gk, 1));
  color: var(--bolum-renk);
  min-width: 8mm;
}
.ic-satir .ad {
  font-family: var(--yazi-baslik);
  font-size: calc(12.5pt * var(--gk, 1));
  text-transform: uppercase;
  color: var(--koyu);
}
.ic-satir .nokta { flex: 1; border-bottom: .25mm dotted var(--gri); transform: translateY(-1mm); }
.ic-satir .no { font-family: var(--yazi-baslik); font-size: calc(12.5pt * var(--gk, 1)); color: var(--koyu); }
.ic-satir.alt { padding-inline-start: 8mm; border-bottom-color: #E8E3DA; }
.ic-satir.alt .ad { font-family: var(--yazi-govde); font-size: calc(9.4pt * var(--gk, 1)); text-transform: none; color: var(--murekkep-2); }
.ic-satir.alt .no { font-size: calc(9.4pt * var(--gk, 1)); color: var(--murekkep-2); }
.ic-satir.alt .bno { min-width: 0; }

/* ───────────────────────────────────────────────────────── üretici sayfası */
/* üretici sayfasının alt kenarına taşan koyu bant */
.rakam-band {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 50mm;
  background: var(--antrasit);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 var(--ic-kenar) 8mm;
}
.rakam { flex: 1; border-inline-start: .3mm solid rgba(255,255,255,.22); padding-inline-start: 5mm; }
.rakam:first-child { border-inline-start: 0; padding-inline-start: 0; }
.rakam b {
  display: block;
  font-family: var(--yazi-baslik);
  font-weight: 400;
  font-size: calc(24pt * var(--gk, 1));
  line-height: 1;
  color: #fff;
}
.rakam span {
  display: block;
  margin-top: 2mm;
  font-size: calc(6.8pt * var(--gk, 1));
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.6);
}
.alt-bilgi.acik { color: rgba(255,255,255,.5); }
.alt-bilgi.acik .no { color: #fff; }
.markalar {
  margin: calc(9mm * var(--gk, 1)) 0 58mm;
  flex: 1 1 0; min-height: 0;
  display: flex; flex-direction: column; gap: 5mm;
}
.marka-satir {
  flex: 1;
  display: flex; gap: 7mm; align-items: center;
  background: var(--kart); padding: calc(6mm * var(--gk, 1)) 7mm;
}
.marka-satir.plakasiz { border-inline-start: 1.6mm solid var(--bolum-renk); }
.marka-satir.plakasiz .plaka { display: none; }
.marka-satir .plaka { flex: 0 0 44mm; display: flex; align-items: center; }
.marka-satir .plaka img { width: 100%; height: auto; display: block; }
.marka-satir b {
  display: block;
  font-family: var(--yazi-baslik);
  font-weight: 400;
  font-size: calc(12pt * var(--gk, 1));
  text-transform: uppercase;
  color: var(--koyu);
  margin-bottom: 2mm;
}
.marka-satir p { margin: 0; font-size: calc(8.4pt * var(--gk, 1)); line-height: 1.55; color: var(--murekkep-2); }
.metin-govde { columns: 2; column-gap: 9mm; margin-top: 7mm; }
.metin-govde p { font-size: calc(9.2pt * var(--gk, 1)); line-height: 1.68;
  margin: 0 0 calc(4mm * var(--gk, 1)); break-inside: avoid; }

/* ────────────────────────────────────────────────── marka açılış sayfası */
.marka-acilis { background: var(--koyu); color: #fff; }
.marka-acilis .foto-alan {
  position: absolute;
  inset-block-start: 30mm;
  inset-inline-end: 0;
  width: 112mm;
  height: 172mm;
}
.marka-acilis .foto-alan img { width: 100%; height: 100%; object-fit: contain; }
.marka-acilis::before {
  content: "";
  position: absolute;
  inset-block-start: 36mm;
  inset-inline-end: -16mm;
  width: 146mm;
  height: 162mm;
  background: radial-gradient(48% 44% at 50% 50%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 72%);
}
.marka-acilis .logo-plaka { position: relative; width: fit-content; }
.marka-acilis .logo-plaka img { height: 12mm; display: block; }
.marka-acilis .slogan {
  position: relative;
  margin-top: 4mm;
  font-family: var(--yazi-baslik);
  font-size: calc(8pt * var(--gk, 1));
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--bolum-renk);
}
.marka-acilis h1 {
  position: relative;
  font-size: calc(33pt * var(--gk, 1));
  line-height: 1.02;
  text-transform: uppercase;
  margin-top: 7mm;
  max-width: 90mm;
}
.marka-acilis .giris { position: relative; color: rgba(255,255,255,.72); max-width: 86mm; }
.vurgu-liste { position: relative; margin-top: auto; display: grid; grid-template-columns: 1fr 1fr;
  gap: calc(6mm * var(--gk, 1)) 8mm; }
.vurgu-liste div { border-top: .5mm solid rgba(255,255,255,.26); padding-top: calc(3.5mm * var(--gk, 1)); }
.vurgu-liste b {
  display: block;
  font-family: var(--yazi-baslik);
  font-weight: 400;
  font-size: calc(11pt * var(--gk, 1));
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 2mm;
}
.vurgu-liste p { margin: 0; font-size: calc(8pt * var(--gk, 1)); line-height: 1.5; color: rgba(255,255,255,.66); }

/* ───────────────────────────────────────────────────────────── ürün haritası */
.harita {
  flex: 1 1 0; min-height: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  /* kutular icerigi kadar yuksek olur, satirlar sayfaya yayilir:
     esit yukseklikte kutularda az maddeli gruplar bombos kaliyordu */
  grid-auto-rows: min-content;
  align-content: space-between;
  gap: 7mm; margin-top: 8mm;
}
.harita-grup { background: var(--kart); padding: calc(7mm * var(--gk, 1)) 7mm; overflow: hidden; position: relative; }
.harita-grup::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%; height: 1.4mm;
  background: var(--bolum-renk);
}
.harita-grup h3 { font-size: calc(12pt * var(--gk, 1)); text-transform: uppercase; color: var(--koyu); margin-bottom: 3.5mm; }
.harita-grup ul { margin: 0; padding: 0; list-style: none; }
.harita-grup li {
  font-size: calc(9pt * var(--gk, 1));
  line-height: 1.85;
  color: var(--murekkep-2);
  padding-inline-start: 4mm;
  position: relative;
}
.harita-grup li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 2mm;
  width: 1.6mm; height: .5mm;
  background: var(--bolum-renk);
}

/* ────────────────────────────────────────── kahraman ürün (çift sayfa) */
.kahraman-sol { background: var(--koyu); color: #fff; }
.kahraman-sol .foto {
  position: absolute;
  inset-block-start: 54mm;
  inset-inline: 10mm;
  width: calc(100% - 20mm);
  height: 172mm;
  object-fit: contain;
}
.kahraman-sol::before {
  content: "";
  position: absolute;
  inset-block-start: 66mm;
  inset-inline: 0;
  height: 152mm;
  background: radial-gradient(44% 40% at 50% 50%, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 74%);
}
.kahraman-sol .ust { position: absolute; inset-block-start: var(--ic-kenar); inset-inline: var(--ic-kenar); z-index: 2; }
.kahraman-sol h1 { font-size: calc(36pt * var(--gk, 1)); line-height: 1; text-transform: uppercase; max-width: 150mm; }
.kahraman-sol .hacim {
  display: inline-block;
  margin-top: 5mm;
  background: var(--bolum-renk);
  color: #fff;
  font-family: var(--yazi-baslik);
  font-size: calc(8.5pt * var(--gk, 1));
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 1.8mm 4mm;
}
.kahraman-sol .puan {
  position: absolute;
  inset-block-end: calc(var(--tasma) + 19mm);
  inset-inline: var(--ic-kenar);
  display: flex;
  gap: 9mm;
  border-top: .4mm solid rgba(255,255,255,.22);
  padding-top: 4mm;
  z-index: 2;
}
.kahraman-sol .puan div b {
  display: block;
  font-family: var(--yazi-baslik);
  font-weight: 400;
  font-size: calc(20pt * var(--gk, 1));
  line-height: 1;
}
.kahraman-sol .puan div span {
  display: block;
  margin-top: 1.5mm;
  font-size: calc(6.6pt * var(--gk, 1));
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.58);
}

.kahraman-sag .ozet {
  font-size: calc(13pt * var(--gk, 1));
  line-height: 1.5;
  color: var(--koyu);
  max-width: 150mm;
  border-inline-start: 1.6mm solid var(--bolum-renk);
  padding-inline-start: 6mm;
  margin: 0;
}
.kahraman-sag ul.ana-faydalar { margin: 7mm 0 0; padding: 0; list-style: none; }
.kahraman-sag ul.ana-faydalar li {
  position: relative;
  padding-inline-start: 5.5mm;
  font-size: calc(9.6pt * var(--gk, 1));
  line-height: 1.5;
  margin-bottom: calc(2.4mm * var(--gk, 1));
}
.kahraman-sag ul.ana-faydalar li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 1.9mm;
  width: 2.4mm; height: 2.4mm;
  background: var(--bolum-renk);
}
.set-liste { margin-top: 4mm; column-count: 2; column-gap: 9mm; }
.set-liste div {
  break-inside: avoid;
  display: flex;
  gap: 3mm;
  align-items: baseline;
  padding: calc(4.4mm * var(--gk, 1)) 0;
  border-bottom: .25mm solid var(--cizgi);
  font-size: calc(9pt * var(--gk, 1));
}
.set-liste div i {
  font-style: normal;
  font-family: var(--yazi-baslik);
  font-size: calc(8.5pt * var(--gk, 1));
  color: var(--bolum-renk);
  min-width: 6.5mm;
}
.kahraman-sag .yuzeyler { margin: 7mm 0 0; gap: 2mm; }
.kahraman-sag .yuzeyler span { font-size: calc(7pt * var(--gk, 1)); padding: 1.6mm 3.2mm; background: var(--kart); }
.foto-serit {
  margin-top: 4mm;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 3mm;
}
.foto-serit img {
  width: 100%; height: calc(38mm * var(--gk, 1)); object-fit: contain;
  background: var(--kart); padding: 2mm;
}
.kimlik-serit {
  margin-top: 5mm;
  padding-top: 3mm;
  border-top: .25mm solid var(--cizgi);
  font-family: var(--yazi-baslik);
  font-size: calc(7.4pt * var(--gk, 1));
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--murekkep-2);
}
.kimlik-serit b { color: var(--koyu); }
.kimlik-serit bdi { unicode-bidi: isolate; }

/* ───────────────────────────────────────────────────────────── ürün kartları
   --kk: kart küçültme katsayısı. Varsayılan 1. İçerik karta sığmazsa
   araclar/olustur.py'nin gömdüğü sığdırma betiği bu değeri kademeli düşürür.
   Bütün punto ve dikey boşluklar bu katsayıyla çarpılır, böylece metin uzunluğu
   ne olursa olsun (çeviri sürümleri dahil) kırpılma olmaz. */
.kartlar { flex: 1 1 0; min-height: 0; display: grid; gap: 6mm; }
.kartlar.k2 { grid-template-columns: 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); }
.kartlar.k3 { grid-template-columns: 1fr; grid-template-rows: repeat(3, minmax(0, 1fr)); }
.kartlar.k4 { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 6mm; }
.kartlar.k6 { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 5mm; }

.kart {
  --kk: 1;
  display: flex;
  background: var(--kart);
  min-height: 0; min-width: 0;
  overflow: hidden;
}
.kart .foto {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--kart);
}
.kart .foto img { width: 100%; height: 100%; object-fit: contain; padding: 4mm; }
.kart .bilgi {
  flex: 1;
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  padding: calc(5mm * var(--kk)) 6mm;
}

.k2 .kart .foto { width: 52mm; }
.k3 .kart .foto { width: 40mm; }
.k2 .kart.ters { flex-direction: row-reverse; }

/* bölümün son sayfasında tek ürün kalırsa: tam sayfa kart */
.k2.tek .kart .foto { width: 86mm; align-items: center; }
.k2.tek .kart .foto img {
  width: auto; height: auto;
  max-width: 100%; max-height: 152mm;
  padding: 0;
}
.k2.tek .kart .bilgi { padding: 9mm 10mm; }
.k2.tek .kart h3 { font-size: calc(20pt * var(--gk, 1)); }
.k2.tek .kart .hacim { font-size: calc(8pt * var(--gk, 1)); padding: 1.6mm 3.6mm; margin-top: 3mm; }
.k2.tek .kart .ozet { font-size: calc(11pt * var(--gk, 1)); line-height: 1.55; margin-top: 5mm; max-width: 96mm; }
.k2.tek .kart ul.faydalar li { font-size: calc(9.4pt * var(--gk, 1)); padding: 2.6mm 0 2.6mm 5mm; }
.k2.tek .kart ul.faydalar li::before { top: 5mm; width: 2.6mm; }
.k2.tek .kart .yuzeyler span { font-size: calc(7pt * var(--gk, 1)); padding: 1.4mm 3mm; }
.k2.tek .kart .kimlik { font-size: calc(8pt * var(--gk, 1)); }

.k4 .kart { flex-direction: column; }
.k4 .kart .foto { width: 100%; height: 52mm; }
.k4 .kart .bilgi { padding: calc(4.5mm * var(--kk)) 5mm calc(5mm * var(--kk)); }
.k4 .kart h3 { font-size: calc(11.5pt * var(--kk)); }
.k4 .kart .ozet { font-size: calc(7.8pt * var(--kk)); }
.k4 .kart ul.faydalar li { font-size: calc(7.6pt * var(--kk)); }

.k6 .kart { flex-direction: column; }
.k6 .kart .foto { width: 100%; height: 38mm; }
.k6 .kart .bilgi { padding: calc(4mm * var(--kk)) 4.5mm calc(4.5mm * var(--kk)); }

.kart h3 {
  font-size: calc(13.5pt * var(--kk));
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--koyu);
}
.k3 .kart h3 { font-size: calc(12pt * var(--kk)); }
.k6 .kart h3 { font-size: calc(10pt * var(--kk)); }

.kart .hacim {
  align-self: flex-start;
  margin-top: calc(2mm * var(--kk));
  background: var(--bolum-renk);
  color: #fff;
  font-family: var(--yazi-baslik);
  font-size: calc(6.8pt * var(--kk));
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: calc(1.1mm * var(--kk)) 2.6mm;
}
.kart .ozet {
  margin-top: calc(3mm * var(--kk));
  font-size: calc(8.3pt * var(--kk));
  line-height: 1.52;
  color: var(--murekkep-2);
}
.k6 .kart .ozet { font-size: calc(7.3pt * var(--kk)); line-height: 1.45; margin-top: calc(2.5mm * var(--kk)); }

.kart ul.faydalar { margin: calc(3.5mm * var(--kk)) 0 0; padding: 0; list-style: none; }
.kart ul.faydalar li {
  font-size: calc(8pt * var(--kk));
  line-height: 1.45;
  padding: calc(1.6mm * var(--kk)) 0 calc(1.6mm * var(--kk)) 4mm;
  border-top: .25mm solid var(--kagit-2);
  position: relative;
}
.kart ul.faydalar li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: calc(3.4mm * var(--kk));
  width: 2mm; height: .5mm;
  background: var(--bolum-renk);
}

.kart .kullanim {
  margin-top: calc(3.5mm * var(--kk));
  background: var(--kagit);
  padding: calc(3mm * var(--kk)) 3.5mm;
}
.kart .kullanim b {
  display: block;
  font-family: var(--yazi-baslik);
  font-size: calc(6.6pt * var(--kk));
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--murekkep-2);
  margin-bottom: calc(1.8mm * var(--kk));
}
.kart .kullanim ol { margin: 0; padding-inline-start: 4mm; }
.kart .kullanim li { font-size: calc(7.5pt * var(--kk)); line-height: 1.42; margin-bottom: calc(.7mm * var(--kk)); }

.kart .uyari b {
  display: block;
  font-family: var(--yazi-baslik);
  font-size: .86em;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .6mm;
}
.kart .uyari {
  margin-top: calc(2.5mm * var(--kk));
  font-size: calc(7.1pt * var(--kk));
  line-height: 1.4;
  color: var(--kirmizi-koyu);
  border-inline-start: .8mm solid var(--kirmizi);
  padding-inline-start: 2.5mm;
}
.kart .set-icerik { margin-top: calc(3.5mm * var(--kk)); }
.kart .set-icerik b {
  display: block;
  font-family: var(--yazi-baslik);
  font-size: calc(6.6pt * var(--kk));
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--murekkep-2);
  margin-bottom: calc(1.8mm * var(--kk));
}
.kart .set-icerik ul { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 5mm; }
.kart .set-icerik li { font-size: calc(7.5pt * var(--kk)); line-height: 1.5; break-inside: avoid; }
.kart .set-icerik li::before { content: "·"; color: var(--bolum-renk); font-weight: 700; margin-inline-end: 1.5mm; }

/* uygulama yüzeyleri */
.yuzeyler { display: flex; flex-wrap: wrap; gap: 1.5mm; margin-top: calc(3.5mm * var(--kk)); }
.yuzeyler span .ml, .kart .kimlik .ml, .kimlik-serit .ml { display: inline; unicode-bidi: isolate; }
html:not([dir="rtl"]) .yuzeyler span .ml-en::after,
html:not([dir="rtl"]) .yuzeyler span .ml-tr::after,
html:not([dir="rtl"]) .kart .kimlik .ml-en::after,
html:not([dir="rtl"]) .kart .kimlik .ml-tr::after,
html:not([dir="rtl"]) .kimlik-serit .ml-en::after,
html:not([dir="rtl"]) .kimlik-serit .ml-tr::after,
html[dir="rtl"] .yuzeyler span .ml-ar::after,
html[dir="rtl"] .kart .kimlik .ml-ar::after,
html[dir="rtl"] .kimlik-serit .ml-ar::after {
  content: " · ";
  color: inherit;
  opacity: .5;
}
.yuzeyler span {
  font-family: var(--yazi-baslik);
  font-size: calc(6.2pt * var(--kk));
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bolum-koyu);
  background: var(--kagit-2);
  padding: calc(1mm * var(--kk)) 2.2mm;
}

.kart .kimlik {
  margin-top: auto;
  padding-top: calc(3mm * var(--kk));
  font-family: var(--yazi-baslik);
  font-size: calc(6.8pt * var(--kk));
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--murekkep-2);
}
.kart .kimlik b { color: var(--koyu); }
.kart .kimlik bdi { unicode-bidi: isolate; }

/* ──────────────────────────────────────────────────────── toptan / kanallar */
.toptan-kartlar {
  flex: 1 1 0; min-height: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 6mm; margin: 8mm 0;
}
.toptan-kart { background: var(--kart); padding: calc(7mm * var(--gk, 1)) 7mm; overflow: hidden; position: relative;
  display: flex; flex-direction: column; justify-content: center; }
.toptan-kart::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%; height: 1.4mm;
  background: var(--bolum-renk);
}
.toptan-kart h3 { font-size: calc(13pt * var(--gk, 1)); text-transform: uppercase; color: var(--koyu); margin-bottom: 3mm; }
.toptan-kart p { margin: 0; font-size: calc(8.4pt * var(--gk, 1)); line-height: 1.6; color: var(--murekkep-2); }
.basvuru-serit { background: var(--koyu); color: #fff; padding: 7mm 8mm; }
.basvuru-serit h3 { font-size: calc(11pt * var(--gk, 1)); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2.5mm; color: #fff; }
.basvuru-serit p { margin: 0; font-size: calc(8.8pt * var(--gk, 1)); line-height: 1.6; color: rgba(255,255,255,.78); max-width: 145mm; }

/* ───────────────────────────────────────────────────────────── ürün tablosu */
.tablo-iki {
  flex: 1 1 0; min-height: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 7mm;
  align-content: start; margin-top: 5mm;
}
.tablo-iki .urun-tablo { font-variant-numeric: tabular-nums; }
.tablo-iki .urun-tablo td:first-child { padding-inline-end: 3mm; }
.tablo-iki .urun-tablo .grup td { padding: 1.7mm 1.5mm; }
.urun-tablo { width: 100%; border-collapse: collapse; }
.urun-tablo th {
  text-align: start;
  font-family: var(--yazi-baslik);
  font-size: calc(6.2pt * var(--gk, 1));
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--murekkep-2);
  border-bottom: .6mm solid var(--koyu);
  padding-bottom: 1.8mm;
}
.urun-tablo td {
  font-size: calc(6.9pt * var(--gk, 1));
  padding: calc(1.25mm * var(--gk, 1)) 1.5mm calc(1.25mm * var(--gk, 1)) 0;
  border-bottom: .2mm solid var(--cizgi);
  vertical-align: top;
}
.urun-tablo td:first-child, .urun-tablo th:first-child { padding-inline-start: 0; }
.urun-tablo .ad { font-weight: 700; color: var(--koyu); }
.urun-tablo bdi { unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.urun-tablo .grup td {
  background: var(--bolum-renk);
  color: #fff;
  font-family: var(--yazi-baslik);
  font-size: calc(6.6pt * var(--gk, 1));
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 2mm 1.5mm;
  border-bottom: 0;
}
.dipnot { margin-top: 4mm; font-size: calc(7.2pt * var(--gk, 1)); color: var(--murekkep-2); }

/* set karşılaştırma tablosu — tek blok, geniş satır */
.set-tablo { margin-top: 8mm; }
.set-tablo td { font-size: calc(8.4pt * var(--gk, 1));
  padding: calc(4.4mm * var(--gk, 1)) 2.5mm calc(4.4mm * var(--gk, 1)) 0; }
.set-tablo th { font-size: calc(6.6pt * var(--gk, 1)); padding-bottom: 2.2mm; }
.set-tablo tbody tr:nth-child(odd) td { background: rgba(0,0,0,.022); }

/* ───────────────────────────────────────────────────────────── güvenlik */
.guvenlik-liste { margin: 7mm 0 8mm; columns: 2; column-gap: 9mm; }
.guvenlik-liste div {
  break-inside: avoid;
  display: flex; gap: 3mm;
  padding: calc(5.4mm * var(--gk, 1)) 0;
  border-bottom: .25mm solid var(--cizgi);
}
.guvenlik-liste i {
  font-style: normal;
  font-family: var(--yazi-baslik);
  color: var(--bolum-renk);
  font-size: calc(9pt * var(--gk, 1));
  min-width: 6mm;
}
.guvenlik-liste p { margin: 0; font-size: calc(9pt * var(--gk, 1)); line-height: 1.5; }

/* ───────────────────────────────────────────────────────────── iletişim */
.iletisim-govde { display: grid; grid-template-columns: 1.15fr 1fr; gap: 11mm;
  margin: 8mm 0 9mm; align-content: start; }
.iletisim-govde h3 {
  font-size: calc(8pt * var(--gk, 1));
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bolum-renk);
  margin-bottom: 3.5mm;
}
.iletisim-govde .satir { padding: calc(4.6mm * var(--gk, 1)) 0; border-bottom: .25mm solid var(--cizgi); }
.iletisim-govde .satir span {
  display: block;
  font-family: var(--yazi-baslik);
  font-size: calc(6.8pt * var(--gk, 1));
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--murekkep-2);
  margin-bottom: .8mm;
}
.iletisim-govde .satir b { font-size: calc(9.2pt * var(--gk, 1)); line-height: 1.4; }
.iletisim-govde .satir bdi { unicode-bidi: isolate; }

/* ───────────────────────────────────────────────────────────── arka kapak */
.arka { background: var(--antrasit); color: #fff; }
.arka .orta {
  position: absolute;
  inset-inline: var(--ic-kenar);
  inset-block-start: 44%;
  transform: translateY(-50%);
  text-align: center;
}
.arka .logolar {
  display: flex; gap: 10mm; justify-content: center; align-items: center;
  width: fit-content; margin: 0 auto 13mm;
}
.arka .logolar img { height: 11mm; display: block; }
.arka .logolar span { width: .3mm; height: 12mm; background: rgba(255,255,255,.3); }
.arka .cumle { font-family: var(--yazi-baslik); font-size: calc(22pt * var(--gk, 1)); line-height: 1.25; text-transform: uppercase; }
.arka .alt {
  margin-top: 6mm;
  font-family: var(--yazi-baslik);
  font-size: calc(8pt * var(--gk, 1));
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gri);
}
.arka .iletisim-kucuk {
  position: absolute;
  inset-inline: var(--ic-kenar);
  inset-block-end: 20mm;
  text-align: center;
  font-size: calc(8.4pt * var(--gk, 1));
  line-height: 1.75;
  color: rgba(255,255,255,.62);
}
.arka .iletisim-kucuk bdi { unicode-bidi: isolate; }
.arka .serit {
  position: absolute; inset-block-end: 0; inset-inline: 0; height: 5mm;
  background: linear-gradient(to right, var(--kirmizi) 0 34%, var(--mavi) 34% 67%, var(--gri) 67% 100%);
}