/* =====================================================================
   KARAM SAFETY — TUR 73 "SISTEM"  ·  Hakkimizda   ·  v2 (15.09.2026)
   ---------------------------------------------------------------------
   ⛔ HER secici `.sm` ile baslar (ya da `.sm` icinden iner).
      Korunan `.ka-hero`, `.kx-hero`, site header'i, alt bilgi ve diger
      TUM sayfalar ETKILENMEZ. `.wrap` gibi paylasilan sinif KULLANILMAZ.

   v2 DEGISIKLIGI — SISTEM BIRLIGI:
     Renkler ve tipografi artik SITENIN kendi sisteminden geliyor
     (`assets/css/style.css` :root). Tur 73'e ozel Outfit / Chivo Mono
     KALDIRILDI; sayfa Inter + Anton + Playfair Display kullaniyor —
     yani korunan `.ka-hero`, site header'i ve diger sayfalarla
     BIREBIR ayni aile ve ayni renk degerleri.

   RENK — hepsi style.css :root karsiligi:
     --w  #ffffff  (--white)      --k     #151512  (--ink)
     --o  #FF5A1F  (--orange)     --o-d   #e8480f  (--orange-d)
     --cream #f3f4f6              --line  #dde0e6  (--line)
     --muted #5d626b (--muted)    --line-d #34342c (--line-d)
     --on-d  #d9d5cf  koyu zeminde govde metni (ana sayfadan olculdu)

   TIPOGRAFI — site karsiligi:
     baslik  Inter 800 / -.022em  → /sertifika h2 ile AYNI register
     indeks  Anton              → .ka-hero-title / .sec-title ailesi
     rakam   Playfair Display 700 → .ka-chip b ile AYNI
     etiket  Inter 800 / .17em uppercase → .ka-ey ile AYNI
     dugme   Inter 700 / .04em uppercase → .btn-primary ile AYNI
     govde   Inter 400

   BOLUM SIRASI (musteri istegi 15.09.2026):
     01 HAKKIMIZDA (acik) · 02 SISTEM (koyu) · 03 BELGELER (krem)
     04 URUN GRUPLARI (koyu, Swiper) · 05 ILETISIM (BEYAZ)
   ===================================================================== */

.sm{
  /* ---- renk: SITE sistemi ---- */
  --w:#ffffff; --k:#151512; --o:#FF5A1F; --o-d:#e8480f;
  --cream:#f3f4f6; --cream-2:#e5e7eb;
  --muted:#5d626b; --line:#dde0e6; --line-d:#34342c; --on-d:#d9d5cf;
  --k-06:rgba(21,21,18,.06); --k-10:rgba(21,21,18,.10);
  --w-08:rgba(255,255,255,.08); --w-16:rgba(255,255,255,.16);
  --w-64:rgba(255,255,255,.64);
  --o-30:rgba(255,90,31,.30);

  /* ---- tipografi: SITE sistemi ---- */
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-disp:'Anton','Inter',sans-serif;
  --f-num:'Playfair Display',Georgia,serif;

  /* ---- olcek ---- */
  --max:1440px; --gut:clamp(20px,5vw,80px); --col:12;
  --gap:clamp(14px,1.6vw,24px);
  --sect:clamp(76px,9.4vw,144px);
  --r-s:14px; --r-m:20px; --r-l:28px; --r-xl:clamp(24px,3vw,40px); --r-pill:999px;
  --ease:cubic-bezier(.16,.84,.34,1);
  --body:clamp(16.5px,1.02vw,18.4px);

  font-family:var(--f-body);
  color:var(--k);
  background:var(--w);
  -webkit-font-smoothing:antialiased;
}
/* Anton/Playfair Kiril-Arapca tasimaz; Inter ve Cairo ZATEN kosulsuz yuklu. */
.sm:lang(ru){--f-disp:'Inter',system-ui,sans-serif;--f-num:'Inter',system-ui,sans-serif}
.sm:lang(ar){--f-body:'Cairo',system-ui,sans-serif;--f-disp:'Cairo',sans-serif;--f-num:'Cairo',serif}

.sm *,.sm *::before,.sm *::after{box-sizing:border-box}
/* ⚠ Sifirlamalar `:where()` icinde: aksi halde `.sm p` (0,1,1) sonradan
   gelen `.sm-lead` (0,1,0) kuralini yener ve bosluklar/renkler duser. */
.sm :where(p,h2,h3,dl,dd,dt,ul,li,figure,blockquote){margin:0;padding:0}
.sm :where(ul){list-style:none}
.sm :where(img,svg){display:block;max-width:100%}
.sm :where(img){height:auto}
.sm :where(a){color:inherit;text-decoration:none}
.sm :where(button){font:inherit;color:inherit;background:none;border:0}

.sm-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}

.sm-wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.sm-s{position:relative}

.sm a:focus-visible,.sm button:focus-visible,.sm input:focus-visible,.sm textarea:focus-visible{
  outline:2px solid var(--o);outline-offset:3px;border-radius:var(--r-s)}

/* =====================================================================
   TIPOGRAFI
   ===================================================================== */
.sm-h{font-family:var(--f-body);font-weight:800;letter-spacing:-.022em;
  line-height:1.08;text-wrap:balance}
.sm-h--xl{font-size:clamp(34px,5.2vw,80px)}
.sm-h--lg{font-size:clamp(29px,3.5vw,54px)}
.sm-h--md{font-size:clamp(26px,2.9vw,45px)}
.sm-h__l{display:block;overflow:hidden;padding-block:.02em}
.sm-h__l>span{display:block;transition:transform .86s var(--ease);transition-delay:var(--d,0s)}

