/* =====================================================================
   KARAM Safety — rf.css · "RAF" · TUR 54 · YALNIZ URUN DETAY
   2026-09-09
   ---------------------------------------------------------------------
   YON: "SADE TICARET DISIPLINI" (kullanicidan alinan cevap).
   Bu dosya BILEREK gosterissizdir. Yasak listesi (uretilmez):
     · 60px ustu sus basligi   · 01/02/03 bolum numarasi
     · tam tasma murekkep bant · kaydirmayla acilan katman
     · sahne/acilis animasyonu · dev EN rakamlari
     · asimetrik editoryal izgara
   Olcut "carpici" degil, "gercek bir e-ticaret sayfasi gibi calisiyor".

   ⛔ KORUNAN BOLUMLERE ULASMAZ: her secici bir `.rf` belirteci tasir.
      Test: document.querySelectorAll('[class^=rf-],[class*=" rf-"]')
            hepsinin el.closest('.rf') !== null olmasi.
      GENEL secici (section/h2/p/button/.wrap/.card) KULLANILMAZ.

   RENK — YALNIZ UC DEGER: #ffffff · #151512 · #ff5a1f
     Ara tonlar YALNIZ murekkep opakligiyla uretilir.
     ⚠ OLCULMUS ESIK: #151512 @ .60 beyaz uzerinde 4,77:1 → AA taban.
       .60'in ALTI kucuk metinde KULLANILMAZ (tur 44 tuzagi).
     ⚠ OLCULMUS ESIK: #ff5a1f uzerine BEYAZ 3,12:1 → AA'yi GECMEZ.
       #ff5a1f uzerine #151512 5,87:1 → GECER. Birincil CTA bu yuzden
       TURUNCU ZEMIN + MUREKKEP METIN'dir (tur 48/51/52 tuzagi).
     ⚠ Kucuk TURUNCU METIN beyaz uzerinde KULLANILMAZ (3,12:1).
   ===================================================================== */

.rf {
  --w: #ffffff;
  --ink: #151512;
  --acc: #ff5a1f;

  /* murekkep opaklik merdiveni — AA tabani .60 */
  --i88: rgba(21, 21, 18, .88);
  --i72: rgba(21, 21, 18, .72);
  --i62: rgba(21, 21, 18, .62);   /* kucuk metin TABANI (4,9:1) */
  --i22: rgba(21, 21, 18, .22);
  --i14: rgba(21, 21, 18, .14);
  --i08: rgba(21, 21, 18, .08);
  --i04: rgba(21, 21, 18, .04);

  /* yaricap dili — 12 / 18 / 26; SaaS kartlari degil, kesin kenarlar */
  --r1: 12px;
  --r2: 18px;
  --r3: 26px;
  --rp: 999px;

  --t1: .16s;
  --t2: .26s;
  --ez: cubic-bezier(.22, .61, .36, 1);

  /* ⚑ CILA (09.09.2026): OLCULEN tutarsizliklar jetona baglandi.
     Once: 12 ayri font boyutu (10,5 / 11,5 / 12,5 / 13,5 / 14,5 gibi
     yarim adimlar), 17 ayri gap, 6 ayri kontrol yuksekligi.
     Simdi: 7 adimli tip olcegi, 4'un katlari bosluk, 3 kontrol boyu. */
  --f0: 11px;    /* rozet sayisi */
  --f1: 12px;    /* mikro etiket — mono, buyuk harf */
  --f2: 13px;    /* ikincil metin */
  --f3: 14px;    /* govde */
  --f4: 15px;    /* one cikan govde · sekme · CTA */
  --f5: 17px;    /* urun kodu · adet · katman basligi */
  --f6: 18px;    /* panel basligi */

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;

  --rf-mh: 56vh; /* cerceve TAVAN yuksekligi — kirilimda buyur */

  --hc: 44px;    /* kompakt kontrol */
  --hs: 48px;    /* standart kontrol */
  --hp: 56px;    /* birincil CTA */

  /* perdeler — daginik .34/.5/.58/.72/.9 yerine UC rol */
  --ov:  rgba(21, 21, 18, .55);   /* panel/cekmece perdesi */
  --ovd: rgba(21, 21, 18, .90);   /* isik kutusu */
  --ovh: rgba(21, 21, 18, .58);   /* belge onizleme ortusu */

  --lsx: .1em;   /* buyuk harf mikro etiket izleme — TEK deger */

  --disp: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --hdr: 72px;

  display: block;
  background: var(--w);
  color: var(--ink);
  font-family: var(--disp);
  /* ⚠ TUR 42 TUZAGI: vw ile tam tasma kaydirma cubugunu sayar → bu
     turda tam tasma HIC kullanilmaz; kabuk her zaman sinirlidir. */
  overflow-x: clip;
}

.rf *,
.rf *::before,
.rf *::after { box-sizing: border-box; }

