: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;
}
/* `height:auto` SART. Karelerin hepsinde `width`/`height` oznitelikleri var
   (yerlesim kaymasini onlemek icin). `max-width:100%` genisligi kucultup
   YUKSEKLIGI oznitelikteki degerde birakinca oran bozuluyordu: telefon
   karesi 860x1720 oznitelikleriyle 320px genisliginde ama 1720px
   yuksekliginde ciziliyordu (kullanici bulgusu 2026-09-16 - "zirvalik").
   Boyutu oznitelikten degil, oranindan alsin. */
img{max-width:100%; height:auto}
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 ----------
   KAYNAK: bu dosya SmartMail'in tanitim sitesinden ALINDI (kullanici
   talimati 2026-09-16: "smartmail'in aynisi olacak", "gerekirse stil
   dosyalarini filan oradan al"). Tasarim dili birebir korunuyor; yalnizca
   marka isareti SmartFiles'in kendi logosu.
   ---------- */
.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,.9);
  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ı ---------- */
.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}
/* ALTI KART 3+3 DIZILIR. `auto-fit` 1120px'lik yerlesimde dort sutun
   uretiyor ve alti kart 4+2 olarak kiriliyordu; ikinci satir yarim kalip
   dagilmis gorunuyordu (kullanici bulgusu 2026-09-16). */
@media (min-width:860px){ .trio.alti{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* 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:#c2263a}
.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)}
.turnstile-alani{margin-top:18px; min-height:65px}
.form-dipnot{margin-top:14px}
@media (prefers-reduced-motion:reduce){ .form-gonder .donuyor{animation:none} }

/* ---------- 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}
/* Kullanici karari (2026-09-20): "Secured by Smart360 Security"
   telif hakki yazisinin KARSISINA, sag tarafa gecsin - alt alta degil,
   ayni satirda. Dar ekranda `flex-wrap` ile alt alta duser, `gap` ayrimi
   saglar. */
.footbottom{margin-top:36px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px}
.footbottom > .small{margin:0}
.footnote{font-size:12px; line-height:1.6; color:var(--faint); margin-top:10px}

@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}
}

/* ---------- SmartFiles'a ozel duzeltmeler ----------
   Bu blok SmartMail'den ALINAN stile EK - orada olmayan durumlar. */

/* Kullanici kurali: "Digital Bridge adi gecen HER YER" bag olacak. Ama
   ustbilgideki `by ...` satirinda bag, global `a` kuralindan (renk +
   alt cizgi) etkilenip marka blogunu bozuyordu: ad ile byline yan yana
   diziliyor ve Demo dugmesi ikinci satira dusuyordu - kullanicinin
   SmartMail'de "ust menu cok kotu duruyor" dedigi durumun aynisi.
   Bag KALIYOR (kural korunuyor), yalnizca gorunumu metne esitleniyor. */
.byline a { color: inherit; border-bottom: 0; }
.byline a:hover { color: var(--deep); border-bottom: 0; text-decoration: underline; }
.brandrow .names { white-space: nowrap; }

/* Altbilgide "Sayfalar" IKI SUTUN (kullanici karari: fazladan asagiya
   kaymasin). */
.anchors .ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
.anchors .ikili a { display: block; }

/* ==========================================================================
   HAREKET KATMANI
   Kullanici istegi 2026-09-16: "sitede bol miktarda animasyon istiyorum her
   yerde". Kural: hareket YALNIZCA JS varken baslar (`html.js`) - betik
   yuklenmezse icerik oldugu gibi gorunur, gizli kalmaz. Kapatma anahtari
   `prefers-reduced-motion` ve dosyanin en altinda tek blokta.
   ========================================================================== */

/* Girise hazirlik. Yalnizca `.js` altinda gizleniyor. */
.js [data-anim]{opacity:0; will-change:opacity,transform}
.js [data-anim="yukari"]{transform:translateY(22px)}
.js [data-anim="sol"]{transform:translateX(-26px)}
.js [data-anim="sag"]{transform:translateX(26px)}
/* Dar ekranda yandan kayma, ogenin baslangic konumu kadar (26px) sayfayi yana
   tasiriyordu (390px'te ozellikler.html 392px, animasyon bitene kadar).
   Kenar boslugu olmayan genislikte yan kaymalar asagidan gelir. */