.sm-lead{font-size:clamp(17px,1.2vw,19.2px);line-height:1.72;max-width:46ch;
  color:var(--muted);margin-top:clamp(18px,2vw,28px)}
.sm-body{font-size:var(--body);line-height:1.7;max-width:56ch;color:var(--muted);
  margin-top:clamp(14px,1.4vw,20px)}
.sm-d .sm-lead,.sm-d .sm-body{color:var(--on-d)}

/* bolum kunyesi — 01 ── ETIKET  (etiket .ka-ey ile ayni register) */
.sm-tag{display:flex;align-items:center;gap:14px;margin-bottom:clamp(18px,2.2vw,30px)}
.sm-tag__n{font-family:var(--f-disp);font-size:clamp(25px,2vw,34px);font-weight:400;
  color:var(--o-d);line-height:1;letter-spacing:.01em}
.sm-tag__r{width:clamp(22px,2.8vw,46px);height:1px;background:var(--line);flex:none}
.sm-tag__t{font-family:var(--f-body);font-size:12.5px;letter-spacing:.17em;
  font-weight:800;text-transform:uppercase;color:var(--muted)}
.sm-d .sm-tag__n{color:var(--o)}
.sm-d .sm-tag__r{background:var(--line-d)}
.sm-d .sm-tag__t{color:var(--w-64)}

/* dikey kenar yazisi */
.sm-rail{position:absolute;font-family:var(--f-body);font-size:11px;letter-spacing:.22em;
  font-weight:800;text-transform:uppercase;line-height:1.7;writing-mode:vertical-rl;
  color:var(--w-64);user-select:none;pointer-events:none}
.sm-rail>span{display:block;max-width:12em}

/* metin baglantisi */
.sm-link{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;
  letter-spacing:.14em;font-weight:800;text-transform:uppercase;color:var(--k);
  padding-block:6px;min-height:34px}
.sm-link>span{box-shadow:inset 0 -1px 0 0 var(--o-30);transition:box-shadow .3s}
.sm-link:hover>span{box-shadow:inset 0 -1px 0 0 var(--o)}
.sm-link .sm-i{width:17px;height:17px;color:var(--o-d);transition:transform .4s var(--ease)}
.sm-link:hover .sm-i{transform:translateX(5px)}
/* Koyu zeminde turuncu metin murekkep uzerinde 5.96:1 → AA gecer. */
.sm-link--d{color:var(--o)}
.sm-link--d .sm-i{color:var(--o)}
.sm-link--d>span{box-shadow:inset 0 -1px 0 0 rgba(255,90,31,.45)}
.sm-link--d:hover>span{box-shadow:inset 0 -1px 0 0 var(--o)}
.sm-more{margin-top:clamp(16px,1.8vw,24px)}

/* dugmeler — .btn-primary ile AYNI dizgi */
.sm-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,38px)}
.sm-btn{display:inline-flex;align-items:center;gap:10px;min-height:54px;
  padding:0 clamp(20px,1.8vw,30px);border-radius:var(--r-pill);
  border:1px solid transparent;cursor:pointer;
  font-size:13.8px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  transition:background-color .3s,color .3s,border-color .3s}
.sm-btn .sm-i--go{width:18px;height:18px;transition:transform .4s var(--ease)}
.sm-btn:hover .sm-i--go{transform:translateX(5px)}
/* ⚠ Site geneli `.btn-primary` BEYAZ/turuncu kullaniyor (olculdu: Inter
   700, 13.76px, uppercase). Tutarlilik icin AYNISI alindi. Bu bilesim
   3.11:1 verir; WCAG AA normal metin 4.5 ister. Tek satirlik AA cikisi:
   --btn-fg: var(--k)  → murekkep/turuncu = 5.96:1 (GECER). */
.sm{--btn-fg:var(--w)}
.sm-btn--fill{background:var(--o);color:var(--btn-fg)}
.sm-btn--fill:hover{background:var(--k);color:var(--w)}
.sm-btn--line{border-color:var(--w-16);color:var(--w)}
.sm-btn--line:hover{border-color:var(--w);background:var(--w);color:var(--k)}

/* rakamlar — .ka-chip b ile AYNI aile */
.sm-cnt{font-variant-numeric:tabular-nums}

/* olcu satiri — pano DEGIL, tipografi + kil payi ayrac */
.sm-stats{display:flex;flex-wrap:wrap}
.sm-stats__i{padding-inline-end:clamp(18px,2.3vw,38px);
  margin-inline-end:clamp(18px,2.3vw,38px);border-inline-end:1px solid var(--line)}
.sm-stats__i:last-child{border-inline-end:0;margin-inline-end:0;padding-inline-end:0}
/* RAKAM → Playfair Display (site `.ka-chip b` ile AYNI register).
   ⚠ METIN deger (ör. "CE / EN", "Test ve") Playfair'de yabanci duruyordu →
   metin varyanti govde ailesinde kalir. */
.sm-stats__v{font-family:var(--f-num);font-weight:700;line-height:1;
  font-size:clamp(28px,2.7vw,44px);display:flex;align-items:baseline;gap:2px}
.sm-stats__v--t{font-family:var(--f-body);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(21px,1.9vw,30px);line-height:1.15}
.sm-stats__v>i{font-style:normal;color:var(--o-d)}
.sm-stats__k{font-size:12px;letter-spacing:.14em;font-weight:800;text-transform:uppercase;
  color:var(--muted);margin-top:10px}
