:root{
  --bg:#f4f1f8; --bg2:#faf7fd; --surface:#ffffff; --surface2:#f6f2fb; --sunken:#EDE7F6;
  --line:rgba(122,74,184,0.16); --line2:rgba(122,74,184,0.08);
  --text:#1b1426; --dim:#5d5372; --faint:#6B6283;
  --brand:#8259D2; --deep:#6C3FA8;
  --tint:rgba(130,89,210,0.10); --tintStrong:rgba(130,89,210,0.16);
  /* Uzerinde BEYAZ YAZI olan zeminler (dugme, numara): marka gradyaninin
     koyu turevi. Marka gradyaninin orta tonu #A55CBE beyazla 4.09:1 -
     14-15px yazi icin AA (4.5) altinda (olculdu 2026-09-24). Bu turev en
     acik noktasinda 5.9:1. Logo/suslemede marka gradyani (--grad) kalir. */
  --grad-dugme:linear-gradient(145deg,#6C3FA8,#8A45B0 55%,#A23F7C);
  --grad:linear-gradient(145deg,#8259D2,#A55CBE 55%,#C8529B);
  --brandBand:linear-gradient(120deg,#F1E9FF,#FBF3FF 55%,#FFF0F7);
  --shadow:0 18px 40px -24px rgba(44,24,74,0.28);
  --good:#2fd4a0; --warn:#f5b83d; --bad:#ff5c6e;
  --gap:72px;
  --edge:max(24px, calc((100vw - 1120px) / 2 + 24px));
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--surface); color:var(--dim);
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15.5px; line-height:1.65; text-wrap:pretty;
}
img{max-width:100%}
svg{display:block}

/* ---------- tip ölçeği ---------- */
h1,h2,h3{color:var(--text); font-weight:700; letter-spacing:-0.01em; margin:0}
h1{font-size:clamp(28px,3.2vw,38px); line-height:1.18; letter-spacing:-0.015em}
h2{font-size:clamp(22px,2.6vw,28px); line-height:1.22}
h3{font-size:17.5px; line-height:1.3}
p{margin:14px 0 0}
p:first-child{margin-top:0}
a{color:var(--deep); text-decoration:none; border-bottom:1px solid var(--tintStrong)}
a:hover{color:var(--deep); border-bottom-color:var(--brand)}
strong{color:var(--text); font-weight:700}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:0.9em; color:var(--deep); background:var(--tint); border-radius:5px; padding:1px 5px}
.b{color:var(--brand)}
.eyebrow{display:block; font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--faint)}
.small{font-size:13.5px; line-height:1.6; color:var(--faint)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:24px; top:12px; z-index:40; background:var(--surface); border:1px solid var(--brand); border-radius:9px; padding:8px 14px}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

/* ---------- ölçüler ---------- */
.wrap{max-width:1120px; margin:0 auto; padding:0 24px}
.read{max-width:720px}
.mid{max-width:720px; margin-left:auto; margin-right:auto}
.sec{padding:var(--gap) 0}
.sec.tint{background:var(--bg)}
.sec.band{background:var(--brandBand); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.sec.edge > .wrap{max-width:none; padding-left:var(--edge); padding-right:var(--edge)}
.sechead{max-width:720px}
.sechead h2{margin-top:9px}
.sechead p{margin-top:14px}
/* ORTALANMIS BOLUM BASLIGI ve IKI YANA YASLI METIN (kullanici karari
   2026-09-16: "resmi ortalayarak, metinleri iki yana hizalayarak").
   `text-align:justify` yalnizca bu blokta: dar sutunlarda kelime
   araliklarini acacagi icin sitenin geri kalaninda kullanilmiyor. */
.sechead-orta{margin-left:auto; margin-right:auto; text-align:center}
.iki-yana{text-align:justify; text-align-last:center; hyphens:auto}
.cizim-orta{display:flex; justify-content:center}
.after{margin-top:20px}

/* ---------- marka ---------- */
.mark,.sq{width:34px; height:34px; flex:0 0 34px; display:block}
/* Urun ailesindeki uc marka artik GERCEK logolariyla duruyor (kullanici
   karari 2026-09-16). Onceki uc kare, markalarin degil paletin
   yer tutucusuydu: ucu de ayni bicimdeydi ve hicbiri o urunun isaretini
   tasimiyordu. Kaynaklar: smart360/web/marka/{smartmail,smartfiles}.svg
   ve Smart360'in kendi dort kareli isareti (dorduncu kare kesik cizgili -
   Logo Kilavuzu yalnizca 16px'te dolu tona cevrilmesini soyluyor, burada
   34px'te duruyor). */
.sq{border-radius:10px}
.brandrow{display:flex; align-items:center; gap:11px}
.brandrow .names{display:flex; flex-direction:column; min-width:0}
.brandname{font-size:21px; font-weight:700; letter-spacing:-0.015em; color:var(--text); line-height:1.15}
.byline{font-size:11.5px; letter-spacing:0.01em; color:var(--faint); margin-top:2px}

/* ---------- üstbilgi ----------
   TEK SATIR (>=1100px). Once iki satirliydi: dokuz maddelik menu tek satira
   sigmiyordu (olculdu: menu 839px istiyor, markadan ve Demo dugmesinden
   artan yer 773px). Iki satir yer sorununu cozuyordu ama ustbilgi dagilmis
   gorunuyordu - marka solda, Demo dugmesi saglarda tek basina, menu altta
   ayri bir serit (kullanici bulgusu 2026-09-16: "ust menu cok kotu
   duruyor").
   Toparlamanin yolu menuyu KISALTMAKTI: "Ana sayfa" maddesi kaldirildi
   (logo zaten ana sayfaya gidiyor, altbilgide de duruyor) ve oge dolgusu
   12px'ten 9px'e indi. Menu 839px'ten 634px'e dustu; 1120px'lik
   yerlesimde menuye kalan yer 652px, yani 18px payla tek satira sigiyor.
   1100px'in altinda menu yine kendi satirina iniyor ve sarmak yerine yatay
   kaydiriliyor - orada artan yer yetmiyor (1024px'te ~635px). */
.topbar{background:var(--surface); border-bottom:1px solid var(--line); position:relative; z-index:5}
.topbar .wrap{display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap; padding-top:14px; padding-bottom:14px}
a.homelink{border-bottom:0; flex:0 1 auto; min-width:0}

/* ---------- sayfa başlığı ---------- */
.pagehead{background:var(--bg); border-bottom:1px solid var(--line2)}
.pagehead .wrap{padding-top:52px; padding-bottom:52px}
.pagehead h1{max-width:26em}
.pagehead .lead{margin-top:16px; max-width:44em; font-size:17px; line-height:1.6}
.anchors{margin-top:20px; display:flex; flex-wrap:wrap; gap:8px; padding:0; list-style:none}
.anchors li{margin:0}
.anchors a{border-bottom:0; display:inline-block; font-size:13.5px; font-weight:600; color:var(--deep); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:7px 14px}
.anchors a:hover{border-color:var(--brand)}

/* ---------- hero carousel (Smart360 kalıbı) ---------- */
.hero{background:var(--bg); padding:44px 0 0; overflow:hidden}
/* SLAYT SINIRINDAKI GOLGE KESIGI.
   Kullanici "metnin solunda belli belirsiz bir gölge kesiği" bildirdi.
   Olculdu (8x buyutmede piksel okunarak): kirpma sinirinin hemen saginda
   244'ten 237'ye inen, ~5.6px'te geri acilan bir koyulasma var. Kaynagi
   ONCEKI slayttaki `.frame` golgesi: `0 18px 34px -22px` - yayilma -22px
   olsa da 17px'lik bulaniklik birkac piksel disari tasiyor ve komsu
   slaytin sol kenarina giriyor; kirpma da onu duz bir dikey hatta
   ceviriyor.
   Cozum: slaytin icerigini iki yandan 8px iceri almak. 8px > golgenin
   tasma mesafesi, yani golge kendi slaytinin disina cikamiyor. Slayt
   GENISLIGI degismedigi icin (border-box + flex-basis %100) translateX
   mesafesi de ayni kaliyor; hero-view ayni kadar disari kaydirilarak metin
   sayfanin geri kalaniyla ayni hizada tutuluyor. */
.hero-view{overflow:hidden; margin-inline:-8px}
.hero-track{display:flex; flex-wrap:wrap; transition:transform .85s cubic-bezier(.7,0,.2,1)}
/* Slaytlar BIRBIRINE GORE GERILMEZ: gerildiklerinde ray en uzun slaydin
   boyunu aliyor ve kisa slaytlarin altinda buyuk bosluk kaliyordu
   (olculdu: ray 821px, en kisa slayt 344px). Rayin boyunu site.js
   aktif slayda gore ayarliyor; gecis yumusak olsun diye animasyonlu. */
.js .hero-track{flex-wrap:nowrap; align-items:flex-start;
  transition:transform .85s cubic-bezier(.7,0,.2,1), height .5s cubic-bezier(.3,0,.2,1)}
.slide{flex:0 0 100%; width:100%; min-width:0; padding-inline:8px}
.slide + .slide{margin-top:56px}
.js .slide + .slide{margin-top:0}
.slidegrid{display:grid; grid-template-columns:1fr 1.15fr; gap:44px; align-items:center}
.chip{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--deep); background:var(--tint); border-radius:999px; padding:5px 12px}
.sh1{font-size:clamp(28px,3.2vw,38px); font-weight:700; line-height:1.18; letter-spacing:-0.015em; color:var(--text); margin:14px 0 0}
.slide p{max-width:44em}
/* Hero'nun ilk slaytinda baslik artik SLOGAN ("Yeni nesil kurumsal
   e-posta"); urunun ne yaptigini anlatan cumle onun altina dustu ve bu
   yuzden govde puntosundan biraz iri, sayfadaki ilk okunacak metin olacak
   agirlikta. Yalnizca o slaytta kullaniliyor. */