/* ⚠⚠ OLCULMUS TUZAK (tur 50 tuzagi #4, tur 51 tuzagi #1 — bu turda YINE
   yasandi): `hidden` NITELIGI, `display:flex/grid/inline-flex` veren bir
   kural tarafindan SESSIZCE EZILIR. Ekran goruntusunde yakalandi: liste
   bosken "Talep listesini ac" dugmesi rozetinde 0 ile GORUNUYORDU; ayni
   hata `.rf-spec__r--x` (kademeli acilim satirlari) ve `.rf-bar__l`
   uzerinde de vardi. Tek satirlik kapsamli kural hepsini kapatir.
   ⚠ `.rf` ile KAPSANMISTIR — korunan bolumlere ULASMAZ. */
.rf [hidden] { display: none !important; }

.rf :focus-visible {
  outline: 3px solid var(--acc);
  outline-offset: 2px;
  border-radius: var(--r1);
}

.rf-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ── kabuk ───────────────────────────────────────────────────────────
   ⚑ SITE GENELIYLE BIREBIR AYNI (kullanici istegi, 09.09.2026).
     Kanonik tanim `assets/css/style.css`:
       --pad: clamp(20px, 5vw, 80px)
       .wrap { max-width:100%; width:100%; margin-inline:auto;
               padding-inline: var(--pad) }
     Yani sitenin kabinda MAX-WIDTH YOKTUR: tam genislik + yuzdeli
     ic bosluk. `.rf-shell` artik ayni geometriyi kullanir → urun detay
     govdesi korunan `.kx-hero .wrap` ve `.kx-sect .wrap` ile TAM HIZALI
     baslar ve biter.
   ⚠ `--pad` DEGISKENI YENIDEN TANIMLANMAZ: bazi tur CSS'leri (kb/ky/vy/tz)
     onu kendi koklerinde eziyor; burada deger DOGRUDAN yazilir ki
     rf disina da sizmasin, rf de onlardan etkilenmesin.
   ⚠ ONCEKI SURUM burada `min(1280px, 100vw-190px)` gibi bir TAVAN
     kullaniyordu (sag sabit fab sutunundan kacinmak icin). O tavan
     kaldirildi cunku SITENIN KENDISI de fab sutununun altindan geciyor —
     kabugu daraltmak urun detayi sitenin geri kalanindan GORSEL OLARAK
     AYIRIYORDU. Fab cakismasi ayrica olculur (bkz. ovl.py). */
.rf-shell {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 80px);
}

/* ═════════ A · RAF — galeri + teklif konsolu ═════════ */
.rf-shop { padding: clamp(24px, 4vw, 44px) 0 clamp(28px, 4vw, 48px); }

/* ⚠⚠ OLCULMUS TUZAK: burada ESKIDEN `align-items:start` vardi. O deger
   izgara ogesini icerigi kadar KISALTIR → `position:sticky` verilen ogenin
   yapisacak MESAFESI KALMAZ ve sticky SESSIZCE HIC CALISMAZ. Olculdu
   (KB505 @1440): galeri sutunu 247 px, konsol 630 px — yani 383 px'lik
   gercek bir yapisma mesafesi VARDI ama kullanilamiyordu.
   → Ogeler GERILIR (varsayilan stretch); yapiskan olan onlarin ICINDEKI
     `.rf-gal__in` / `.rf-buy__in` sarmalayicilaridir. */
.rf-shop__in {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3vw, 34px);
}

/* ── galeri ─────────────────────────────────────────────────────────
   ⚠⚠ TUR 53 TUZAGI #1: `aspect-ratio` + yuzde genislik BELIRSIZ tabana
      cozulur ve Chromium GENISLIGI geri hesaplar. Her ataya ACIKCA
      width:100% yazilir. */
.rf-gal { width: 100%; min-width: 0; }

.rf-stage { width: 100%; }

/* ⚑ CERCEVE nesneye gore kesilir: --rf-ar (oran) ve --rf-cap (dogal
   genislik x1,15 TAVANI) sunucudan gelir. Buyutme YAPILMAZ. */
/* ⚑⚑ SAHNE SUTUNU DOLDURUR (kullanici istegi, 09.09.2026:
   ".rf-gal .rf-gal--solo genisligi TUM urunlerde %100 olmali").
   ONCE: sahne genisligi `min(dogal x1,15, tavan x oran)` ile
   KISILIYORDU → KM522'de sutun 778 px iken cerceve 678 px kaliyor,
   sagda 100 px'lik olu bir serit birakiyordu (kullanicinin bildirdigi
   ikinci kirik).
   SIMDI: sahne HER ZAMAN sutunun %100'u.

   ⚠ BUYUTME YASAGI KORUNDU — kritik: sahneyi %100 yapmak GORSELI
     buyutmemeli. Katalogda medyan kisa kenar 624 px, 34 urun 400 px
     alti (tur 50 tuzagi #1: 1,3x'te medyan uründe yumusama GORULDU).
     Cozum: KUTU %100, GORSEL ise `--rf-cap` (dogal x1,15) ile sinirli
     ve ortali. Boylece sahne dolar, piksel bozulmaz.

   ⚠ ORAN TABANI/TAVANI: `clamp(.80, oran, 3.2)`.
     Ham oran kullanilsaydi 0,18'lik bir urun sutunun 5 kati yuksekliginde
     bir kutu uretirdi. 3,2 tavani 2,90-4,00 arasindaki 10 urunun
     (or. KA300 = 2,93) TAM oturmasini saglar. */