.sm-d .sm-stats__i{border-inline-end-color:var(--line-d)}
.sm-d .sm-stats__v>i{color:var(--o)}
.sm-d .sm-stats__k{color:var(--w-64)}
.sm-stats--rule{border-top:1px solid var(--line);padding-top:clamp(20px,2.2vw,30px);
  margin-top:clamp(30px,3.6vw,50px)}
.sm-d .sm-stats--rule{border-top-color:var(--line-d)}

/* =====================================================================
   01 · HAKKIMIZDA — editoryal acilis (ILK DUZEN)
   ---------------------------------------------------------------------
   Musteri istegi 15.09.2026: bolum ILK haline dondu. Solda buyuk portre,
   ustune binen kucuk gorsel ve sirketin kendi sozu; sagda baslik, metin
   ve yatay olcu satiri. Dizgi/renk sitenin sisteminden gelir → 02-05 ile
   ayni dil.
   ⚠ `--edge` mantiksal ozelliklerle birlikte RTL'de aynalanir.
   ===================================================================== */
.sm-about{padding-block:clamp(56px,6.4vw,104px) var(--sect)}
.sm-about__grid{display:grid;grid-template-columns:repeat(var(--col),1fr);
  gap:var(--gap);align-items:center}

/* Alt pay YALNIZ alinti + tasan kucuk gorsel icindir; daraltilirsa
   alinti buyuk gorselin alt kosesine BINER (olculdu). */
.sm-about__art{grid-column:1/span 6;position:relative;
  padding-bottom:clamp(58px,7.2vw,124px)}
.sm-about__big{border-radius:var(--r-xl);overflow:hidden;background:var(--cream)}
.sm-about__big img{width:100%;aspect-ratio:4/5;object-fit:cover}
.sm-about__small{position:absolute;inset-inline-end:-4%;bottom:0;width:44%;
  border-radius:var(--r-l);overflow:hidden;background:var(--cream);
  outline:8px solid var(--w);outline-offset:-1px;will-change:transform}
.sm-about__small img{width:100%;aspect-ratio:3/4;object-fit:cover}

.sm-quote{position:absolute;inset-inline-start:0;bottom:2px;max-width:16ch;
  padding-inline-start:26px}
.sm-quote__m{position:absolute;inset-inline-start:0;top:-.1em;
  font-family:var(--f-num);font-size:38px;line-height:1;color:var(--o-d)}
.sm-quote p{font-size:12px;line-height:1.9;letter-spacing:.14em;font-weight:800;
  text-transform:uppercase;color:var(--muted)}

.sm-about__copy{grid-column:8/span 5}
.sm-about__copy .sm-h{border-inline-start:2px solid var(--o);
  padding-inline-start:clamp(16px,1.5vw,24px);margin-inline-start:-2px}

/* =====================================================================
   02 · SISTEM — sinematik koyu bant
   ===================================================================== */
.sm-open{background:var(--k);color:var(--w);border-radius:var(--r-xl);
  overflow:clip;margin-inline:clamp(0px,1.2vw,18px);--strip:clamp(38px,3.4vw,62px)}
.sm-open__grid{position:relative;width:100%;
  min-height:clamp(540px,80vh,900px);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.88fr);
  align-items:center;gap:clamp(24px,3vw,56px);
  padding-block:clamp(40px,4.4vw,64px);padding-inline-end:0;
  padding-inline-start:max(var(--gut),calc((100% - var(--max)) / 2 + var(--gut)))}
.sm-open__copy{position:relative;z-index:2;max-width:42rem;
  padding-block:clamp(16px,2.6vw,44px)}
.sm-open__art{position:relative;align-self:stretch;min-height:clamp(300px,50vh,840px);
  padding-inline-end:var(--strip)}