@media (max-width:719px){ .js [data-anim="sol"], .js [data-anim="sag"]{transform:translateY(22px)} }
.js [data-anim="olcek"]{transform:scale(.95)}
.js [data-anim="belir"]{transform:none}
.js [data-anim].gir{
  opacity:1; transform:none;
  transition:opacity .62s cubic-bezier(.2,.7,.25,1), transform .62s cubic-bezier(.2,.7,.25,1);
  transition-delay:var(--g,0ms);
}

/* Bolum basliginin ustundeki cizgi soldan buyuyerek geliyor. */
.sechead{position:relative}
.sechead .eyebrow{position:relative; padding-left:0}
.js [data-anim] .eyebrow::after,
.js .eyebrow[data-cizgi]::after{content:""; display:block; width:0; height:2px;
  background:var(--grad); border-radius:2px; margin-top:8px;
  transition:width .7s cubic-bezier(.2,.7,.25,1) .18s}
.js [data-anim].gir .eyebrow::after,
.js .eyebrow[data-cizgi].gir::after{width:46px}
/* Ortalanmis baslikta cizgi de ortalanir. Aksi halde basligin ustunde,
   solda asili duran kopuk bir tire gibi gorunuyordu. */
.sechead-orta .eyebrow::after{margin-inline:auto}

/* Kartlar: uzerine gelince hafifce kalkiyor, kenari markaya donuyor. */
.problem,.frame,.kutu,.iletisim-kart{
  transition:transform .3s cubic-bezier(.2,.7,.25,1), box-shadow .3s ease, border-color .3s ease}
.problem:hover,.kutu:hover{transform:translateY(-4px); border-color:var(--line);
  box-shadow:0 20px 38px -26px rgba(44,24,74,.32)}
.frame:hover{transform:translateY(-3px); box-shadow:0 1px 2px rgba(42,33,53,.06), 0 28px 50px -26px rgba(44,24,74,.3)}

/* Ikon levhasi ve sira numarasi: kart hover'inda canlaniyor. */
.plate svg,.minibas{transition:transform .35s cubic-bezier(.2,.7,.25,1), background-color .3s ease}
.mini > div:hover .plate svg{transform:scale(1.12) rotate(-4deg)}
.mini > div:hover .minibas{background:var(--tintStrong)}
.mini > div{transition:border-color .3s ease}
.mini > div:hover{border-top-color:var(--brand)}

/* Yetki rozetleri tek tek beliriyor. */
.js .perms li{transition:transform .3s cubic-bezier(.2,.7,.25,1), background-color .25s ease}
.perms li:hover{transform:translateY(-2px); background:var(--tintStrong)}

/* Birincil dugme: gradyan kayiyor, ok ilerliyor. */
.cta a.pri,.demo,.form-gonder{background-size:180% 180%; background-position:0% 50%;
  transition:background-position .5s ease, transform .25s ease, box-shadow .3s ease}
.cta a.pri:hover,.demo:hover,.form-gonder:hover{background-position:100% 50%;
  transform:translateY(-2px); box-shadow:0 16px 30px -16px rgba(130,89,210,.55)}
.cta a.alt{transition:border-color .25s ease, transform .25s ease, background-color .25s ease}
.cta a.alt:hover{transform:translateY(-2px); background:var(--surface2)}
.ok-ileri{display:inline-block; transition:transform .28s cubic-bezier(.2,.7,.25,1)}
a:hover > .ok-ileri{transform:translateX(4px)}


/* Aile kartlari ve altbilgi baglantilari. */
.fam{transition:transform .3s cubic-bezier(.2,.7,.25,1)}
.fam:hover{transform:translateX(4px)}
.fam .mark{transition:transform .35s cubic-bezier(.2,.7,.25,1)}
.fam:hover .mark{transform:rotate(-6deg) scale(1.08)}

/* ==========================================================================
   DUZ (FLAT) BILESENLER
   Golge yok, dolgu yok; is ince cizgi, tinted zemin ve tipografiyle
   yapiliyor.
   ========================================================================== */