.rf-hold {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  aspect-ratio: clamp(.80, var(--rf-ar, 1), 3.2);
  max-height: var(--rf-mh);
  border: 1px solid var(--i14);
  border-radius: var(--r3);
  background: var(--w);
  overflow: hidden;
}

.rf-frame {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 2.4vw, 30px);
}
.rf-frame picture { display: contents; }
.rf-frame img {
  /* ⚠ BUYUTME YOK: `--rf-cap` = dogal genislik x1,15. Sahne genislese de
     gorsel bu tavani ASMAZ → kucuk kaynaklarda yumusama olusmaz. */
  max-width: min(100%, var(--rf-cap, 100%));
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
}

/* buyutec — pointer:fine'de gorunur; dokunmatikte tam ekran dugmesi kalir */
.rf-zoom {
  position: absolute;
  right: 12px; bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--hc);
  padding: 0 var(--s4);
  font: 500 var(--f2)/1 var(--disp);
  color: var(--ink);
  background: var(--w);
  border: 1px solid var(--i22);
  border-radius: var(--rp);
  cursor: pointer;
  transition: border-color var(--t1) var(--ez), background var(--t1) var(--ez);
}
.rf-zoom svg { width: 16px; height: 16px; }
.rf-zoom:hover { border-color: var(--ink); background: var(--i04); }

.rf-count {
  position: absolute;
  left: 12px; bottom: 12px;
  font: 500 var(--f1)/1 var(--mono);
  color: var(--i72);
  background: var(--w);
  border: 1px solid var(--i14);
  border-radius: var(--rp);
  padding: var(--s2) var(--s3);
}

/* ray — yatay, sade kareler */
.rf-rail {
  display: flex;
  gap: var(--s3);
  margin-top: var(--s3);
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: var(--s1);
}
.rf-rail__b {
  flex: 0 0 auto;
  width: 76px; height: 76px;
  padding: var(--s2);
  background: var(--w);
  border: 1px solid var(--i22);
  border-radius: var(--r1);
  cursor: pointer;
  transition: border-color var(--t1) var(--ez), background var(--t1) var(--ez);
}
.rf-rail__b img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rf-rail__b:hover { border-color: var(--ink); background: var(--i04); }
.rf-rail__b[aria-current="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* ── teklif konsolu ─────────────────────────────────────────────────
   Sade: kutu YOK, kenarlik YOK. Sayfanin beyazi uzerinde durur; ayrimi
   tipografi ve bosluk yapar. (Onceki turlarda konsol her seferinde bir
   "kart" idi — bu turda DEGIL.) */
.rf-buy { width: 100%; min-width: 0; }
.rf-buy__in { display: flex; flex-direction: column; gap: var(--s4); }

.rf-grp {
  margin: 0;
  font: 500 var(--f1)/1.2 var(--mono);
  letter-spacing: var(--lsx);
  text-transform: uppercase;
  color: var(--i62);
}
.rf-name {
  margin: 0;
  font: 600 clamp(21px, 2.3vw, 27px)/1.25 var(--disp);
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}

.rf-code {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  padding-block: var(--s1);
}
.rf-code__l { font: 500 var(--f1)/1 var(--mono); letter-spacing: var(--lsx); text-transform: uppercase; color: var(--i62); }
.rf-code__v {
  font: 600 var(--f5)/1 var(--mono);
  letter-spacing: .04em;
  color: var(--ink);
}
.rf-copy {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--hc);
  padding: 0 var(--s3);
  font: 500 var(--f1)/1 var(--disp);
  color: var(--i72);
  background: transparent;
  border: 1px solid var(--i22);
  border-radius: var(--r1);
  cursor: pointer;
  transition: color var(--t1) var(--ez), border-color var(--t1) var(--ez), background var(--t1) var(--ez);
}
.rf-copy svg { width: 14px; height: 14px; }
.rf-copy:hover { color: var(--ink); border-color: var(--ink); background: var(--i04); }

/* uygunluk — kucuk, sessiz. Turuncu KULLANILMAZ (kucuk turuncu metin
   beyaz uzerinde 3,12:1 ile AA'yi gecmez). */
.rf-std { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.rf-std__i {
  font: 500 var(--f1)/1 var(--mono);
  letter-spacing: .06em;
  color: var(--i88);
  background: var(--i04);
  border: 1px solid var(--i14);
  border-radius: var(--r1);
  padding: var(--s2) var(--s3);
}

/* one cikan degerler — konsolda EN FAZLA UC satir */
.rf-quick { margin: 0; padding: 0; display: flex; flex-direction: column; }
.rf-quick__r {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--i08);
}
.rf-quick__r:first-child { border-top: 1px solid var(--i08); }
.rf-quick dt { font: 400 var(--f2)/1.4 var(--disp); color: var(--i62); }
.rf-quick dd { margin: 0; font: 500 var(--f2)/1.4 var(--disp); color: var(--ink); text-align: right; }

/* eylem alani */
.rf-act { display: flex; flex-direction: column; gap: var(--s3); }