.sm-open__frame{position:absolute;inset-block:0;inset-inline:0 var(--strip);
  border-radius:var(--r-xl);overflow:hidden;background:var(--ink-3,#26261f);
  will-change:transform}
.sm-open__frame img{width:100%;height:100%;object-fit:cover;object-position:54% 40%}
.sm-open .sm-rail{right:0;top:50%;transform:translateY(-50%);z-index:3;
  width:var(--strip);text-align:center}
.sm-open .sm-stats{margin-top:clamp(34px,4.4vw,60px)}

/* =====================================================================
   03 · BELGELER — krem zemin, ust uste binen kanit kompozisyonu
   ===================================================================== */
/* Musteri istegi 15.09.2026: zemin BEYAZ. Beyaz-uzerine-beyaz kart
   gorunmez oldugu icin yuvarlak kose + yan pay da kaldirildi; bolum
   duz beyaz bir sayfa bandi olarak akar. */
.sm-proof{background:var(--w);padding-block:var(--sect)}
.sm-proof__grid{display:grid;grid-template-columns:repeat(var(--col),1fr);
  gap:var(--gap);align-items:center}
.sm-proof__copy{grid-column:1/span 5}
.sm-proof__art{grid-column:7/span 6;position:relative;aspect-ratio:1/.74;min-height:300px}
/* Krem zemin kalkti → ayraclar sayfanin standart `--line` degerine doner. */

.sm-ce{position:absolute;inset-inline-start:0;top:50%;translate:0 -50%;z-index:2;
  width:min(47%,320px);aspect-ratio:1/1.06;background:var(--k);color:var(--w);
  border-radius:var(--r-l);padding:clamp(20px,1.9vw,30px);
  display:flex;flex-direction:column;will-change:transform}
.sm-ce__m{font-family:var(--f-body);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(54px,5.6vw,92px);line-height:.9;margin-top:auto}
.sm-ce__t{font-size:11px;letter-spacing:.16em;font-weight:800;text-transform:uppercase;
  line-height:1.8;color:var(--w-64);margin-top:clamp(14px,1.4vw,20px)}
.sm-ce__s{font-size:10.5px;letter-spacing:.12em;font-weight:700;text-transform:uppercase;
  line-height:1.8;color:rgba(255,255,255,.52);margin-top:10px;
  padding-inline-end:clamp(46px,4.2vw,60px)}
.sm-ce__go{position:absolute;inset-inline-end:clamp(16px,1.5vw,24px);
  bottom:clamp(16px,1.5vw,24px);width:44px;height:44px;border-radius:var(--r-pill);
  background:var(--w);color:var(--k);display:grid;place-items:center;
  transition:background-color .34s,color .34s}
.sm-ce__go .sm-i{width:18px;height:18px;transition:transform .4s var(--ease)}
.sm-ce__go:hover{background:var(--o);color:var(--w)}
.sm-ce__go:hover .sm-i{transform:translateX(4px)}

.sm-fan{position:absolute;inset-inline-end:0;top:50%;translate:0 -50%;
  width:62%;aspect-ratio:1/.96;z-index:1;will-change:transform}
.sm-fan__i{position:absolute;inset-inline-start:0;top:0;width:58%;
  z-index:calc(9 - var(--fi));
  transform:translate(calc(var(--fi) * 31%),calc(var(--fi) * -3%))
            rotate(calc(var(--fi) * 2.6deg));
  transform-origin:bottom var(--edge,left);transition:transform .55s var(--ease)}
.sm-fan__i a{display:block;border-radius:var(--r-m);overflow:hidden;
  border:1px solid var(--k-06);background:var(--w);position:relative}
.sm-fan__i img{width:100%;aspect-ratio:1/1.414;object-fit:cover;object-position:top center}
.sm-fan:hover .sm-fan__i{transform:translate(calc(var(--fi) * 36%),calc(var(--fi) * -5%))
  rotate(calc(var(--fi) * 3.8deg))}
.sm-fan__c{position:absolute;inset-inline-start:10px;bottom:10px;font-size:10px;
  letter-spacing:.1em;font-weight:800;text-transform:uppercase;
  background:var(--k);color:var(--w);padding:5px 9px;border-radius:8px}
.sm-proof{position:relative}
.sm-proof .sm-rail{display:none;right:calc(var(--gut) * .3);top:50%;
  transform:translateY(-50%);color:var(--muted)}
@media (min-width:1280px){.sm-proof .sm-rail{display:block}}
.sm-proof .sm-stats{grid-column:1/span 12}

/* =====================================================================
   04 · URUN GRUPLARI — koyu, SWIPER karusel
   ===================================================================== */
.sm-groups{background:var(--k);color:var(--w);border-radius:var(--r-xl);
  padding-block:var(--sect);margin-inline:clamp(0px,1.2vw,18px);overflow:clip}
.sm-groups__head{display:grid;grid-template-columns:repeat(var(--col),1fr);
  gap:var(--gap);align-items:end;margin-bottom:clamp(30px,3.6vw,52px)}
.sm-groups__hl{grid-column:1/span 8}
.sm-groups__hr{grid-column:9/span 4}
.sm-groups__hr .sm-body{margin-top:0}

/* Karusel sitenin kendi Swiper 11 paketini kullanir. Slayt genisligi
   `slidesPerView:'auto'` ile SLAYTTAN gelir → asimetrik kompozisyon
   karusel icinde de KORUNUR. */
.sm-mods{overflow:visible}
.sm-mods .swiper-wrapper{align-items:stretch}
.sm-mods__c{width:clamp(260px,26vw,380px);height:auto;flex-shrink:0}
.sm-mods__c[data-w="wide"]{width:clamp(280px,32vw,460px)}
.sm-mods__c[data-w="slim"]{width:clamp(230px,21vw,300px)}

.sm-mod{position:relative;display:flex;flex-direction:column;height:100%;
  min-height:clamp(300px,26vw,380px);border-radius:var(--r-l);overflow:hidden;
  background:rgba(255,255,255,.045);border:1px solid var(--w-08);
  padding:clamp(16px,1.5vw,24px);
  transition:background-color .42s,border-color .42s,transform .42s var(--ease)}
.sm-mod:hover{background:rgba(255,255,255,.075);border-color:var(--w-16);transform:translateY(-4px)}
.sm-mod--hi{background:var(--o);border-color:var(--o);color:var(--k)}
.sm-mod--hi:hover{background:var(--o);border-color:var(--o)}

.sm-mod__no{font-size:11px;letter-spacing:.16em;font-weight:800;color:var(--w-64);
  position:relative;z-index:2}
.sm-mod--hi .sm-mod__no{color:rgba(21,21,18,.72)}

.sm-mod__art{position:absolute;inset:clamp(34px,3.2vw,48px) 11% clamp(92px,7.6vw,112px);
  display:flex;align-items:center;justify-content:center;z-index:1}
.sm-mod__pic{display:flex;width:100%;height:100%;align-items:center;justify-content:center}
.sm-mod__pic img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  transition:transform .66s var(--ease)}
.sm-mod:hover .sm-mod__pic img{transform:scale(1.07)}
.sm-mod::after{content:"";position:absolute;inset-inline:0;bottom:0;height:44%;
  pointer-events:none;z-index:1;
  background:linear-gradient(0deg,#151512 14%,rgba(21,21,18,.72) 52%,rgba(21,21,18,0) 100%)}
.sm-mod--hi::after{background:linear-gradient(0deg,#ff5a1f 14%,rgba(255,90,31,.7) 52%,rgba(255,90,31,0) 100%)}

.sm-mod__foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;
  gap:12px;position:relative;z-index:2}
.sm-mod__t{display:block;font-size:clamp(15px,1.06vw,18px);font-weight:700;
  line-height:1.26;letter-spacing:-.012em;text-wrap:balance}
.sm-mod__n{display:block;font-size:11px;letter-spacing:.12em;font-weight:800;
  text-transform:uppercase;color:var(--w-64);margin-top:7px}
.sm-mod--hi .sm-mod__n{color:rgba(21,21,18,.88)}
.sm-mod__go{flex:none;width:40px;height:40px;border-radius:var(--r-pill);
  border:1px solid var(--w-16);display:grid;place-items:center;
  transition:background-color .36s,border-color .36s,color .36s}
.sm-mod__go .sm-i{width:17px;height:17px;transition:transform .4s var(--ease)}
.sm-mod:hover .sm-mod__go{background:var(--o);border-color:var(--o);color:var(--w)}
.sm-mod:hover .sm-mod__go .sm-i{transform:translateX(3px)}
.sm-mod--hi .sm-mod__go{background:var(--k);border-color:var(--k);color:var(--w)}
.sm-mod--hi:hover .sm-mod__go{background:var(--k);border-color:var(--k);color:var(--w)}

/* karusel kumandasi */
.sm-ctl{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:clamp(28px,3.2vw,44px)}
.sm-ctl__b{width:52px;height:52px;border-radius:var(--r-pill);flex:none;
  border:1px solid var(--w-16);color:var(--w);display:grid;place-items:center;
  cursor:pointer;transition:background-color .3s,border-color .3s,color .3s,opacity .3s}
.sm-ctl__b:hover:not(:disabled){background:var(--o);border-color:var(--o)}
.sm-ctl__b:disabled{opacity:.34;cursor:default}
.sm-ctl__b .sm-i{width:19px;height:19px}
.sm-ctl__bar{flex:1;min-width:120px;height:2px;background:var(--line-d);
  border-radius:2px;overflow:hidden}
.sm-ctl__bar i{display:block;height:100%;width:30%;background:var(--o);
  border-radius:2px;transition:width .4s var(--ease),margin .4s var(--ease)}
.sm-ctl__cta{margin-inline-start:auto}
/* Swiper YOKSA (betik inmedi / Swiper 404 / hareket tercihi) satir yatay
   KAYDIRILABILIR bir serit olarak kalir — butun gruplar erisilebilir. */
.sm-mods:not(.swiper-initialized){display:flex;gap:var(--gap);overflow-x:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px}
.sm-mods:not(.swiper-initialized) .swiper-wrapper{display:contents}
.sm-mods:not(.swiper-initialized) .sm-mods__c{scroll-snap-align:start}
/* ⚠ YALNIZ oklar ve ilerleme seridi karusele baglidir; CTA dugmesi HER
   HALUKARDA durur. Onceki kural butun `.sm-ctl` satirini gizliyordu →
   Swiper inmediginde "Tum Urun Gruplarini Gor" dugmesi de kayboluyordu. */
.sm-ctl__b,.sm-ctl__bar{display:none}
.sm-mods.swiper-initialized ~ .sm-ctl .sm-ctl__b{display:grid}
.sm-mods.swiper-initialized ~ .sm-ctl .sm-ctl__bar{display:block}

/* =====================================================================
   05 · ILETISIM — "CANKURTARAN HATTI"
   ---------------------------------------------------------------------
   Sayfanin tezi guvenin bir URUN degil bir ZINCIR olmasi. Form da oyle
   kurulur: alanlarin solunda ince bir HAT, her alanda bir DUGUM. Alan
   doldugunda dugum ve ustundeki hat parcasi turuncuya doner — zincir
   gozle gorulur sekilde baglanir.
     · Tamami CSS: `:placeholder-shown` + `:has()`. Betik gerekmez.
     · `:has()` desteklemeyen tarayicida hat gri kalir, form BIREBIR
       calisir — kayip yalnizca susleme.
     · Hareket KULLANICININ eylemine cevap verir; kaydirmayla tetiklenmez.
   Cevre sakin tutulur: beyaz zemin, kutusuz alanlar, BUYUK HARF etiket
   yok (ikonlar sabit hat / cep ayrimini zaten yapiyor), tek fotograf.
   ===================================================================== */
.sm-contact{background:var(--w);color:var(--k);padding-block:var(--sect)}

/* --- ust: istek --- */
.sm-contact__top{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:repeat(var(--col),1fr);gap:0 var(--gap);
  align-items:end;margin-bottom:clamp(40px,5vw,78px)}
.sm-contact__top .sm-tag{grid-column:1/-1}
.sm-contact__top .sm-h{grid-column:1/span 7}
.sm-contact__top .sm-lead{grid-column:9/span 4;margin-top:0;max-width:34ch;
  padding-bottom:.35em}

/* --- izgara: solda fotograf, sagda form --- */
.sm-contact__grid{display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:clamp(28px,4vw,72px);align-items:start;width:100%;
  padding-inline-start:0;
  padding-inline-end:max(var(--gut),calc((100% - var(--max)) / 2 + var(--gut)))}

/* sol: kenara tasan fotograf + uzerine binen erisim karti */
.sm-contact__art{position:relative;padding-bottom:clamp(74px,7vw,104px)}
.sm-contact__fig{position:relative;overflow:hidden;background:var(--cream);
  border-start-start-radius:0;border-end-start-radius:0;
  border-start-end-radius:var(--r-xl);border-end-end-radius:var(--r-xl)}
.sm-contact__fig img{width:100%;aspect-ratio:4/4.3;object-fit:cover;object-position:74% 30%}
.sm-contact__fig::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(21,21,18,.58) 0%,rgba(21,21,18,.04) 44%,rgba(21,21,18,.22) 100%)}
.sm-contact .sm-rail{left:clamp(14px,1.4vw,24px);top:clamp(22px,2.6vw,40px);z-index:2;
  color:rgba(255,255,255,.88);padding:14px 6px;border-radius:var(--r-pill);
  background:linear-gradient(180deg,rgba(21,21,18,0),rgba(21,21,18,.5) 18%,rgba(21,21,18,.5) 82%,rgba(21,21,18,0))}

/* erisim karti — fotografin sag alt kosesine BINER */
.sm-card{position:absolute;inset-inline-end:clamp(-26px,-2vw,0px);bottom:0;
  width:min(76%,400px);background:var(--w);border-radius:var(--r-l);
  padding:clamp(20px,1.9vw,30px);box-shadow:0 1px 0 0 var(--line) inset,
  0 0 0 1px var(--line)}
.sm-ch{display:grid;gap:2px}
.sm-ch a{display:flex;align-items:center;gap:13px;min-height:46px;
  padding:8px 10px;margin-inline:-10px;border-radius:12px;
  font-size:clamp(15.5px,1.08vw,18px);font-weight:600;letter-spacing:-.012em;
  transition:background-color .26s}
.sm-ch a:hover{background:var(--cream)}
.sm-ch__i{flex:none;width:19px;height:19px;color:var(--o-d)}
/* ⚠ Arapca'da (dir=rtl) "0 212 438 75 71" gibi BOSLUKLU sayilar ayri
   birer yon kosusu sayilip SAGDAN SOLA diziliyordu: "71 75 438 212 0".
   Deger yalitilip LTR'ye sabitlenir; satirin kendi hizasi degismez. */
.sm-ch__v{direction:ltr;unicode-bidi:isolate}
.sm-addr{margin-top:clamp(12px,1.2vw,18px);padding-top:clamp(12px,1.2vw,18px);
  border-top:1px solid var(--line);font-size:14px;line-height:1.65;color:var(--muted)}
.sm-addr span{display:block;margin-top:5px}

/* --- sag: ZINCIR formu --- */
.sm-contact__form{min-width:0;padding-top:clamp(8px,1vw,18px)}
.sm-form{position:relative;padding-inline-start:clamp(30px,2.6vw,42px)}
/* butun hat — gri taban */
.sm-form::before{content:"";position:absolute;inset-block:10px auto;
  inset-inline-start:calc(clamp(30px,2.6vw,42px) * .5 - .5px);
  width:1px;height:calc(100% - 10px);background:var(--line)}

.sm-f{position:relative;padding-bottom:clamp(22px,2.2vw,30px)}
.sm-f__n{position:absolute;top:10px;inset-inline-start:calc(clamp(30px,2.6vw,42px) * -.5 - 6px);
  width:13px;height:13px;border-radius:50%;background:var(--w);
  border:1px solid var(--line);z-index:2;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),
             transform .3s var(--ease)}