/* Sayi seridi: dogrulanmis rakamlar. `.sayi b` sayaci, JS sayarak doldurur. */
.sayilar{margin-top:26px; display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  grid-template-columns:repeat(2,minmax(0,1fr))}
/* auto-fit: serit UC ya da DORT ogeyle de dolu gorunur. Sabit dort sutunda
   uc oge kalinca sagda bos bir hucre ve asili bir cizgi kaliyordu. */
@media (min-width:860px){ .sayilar{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))} }
.sayi{background:var(--surface); padding:22px 20px}
.sayi b{display:block; font-size:clamp(26px,3vw,34px); font-weight:800; line-height:1.05;
  letter-spacing:-0.025em; color:var(--text); font-variant-numeric:tabular-nums}
.sayi span{display:block; margin-top:6px; font-size:13.5px; color:var(--faint)}

/* Once/sonra karsilastirmasi. Sol sutun bugunku sikinti, sag sutun karsiligi. */
.karsi{margin-top:24px; display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.kutu{background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:22px 24px}
.kutu.eski{background:var(--surface2)}
.kutu .lbl{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.kutu.yeni .lbl{color:var(--deep)}
.kutu h3{margin-top:10px}
.kutu p{margin-top:8px; font-size:15px}
.kutu ul{margin:12px 0 0; padding-left:1.1em}
.kutu li{margin:6px 0; font-size:15px}
.kutu.eski li::marker{color:var(--faint)}
.kutu.yeni li::marker{color:var(--brand)}

/* Numarali duz adim listesi (sol kenarda cizgi, numara madalyonda). */
.adimlar{margin:26px 0 0; padding:0; list-style:none; border-left:2px solid var(--line)}
.adimlar li{position:relative; margin:0; padding:0 0 26px 30px}
.adimlar li:last-child{padding-bottom:0}
.adimlar li::before{content:counter(adim,decimal-leading-zero); counter-increment:adim;
  position:absolute; left:-15px; top:0; width:28px; height:28px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); color:var(--deep);
  font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center}
.adimlar{counter-reset:adim}
.adimlar b{display:block; color:var(--text); font-size:16px; line-height:1.35}
.adimlar p{margin-top:6px; font-size:15px}
.js .adimlar li::before{transition:background-color .3s ease, color .3s ease, transform .3s ease}
.adimlar li:hover::before{background:var(--grad-dugme); color:#fff; border-color:transparent; transform:scale(1.08)}

/* Tek cumlelik vurgu seridi. */
.vurgu{margin-top:26px; border-left:3px solid var(--brand); padding:4px 0 4px 18px}
.vurgu p{font-size:17px; line-height:1.5; color:var(--text)}

@media (prefers-reduced-motion:reduce){
  .js [data-anim]{opacity:1 !important; transform:none !important; transition:none !important}
  .serit-ray{animation:none}
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important}
}

/* ---------- baglanti karti ----------
   "Detayli inceleyin" blogu once `.mini` ile yazilmisti - ama `.mini` bir
   KAPSAYICI sinifi (`display:grid`, iki/dort sutun), kart sinifi degil.
   `<a class="mini">` yazilinca kartin KENDISI iki sutunlu izgaraya
   donusuyor, baslik birinci sutunda kirpiliyor ("Yetkil...") ve aciklama
   ikinci sutunda iki kelimede bir sariyordu (kullanici bulgusu
   2026-09-16). Kart artik kendi sinifina sahip. */
.baglanti-kart{display:flex; flex-direction:column; align-items:flex-start;
  border:0; border-top:1px solid var(--line); padding-top:22px;
  color:inherit; text-decoration:none;
  transition:border-color .3s ease, transform .3s cubic-bezier(.2,.7,.25,1)}
.baglanti-kart:hover{border-top-color:var(--brand); transform:translateY(-3px); color:inherit}
.baglanti-kart .minibas{align-self:flex-start}
.baglanti-kart h3{margin-top:16px}
.baglanti-kart p{margin-top:8px; font-size:15px; flex:1 1 auto; color:var(--dim)}
.baglanti-kart .go{margin-top:14px; font-size:14px; font-weight:700; color:var(--deep)}
.baglanti-kart:hover .go{text-decoration:underline}

/* ==========================================================================
   SMART360 SECURITY - PAYLASILAN ROZET + PERDE + IMZA (urun sahibi karari,
   2026-09-20): "Tum turnstile sayfalarda Smart360 Security sistemi
   kullanilacak", "kartin hemen altina Secured by Smart360 Security yaz...
   bunun butun sitelerin footerinda olmasini istiyorum", ayrica sitede bir
   OZELLIK olarak ayni animasyonla tanitilacak. apps/smart360/tenant-panel/
   src/Smart360Security.tsx + services/api/views/partials/s360-imza.ejs'in
   bu statik siteye (duz HTML/CSS/JS, kutuphanesiz) uyarlanmis hali. Kendi
   tema tokenlerimiz (--brand/--grad/--surface/--line/--dim/--faint)
   smart360'inkilerle zaten AYNI ADLARLA tanimli (docs/api.md "Gorsel tema
   smart360 ile BIREBIR"), yeniden adlandirma gerekmedi.

   TEK ROZET, UC BOYUT - smart360'in ACIKCA istedigi sey: "ikinci bir
   animasyon tanimi yazmayin, ileride biri degisip digeri eski kalir".
   `.s360-rozet` `--s360-rozet` degiskeniyle olceklenir (varsayilan 64px);
   `.s360-halka`/`.s360-halka-gec`/`.s360-daire`/`.s360-tik` YUZDE bazli
   konumlanir, yani ayni tanim perdede (64px), footer imzasinda (20px, asagi
   bakin) ve tanitim bolumunde (64px) DEGISMEDEN calisir.

   ANIMASYON smartmail.com.tr'nin CANLI stil.css'inden BIREBIR alindi
   (kullanici karari 2026-09-20: "animasyon smartmail.com.tr'de oldugu
   gibi olsun") - ilk yazdigimiz surum (donen + yayilan IKI FARKLI halka
   animasyonu, cizilip geri silinen tik) GORSEL OLARAK FARKLIYDI. Dogru
   olan: IKI halka da AYNI `s360Halka` animasyonunu kullanir, yalnizca
   `-gec` olan `animation-delay:1.3s` ile 2.6s'lik dongunun YARISI kadar
   geriden baslar (radar-ping ikiz efekti); tik ise cizilip SILINMEZ,
   `opacity` ile 6%-38% arasi belirip 64%-92% arasi SOLAR. Tek fark:
   smartmail path uzunluguna gore elle ayarlanmis `stroke-dasharray:26`
   kullaniyor (pathlength YOK) - biz `pathlength="1"` (HTML'de kucuk harf)
   ile NORMALLESTIRIYORUZ, yuzde degerleri AYNI kalsin diye dashoffset
   degerleri de 26 yerine 1 - GORSEL SONUC AYNI, ama farkli boyuttaki
   (perde/tanitim buyuk, imza kucuk) SVG path'leri arasinda elle sayi
   ayarlama riski yok (smart360'a da bildirildi). */
@keyframes s360Halka{0%{transform:scale(.72); opacity:.5} 100%{transform:scale(1.55); opacity:0}}
@keyframes s360Tik{0%,6%{stroke-dashoffset:1; 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);
  margin:0 auto 18px; flex:none; 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:1; 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}
}