.rf-qty {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  border: 1px solid var(--i22);
  border-radius: var(--r1);
  overflow: hidden;
}
.rf-qty__b {
  width: var(--hs); height: var(--hs);
  display: grid; place-items: center;
  background: var(--w);
  border: 0;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--t1) var(--ez);
}
.rf-qty__b svg { width: 17px; height: 17px; }
.rf-qty__b:hover { background: var(--i08); }
.rf-qty__b:disabled { color: var(--i22); cursor: not-allowed; background: var(--w); }
.rf-qty__i {
  width: 64px; height: var(--hs);
  border: 0;
  border-inline: 1px solid var(--i14);
  text-align: center;
  font: 600 var(--f5)/1 var(--mono);
  color: var(--ink);
  background: var(--w);
  -moz-appearance: textfield;
}
.rf-qty__i::-webkit-outer-spin-button,
.rf-qty__i::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.rf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--hp);
  padding: 0 var(--s5);
  font: 600 var(--f4)/1 var(--disp);
  letter-spacing: .005em;
  text-decoration: none;
  border-radius: var(--r1);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--t1) var(--ez), border-color var(--t1) var(--ez), color var(--t1) var(--ez);
}
.rf-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* ⚑ BIRINCIL: TURUNCU ZEMIN + MUREKKEP METIN = 5,87:1 (AA gecer). */
.rf-btn--p { background: var(--acc); color: var(--ink); border-color: var(--acc); }
.rf-btn--p:hover { background: var(--ink); color: var(--w); border-color: var(--ink); }

.rf-btn--s { background: var(--w); color: var(--ink); border-color: var(--i22); }
.rf-btn--s:hover { border-color: var(--ink); background: var(--i04); }
.rf-btn--s[data-rf-on="1"] { border-color: var(--ink); background: var(--ink); color: var(--w); }

.rf-line { margin: 0; font: 400 var(--f2)/1.5 var(--disp); color: var(--i62); }
.rf-line__e { color: var(--i62); }
.rf-line__v { color: var(--ink); font-weight: 500; }

.rf-reach { display: flex; gap: var(--s2); }
.rf-reach__a {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--hs);
  padding: 0 var(--s3);
  font: 500 var(--f3)/1 var(--disp);
  color: var(--ink);
  text-decoration: none;
  background: var(--w);
  border: 1px solid var(--i22);
  border-radius: var(--r1);
  transition: border-color var(--t1) var(--ez), background var(--t1) var(--ez);
}
.rf-reach__a svg { width: 17px; height: 17px; }
.rf-reach__a:hover { border-color: var(--ink); background: var(--i04); }

.rf-nop { margin: 0; font: 400 var(--f1)/1.55 var(--disp); color: var(--i62); }

/* ═════════ B · BILGI — SEKMELI KUTU ═════════ */
.rf-info { padding: 0 0 clamp(30px, 5vw, 56px); }

/* ⚠ JS YOKSA tablist BASILMAZ (paneller zaten acik ve baslikli). */
.rf-tabs { display: none; }
.rf[data-rf-tabs="on"] .rf-tabs {
  display: flex;
  gap: var(--s1);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--i14);
  margin-bottom: clamp(18px, 2.6vw, 28px);
}
.rf[data-rf-tabs="on"] .rf-tabs::-webkit-scrollbar { display: none; }

.rf-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--hs);
  padding: 0 var(--s4);
  font: 500 var(--f4)/1 var(--disp);
  color: var(--i62);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t1) var(--ez), border-color var(--t1) var(--ez);
}
.rf-tab:hover { color: var(--ink); }
/* ⚑ Etkin sekme: MUREKKEP alt cizgi + turuncu DEGIL metin rengi.
   Turuncu yalnizca CTA'da; burada kullanilsa 3,12:1 ile AA'yi gecmezdi. */
.rf-tab[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--acc); }
.rf-tab__n {
  font: 500 var(--f0)/1 var(--mono);
  color: var(--i62);
  background: var(--i08);
  border-radius: var(--rp);
  padding: var(--s1) var(--s2);
}
.rf-tab[aria-selected="true"] .rf-tab__n { color: var(--ink); background: var(--i14); }

/* JS acikken paneller sirayla gosterilir; JS yoksa HEPSI acik kalir. */
.rf-pans { display: block; }
.rf-pan { padding-block: var(--s1); }
.rf[data-rf-tabs="on"] .rf-pan[hidden] { display: none; }
.rf-pan + .rf-pan { margin-top: clamp(26px, 4vw, 40px); }
.rf[data-rf-tabs="on"] .rf-pan + .rf-pan { margin-top: 0; }

.rf-pan__h {
  margin: 0 0 var(--s4);
  font: 600 var(--f6)/1.3 var(--disp);
  color: var(--ink);
}
/* sekme acikken baslik gorsel olarak gizlenir ama a11y'de KALIR */
.rf[data-rf-tabs="on"] .rf-pan__h {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ── teknik veriler ─────────────────────────────────────────────────
   Iki SUTUNLU DIZILIM (izgara), iki sutunlu TABLO degil: uzun deger
   sarildiginda komsu satir kaymaz. */
.rf-spec {
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 clamp(20px, 3vw, 44px);
}
.rf-spec__r {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--s2) var(--s4);
  align-items: baseline;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--i08);
}
.rf-spec dt { font: 400 var(--f3)/1.5 var(--disp); color: var(--i62); overflow-wrap: anywhere; }
.rf-spec dd { margin: 0; font: 500 var(--f3)/1.5 var(--disp); color: var(--ink); overflow-wrap: anywhere; }