.slide p.lede{font-size:17.5px; line-height:1.55; color:var(--dim); max-width:32em}
.cta{margin-top:24px; display:flex; flex-wrap:wrap; gap:10px}
.cta a{border-bottom:0; border-radius:999px; padding:11px 20px; font-size:15px; font-weight:700}
.cta a.pri{background:var(--grad-dugme); color:#fff; box-shadow:var(--shadow)}
.cta a.alt{background:var(--surface); border:1px solid var(--line); color:var(--deep)}
.cta a.alt:hover{border-color:var(--brand)}

.slider-alt{display:flex; align-items:center; gap:16px; padding:26px 0}
.slider-alt[hidden]{display:none}
.slider-ok{width:38px; height:38px; flex:0 0 38px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--deep); font:inherit; font-size:15px; font-weight:700; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center}
.slider-ok:hover{border-color:var(--brand)}
.slider-noktalar{display:flex; gap:8px; align-items:center}
.slider-noktalar button{height:6px; width:10px; border:0; padding:0; border-radius:999px; background:var(--line); cursor:pointer; transition:width .4s ease, background .4s ease}
.slider-noktalar button[aria-current="true"]{width:34px; background:var(--brand)}

/* ---------- kayan şerit ---------- */
.serit{background:var(--surface2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden}
.serit-ray{display:flex; gap:0; width:max-content; white-space:nowrap; animation:kay 34s linear infinite}
.serit-grup{display:flex; align-items:center; gap:34px; padding:14px 17px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--faint)}
.serit-nokta{color:var(--brand)}
@keyframes kay{ to { transform:translateX(-50%); } }

/* ---------- tarayıcı çerçevesi ---------- */
.frame{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface);
  box-shadow:0 1px 2px rgba(42,33,53,.06), 0 18px 34px -22px rgba(44,24,74,.22)}
.frame .bar{display:flex; align-items:center; gap:7px; background:var(--surface2); border-bottom:1px solid var(--line2); padding:8px 12px}
.frame .bar i{width:8px; height:8px; border-radius:50%; background:var(--line); display:block; flex:0 0 8px}
/* Cerceve basligi: adres cubugu yerine MARKA satiri (kullanici karari,
   2026-09-16). Ekran goruntusunun ustunde bir kiraci adresi gormek
   ziyaretciye bir sey anlatmiyordu; urun ailesinin adi anlatiyor. */
.frame .bar .barbrand{display:flex; align-items:center; gap:6px; margin-left:6px;
  font-size:11.5px; font-weight:700; color:var(--text); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; letter-spacing:-0.005em}
.frame .bar .barname{display:inline-block}
.frame .bar .barbrand b{color:var(--brand); font-weight:700}
.frame .bar .barmark{width:15px; height:15px; flex:0 0 15px; display:block}
.frame .bar .barby{font-weight:400; color:var(--faint); margin-left:2px}
@media (max-width:719px){ .frame .bar .barby{display:none} }
/* `<picture>` satir ici bir ogedir; blok yapilmazsa altinda satir yuksekligi
   kadar bir bosluk birakir ve cerceve icinde ince bir serit gorunur.
   Hero'nun ilk iki slaydi dar ekranda `<picture>` kullaniyor (masaustu
   karesi telefonda okunmuyordu - bkz. ekran-goruntusu.mjs '-dar'). */
/* EKRAN GORUNTUSUNU BUYUTEREK ACMA (site.js).
   Kareler yuvalarinda kucultulmus halde duruyor; tiklaninca ekrani
   kaplayarak aciliyor. Katman tek, her kare icin yeniden kurulmuyor. */
.buyutulebilir{cursor:zoom-in}
.buyutec{position:fixed; inset:0; z-index:60; display:flex; align-items:center;
  justify-content:center; padding:clamp(16px,4vw,48px);
  background:rgba(27,20,38,.78); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .2s ease}
.buyutec.acik{opacity:1}
.buyutec img{max-width:min(1400px,96vw); max-height:92vh; width:auto; height:auto;
  border-radius:12px; box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
  transform:scale(.97); transition:transform .22s cubic-bezier(.2,.9,.3,1); cursor:default}
.buyutec.acik img{transform:scale(1)}
.buyutec-kapat{position:absolute; top:clamp(10px,2.5vw,22px); right:clamp(10px,2.5vw,22px);
  width:42px; height:42px; border-radius:999px; border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.12); color:#fff; font-size:17px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center}
.buyutec-kapat:hover{background:rgba(255,255,255,.22)}
@media (prefers-reduced-motion:reduce){
  .buyutec,.buyutec img{transition:none}
  .buyutec img{transform:none}
}
.frame picture{display:block}
.frame img{display:block; width:100%; height:auto}
figure{margin:0}
figcaption{margin-top:9px; font-size:13.5px; line-height:1.55; color:var(--faint)}

/* ---------- iki sütunlu blok (tek kalıp) ---------- */
.duo{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:40px; align-items:center}
.duo > *{min-width:0}
@media (min-width:900px){
  .duo.textfirst > .visual{order:2}
}