/* ---------- perde (tam ekran, dogrulama sirasinda) ---------- */
.s360-perde{position:fixed; inset:0; z-index:70; display:flex; align-items:center;
  justify-content:center; padding:24px;
  background:rgba(27,20,38,.8);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease}
.s360-perde.gorunur{opacity:1; visibility:visible; pointer-events:auto}
.s360-kart{width:100%; max-width:360px; background:var(--surface);
  border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow);
  padding:36px 28px 30px; text-align:center}
.s360-baslik{margin-top:2px; font-size:17px; font-weight:800; letter-spacing:-0.01em; color:var(--text)}
.s360-baslik b{color:var(--brand); font-weight:800}
.s360-metin{margin-top:8px; font-size:14.5px; color:var(--dim); line-height:1.5}
.s360-kart .turnstile-alani{margin:18px auto 0; min-height:65px; display:flex; justify-content:center}
.s360-dipnot{margin-top:14px; font-size:12.5px; color:var(--faint); line-height:1.5}

/* ---------- imza (HER sayfanin footer'i, Turnstile'dan BAGIMSIZ -
   sistemin genel imzasi, urun sahibi karari) ---------- */
.s360-imza{display:flex; align-items:center; gap:9px}
.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(--dim); font-weight:700}
.s360-imza-metin b i{color:var(--brand); font-style:normal}