.rf-more {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--hs);
  margin-top: var(--s4);
  padding: 0 var(--s4);
  font: 500 var(--f3)/1 var(--disp);
  color: var(--ink);
  background: var(--w);
  border: 1px solid var(--i22);
  border-radius: var(--r1);
  cursor: pointer;
  transition: border-color var(--t1) var(--ez);
}
.rf-more svg { width: 16px; height: 16px; transition: transform var(--t2) var(--ez); }
.rf-more:hover { border-color: var(--ink); background: var(--i04); }
.rf-more[aria-expanded="true"] svg { transform: rotate(180deg); }

.rf-fine { margin: var(--s4) 0 0; font: 400 var(--f1)/1.6 var(--disp); color: var(--i62); }

/* ── belgeler ───────────────────────────────────────────────────────
   Sade liste. "Kasa/vault" jesti YOK — dosyalar dosya gibi durur. */
.rf-docs { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s3); }
.rf-doc {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
  padding: var(--s4);
  border: 1px solid var(--i14);
  border-radius: var(--r2);
  background: var(--w);
  transition: border-color var(--t1) var(--ez);
}
.rf-doc:hover { border-color: var(--i62); }

.rf-doc__p {
  position: relative;
  display: block;
  width: 104px;
  aspect-ratio: 1 / 1.35;
  padding: 0;
  background: var(--i04);
  border: 1px solid var(--i08);
  border-radius: var(--r1);
  overflow: hidden;
  cursor: pointer;
}
.rf-doc__p img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.rf-doc__p--none { display: grid; place-items: center; cursor: default; }
.rf-doc__p--none svg { width: 24px; height: 24px; color: var(--i62); }
.rf-doc__z {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--ovh);
  opacity: 0;
  transition: opacity var(--t1) var(--ez);
}
.rf-doc__z svg { width: 20px; height: 20px; color: var(--w); }
.rf-doc__p:hover .rf-doc__z,
.rf-doc__p:focus-visible .rf-doc__z { opacity: 1; }

.rf-doc__b { min-width: 0; display: flex; flex-direction: column; gap: var(--s1); }
.rf-doc__t { font: 500 var(--f1)/1 var(--mono); letter-spacing: var(--lsx); text-transform: uppercase; color: var(--i62); }
.rf-doc__n { font: 500 var(--f4)/1.4 var(--disp); color: var(--ink); overflow-wrap: anywhere; }
.rf-doc__m { display: flex; gap: var(--s2); font: 400 var(--f1)/1 var(--mono); color: var(--i62); }
.rf-doc__m i { font-style: normal; }
/* ⚠ OLCULDU (tur 54): bu eylemler once alti cizili METINDI → 17x26 ve
   28x26 px cikti. WCAG 2.2 AA 2.5.8 en az 24x24 ister; 17 px GECMEZ.
   Ayrica belge karti sayfanin en cok tiklanan yerlerinden biri.
   → Gercek dugmeler: en az 44 px yukseklik, 24 px'in cok uzerinde. */
.rf-doc__a { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.rf-dl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hc);
  padding: 0 var(--s4);
  font: 500 var(--f2)/1 var(--disp);
  color: var(--ink);
  text-decoration: none;
  background: var(--w);
  border: 1px solid var(--i22);
  border-radius: var(--r1);
  transition: border-color var(--t1) var(--ez), background var(--t1) var(--ez);
}
.rf-dl:hover { border-color: var(--ink); background: var(--i04); }
.rf-dl--q { color: var(--i72); }
.rf-dl--q:hover { color: var(--ink); }

/* ── aciklama ───────────────────────────────────────────────────────── */
.rf-prose { max-width: 68ch; font: 400 var(--f4)/1.7 var(--disp); color: var(--i88); }
.rf-prose p { margin: 0 0 var(--s3); }
.rf-prose p:last-child { margin-bottom: 0; }
.rf-prose strong, .rf-prose b { color: var(--ink); font-weight: 600; }
.rf-prose ul, .rf-prose ol { margin: 0 0 var(--s3); padding-inline-start: var(--s5); }
.rf-prose li { margin-bottom: var(--s1); }
.rf-prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.rf-prose img { max-width: 100%; height: auto; border-radius: var(--r1); }
.rf-prose table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; }
.rf-prose td, .rf-prose th { border: 1px solid var(--i14); padding: var(--s2) var(--s3); text-align: start; }