/* dolu alan → dugum turuncu; ustundeki hat parcasi da turuncu */
.sm-f:has(>input:not(:placeholder-shown)) .sm-f__n,
.sm-f:has(>textarea:not(:placeholder-shown)) .sm-f__n,
.sm-f:has(input[type="checkbox"]:checked) .sm-f__n{background:var(--o);border-color:var(--o)}
.sm-f::before{content:"";position:absolute;top:0;bottom:0;
  inset-inline-start:calc(clamp(30px,2.6vw,42px) * -.5);
  width:1px;background:transparent;z-index:1;transition:background-color .3s var(--ease)}
.sm-f:has(>input:not(:placeholder-shown))::before,
.sm-f:has(>textarea:not(:placeholder-shown))::before,
.sm-f:has(input[type="checkbox"]:checked)::before{background:var(--o)}
/* odak: dugum buyur ve halkasi turuncuya doner */
.sm-f:has(>input:focus) .sm-f__n,.sm-f:has(>textarea:focus) .sm-f__n,
.sm-f:has(input[type="checkbox"]:focus-visible) .sm-f__n{
  border-color:var(--o);transform:scale(1.32)}

/* alanlar KUTUSUZ: taban cizgisi, odakta turuncuya kalinlasir */
.sm-f>input,.sm-f>textarea{width:100%;font:inherit;font-size:clamp(16px,1.12vw,18px);
  color:var(--k);background:transparent;border:0;border-bottom:1px solid var(--line);
  border-radius:0;padding:26px 0 11px;min-height:56px;
  transition:border-color .3s var(--ease)}