/* ---------- tanitim bolumu (anasayfa, "ozellik" olarak - urun sahibi
   karari: "cok onemli bicimde vurgulanacak", dipnot degil kendi bolumu) */
.s360-tanitim{background:var(--brandBand); border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.s360-tanitim .wrap{padding:64px 0; display:grid; grid-template-columns:auto 1fr;
  gap:32px; align-items:center}
.s360-tanitim .s360-rozet{margin:0}
.s360-tanitim h2{font-size:26px}
.s360-tanitim h2 b{color:var(--brand); font-weight:800}
.s360-tanitim p{margin-top:10px; font-size:15.5px; color:var(--dim); max-width:640px}
@media (max-width:719px){
  .s360-tanitim .wrap{grid-template-columns:1fr; text-align:center; justify-items:center; padding:44px 0}
  .s360-tanitim .s360-rozet{margin:0 auto}
}
.baglanti-kart:hover .minibas{background:var(--tintStrong)}

/* ===========================================================================
   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 (paketler.html) - kartlar smart360 paket ucundan (web/paketler.js) ---- */
.donem-sec{display:inline-flex; gap:4px; padding:4px; border:1px solid var(--line); border-radius:999px; background:var(--surface); margin-bottom:24px}
.donem-sec button{border:0; background:none; padding:8px 18px; border-radius:999px; font:inherit; font-weight:700; color:var(--text); opacity:1; cursor:pointer}
.donem-sec button[aria-pressed="true"]{background:var(--grad-dugme); color:#fff; -webkit-text-fill-color:#fff}
.paketler{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch}
.paket{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px 24px; display:flex; flex-direction:column; box-shadow:var(--shadow)}
.paket h3{margin:0 0 12px; font-size:20px; color:var(--deep)}
.paket-fiyat b{font-size:34px; line-height:1.1; color:var(--text)}
.paket-fiyat span{margin-left:6px; color:var(--dim); font-size:14px}
.paket-kisi{margin:6px 0 16px; color:var(--dim); font-size:14px}
.paket-ozellik{list-style:none; padding:0; margin:0 0 20px; display:grid; gap:9px; align-content:start; flex:1}
.paket-ozellik li{padding-left:24px; position:relative}
.paket-ozellik li::before{content:""; position:absolute; left:2px; top:.45em; width:12px; height:7px; border-left:2px solid var(--brand); border-bottom:2px solid var(--brand); transform:rotate(-45deg)}
.paket-cta{display:flex; flex-direction:column; gap:10px}
.paket-cta a{border-bottom:0; border-radius:999px; padding:11px 18px; font-weight:700; text-align:center}
.paket-cta a.pri,.aile-kutu a.pri{background:var(--grad-dugme); color:#fff}
.paket-cta a.alt{border:1px solid var(--line); color:var(--deep); background:var(--surface)}
[data-donem="aylik"] .p-yillik,[data-donem="yillik"] .p-aylik{display:none}
.paket-not{margin-top:18px; color:var(--dim); font-size:14px}
.aile-kutu{margin-top:28px; display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; background:var(--tint); border:1px solid var(--line); border-radius:16px; padding:22px 24px}
.aile-kutu h3{margin:0 0 6px}
.aile-kutu p{margin:0; max-width:640px}
.aile-kutu a.pri{border-bottom:0; border-radius:999px; padding:11px 20px; font-weight:700; white-space:nowrap}
@media (max-width:899px){ .paketler{grid-template-columns:minmax(0,1fr)} }

/* 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}