.rf-notes { max-width: 68ch; margin: var(--s4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
.rf-notes li {
  font: 400 var(--f3)/1.65 var(--disp);
  color: var(--i88);
  padding-inline-start: var(--s4);
  border-inline-start: 2px solid var(--i22);
}

/* ── video ──────────────────────────────────────────────────────────── */
.rf-vids { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
.rf-vid { width: 100%; }
.rf-vid__b {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid var(--i14);
  border-radius: var(--r2);
  overflow: hidden;
  background: var(--i04);
  cursor: pointer;
}
.rf-vid__b img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rf-vid__p {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 58px; height: 58px;
  display: grid; place-items: center;
  background: var(--acc);
  color: var(--ink);
  border-radius: var(--rp);
  transition: transform var(--t2) var(--ez);
}
.rf-vid__p svg { width: 22px; height: 22px; fill: currentColor; }
.rf-vid__b:hover .rf-vid__p { transform: translate(-50%, -50%) scale(1.06); }
.rf-vid iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r2); display: block; }

/* ═════════ MOBIL EYLEM SERIDI ═════════ */
.rf-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) clamp(var(--s3), 4vw, var(--s4));
  padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px));
  background: var(--w);
  border-top: 1px solid var(--i14);
  transform: translateY(102%);
  transition: transform var(--t2) var(--ez);
}
.rf-bar[data-rf-on="1"] { transform: none; }
.rf-bar__i { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--s1); }
.rf-bar__n {
  font: 500 var(--f2)/1.25 var(--disp);
  color: var(--ink);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.rf-bar__c { font: 500 var(--f1)/1 var(--mono); color: var(--i62); }
.rf-bar__s {
  flex: 0 0 auto;
  width: var(--hs); height: var(--hs);
  display: grid; place-items: center;
  background: var(--w);
  color: var(--ink);
  border: 1px solid var(--i22);
  border-radius: var(--r1);
  cursor: pointer;
  transition: border-color var(--t1) var(--ez), background var(--t1) var(--ez);
}
.rf-bar__s:hover { border-color: var(--ink); background: var(--i04); }
.rf-bar__s svg { width: 19px; height: 19px; }
.rf-bar__l { position: relative; }
.rf-bar__n2 {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 20px; height: 20px;
  display: grid; place-items: center;
  padding: 0 var(--s1);
  font: 600 var(--f0)/1 var(--mono);
  color: var(--ink);
  background: var(--acc);
  border: 2px solid var(--w);
  border-radius: var(--rp);
}
.rf-bar__p {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--hs);
  padding: 0 var(--s4);
  font: 600 var(--f3)/1 var(--disp);
  color: var(--ink);
  background: var(--acc);
  border-radius: var(--r1);
  text-decoration: none;
}

/* ═════════ TALEP LISTESI ═════════
   ⚑ YUZEN DUGME YOK. Sitenin KENDI sag sabit fab sutunu zaten orada;
     ikinci bir yuzen dugme 7 genislikte de cakisiyordu (olculdu).
     Giris SATIR ICI: konsolda ve mobil seritte. */
.rf-open {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  align-self: flex-start;
  min-height: var(--hc);
  padding: 0 var(--s4);
  font: 500 var(--f3)/1 var(--disp);
  color: var(--ink);
  background: var(--w);
  border: 1px solid var(--i22);
  border-radius: var(--r1);
  cursor: pointer;
  transition: border-color var(--t1) var(--ez);
}
.rf-open svg { width: 17px; height: 17px; }
.rf-open:hover { border-color: var(--ink); background: var(--i04); }
.rf-open__n {
  min-width: 22px;
  padding: var(--s1) var(--s2);
  font: 600 var(--f0)/1 var(--mono);
  color: var(--ink);
  background: var(--acc);
  border-radius: var(--rp);
  text-align: center;
}

.rf-drw { position: fixed; inset: 0; z-index: 90; }
.rf-drw__v { position: absolute; inset: 0; background: var(--ov); }
.rf-drw__p {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(430px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--w);
  border-inline-start: 1px solid var(--i14);
}
.rf-drw__h {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); padding: var(--s4);
  border-bottom: 1px solid var(--i14);
}
.rf-drw__h h2 { margin: 0; font: 600 var(--f5)/1.3 var(--disp); color: var(--ink); }
.rf-drw__b { flex: 1 1 auto; overflow-y: auto; padding: var(--s4); }
.rf-drw__f { border-top: 1px solid var(--i14); padding: var(--s4) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: var(--s2); }
.rf-drw__t { display: flex; gap: var(--s4); }
.rf-drw__e { margin: 0; font: 400 var(--f3)/1.6 var(--disp); color: var(--i62); }

.rf-li { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s3) 0; border-bottom: 1px solid var(--i08); }
.rf-li__i { width: 54px; height: 54px; object-fit: contain; background: var(--i04); border-radius: var(--r1); }
.rf-li__b { min-width: 0; display: flex; flex-direction: column; gap: var(--s1); }
.rf-li__n { font: 500 var(--f3)/1.35 var(--disp); color: var(--ink); }
.rf-li__n a { color: inherit; text-decoration: none; }
.rf-li__n a:hover { text-decoration: underline; }
.rf-li__m { font: 400 var(--f1)/1 var(--mono); color: var(--i62); }
.rf-li__x { width: var(--hc); height: var(--hc); display: grid; place-items: center; background: transparent; border: 1px solid var(--i22); border-radius: var(--r1); color: var(--i72); cursor: pointer; transition: color var(--t1) var(--ez), border-color var(--t1) var(--ez), background var(--t1) var(--ez); }
.rf-li__x svg { width: 15px; height: 15px; }
.rf-li__x:hover { color: var(--ink); border-color: var(--ink); background: var(--i04); }