.sm-f>textarea{min-height:96px;resize:vertical;line-height:1.6;padding-top:26px}
.sm-f>input:hover,.sm-f>textarea:hover{border-bottom-color:var(--muted)}
.sm-f>input:focus,.sm-f>textarea:focus{outline:0;border-bottom-color:var(--o);
  border-bottom-width:2px;padding-bottom:10px}
.sm-f>input+label,.sm-f>textarea+label{position:absolute;inset-inline-start:0;top:26px;
  font-size:clamp(16px,1.12vw,18px);color:var(--muted);pointer-events:none;
  transform-origin:var(--edge,left) top;
  transition:transform .26s var(--ease),color .26s}
.sm-f>input+label>i,.sm-f>textarea+label>i{font-style:normal;color:var(--o-d);
  margin-inline-start:.3em}
.sm-f>input:focus+label,.sm-f>input:not(:placeholder-shown)+label,
.sm-f>textarea:focus+label,.sm-f>textarea:not(:placeholder-shown)+label{
  transform:translateY(-22px) scale(.72)}

/* onay — zincirin son dugumu */
.sm-f--c{padding-bottom:clamp(24px,2.4vw,34px)}
.sm-consent{display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  font-size:13.5px;line-height:1.6;color:var(--muted);padding-top:4px;min-height:40px}
/* ⚠ Tarayici varsayilani onay kutusunu sistem renkleriyle ciziyor →
   sayfanin renk sistemi disina cikiyordu. Kutu tamamen bizim; girdi
   elemanin KENDISI durur, yalniz gorunusu degisir → erisilebilirlik ve
   form gonderimi BIREBIR ayni kalir. */