/* ---------- problem kartları (kutu burada kalıyor) ---------- */
.problemler{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:stretch; margin-top:20px}
@media (min-width:1100px){ .problemler{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:659px){ .problemler{grid-template-columns:minmax(0,1fr)} }
.problem{display:flex; flex-direction:column; height:100%; background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:24px}
.problem .pnum{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.problem .draw{margin-top:14px}
.problem h3{margin-top:14px}
.problem > p{flex:1 1 auto}
.ans{margin-top:16px; padding-left:16px; border-left:3px solid var(--brand)}
.ans .lbl{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--deep)}
.ans p{margin-top:6px}

/* ---------- listeler ---------- */
.mini{margin-top:24px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 40px}
@media (min-width:1100px){ .mini{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:659px){ .mini{grid-template-columns:minmax(0,1fr); gap:32px} }
.mini > div{display:flex; flex-direction:column; padding-top:22px; border-top:1px solid var(--line)}
/* SIRA NUMARASI IKONUN SOLUNDA, AYNI BOYDA (kullanici karari 2026-09-16:
   "'Yetenek 01' gibi bir kelime yerine ustteki ikonun soluna ayni
   boyutlarda 1,2,3 yaz"). Numara artik bir etiket degil, ikonla ayni
   agirlikta bir isaret; kart da bir satir kisaliyor.

   IKISI TEK PARCA GORUNUR (kullanici duzeltmesi): aralarinda bosluk yok,
   cerceve ve kose yaricapi DIS kapsayicida, zemin ortak. Iki ayri kutu
   gibi durduklarinda numara ikonun etiketi degil komsusu gibi okunuyordu;
   birlesik hallerinde tek bir isaret olarak okunuyorlar. Ayirici ince bir
   hat - sinir degil, ic bolme. */
.minibas{display:flex; align-self:flex-start; align-items:stretch;
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:var(--tint)}
.sira{width:52px; height:52px; flex:0 0 52px;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; font-weight:700; line-height:1; letter-spacing:-0.02em;
  color:var(--deep); background:transparent}
.minibas .plate{border-radius:0; background:transparent; position:relative}
.minibas .plate::before{content:""; position:absolute; left:0; top:9px; bottom:9px;
  width:1px; background:var(--line)}
/* `.plate` ARTIK GENEL: ayni ikon levhasi yetenek kartlarinda da,
   ana sayfadaki uclu blokta da kullaniliyor. `.mini` altina hapsedilmisti;
   ikinci kullanim yeri ciktiginda kural hic uygulanmadi ve ikonlar
   levhasiz, hizasiz kaldi. */
.plate{width:52px; height:52px; border-radius:14px; background:var(--tint); display:flex; align-items:center; justify-content:center}
.plate svg{width:30px; height:30px}
.mini .num{margin-top:16px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.mini h3{margin-top:16px}
.mini p{margin-top:8px; font-size:15px; flex:1 1 auto}
.mini .go{margin-top:12px; align-self:flex-start; font-size:14px; font-weight:700; border-bottom:0}
.mini .go:hover{border-bottom:1px solid var(--brand)}

.perms{margin:16px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px}
.perms li{font-size:13.5px; color:var(--text); background:var(--surface2); border-radius:999px; padding:6px 13px}
.perms li.off{background:var(--tint); color:var(--deep); font-weight:700}

.signals{margin:18px 0 0; padding:0; list-style:none; border-left:2px solid var(--line)}
.signals li{margin:0; padding:10px 0 10px 16px; font-size:15px}
.signals b{color:var(--text)}
.signals em{font-style:normal; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-left:6px}

.kararlar{margin-top:18px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:18px 28px}
.kararlar b{display:block; color:var(--text); font-size:15.5px}
.kararlar b::before{content:""; display:block; width:22px; height:2px; background:var(--brand); margin-bottom:10px}
.kararlar span{display:block; margin-top:6px; font-size:14.5px}

/* ---------- yetenek blokları ---------- */
/* YETENEK NUMARASI FILIGRAN OLARAK (kullanici karari 2026-09-16:
   "'YETENEK 01' yazacagina metnin arkaplaninda filigran gibi hafif mor
   kocaman 01 yazsa daha iyi olur"). Numara artik okunacak bir etiket
   degil, bolumu isaretleyen bir zemin ogesi: metnin ARKASINDA, cok acik
   morda ve iri. `aria-hidden` cunku ekran okuyucuya "01" demek bir sey
   anlatmiyor; bolumun adi zaten basligin kendisi.
   Secilemez: imlecle metin tararken araya karismasin. */
/* Filigranin kapsayicisi HER ZAMAN konumlandirilir: numara `.cap-metin`
   disinda (ornegin `.read` icinde) kullanildiginda konumlanacak ebeveyn
   bulamayip sayfanin sol ust kosesine dusuyordu - ust menunun altinda
   "mor lekeler" (kullanici bulgusu 2026-09-24). */
.cap-metin,:has(> .cap-no){position:relative}
.cap-no{position:absolute; top:-34px; left:-10px; z-index:0;
  font-size:clamp(84px,9vw,132px); font-weight:800; line-height:1;
  letter-spacing:-0.04em; color:var(--tint); pointer-events:none;
  user-select:none; -webkit-user-select:none}
.cap-metin > :not(.cap-no),:has(> .cap-no) > :not(.cap-no){position:relative; z-index:1}

.cap{margin-top:56px; scroll-margin-top:24px}
.cap:first-of-type{margin-top:20px}
.captext h3{margin-top:8px}
.cap.full .captext{max-width:720px}
.widefig{margin-top:24px; max-width:960px}
/* IKI KAREYI YAN YANA KARSILASTIRMA. Guvenlik sayfasinda ayni ekranin
   iki farkli maildeki hali yan yana duruyor; fark ancak yan yana
   goruldugunde anlatiyor. Dar ekranda alt alta diziliyor. */
.ikili{margin-top:20px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:24px; align-items:start}

/* GALERI: BOYLARI COK FARKLI KARELER.
   Izgarada her satirin yuksekligi o satirdaki EN UZUN kare kadar oluyor;
   kisa kareler altlarinda buyuk delikler birakiyordu (kullanici bildirdi
   2026-09-16: "boyle ara bosluklar var"). Ustelik dort kare uc sutuna
   dagilinca dorduncusu tek basina alt satira dusuyordu.
   Sutun akisi (CSS columns) kareleri sikisik paketler: her kare kendi
   boyunca yer kaplar, altinda bosluk kalmaz. Sira sutun sutun akar -
   galeri icin dogru, cunku kareler arasinda bir okuma sirasi yok. */
.galeri{margin-top:20px; columns:2; column-gap:24px}
.galeri > figure{break-inside:avoid; margin:0 0 24px}
@media (max-width:719px){ .galeri{columns:1} }
ul.plain{margin:14px 0 0; padding-left:1.15em}
ul.plain li{margin:6px 0}
ul.plain li::marker{color:var(--brand)}

/* ---------- üç adım (kutusuz) ----------
   BASLIK SAYININ SAGINDA (kullanici karari 2026-09-16). Sayi ustte, baslik
   altta dizildiginde adim iki satira yayiliyor ve sayiyla basligi
   birbirine baglayan sey yalnizca yakinlik oluyordu; yan yana
   durduklarinda "1 - Kutulari tanimlayin" tek bir ifade olarak okunuyor.
   Duzen izgarayla kuruluyor: paragraf da basligin altina, sayinin
   hizasindan DEGIL metnin hizasindan basliyor. */
.flow{margin-top:24px; display:flex; align-items:flex-start; gap:28px; flex-wrap:wrap}
.step{flex:1 1 240px; min-width:0; display:grid; grid-template-columns:30px minmax(0,1fr); column-gap:12px; align-items:center}
.step .n{grid-column:1; grid-row:1; width:30px; height:30px; border-radius:999px; background:var(--grad-dugme); color:#fff; font-size:13.5px; font-weight:700; display:flex; align-items:center; justify-content:center}
.step h3{grid-column:2; grid-row:1; margin-top:0}
.step p{grid-column:2; grid-row:2; margin-top:8px; font-size:15px}

/* ---------- kutusuz üçlü ---------- */
.trio{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:32px; margin-top:24px}
/* Ana sayfadaki "Detaylı inceleyin" blogunda baslik IKONUN SAGINDA
   (kullanici karari 2026-09-16). Ikon ve baslik tek bir satir olunca
   uc kart ayni hizadan basliyor. */
.trio-bas{display:flex; align-items:center; gap:14px}
.trio h3{margin-bottom:0; margin-top:14px}
/* SIRA ONEMLI: `.trio h3` ile ayni ozgulukte oldugu icin bu kural ONDAN
   SONRA gelmeli. Once yazildiginda `margin-top:14px` kazaniyor ve baslik
   ikonun 14px altina kayiyordu - dikey hizasizligin sebebi buydu
   (kullanici bildirdi 2026-09-16). */
.trio-bas h3{margin:0}
.trio .go{margin-top:12px; display:inline-block; font-size:14px; font-weight:700; border-bottom:0}
.trio .go:hover{border-bottom:1px solid var(--brand)}
.trio p{font-size:15px}

/* ---------- telefon ---------- */
.phone{width:340px; max-width:100%; margin:0 auto; padding:10px; border-radius:46px; background:#1b1426; position:relative;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.10), 0 40px 80px -40px rgba(44,24,74,.55)}
.phone .screen{border-radius:38px; overflow:hidden; background:#0d0a12; padding:34px 0 22px}
.phone .screen img{display:block; width:100%; height:auto; object-fit:contain}
.phone .island{position:absolute; top:20px; left:50%; transform:translateX(-50%); width:96px; height:26px; background:#000; border-radius:999px; z-index:3}
.phone .home{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); width:120px; height:4px; background:rgba(255,255,255,.45); border-radius:999px; z-index:3}
.phone .btn{position:absolute; background:#33283f; border-radius:2px}
.phone .l1{left:0; top:112px; width:2px; height:22px}
.phone .l2{left:0; top:152px; width:2px; height:34px}
.phone .l3{left:0; top:198px; width:2px; height:34px}
.phone .r1{right:0; top:168px; width:2px; height:52px}

/* ---------- çizimler ---------- */
.draw{width:100%; height:auto}
.draw-wide{width:100%; max-width:620px; height:auto}

/* ---------- SSS (kutu burada kalıyor) ---------- */
.faq{max-width:820px}
details{background:var(--surface); border:1px solid var(--line); border-radius:13px; margin-top:10px}
details summary{cursor:pointer; list-style:none; padding:17px 52px 17px 20px; position:relative; font-size:15.5px; font-weight:700; color:var(--text)}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+"; position:absolute; right:20px; top:15px; font-size:19px; font-weight:700; color:var(--brand); line-height:1.4}
details[open] summary::after{content:"\2212"}
details .in{padding:0 20px 20px}
details .in p{margin-top:0}
details .in p + p{margin-top:14px}

/* ---------- iletişim formu ----------
   Form sayfanin sagini, aciklama solunu tutuyor; dar ekranda alt alta
   diziliyorlar. Alanlar `.form-satir` ile ikiserli gruplaniyor - ad/sirket
   ve e-posta/telefon dogal ciftler. */
.iletisim-duzen{align-items:start; gap:48px}
@media (min-width:900px){ .iletisim-duzen{grid-template-columns:0.9fr 1.1fr} }
.iletisim-kart{margin-top:28px; padding:22px; border:1px solid var(--line);
  border-radius:14px; background:var(--surface)}
.iletisim-kart .db-logo{margin-top:0}
.iletisim-kart p{margin-top:14px}

.form{background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:clamp(20px,3vw,30px); box-shadow:var(--shadow)}
.form-satir{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:16px}
.alan{display:flex; flex-direction:column; margin-top:16px}
.form-satir .alan{margin-top:16px}
.alan label{font-size:13.5px; font-weight:700; color:var(--text); margin-bottom:7px}
.zorunlu{color:var(--brand)}
.alan input,.alan select,.alan textarea{
  font:inherit; font-size:15px; color:var(--text); background:var(--bg2);
  border:1px solid var(--line); border-radius:10px; padding:11px 13px;
  width:100%; min-width:0; transition:border-color .15s ease, box-shadow .15s ease}
.alan textarea{resize:vertical; min-height:132px; line-height:1.55}
.alan input::placeholder,.alan textarea::placeholder{color:var(--faint); opacity:.8}
.alan input:focus,.alan select:focus,.alan textarea:focus{
  outline:0; border-color:var(--brand); box-shadow:0 0 0 3px var(--tint); background:var(--surface)}
.alan.hatali input,.alan.hatali select,.alan.hatali textarea{border-color:var(--bad)}
.alan-hata{margin-top:6px; font-size:13px; color:#b3261e}
.alan-ipucu{margin-top:6px; font-size:12.5px; color:var(--faint); text-align:right}

/* Onay kutucugu: etiketin TAMAMI tiklanabilir olsun - 16px'lik bir kareyi
   isabet ettirmek dokunmatik ekranda zor. */
.onay-alani .kutucuk{display:flex; align-items:flex-start; gap:10px;
  font-size:14px; font-weight:400; color:var(--dim); cursor:pointer; margin-bottom:0}
.onay-alani input{width:18px; height:18px; flex:0 0 18px; margin-top:2px; accent-color:var(--brand)}

.form-gonder{margin-top:22px; width:100%; border:0; border-radius:999px;
  background:var(--grad-dugme); color:#fff; font:inherit; font-size:15.5px; font-weight:700;
  padding:13px 22px; cursor:pointer; box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; gap:10px}
.form-gonder:hover{filter:saturate(1.08)}
.form-gonder[disabled]{opacity:.7; cursor:progress}
.form-gonder .donuyor{display:none; width:16px; height:16px; border-radius:999px;
  border:2px solid rgba(255,255,255,.45); border-top-color:#fff; animation:donme .7s linear infinite}
.form-gonder.gonderiliyor .donuyor{display:block}
@keyframes donme{to{transform:rotate(360deg)}}

.form-durum{margin-top:16px; font-size:14.5px; border-radius:10px; padding:12px 14px}
.form-durum.olumlu{background:rgba(47,212,160,.12); color:#12694f; border:1px solid rgba(47,212,160,.4)}
.form-durum.olumsuz{background:rgba(255,92,110,.10); color:#8c2230; border:1px solid rgba(255,92,110,.35)}
.form-dipnot{margin-top:14px}
@media (prefers-reduced-motion:reduce){ .form-gonder .donuyor{animation:none} }

/* ===========================================================================
   SMART360 SECURITY - rozet + animasyon, TEK TANIM.
   ===========================================================================
   Urun sahibi karari (2026-09-20, smart360 uzerinden): "Tüm turnstile
   sayfalarda Smart360 Security sistemi kullanılacak" + "Bunun bütün
   sitelerin de footerında olmasını istiyorum" + tanitimde "kendi bölümü"
   olarak one cikarilacak. Ayni ANIMASYON TANIMI ucu de kullanir - footer
   seridi (kucuk, --s360-rozet:20px), Turnstile perdesi (buyuk, iletisim.html)
   ve tanitim bolumu (buyuk, guvenlik.html) - ikinci bir kopya YAZILMADI,
   ikisi ayrisirsa biri eski kalirdi. Ikon smart360'in KENDI EJS parcasiyla
   (services/api/views/partials/s360-imza.ejs) BIREBIR AYNI SVG yolu -
   kalkan + ustune cizilen tik, duz bir onay isareti DEGIL. */
@keyframes s360Halka{ 0%{transform:scale(.72); opacity:.5} 100%{transform:scale(1.55); opacity:0} }
@keyframes s360Tik{ 0%,6%{stroke-dashoffset:26; opacity:0} 38%,64%{stroke-dashoffset:0; opacity:1} 92%,100%{stroke-dashoffset:0; opacity:0} }

.s360-rozet{position:relative; width:var(--s360-rozet,64px); height:var(--s360-rozet,64px); flex:0 0 auto; display:grid; place-items:center}
.s360-halka{position:absolute; inset:0; border-radius:999px; border:1.5px solid var(--brand); animation:s360Halka 2.6s cubic-bezier(.4,0,.4,1) infinite}
.s360-halka-gec{animation-delay:1.3s}
.s360-daire{position:relative; width:62%; height:62%; border-radius:999px; background:linear-gradient(145deg,#9b7ae0,#5b35a8); display:grid; place-items:center; box-shadow:0 3px 8px -3px rgba(130,89,210,.6)}
.s360-daire svg{width:52%; height:52%}
.s360-tik{stroke-dasharray:26; animation:s360Tik 2.6s ease infinite}
@media (prefers-reduced-motion:reduce){
  .s360-halka{animation:none; opacity:0}
  .s360-tik{animation:none; stroke-dashoffset:0; opacity:1}
}

/* ALTBILGI SERIDI - "Secured by Smart360 Security", HER sayfada, Turnstile
   olsun olmasin. Perdeden BAGIMSIZ (bkz. asagisi). */
.s360-imza{display:flex; align-items:center; justify-content:center; gap:9px; margin-top:20px}
.s360-imza .s360-rozet{--s360-rozet:20px; margin:0}
.s360-imza-metin{font-size:11.5px; line-height:1.35; color:var(--faint); letter-spacing:.01em}
.s360-imza-metin b{color:var(--text); font-weight:700}
.s360-imza-metin b i{color:var(--brand); font-style:normal}

/* TURNSTILE PERDESI - tam ekran, Turnstile parcacigi olan sayfalarda
   (su an yalnizca iletisim.html). Kullanici karari (2026-09-20, smart360
   uzerinden): once smart360'in KENDI arizasi buydu - appearance:
   "interaction-only" ile parcacik formun ALTINDA sifir yukseklikli bir
   kutudaydi, etkilesim istendiginde ciziliyordu ama kullanici onu HIC
   GORMUYORDU. Cozum GIZLEMEK degil KONUMLANDIRMAK: parcacik artik bu
   kartin TAM ORTASINDA. UC KARAR: kutu HER ZAMAN DOM'da (yalnizca
   `.gorunur` sinifiyla acilip kapaniyor - kosullu ekle/cikar YOK, aksi
   halde Cloudflare parcacigi YENIDEN CIZER ve jetonu kaybettirir); 450ms
   gecikmeli gorunurluk (bkz. site.js); kutuphane yok. */
.s360-perde{position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:16px;
  background:rgba(7,8,14,.62); backdrop-filter:blur(14px) saturate(120%); -webkit-backdrop-filter:blur(14px) saturate(120%);
  opacity:0; pointer-events:none; transition:opacity .24s ease}
.s360-perde.gorunur{opacity:1; pointer-events:auto}
.s360-perde-kart{width:min(300px,88vw); padding:30px 26px 26px; border-radius:18px;
  background:rgba(24,25,36,.94); border:1px solid rgba(255,255,255,.09);
  box-shadow:0 28px 70px -18px rgba(0,0,0,.6); display:flex; flex-direction:column; align-items:center; text-align:center}
.s360-perde-baslik{margin-top:16px; font-size:14.5px; font-weight:700; color:#fff; letter-spacing:.01em}
.s360-perde-metin{margin-top:5px; font-size:11.5px; color:rgba(255,255,255,.58); line-height:1.5}
.s360-perde .turnstile-alani{margin-top:16px; min-height:65px; display:flex; justify-content:center}

/* TANITIM BOLUMU (guvenlik.html) - urun sahibi karari: dipnot degil, KENDI
   bolumu, ayni rozet + animasyon "cok onemli bicimde vurgulanacak". */
.s360-ozellik{display:flex; align-items:center; gap:32px; flex-wrap:wrap}
.s360-ozellik .s360-rozet{flex:0 0 auto}
.s360-ozellik .read{flex:1 1 320px}
@media (max-width:640px){
  .s360-ozellik{justify-content:center; text-align:center}
}

/* ---------- iletişim ---------- */
.info{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:32px; margin-top:24px}
.info .lbl{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.info h3{margin-top:8px}
.info p{font-size:15px}

/* ---------- altbilgi ---------- */
footer.sitefoot{background:var(--bg2); border-top:1px solid var(--line); padding:56px 0 44px}
.footcols{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:32px}
footer.sitefoot .lbl{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.footcols ul{margin:12px 0 0; padding:0; list-style:none}
.footcols li{margin:7px 0; font-size:14.5px}
/* SAYFA LISTESI IKI SUTUN. Site dokuz sayfaya cikinca liste altbilgide
   tek sutun halinde asagi tasiyor ve komsu sutunlarla hizasi bozuluyordu
   (kullanici bildirdi 2026-09-16). */
.footcols ul.iki-sutun{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px}
.footcols .val{margin-top:6px; color:var(--text); font-size:14.5px}
/* Gelistirici logosu altbilgide ve iletisim sayfasinda. Kaynak
   digitalbridge.com.tr'deki kurumsal logo; genisligi sinirli, yuksekligi
   orana birakiliyor. */
.db-logo{display:inline-block; border-bottom:0; margin-top:12px}
.db-logo img{display:block; width:170px; height:auto}
.family{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:14px; margin-top:14px}
.fam{display:flex; align-items:flex-start; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:16px}
.fam:hover{border-color:var(--brand)}
.fam .names{display:flex; flex-direction:column; min-width:0}
.fname{font-size:19px; font-weight:700; color:var(--text); letter-spacing:-0.015em; line-height:1.2}
.fdesc{font-size:13px; color:var(--faint); margin-top:2px; min-height:2.7em}
.footbottom{margin-top:36px; padding-top:22px; border-top:1px solid var(--line)}
.footnote{font-size:12px; line-height:1.6; color:var(--faint); margin-top:10px}
/* TELIF + SMART360 SECURITY IMZASI AYNI SATIRDA - kullanici karari
   (2026-09-20, SmartFiles-Web uzerinden, ekran goruntusuyle bildirildi):
   imza telifin ALTINDA ortali degil, KARSISINA gecmeli. Dar ekranda
   flex-wrap ile alt alta duser, `gap` ile ayrilir. */
.footbottom-satir{margin-top:10px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 20px}
.footbottom-satir .s360-imza{margin-top:0}

@media (max-width:979px){
  .slidegrid{grid-template-columns:minmax(0,1fr); gap:28px}
}
@media (max-width:719px){
  :root{--gap:48px}
  .cap{margin-top:48px}
  .pagehead .wrap{padding-top:38px; padding-bottom:38px}


  /* Hero: telefonda ust bosluk yarisi yeter. */
  .hero{padding-top:26px}
  .slidegrid{gap:22px}
  .cta a{padding:10px 17px; font-size:14.5px}
  .slider-alt{padding:18px 0}
}
*,*::before,*::after{transition-duration:.2s; transition-property:color,background-color,border-color}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important; animation:none !important; scroll-behavior:auto !important}
  .hero-track{flex-wrap:wrap !important; transform:none !important}
  .js .slide + .slide{margin-top:56px}
  .serit{overflow-x:auto}
  .serit-ray{animation:none}
}

/* ===========================================================================
   TASARIM SISTEMI v2 (Tasarim ajani, 2026-09-23) - tipografi,
   illustrasyon ve guven bilesenleri. UC SITEDE AYNI BLOK: smartmail /
   smartfiles stil.css ve smart360 styles.css'e ayni isimlerle tasinir.
   Kullanici talimati: "sitenin guven vermesi ... mukemmel tasarim ... bol
   flat design resim".

   BILESENLER (HTML kalibi; metni Pazarlama yazar):
   .ill            <img class="ill" src="gorseller/cizim/X.svg" width="W" height="H"
                   alt="..." loading="lazy" decoding="async">   (+ .ill-sm / .ill-lg)
   .kart-izgara    > .kart (> .plate + h3 + p)                 ozellik kartlari
   .kiyas          <div class="kiyas-kap"><table class="kiyas">; bizim sutun
                   th/td.biz, onay hucresi <td class="biz" data-etiket="Urun"><span class="evet">...</span>, diger td data-etiket="Standart ..."
   .yetki          .yetki-kaynak (kutu/alan) + ul.yetki-kisiler > li >
                   .kisi + ul.haklar > li(.acik) - kutu -> kisi -> izin
   .eko            .eko-merkez (tek panel) + .eko-urunler > .eko-urun
   .guven          ul.guven > li > .plate + b + span  (YALNIZ gercek olanlar)
   =========================================================================== */
:root{color-scheme:light} /* Kullanici karari 2026-09-23: siteler YALNIZ acik tema. */
/* ---------- tipografi ve ritim (v2) ---------- */
body{font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased}
h1,.sh1{font-size:clamp(30px,3.7vw,46px); line-height:1.12; letter-spacing:-0.022em}
h2{font-size:clamp(24px,2.9vw,34px); line-height:1.18; letter-spacing:-0.018em}
h3{font-size:18.5px; line-height:1.32}
.pagehead .lead,.slide p.lede{font-size:clamp(16.5px,1.5vw,18.5px)}
.eyebrow{color:var(--deep)}
:root{--gap:clamp(56px,7vw,96px)}
/* Sayfa basligi: duz zemin yerine yumusak marka isigi - guven veren,
   sade bir derinlik; metin kontrastini etkilemez. */
.pagehead,.hero{background:
  radial-gradient(60% 80% at 100% 0%,var(--tint),transparent 70%),
  radial-gradient(50% 70% at 0% 100%,rgba(200,82,155,.07),transparent 70%),
  var(--bg)}
.pagehead-duz{display:grid; gap:28px; align-items:center}
@media (min-width:900px){ .pagehead-duz{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:48px} }
:focus-visible{outline:3px solid var(--brand); outline-offset:3px; border-radius:4px}
.cta a:focus-visible{outline-offset:4px}

/* ---------- illustrasyon ---------- */
.ill{display:block; width:100%; height:auto; max-width:460px; margin-inline:auto}
.ill-sm{max-width:260px}
.ill-lg{max-width:560px}
.ill-kap{display:flex; justify-content:center; align-items:center; padding:clamp(8px,2vw,24px)}

/* ---------- ozellik kartlari ---------- */
.kart-izgara{margin-top:32px; display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.kart{position:relative; display:flex; flex-direction:column; gap:12px; padding:26px;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  transition:border-color .2s, transform .2s, box-shadow .2s}
.kart:hover{border-color:var(--tintStrong); transform:translateY(-2px); box-shadow:var(--shadow)}
.kart h3{margin:4px 0 0}
.kart p{margin:0; font-size:15px}
.kart .go{margin-top:auto; padding-top:6px; font-size:14px; font-weight:700; border-bottom:0}
.kart .go::after{content:" \2192"}
.kart .ill{max-width:none; margin:-8px -8px 4px; width:calc(100% + 16px); aspect-ratio:16/10; object-fit:contain;
  background:var(--bg); border-radius:12px; padding:14px}

/* ---------- kiyaslama tablosu ----------
   Kurallar (ORTAK-KURALLAR): rakip adi yok; yalniz bizde OLAN satirlar;
   bizim sutunda hic "yok" olmaz. Bizim sutun vurgulu serit. Dar ekranda
   tablo kendi kabinda yatay kayar (ilk sutun sabit), sayfa kaymaz. */
.kiyas-kap{margin-top:28px; overflow-x:auto; border:1px solid var(--line); border-radius:16px;
  background:var(--surface); -webkit-overflow-scrolling:touch}
.kiyas{width:100%; min-width:560px; border-collapse:separate; border-spacing:0; font-size:15px}
.kiyas caption{caption-side:top; text-align:left; padding:18px 20px 0; font-size:13px; color:var(--faint)}
.kiyas th,.kiyas td{padding:15px 20px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line2)}
.kiyas tr:last-child > *{border-bottom:0}
.kiyas thead th{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); background:var(--surface2)}
.kiyas tbody th{font-weight:600; color:var(--text); width:38%;
  position:sticky; left:0; background:var(--surface); z-index:1}
.kiyas .biz{background:var(--tint); color:var(--text)}
.kiyas thead .biz{color:var(--deep); background:var(--tintStrong)}
.kiyas td:not(.biz){color:var(--faint)}
.evet{display:inline-flex; align-items:flex-start; gap:9px; font-weight:600}
.evet::before{content:""; flex:0 0 20px; height:20px; margin-top:2px; border-radius:999px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.3 2.2 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat, var(--grad)}

/* ---------- yetki semasi: kutu/alan -> kisi -> izin ---------- */
.yetki{margin-top:32px; display:grid; gap:0; align-items:center;
  grid-template-columns:minmax(0,260px) 48px minmax(0,1fr)}
.yetki-kaynak{display:flex; flex-direction:column; gap:6px; padding:22px; border-radius:16px;
  background:var(--grad-dugme); color:#fff; box-shadow:var(--shadow)}
.yetki-kaynak .eyebrow{color:rgba(255,255,255,.8)}
.yetki-kaynak b{font-size:19px; color:#fff; word-break:break-word}
.yetki-kaynak span{font-size:13.5px; color:rgba(255,255,255,.85)}
/* baglayici: kaynaktan kisilere yatay hat + kisilerin sol omurgasi */
.yetki-bag{height:2px; background:linear-gradient(90deg,var(--brand),var(--line))}
.yetki-kisiler{list-style:none; margin:0; padding:0 0 0 20px; border-left:2px solid var(--line);
  display:flex; flex-direction:column; gap:12px}
.yetki-kisiler > li{position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
  padding:14px 18px; background:var(--surface); border:1px solid var(--line); border-radius:14px}
.yetki-kisiler > li::before{content:""; position:absolute; left:-22px; top:50%; width:20px; height:2px; background:var(--line)}
.kisi{display:flex; align-items:center; gap:10px; min-width:170px; font-weight:700; color:var(--text); font-size:15px}
.kisi small{display:block; font-weight:400; font-size:12.5px; color:var(--faint)}
.kisi .avatar{flex:0 0 34px; height:34px; border-radius:999px; background:var(--tint); color:var(--deep);
  display:grid; place-items:center; font-size:13px; font-weight:700}
.haklar{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.haklar li{font-size:12.5px; font-weight:600; padding:4px 10px; border-radius:999px;
  border:1px dashed var(--line); color:var(--faint)}
.haklar li.acik{border:1px solid transparent; background:var(--tint); color:var(--deep)}
.haklar li.acik::before{content:"\2713\00a0"}
.yetki-not{margin-top:14px; font-size:13.5px; color:var(--faint); display:flex; gap:18px; flex-wrap:wrap}
.yetki-not span::before{content:""; display:inline-block; width:10px; height:10px; border-radius:999px; margin-right:6px; vertical-align:-1px; background:var(--tint)}
.yetki-not span + span::before{background:transparent; border:1px dashed var(--line)}
@media (max-width:759px){
  .yetki{grid-template-columns:minmax(0,1fr)}
  .yetki-bag{width:2px; height:24px; margin-left:28px; background:linear-gradient(180deg,var(--brand),var(--line))}
  .yetki-kisiler{margin-left:28px}
}

/* ---------- ekosistem: tek panel -> urunler ---------- */
.eko{margin-top:36px; display:flex; flex-direction:column; align-items:center}
.eko-merkez{position:relative; display:flex; align-items:center; gap:16px; padding:20px 26px;
  border-radius:18px; background:var(--grad-dugme); color:#fff; box-shadow:var(--shadow); max-width:560px; width:100%}
.eko-merkez .sq,.eko-merkez .mark{width:44px; height:44px; flex:0 0 44px}
.eko-merkez b{display:block; font-size:19px; color:#fff}
.eko-merkez span{display:block; font-size:13.5px; color:rgba(255,255,255,.88)}
.eko-yonetim{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; max-width:760px}
.eko-yonetim li{font-size:13px; font-weight:600; color:var(--deep); background:var(--tint); border-radius:999px; padding:5px 12px}
.eko-urunler{position:relative; margin-top:44px; width:100%; display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.eko-urunler::before{content:""; position:absolute; top:-44px; left:50%; width:2px; height:26px; background:var(--line)}
.eko-urunler::after{content:""; position:absolute; top:-18px; left:16.6%; right:16.6%; height:2px; background:var(--line)}
.eko-urun{position:relative; display:flex; gap:12px; align-items:flex-start; padding:18px; border-radius:14px;
  background:var(--surface); border:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--dim)}
a.eko-urun:hover{border-color:var(--brand)}
.eko-urun::before{content:""; position:absolute; top:-19px; left:50%; width:2px; height:18px; background:var(--line)}
.eko-urun b{display:block; color:var(--text); font-size:16.5px}
.eko-urun span{display:block; font-size:13.5px; margin-top:2px}
@media (max-width:719px){ .eko-urunler::after,.eko-urun::before{display:none} .eko-urunler::before{height:30px} }
/* Smart360 Security urun KARTI olarak cizilmez (satilan urun degil, tum
   urunleri koruyan ortak katman - kullanici kurali): semanin altinda not. */
.eko-koruma{margin:22px auto 0; max-width:620px; text-align:center; font-size:14px; color:var(--dim);
  padding:10px 16px; border:1px dashed var(--tintStrong); border-radius:12px; background:var(--surface)}
.eko-koruma b{color:var(--text)}
.eko-urunler:has(> :nth-child(2):last-child)::after{left:25%; right:25%}

/* ---------- guven bolumu (yalniz gercek, dogrulanabilir unsurlar) ---------- */
.guven{list-style:none; margin:28px 0 0; padding:0; display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.guven li{display:flex; flex-direction:column; gap:8px; padding:22px; border-radius:16px;
  background:var(--surface); border:1px solid var(--line)}
.guven .plate{width:44px; height:44px; border-radius:12px}
.guven .plate svg{width:24px; height:24px}
.guven b{color:var(--text); font-size:16px; margin-top:6px}
.guven span{font-size:14.5px; line-height:1.6}

@media (prefers-reduced-motion:reduce){ .kart:hover{transform:none} }
/* Kiyas tablosu dar ekranda: her satir bir kart; hucre basligi
   `data-etiket` ozniteliginden gelir (td'ye yazilir). */
@media (max-width:599px){
  .kiyas{min-width:0}
  .kiyas thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .kiyas tr{display:block; border-bottom:1px solid var(--line)}
  .kiyas tr:last-child{border-bottom:0}
  .kiyas tbody th,.kiyas td{display:block; width:auto; position:static; border:0; padding:6px 18px}
  .kiyas tbody th{padding-top:16px; background:transparent}
  .kiyas td:last-child{padding-bottom:16px}
  .kiyas td[data-etiket]::before{content:attr(data-etiket); display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:2px}
  .kiyas .biz{background:transparent}
}
@media (max-width:899px){ .pagehead-duz .ill{max-width:300px} }

/* ---------- kiyas v2: grup satirlari, baglantili satir basligi, etiket, ikon ---------- */
.kiyas tr.grup th{position:static; width:auto; padding:22px 20px 10px; background:var(--surface);
  font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--deep);
  border-bottom:2px solid var(--tintStrong)}
.kiyas tr.grup:first-child th{padding-top:16px}
.kiyas tbody th a{color:var(--text); border-bottom:1px solid var(--tintStrong)}
.kiyas tbody th a:hover{color:var(--deep); border-bottom-color:var(--brand)}
.kiyas-kap > .kiyas caption{padding-bottom:4px}
.etiket{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.02em; padding:3px 10px; border-radius:999px;
  background:var(--tint); color:var(--deep)}
.etiket-kimlik{background:rgba(47,212,160,.14); color:#0f7a5a}
.etiket-yapi{background:rgba(130,89,210,.13); color:var(--deep)}
.etiket-icerik{background:rgba(245,184,61,.18); color:#8a5a00}
.kiyas .ikonlu{display:inline-flex; align-items:center; gap:12px}
.kiyas .ikonlu svg{flex:0 0 30px; width:30px; height:30px; padding:6px; border-radius:9px; background:var(--tint);
  stroke:var(--brand); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
@media (max-width:599px){
  .kiyas tr.grup th{padding:18px 18px 8px}
  .kiyas tr.grup{border-bottom:0}
}

/* ---------- adim semasi (yatay, oklu) ---------- */
.adimlar{list-style:none; margin:28px 0 0; padding:0; counter-reset:adim; display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.adimlar > li{position:relative; counter-increment:adim; display:flex; flex-direction:column; gap:6px;
  padding:52px 20px 20px; border-radius:16px; background:var(--surface); border:1px solid var(--line)}
.adimlar > li::before{content:counter(adim); position:absolute; top:16px; left:20px; width:28px; height:28px; border-radius:999px;
  background:var(--grad-dugme); color:#fff; font-size:13.5px; font-weight:700; display:grid; place-items:center}
.adimlar > li:last-child::before{content:"\2713"}
.adimlar b{color:var(--text); font-size:16px}
.adimlar span{font-size:14.5px; line-height:1.55}
@media (min-width:900px){
  .adimlar{grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px}
  .adimlar > li:not(:last-child)::after{content:""; position:absolute; top:29px; right:-24px; width:20px; height:2px;
    background:var(--brand); opacity:.55}
}
.adim-duz{display:grid; gap:24px; align-items:center; margin-top:8px}
@media (min-width:900px){ .adim-duz{grid-template-columns:minmax(0,1fr) minmax(0,300px); gap:40px} }

/* ---------- izin matrisi: satir kisi (+kutu), sutun izin ---------- */
.matris{width:100%; min-width:760px; border-collapse:separate; border-spacing:0; font-size:14px}
.matris th,.matris td{padding:12px 8px; text-align:center; border-bottom:1px solid var(--line2)}
.matris thead th{font-size:11.5px; font-weight:700; line-height:1.3; color:var(--faint); vertical-align:bottom; background:var(--surface2)}
.matris tbody th{text-align:left; padding-left:18px; position:sticky; left:0; background:var(--surface); z-index:1; min-width:190px}
.matris tbody th b{display:block; color:var(--text); font-size:14.5px}
.matris tbody th code{font-size:12.5px}
.matris tr:last-child > *{border-bottom:0}
.izin{display:inline-block; width:22px; height:22px; border-radius:999px; border:1.5px dashed var(--line); vertical-align:middle}
.izin.var{border:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.3 2.2 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat, var(--grad)}
.gorsel-gizli{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.kart .ornek{align-self:flex-start; max-width:100%; font-size:12.5px; padding:4px 9px; border-radius:8px; overflow-wrap:anywhere}
/* Dort kartlik izgara 3+1 kirilmasin: genis ekranda 4, ortada 2 sutun. */
@media (min-width:600px){ .kart-izgara.dort{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .kart-izgara.dort{grid-template-columns:repeat(4,minmax(0,1fr))} }
/* Cizimin yanindaki adim semasi 2x2 akar; oklar yalniz tek satirli dizilimde. */
@media (min-width:900px){
  .adim-duz .adimlar{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
  .adim-duz .adimlar > li::after{display:none}
}

/* ---------- mobil ekranlar: telefonlar yan yana ----------
   Genis ekranda ortali bir dizi; dar ekranda sayfa kaymaz, dizi kendi
   icinde yatay kayar (scroll-snap). Telefon kucuk olcekte (.phone 250px). */
.telefonlar-blok{display:grid; gap:28px}
.telefonlar{display:flex; gap:28px; overflow-x:auto; padding:8px 4px 20px; margin:0 -4px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:thin}
.telefonlar::-webkit-scrollbar{height:6px}
.telefonlar::-webkit-scrollbar-thumb{background:var(--line); border-radius:999px}
.telefon-fig{flex:0 0 auto; width:250px; scroll-snap-align:center; margin:0}
.telefon-fig .phone{width:250px; padding:8px; border-radius:38px}
.telefon-fig .phone .screen{border-radius:31px; padding:26px 0 16px}
.telefon-fig .phone .island{top:15px; width:72px; height:20px}
.telefon-fig .phone .home{bottom:12px; width:90px}
.telefon-fig figcaption{text-align:center; margin-top:12px}
@media (min-width:900px){ .telefonlar{justify-content:center; overflow-x:visible; flex-wrap:wrap} }

/* ---------- paketler sayfasi (kartlar web/paketler.js ile cizilir) ---------- */
.paket-izgara{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); align-items:start}
.paket{display:flex; flex-direction:column; gap:10px; padding:28px 26px; background:var(--surface);
  border:1px solid var(--line); border-radius:16px}
.paket h3{margin:0; font-size:21px}
.paket p{margin:0}
.paket-kisi{font-size:14px; font-weight:600; color:var(--dim)}
.paket-fiyat{margin-top:6px !important; display:flex; align-items:baseline; gap:6px}
.paket-fiyat .tutar{font-size:36px; font-weight:800; letter-spacing:-0.02em; color:var(--text); font-variant-numeric:tabular-nums}
.paket-fiyat .donem{font-size:15px; font-weight:600; color:var(--faint)}
.paket-not{font-size:13.5px; color:var(--faint); font-variant-numeric:tabular-nums}
.paket-yillik{font-size:14px; line-height:1.5; color:var(--dim); background:var(--tint); border-radius:10px; padding:9px 12px}
.paket-yillik b{color:var(--deep)}
.paket .cta{margin-top:6px}
.paket .cta a{flex:1 1 auto; text-align:center}
.paket-kapasite{margin:8px 0 0; display:grid; gap:0; border-top:1px solid var(--line2)}
.paket-kapasite div{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line2); font-size:14.5px}
.paket-kapasite dt{color:var(--dim)}
.paket-kapasite dd{margin:0; font-weight:700; text-align:right; font-variant-numeric:tabular-nums}
.paket-guvenlik{font-size:13px; line-height:1.55; color:var(--faint)}
.paket-ozellik{margin:4px 0 0; padding:0; list-style:none; display:grid; gap:6px; font-size:14.5px}
.paket-ozellik li{position:relative; padding-left:22px}
.paket-ozellik li::before{content:""; position:absolute; left:2px; top:0.45em; width:10px; height:6px;
  border-left:2px solid var(--brand); border-bottom:2px solid var(--brand); transform:rotate(-45deg)}
.paket .go{margin-top:8px; font-size:14px; font-weight:700; border-bottom:0}
.paket .go::after{content:" \2192"}
.paket-kur{margin-top:18px}
.paket-aile{margin-top:28px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
  padding:24px 26px; border-radius:16px; background:var(--bg); border:1px solid var(--line)}
.paket-aile > div:first-child{flex:1 1 320px}
.paket-aile h3{margin:6px 0 6px}
.paket-aile p{margin:0; color:var(--dim)}
.paket-aile .cta{margin-top:0}

/* KART GERILMESI (kullanici bulgusu 2026-09-24, belge bolum kartlari; SEO +
   Pazarlama taramasi): kenarlikli kartlar ayni satirdaki en uzun karta
   GERILMEZ - olculdu: SM guvenlik 4 kart 97px, smart360 ana sayfa durumlar
   71px bos alan kalan cercevenin icinde. Kenarliksiz izgaralar (.trio,
   .kararlar, .mini) ve dugme hizasi gereken paket kartlari (.paketler,
   .satis-secenekler) bilerek gerili kalir. */
.kart-izgara,.guven{align-items:start}

/* ===========================================================================
   UST MENU v3 (Tasarim, 2026-09-24) - SmartMail ve SmartFiles'ta AYNI.
   Kullanici istegi: "ust menu daha derli toplu ... cok karmasik ve birbirine
   girmis". Duz 10-11 madde yerine: logo | Urun (acilir, tek satir
   aciklamali) | Paketler | Belgeler | Destek (acilir) | Demo (cerceveli)
   + Satin al (dolu).
   JS'SIZ CALISIR: hamburger paneli ve acilir menuler <details>/<summary>
   (acik/kapali durumu tarayici kendisi bildirir). Genis ekranda panel
   ::details-content ile her zaman gorunur; site.js yalniz iyilestirir
   (eski tarayicida paneli acar, disari tiklama/Esc ile kapatir).
   Aktif sayfa: web-ortak.mjs baglantiya aria-current koyar; acilir grup
   :has() ile isaretlenir. Isaretleme: index.html ORTAK:USTBILGI.
   =========================================================================== */
.topbar details,.topbar details[open]{background:none; border:0; border-radius:0; margin:0; box-shadow:none}
.topbar summary{list-style:none; cursor:pointer}
.topbar summary::-webkit-details-marker{display:none}
.topbar summary::after,.topbar details[open] > summary::after{content:none}
.topbar .wrap{max-width:1240px; flex-wrap:nowrap; gap:18px; padding-top:12px; padding-bottom:12px}
.menu{flex:1 1 auto; min-width:0; display:flex; justify-content:flex-end}
.menu > summary{display:none}
.menu-govde{display:flex; align-items:center; gap:10px 18px; flex:1 1 auto; justify-content:flex-end}
.sitenav{display:flex; align-items:center; gap:2px}
.sitenav > a,.acilir > summary{display:inline-flex; align-items:center; gap:6px; border-bottom:0; padding:8px 12px; border-radius:999px;
  font-size:14.5px; font-weight:600; color:var(--dim); white-space:nowrap; line-height:1.2}
.sitenav > a:hover,.acilir > summary:hover,.acilir[open] > summary{background:var(--surface2); color:var(--deep)}
.sitenav > a[aria-current="page"],.acilir:has([aria-current="page"]) > summary{background:var(--tint); color:var(--deep); font-weight:700}
.topbar .acilir > summary::after,.topbar .acilir[open] > summary::after{content:""; position:static; right:auto; top:auto; font-size:0; line-height:0; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg); transition:transform .15s ease; opacity:.7}
.topbar .acilir[open] > summary::after{transform:translateY(1px) rotate(-135deg)}
.acilir{position:relative}
.acilir-panel{display:grid; gap:2px; padding:8px; background:var(--surface); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 24px 48px -24px rgba(44,24,74,.35), 0 2px 6px rgba(44,24,74,.06)}
.acilir-panel a{display:block; border-bottom:0; padding:10px 12px; border-radius:11px; color:var(--text)}
.acilir-panel a b{display:block; font-size:14.5px; font-weight:700; line-height:1.3}
.acilir-panel a span{display:block; margin-top:2px; font-size:12.5px; line-height:1.4; color:var(--faint); font-weight:400}
.acilir-panel a:hover{background:var(--tint); color:var(--deep)}
.acilir-panel a[aria-current="page"]{background:var(--tint)}
.acilir-panel a[aria-current="page"] b{color:var(--deep)}
.ust-eylem{display:flex; align-items:center; gap:8px; flex:0 0 auto}
.ust-eylem a{border-bottom:0; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;
  font-size:14.5px; font-weight:700; border-radius:999px; padding:9px 17px; line-height:1.2}
.ust-eylem .ust-demo{color:var(--deep); background:var(--surface); box-shadow:inset 0 0 0 1.5px var(--tintStrong)}
.ust-eylem .ust-demo:hover{color:var(--deep); background:var(--tint); box-shadow:inset 0 0 0 1.5px var(--brand)}
.ust-eylem .ust-satin,.ust-eylem .ust-satin:hover,.ust-eylem .ust-satin:focus-visible{color:#fff; background:var(--grad-dugme); box-shadow:var(--shadow)}
.ust-eylem .ust-satin:hover{filter:saturate(1.1) brightness(1.04)}
.ust-eylem a:focus-visible,.topbar summary:focus-visible{outline:3px solid var(--brand); outline-offset:3px}

/* GENIS EKRAN: panel her zaman acik gorunur; acilirlar yuzen panel. */
@media (min-width:1000px){
  .menu:not([open])::details-content{content-visibility:visible; block-size:auto}
  .acilir-panel{position:absolute; top:calc(100% + 10px); left:-8px; z-index:40; min-width:250px}
  .acilir-panel.genis{grid-template-columns:repeat(2,minmax(0,1fr)); width:min(580px,calc(100vw - 48px))}
  /* fareyle uzerine gelince de acilir; summary ile panel arasindaki bosluk kopru */
  @media (hover:hover){
    .acilir:not([open]):hover::details-content{content-visibility:visible; block-size:auto}
    .acilir-panel::before{content:""; position:absolute; left:0; right:0; top:-12px; height:12px}
  }
}
/* DAR EKRAN: tek hamburger paneli; acilirlar panelin icinde yerinde acilir. */
@media (max-width:999px){
  .menu > summary{display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px;
    font-size:14.5px; font-weight:700; color:var(--deep); box-shadow:inset 0 0 0 1.5px var(--tintStrong); background:var(--surface)}
  .menu > summary:hover{background:var(--tint)}
  .menu-ikon{position:relative; width:16px; height:12px;
    background:linear-gradient(currentColor 0 0) top/100% 2px no-repeat, linear-gradient(currentColor 0 0) center/100% 2px no-repeat, linear-gradient(currentColor 0 0) bottom/100% 2px no-repeat}
  .menu[open] > summary .menu-ikon{background:
    linear-gradient(45deg,transparent calc(50% - 1px),currentColor calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)),
    linear-gradient(-45deg,transparent calc(50% - 1px),currentColor calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px))}
  .menu-govde{position:absolute; left:0; right:0; top:100%; z-index:40; flex-direction:column; align-items:stretch; gap:14px;
    padding:12px 16px 18px; background:var(--surface); border-bottom:1px solid var(--line);
    box-shadow:0 24px 40px -28px rgba(44,24,74,.4); max-height:calc(100vh - 70px); overflow:auto}
  .sitenav{flex-direction:column; align-items:stretch; gap:2px}
  .sitenav > a,.acilir > summary{justify-content:space-between; padding:12px 14px; border-radius:12px; font-size:15.5px}
  .acilir-panel{margin:4px 0 6px; padding:4px; box-shadow:none; background:var(--bg)}
  .ust-eylem{display:grid; grid-template-columns:1fr 1fr; gap:10px}
  .ust-eylem a{padding:12px 16px; font-size:15px}
}
@media (max-width:399px){ .menu > summary .menu-yazi{display:none} }
@media (max-width:999px){ .menu:not([open]) .menu-govde{display:none} }

/* Kaydirma kabi KONUMLANIR: icindeki mutlak konumlu ekran okuyucu metinleri
   (.gorsel-gizli, dar ekranda gizlenen thead) konumlanmis ebeveyn bulamayinca
   kabin kirpmasindan kacip SAYFAYI tasiriyordu - olculdu: SM paylasimli-kutu
   390px'te sayfa 881px (izin matrisi). */
.kiyas-kap{position:relative}

/* ===================================================================
   SMARTOPERATOR EKI (2026-10-02) - smart360 tasarim direktifi:
   docs/tasarim-dili.md B.1 site jetonlari + B.2 yazi aileleri.
   Yeni renk ham hex yazilmaz: once asagidaki jetonlara ad verilir.
   =================================================================== */
:root{
  --marka:#8259D2; --marka-koyu:#6C3FA8; --marka-acik:#b45fd0;
  --zemin:#faf7fd; --zemin-2:#f0ecf6; --yuzey:#ffffff;
  --cizgi:#e6dcf0; --cizgi-koyu:#d9c9e8;
  --metin:#2a2135; --olumlu:#0f7a5a; --olumsuz:#c0384a;
  --yazi:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --yazi-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
body{font-family:var(--yazi)}
code,.eyebrow,.chip,.pnum{font-family:var(--yazi-mono)}
/* Urun eki tonu kontrasttan (tasarim-sistemi.md 3b): --marka #f0ecf6 zeminde
   4.19:1, --marka-koyu 6.20:1. */
.b,.urun-eki,.brandname .b,.fname .b,.barname b{color:var(--marka-koyu)}
pre.kod{
  margin:16px 0 0; padding:16px 18px; overflow-x:auto;
  background:var(--zemin-2); border:1px solid var(--cizgi); border-radius:11px;
  font-family:var(--yazi-mono); font-size:13px; line-height:1.6; color:var(--metin);
}
pre.kod code{background:none; padding:0; color:inherit; font-size:inherit}