.rf-x {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--i22);
  border-radius: var(--r1);
  color: var(--ink);
  cursor: pointer;
  flex: 0 0 auto;
  transition: border-color var(--t1) var(--ez), background var(--t1) var(--ez);
}
.rf-x svg { width: 17px; height: 17px; }
.rf-x:hover { border-color: var(--ink); background: var(--i04); }
.rf-tx {
  background: transparent; border: 0; padding: var(--s2) 0;
  font: 500 var(--f2)/1 var(--disp);
  color: var(--i72);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
  min-height: var(--hc);
}
.rf-tx:hover { color: var(--ink); }

/* ═════════ ISIK KUTUSU ═════════ */
.rf-lb { position: fixed; inset: 0; z-index: 95; }
.rf-lb__v { position: absolute; inset: 0; background: var(--ovd); }
.rf-lb__p { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(46px, 7vw, 70px) clamp(14px, 5vw, 60px); }
.rf-lb__p img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r2); background: var(--w); }
.rf-lb__x { position: absolute; top: 14px; right: 14px; background: var(--w); }
.rf-lb__nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--w);
  border: 1px solid var(--i14);
  border-radius: var(--rp);
  color: var(--ink);
  cursor: pointer;
}
.rf-lb__nav svg { width: 20px; height: 20px; }
.rf-lb__nav--p { left: clamp(8px, 2vw, 22px); }
.rf-lb__nav--n { right: clamp(8px, 2vw, 22px); }

/* ═════════ BELGE ONIZLEME ═════════ */
.rf-dlg { position: fixed; inset: 0; z-index: 95; }
.rf-dlg__v { position: absolute; inset: 0; background: var(--ov); }
.rf-dlg__p {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(640px, calc(100vw - 28px));
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  background: var(--w);
  border-radius: var(--r3);
  overflow: hidden;
}
.rf-dlg__h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); padding: var(--s4); border-bottom: 1px solid var(--i14); }
.rf-dlg__k { display: block; font: 500 var(--f1)/1 var(--mono); letter-spacing: var(--lsx); text-transform: uppercase; color: var(--i62); margin-bottom: var(--s1); }
.rf-dlg__h h2 { margin: 0; font: 600 var(--f5)/1.35 var(--disp); color: var(--ink); overflow-wrap: anywhere; }
.rf-dlg__m { display: block; margin-top: var(--s1); font: 400 var(--f1)/1 var(--mono); color: var(--i62); }
.rf-dlg__b { flex: 1 1 auto; overflow: auto; padding: var(--s4); background: var(--i04); display: grid; place-items: center; }
.rf-dlg__b img { max-width: 100%; height: auto; border: 1px solid var(--i14); border-radius: var(--r1); background: var(--w); display: block; }
.rf-dlg__f { display: flex; gap: var(--s2); padding: var(--s4) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--i14); }
.rf-dlg__f .rf-btn { flex: 1 1 0; min-height: var(--hs); }

/* ═════════ BILDIRIM ═════════ */
.rf-toast {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  z-index: 100;
  padding: var(--s3) var(--s4);
  font: 500 var(--f3)/1 var(--disp);
  color: var(--w);
  background: var(--ink);
  border-radius: var(--rp);
  pointer-events: none;
}

/* ═════════ KIRILIM NOKTALARI — icerige gore ═════════ */

/* ── RESPONSIVE MERDIVEN — icerige gore, cihaz adina gore DEGIL ──────
   Once yalniz IKI kirilim vardi (720 · 1000) ve 720-999 arasi masaustu
   dizilimin kucultulmus hali gibi davraniyordu. Uc kademeye ayrildi. */