.sm-consent input{appearance:none;-webkit-appearance:none;flex:none;
  width:20px;height:20px;margin:0;border-radius:6px;cursor:pointer;
  border:1px solid var(--line);background:var(--w);color:var(--k);
  display:grid;place-items:center;transition:background-color .22s,border-color .22s}
.sm-consent input:hover{border-color:var(--muted)}
.sm-consent input::after{content:"";width:10px;height:6px;
  border-left:2px solid var(--w);border-bottom:2px solid var(--w);
  transform:rotate(-45deg) translate(1px,-1px) scale(.5);opacity:0;
  transition:opacity .18s,transform .18s}
.sm-consent input:checked{background:var(--o);border-color:var(--o)}
.sm-consent input:checked::after{opacity:1;transform:rotate(-45deg) translate(1px,-1px) scale(1)}

.sm-hp{position:absolute!important;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.sm-hp input{color:var(--k);background:transparent;border:0}

/* gonder — hattin sonunu kapatan tam genislikte cubuk */
.sm-form__go{margin-top:2px}
.sm-send{display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;min-height:62px;padding:0 clamp(20px,1.8vw,30px);cursor:pointer;
  border-radius:var(--r-pill);background:var(--k);color:var(--w);
  font-size:13.8px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  transition:background-color .3s var(--ease)}
.sm-send:hover{background:var(--o)}
.sm-send .sm-i--go{width:19px;height:19px;flex:none;
  transition:transform .4s var(--ease)}
.sm-send:hover .sm-i--go{transform:translateX(5px)}
.sm-form__note{margin-top:clamp(14px,1.4vw,20px);font-size:13px;line-height:1.65;
  color:var(--muted);max-width:44ch}


/* =====================================================================
   BELIRIS — IntersectionObserver ile `.is-in`; betiksiz her sey gorunur
   ===================================================================== */
.sm-js [data-sm-rv]{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:var(--d,0s)}
.sm-js [data-sm-rv].is-in{opacity:1;transform:none}
.sm-h__l>span{transform:none}
.sm-js .sm-h__l>span{transform:translateY(105%)}
.sm-js .sm-h.is-in .sm-h__l>span{transform:none}

/* =====================================================================
   DUYARLI — masaustu duzeni YIGMIYORUZ, yeniden kuruyoruz
   ===================================================================== */
@media (max-width:1100px){
  .sm{--col:8}
  .sm-about__art{grid-column:1/span 4}
  .sm-about__copy{grid-column:5/span 4}
  .sm-groups__hl{grid-column:1/span 8}
  .sm-groups__hr{grid-column:1/span 6;margin-top:22px}
  .sm-proof__copy{grid-column:1/span 8}
  .sm-proof__art{grid-column:1/span 8;margin-top:clamp(28px,4vw,48px);aspect-ratio:1/.52}
  .sm-proof .sm-stats{grid-column:1/span 8}
  .sm-contact__top .sm-h{grid-column:1/span 8}
  .sm-contact__top .sm-lead{grid-column:1/span 6;margin-top:18px;padding-bottom:0}
  .sm-contact .sm-rail{left:clamp(18px,2vw,30px)}
}

@media (max-width:900px){
  .sm-open{margin-inline:0;border-radius:var(--r-l)}
  .sm-open__grid{grid-template-columns:1fr;min-height:0;
    padding:clamp(44px,8vw,72px) var(--gut);gap:clamp(30px,5vw,44px)}
  .sm-open__copy{max-width:none;padding-block:0}
  .sm-open__art{min-height:0;height:auto;padding-inline-end:0;align-self:auto}
  .sm-open__frame{position:relative;inset:auto;border-radius:var(--r-l);
    aspect-ratio:16/13;transform:none!important}
  .sm-open .sm-rail{display:none}
}

@media (max-width:760px){
  .sm{--col:4;--gap:14px}
  .sm-about__grid{grid-template-columns:1fr}
  .sm-about__art,.sm-about__copy,.sm-proof__copy,.sm-proof__art,
  .sm-groups__hl,.sm-groups__hr{grid-column:1/-1}
  .sm-about__art{padding-bottom:0;display:grid;grid-template-columns:1.5fr 1fr;
    gap:12px;align-items:end}
  .sm-about__big{grid-column:1}
  .sm-about__small{position:static;width:auto;grid-column:2;outline:0;
    transform:none!important;border-radius:var(--r-m)}
  /* ⚠ `static` OLMAZ: mutlak konumlu tirnak isareti en yakin konumlanmis
     atasina (`.sm-about__art`) kacip buyuk gorselin UST SOL kosesinde
     beliriyordu. `relative` capayi yerinde tutar. */
  .sm-quote{position:relative;inset:auto;grid-column:1/-1;max-width:none;
    margin-top:16px;padding-inline-start:26px}
  .sm-about__copy{margin-top:clamp(28px,6vw,44px)}
  /* Fotograf artik kenara TASMAZ: tek sutun duzende kart gorselin
     altina iner, hat formu dikey akisini korur. */
  .sm-contact__top .sm-h,.sm-contact__top .sm-lead{grid-column:1/-1}
  .sm-contact__grid{grid-template-columns:1fr;padding-inline:var(--gut);
    gap:clamp(30px,6vw,48px)}
  .sm-contact__fig{border-radius:var(--r-l)}
  .sm-contact__art{padding-bottom:0}
  .sm-card{position:static;width:auto;margin-top:-28px;
    margin-inline:clamp(10px,3vw,22px)}
  .sm-proof .sm-stats{grid-column:1/-1}
  .sm-groups{margin-inline:0;border-radius:var(--r-l)}
  .sm-proof__art{aspect-ratio:auto;min-height:0;display:grid;
    grid-template-columns:1fr 1fr;gap:14px;align-items:center}
  .sm-ce{position:static;translate:none;width:auto;aspect-ratio:1/1.1}
  .sm-fan{position:relative;inset-inline-end:auto;top:auto;translate:none;width:auto;
    aspect-ratio:1/.9;transform:none!important}
  .sm-fan__i{width:60%;transform:translate(calc(var(--fi) * 26%),calc(var(--fi) * -3%))
    rotate(calc(var(--fi) * 2.2deg))}
  .sm-proof .sm-rail{display:none}
  .sm-contact__fig img{aspect-ratio:4/3}
  .sm-form{padding-inline-start:28px}
  .sm-f__n{inset-inline-start:-20px}
  .sm-f::before{inset-inline-start:-14px}
  .sm-form::before{inset-inline-start:13.5px}
  .sm-send{justify-content:center;gap:12px}
  .sm-stats__i{padding-inline-end:clamp(14px,4vw,22px);margin-inline-end:clamp(14px,4vw,22px)}
  .sm-ctl__cta{margin-inline-start:0;width:100%}
  .sm-ctl__cta .sm-btn{width:100%;justify-content:center}
}

@media (max-width:480px){
  .sm-stats{display:grid;grid-template-columns:1fr 1fr;gap:18px 0}
  .sm-stats__i{padding-inline-end:14px;margin-inline-end:0;
    border-inline-end:1px solid var(--line)}
  .sm-d .sm-stats__i{border-inline-end-color:var(--line-d)}
  .sm-stats__i:nth-child(2n),.sm-stats__i:last-child{border-inline-end:0;padding-inline-end:0}
  .sm-acts{flex-direction:column;align-items:stretch}
  .sm-btn{justify-content:center}
  .sm-mods__c,.sm-mods__c[data-w="wide"],.sm-mods__c[data-w="slim"]{width:80vw}
  .sm-mod{min-height:0}
  .sm-mod__art{position:relative;inset:auto;height:170px;margin:16px 0 20px}
  .sm-proof__art{grid-template-columns:1fr}
  .sm-fan{aspect-ratio:1/.78}
}

/* =====================================================================
   HAREKET AZALTMA
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .sm *,.sm *::before,.sm *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .sm-js [data-sm-rv]{opacity:1!important;transform:none!important}
  .sm-h__l>span{transform:none!important}
  .sm [data-sm-par]{transform:none!important}
}

@media (prefers-contrast:more){
  .sm{--muted:#3c4049;--line:#9aa0ab;--line-d:#6b6b5c;
      --w-16:rgba(255,255,255,.46);--w-64:rgba(255,255,255,.9)}
}

/* =====================================================================
   RTL (Arapca) — duzen mantiksal ozelliklerle ZATEN aynalanir. Burada
   yalnizca YON TASIYAN hareketler ve dikey yazimli raylar cevrilir.
   ===================================================================== */
[dir="rtl"] .sm{--edge:right}
[dir="rtl"] .sm-open .sm-rail{right:auto;left:0}
[dir="rtl"] .sm-proof .sm-rail{right:auto;left:calc(var(--gut) * .3)}
[dir="rtl"] .sm .sm-i,[dir="rtl"] .sm .sm-i--go{transform:scaleX(-1)}
[dir="rtl"] .sm-link:hover .sm-i,
[dir="rtl"] .sm-btn:hover .sm-i--go{transform:scaleX(-1) translateX(5px)}
[dir="rtl"] .sm-mod:hover .sm-mod__go .sm-i{transform:scaleX(-1) translateX(3px)}
[dir="rtl"] .sm-ce__go:hover .sm-i{transform:scaleX(-1) translateX(4px)}
[dir="rtl"] .sm-fan__i{
  transform:translate(calc(var(--fi) * -31%),calc(var(--fi) * -3%))
            rotate(calc(var(--fi) * -2.6deg))}
[dir="rtl"] .sm-fan:hover .sm-fan__i{
  transform:translate(calc(var(--fi) * -36%),calc(var(--fi) * -5%))
            rotate(calc(var(--fi) * -3.8deg))}
@media (max-width:760px){
  [dir="rtl"] .sm-fan__i{transform:translate(calc(var(--fi) * -26%),calc(var(--fi) * -3%))
    rotate(calc(var(--fi) * -2.2deg))}
}
/* Onay kutusu tiki yon tasimaz → aynalanmasi YANLIS olurdu. */
[dir="rtl"] .sm-consent input::after{transform:rotate(-45deg) translate(1px,-1px) scale(.5)}
[dir="rtl"] .sm-consent input:checked::after{transform:rotate(-45deg) translate(1px,-1px) scale(1)}