/* ≥560 — belge/video kartlari ikili durabilecek kadar yer var */
@media (min-width: 560px) {
  .rf-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rf-vids { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ≥720 TABLET — tek sutun KALIR ama olcu kontrol altina alinir:
   ⚠ Aksi halde "Teklif iste" dugmesi 700 px genisliginde bir serit
     oluyordu (dugme degil, bant gibi gorunuyor). Konsol okunabilir bir
     olcuye kisilir ve ortalanir; teknik tablo iki sutuna gecer. */
@media (min-width: 720px) {
  .rf-buy__in { max-width: 560px; margin-inline: auto; }
  .rf-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rf-hold { --rf-mh: 62vh; }
}

/* ⚑ ANA KIRILIM — galeri solda, konsol sagda ve YAPISKAN.
   ⚠ 'band' (oran >= 2,90 · serit urunler) BU DIZILIME GIRMEZ: gorsel
     tam genislik kalir, konsol ALTINA gecer. Modifier BILEREK
     `.rf-shop__in` ile guclendirilmistir — tur 53 tuzagi #2 (esit
     ozgullukte SONRAKI kural sessizce eziyordu). */
@media (min-width: 1000px) {
  /* Konsol GERCEK e-ticaret kalibinda: rahat ama SABIT bir bant.
     Artan her piksel URUN GORSELINE gider. */
  .rf-shop__in {
    /* ⚑ Konsol bandi IKI KEZ %10 GENISLETILDI (kullanici istegi, 09.09.2026):
       clamp(340px,30%,440px) → clamp(374px,33%,484px) → clamp(411px,36.3%,532px).
       ⚠ Alt sinir 411 px: 1000-1100 arasinda konsol ic ogeleri (adet +
         CTA + WhatsApp/Telefon ikilisi) bu degerin altinda sikisiyordu. */
    grid-template-columns: minmax(0, 1fr) clamp(411px, 36.3%, 532px);
    gap: clamp(28px, 3.4vw, 48px);
  }
  /* ⚑ IKI SUTUN DA YAPISKAN — yapiskan olan IC sarmalayici (bkz. yukarisi).
     Kisa olan sutun ekranda kalirken uzun olan kayar; ikisi ayri
     sutunda oldugu icin ust uste BINEMEZ (tur 51 tuzagi #3). */
  .rf-gal__in,
  .rf-buy__in { position: sticky; top: calc(var(--hdr) + 18px); }
  /* Yapiskan blok EKRANDAN TASARSA sticky "bozuk" hissettirir: alt kenari
     hic gorunmez. Sahne yuksekligi gorunur alana gore de sinirlanir. */
  /* ⚠ Yapiskan blok EKRANDAN TASARSA sticky "bozuk" hissettirir; cerceve
     tavani gorunur alana gore de sinirlanir. `min()` ile ORAN korunur. */
  .rf-hold { --rf-mh: min(68vh, calc(100vh - var(--hdr) - 120px)); }
  /* tablet kisiti KALKAR: konsol artik kendi sutununda */
  .rf-buy__in { max-width: none; margin-inline: 0; }
  .rf-bar { bottom: 0; }
}

/* serit urun: tek sutun, konsol altta */
@media (min-width: 1000px) {
  .rf[data-rf-form="band"] .rf-shop__in { grid-template-columns: minmax(0, 1fr); }
  .rf[data-rf-form="band"] .rf-gal__in,
  .rf[data-rf-form="band"] .rf-buy__in { position: static; }
  .rf[data-rf-form="band"] .rf-buy__in { max-width: 720px; }
}



/* mobil eylem seridi yalnizca dar ekranda; genis ekranda konsol zaten
   yapiskan → ikinci bir donusum UI'si BASILMAZ. */
@media (min-width: 1000px) {
  .rf-bar { display: none; }
}

/* ══ SERIT URUN (oran >= 2,90 · 47/195) — CERCEVE DEGIL KAGIT ══════
   ⚠⚠ OLCULDU ve KIRIKTI: 10,2:1 oranli bir lanyard 390 px'te 350x34 px
     bir kutuya oturuyor; `.rf-frame`in clamp(14px..) dolgusu o 34 px'in
     28'ini yiyordu → gorsel **45x4 px** kaliyordu (okunaksiz).
   Tur 53'te "seritte cerceve KUTU degil KAGIT olur (kenarlik/dolgu
   kaldirilir)" diye BELGELENMISTI ama rf.css'e hic gecirilmemisti.
   ⚠ Ozgulluk: `.rf[data-rf-form="band"]` (0,2,1) taban `.rf-hold`
     (0,1,0) kuralini guvenle ezer — tur 53 tuzagi #2 (esit ozgullukte
     sonraki kural sessizce kazanir) burada YASANMAZ. */
.rf[data-rf-form="band"] .rf-hold {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;                 /* buyutec cercevenin ALTINA tasar */
  margin-bottom: calc(var(--hc) + var(--s3));
  /* ⚠ ORAN TABANI/TAVANI SERIDE UYGULANMAZ. Taban kural
     `clamp(.80, oran, 3.2)` kullanir; 10,2:1'lik bir seride uygulaninca
     sahne 1296x405 oluyor ama gorsel 1296x128 kaliyordu → 277 px'lik
     dikey BOSLUK. Seritte sahne = nesnenin KENDI orani. */
  aspect-ratio: var(--rf-ar, 1);
  max-height: none;
}
.rf[data-rf-form="band"] .rf-frame { padding: 0; }
/* Serit cok kisa oldugu icin buyutec/sayac KUTUNUN ALTINA gecer;
   icine konursa 44 px'lik dokunma hedefi 34 px'lik kutuyu tasardi. */
.rf[data-rf-form="band"] .rf-zoom {
  top: calc(100% + var(--s2)); bottom: auto; right: 0;
}
.rf[data-rf-form="band"] .rf-count {
  top: calc(100% + var(--s2)); bottom: auto; left: 0;
}

/* buyutec dugmesi dokunmatikte de KALIR (tur 39 tuzagi: onemli eylem
   yalnizca hover'a birakilmaz). */
@media (hover: none) {
  .rf-doc__z { opacity: 1; background: var(--ovh); }
}

/* ═════════ AZALTILMIS HAREKET ═════════ */
@media (prefers-reduced-motion: reduce) {
  .rf *,
  .rf *::before,
  .rf *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}