/* ==========================================================================
   360 MEDYA — assets/css/anasayfa.css
   Tek sayfalık satış ana sayfasının görünümü. style.css'in üstüne yüklenir;
   bütün kurallar body.satis altında olduğu için diğer sayfalara dokunmaz.

   Kurgu: koyu, derin zemin üstünde ince bir ızgara ve iki geniş ışık lekesi;
   geniş Unbounded başlıklar, DM Sans gövde; cam yüzeyli kartlar, gradyan
   çizgiler. Her bölümde bir başlık, bir cümle, bir görsel.
   ========================================================================== */
body.satis{
  --bg:#06080F; --bg2:#0A0F1D;
  --yuzey:rgba(255,255,255,.035); --yuzey2:rgba(255,255,255,.06);
  --cizgi:rgba(255,255,255,.08); --cizgi2:rgba(255,255,255,.16);
  --yazi:#EEF2FA; --yazi2:#A9B2C5; --yazi3:#6E7A94;
  --m1:#0048B4; --m2:#0ABAB5; --m3:#02E7FD;
  --m-grad:linear-gradient(100deg,#0048B4 0%,#0ABAB5 58%,#02E7FD 100%);
  --fd:'Unbounded', 'Outfit', sans-serif;
  --fb:'DM Sans', 'Inter', system-ui, sans-serif;
  --r:18px;
  background:var(--bg); color:var(--yazi); font-family:var(--fb);
}
html[data-tema="acik"] body.satis{
  --bg:#F2F4F8; --bg2:#FFFFFF;
  --yuzey:rgba(8,18,40,.04); --yuzey2:rgba(8,18,40,.07);
  --cizgi:rgba(8,18,40,.10); --cizgi2:rgba(8,18,40,.18);
  --yazi:#0B1326; --yazi2:#4B5569; --yazi3:#7A8398;
}
/* Zemin: ince ızgara ve iki ışık lekesi; tek sabit katman, animasyon yok */
body.satis::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(55% 40% at 12% 8%, rgba(0,72,180,.28), transparent 70%),
    radial-gradient(45% 38% at 88% 92%, rgba(10,186,181,.20), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 63px, var(--cizgi) 63px 64px),
    repeating-linear-gradient(90deg, transparent 0 63px, var(--cizgi) 63px 64px),
    var(--bg);
  -webkit-mask-image:radial-gradient(90% 90% at 50% 40%, #000 40%, rgba(0,0,0,.55));
  mask-image:radial-gradient(90% 90% at 50% 40%, #000 40%, rgba(0,0,0,.55));
}
html[data-tema="acik"] body.satis::before{
  background:
    radial-gradient(55% 40% at 12% 8%, rgba(0,72,180,.12), transparent 70%),
    radial-gradient(45% 38% at 88% 92%, rgba(10,186,181,.14), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 63px, var(--cizgi) 63px 64px),
    repeating-linear-gradient(90deg, transparent 0 63px, var(--cizgi) 63px 64px),
    var(--bg);
}
body.satis .grain{ display:none }
/* Ekran okuyucuya var, gözle yok */
body.satis .gorunmez{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* ---------- Ortak tipografi ---------- */
body.satis h1, body.satis h2, body.satis h3{ font-family:var(--fd); letter-spacing:-.01em; text-wrap:balance }
body.satis h2{ font-size:clamp(1.5rem,3.2vw,2.5rem); font-weight:600; line-height:1.12 }
body.satis h3{ font-size:clamp(1rem,1.3vw,1.15rem); font-weight:600; line-height:1.25 }
body.satis .it, body.satis h2 em{
  font-style:normal; font-weight:700;
  background:var(--m-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
body.satis .eyebrow{ font-family:var(--fb); font-size:.68rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--yazi3) }
body.satis .eyebrow::before{ background:var(--m-grad); width:22px }
body.satis .muted, body.satis .lead{ color:var(--yazi2); font-family:var(--fb) }
body.satis .lead{ font-size:clamp(1rem,1.25vw,1.15rem); font-weight:400; line-height:1.6 }

/* Bölüm başlığı: ortalı, bir başlık ve bir cümle */
body.satis .section{ padding-block:clamp(4rem,9vw,7.5rem); border:0 }
body.satis .gd--hero + .section{ padding-top:clamp(2.5rem,6vw,5rem) }
body.satis .section--alt{ background:transparent }
body.satis .bas{ display:grid; justify-items:center; text-align:center; gap:.8rem; max-width:62ch; margin:0 auto clamp(2rem,4.5vw,3.4rem) }
body.satis .bas p{ color:var(--yazi2); font-size:clamp(.98rem,1.2vw,1.1rem); line-height:1.6 }
body.satis .glow{ display:none }
/* Üreticiden gelen bölüm başlıkları da ortalı */
body.satis .hzt__bas{ display:grid; grid-template-columns:1fr; justify-items:center; text-align:center; gap:.8rem; max-width:62ch; margin:0 auto clamp(2rem,4.5vw,3.4rem) }
body.satis .hzt__ozet{ max-width:none; color:var(--yazi2) }

/* Düğmeler */
body.satis .btn{
  font-family:var(--fb); font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:none;
  padding:.95rem 1.6rem; border-radius:999px; border:1px solid transparent;
  background:var(--m-grad); color:#fff; box-shadow:0 10px 30px -14px rgba(2,231,253,.6);
}
body.satis .btn--ghost{ background:var(--yuzey2); color:var(--yazi); border-color:var(--cizgi2); box-shadow:none }
body.satis .btn--ghost:hover{ border-color:var(--m2); color:var(--yazi) }
body.satis .btn::before, body.satis .btn::after{ display:none }

/* ---------- Header: logo, Behance, İletişim ---------- */
body.satis .header{ padding-block:1rem; border-bottom:0 }
body.satis .header::before{ background:rgba(6,8,15,.72) }
html[data-tema="acik"] body.satis .header::before{ background:rgba(242,244,248,.8) }
body.satis .nav{ gap:0 }
body.satis .nav__link{ font-family:var(--fb); letter-spacing:0; text-transform:none; padding:.55rem .9rem; border-radius:999px; border:1px solid var(--cizgi); background:var(--yuzey); color:var(--yazi2); display:inline-flex; align-items:center }
body.satis .nav__link:hover{ color:var(--yazi); border-color:var(--cizgi2) }
body.satis .nav__link::after{ display:none }
body.satis .nav__link .be-yazi{ height:.85rem }
body.satis .header .btn{ padding:.7rem 1.25rem; font-size:.74rem }
body.satis .menu{ background:var(--bg) }
body.satis .menu__link{ font-family:var(--fd); font-weight:600 }

/* ---------- Manşet: ortalı kolaj ---------- */
body.satis .gd--hero{
  min-height:100svh; align-items:center; justify-content:center;
  padding-top:clamp(7rem,15vh,9.5rem); padding-bottom:clamp(2rem,6vh,4rem);
  background:transparent;
}
body.satis .gd__sahne{ perspective:1500px; perspective-origin:50% 35% }
body.satis .gd__duvar{
  left:50%; right:auto; top:-18%; width:min(118vw,1760px); height:150%;
  grid-template-columns:repeat(5,minmax(0,1fr));
  transform:translate3d(calc(-50% + var(--px) * -14px), calc(var(--py) * -10px), 0) rotateX(18deg) rotateZ(-5deg);
}
body.satis .gd__sutun:nth-child(2n){ margin-top:-14% }
body.satis .gd__sahne::after{
  background:
    radial-gradient(52% 50% at 50% 52%, rgba(6,8,15,.90) 0%, rgba(6,8,15,.72) 45%, rgba(6,8,15,.30) 100%),
    linear-gradient(180deg, rgba(6,8,15,.92) 0%, rgba(6,8,15,.35) 26%, rgba(6,8,15,.35) 74%, var(--bg) 100%);
}
html[data-tema="acik"] body.satis .gd__sahne::after{
  background:
    radial-gradient(52% 50% at 50% 52%, rgba(242,244,248,.88) 0%, rgba(242,244,248,.6) 45%, rgba(242,244,248,.12) 100%),
    linear-gradient(180deg, rgba(242,244,248,.85) 0%, rgba(242,244,248,.15) 26%, rgba(242,244,248,.15) 74%, var(--bg) 100%);
}
body.satis .gd__kare{ border-radius:10px; outline-color:var(--cizgi); box-shadow:0 30px 60px -30px rgba(0,0,0,.8) }
body.satis .gd__kare img{ filter:saturate(.95) brightness(.9) }
body.satis .gd__ic{ display:grid; justify-items:center; text-align:center; max-width:60rem; margin-inline:auto; gap:0 }
body.satis .gd__ustmenu{ display:flex; gap:.5rem; margin-bottom:clamp(1.6rem,3vw,2.4rem) }
body.satis .gd__sekme{
  display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.25rem; border-radius:999px;
  border:1px solid var(--cizgi2); background:rgba(6,8,15,.55); color:var(--yazi);
  font-size:.8rem; font-weight:700; letter-spacing:.04em; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:border-color .3s, transform .3s;
}
html[data-tema="acik"] body.satis .gd__sekme{ background:rgba(255,255,255,.65) }
body.satis .gd__sekme::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--m-grad) }
body.satis .gd__sekme:hover{ border-color:var(--m2); transform:translateY(-2px) }
body.satis .gd__baslik{
  font-family:var(--fd); font-size:clamp(2rem,5.4vw,4.4rem); font-weight:700; line-height:1.06; letter-spacing:-.02em;
  margin-top:1.1rem; max-width:16ch;
}
body.satis .gd__baslik .it{ font-weight:700 }
body.satis .gd__metin{ max-width:48ch; margin-top:clamp(1rem,2vw,1.4rem); font-size:clamp(1.02rem,1.3vw,1.2rem) }
@media (max-width:760px){
  body.satis .gd--hero{ min-height:auto; padding-top:6.5rem; padding-bottom:3rem }
  body.satis .gd__sahne{ opacity:.6 }
  body.satis .gd__duvar{ width:200vw; top:-10%; transform:translate3d(-50%,0,0) rotateX(14deg) rotateZ(-4deg) }
  body.satis .gd__ustmenu{ width:100%; display:grid; grid-template-columns:1fr 1fr }
  body.satis .gd__sekme{ justify-content:center }
}

/* ---------- Hizmetler: görselli dört kart ---------- */
body.satis .hk-izgara{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(.9rem,1.6vw,1.4rem) }
body.satis .hk{
  position:relative; display:grid; grid-template-rows:auto 1fr; overflow:hidden; min-width:0;
  border-radius:var(--r); border:1px solid var(--cizgi); background:linear-gradient(180deg,var(--yuzey2),var(--yuzey));
  transition:transform .5s var(--ease-out), border-color .4s, box-shadow .5s;
}
body.satis .hk:hover{ transform:translateY(-4px); border-color:var(--cizgi2); box-shadow:0 40px 80px -50px rgba(2,231,253,.45) }
body.satis .hk__gorsel{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--bg2); border-bottom:1px solid var(--cizgi) }
body.satis .hk__govde{ display:grid; gap:.6rem; align-content:start; padding:clamp(1.1rem,1.8vw,1.5rem) }
body.satis .hk__govde p{ color:var(--yazi2); font-size:.95rem; line-height:1.55 }
body.satis .hk__etiket{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.25rem }
body.satis .hk__etiket span{ font-size:.72rem; font-weight:600; padding:.3rem .65rem; border-radius:999px; border:1px solid var(--cizgi); color:var(--yazi2) }
/* Sosyal medya: yelpaze açılmış gönderiler */
body.satis .hk__sosyal{ position:absolute; inset:0 }
body.satis .hk__sosyal img{ position:absolute; width:46%; border-radius:10px; box-shadow:0 20px 40px -20px rgba(0,0,0,.8); outline:1px solid var(--cizgi2); transition:transform .6s var(--ease-out) }
body.satis .hk__sosyal img:nth-child(1){ left:14%; top:14%; transform:rotate(-7deg) }
body.satis .hk__sosyal img:nth-child(2){ right:14%; top:8%; transform:rotate(6deg) }
body.satis .hk:hover .hk__sosyal img:nth-child(1){ transform:rotate(-9deg) translateY(-4px) }
body.satis .hk:hover .hk__sosyal img:nth-child(2){ transform:rotate(8deg) translateY(-6px) }
/* Görsel tasarım: üst üste banner'lar */
body.satis .hk__banner{ position:absolute; inset:0 }
body.satis .hk__banner img{ position:absolute; left:50%; width:74%; border-radius:8px; outline:1px solid var(--cizgi2); box-shadow:0 24px 40px -22px rgba(0,0,0,.85); transition:transform .6s var(--ease-out) }
body.satis .hk__banner img:nth-child(1){ top:8%; transform:translateX(-50%) scale(.9); opacity:.75 }
body.satis .hk__banner img:nth-child(2){ top:26%; transform:translateX(-50%) scale(.96); opacity:.9 }
body.satis .hk__banner img:nth-child(3){ top:46%; transform:translateX(-50%) }
body.satis .hk:hover .hk__banner img:nth-child(1){ transform:translateX(-50%) scale(.92) translateY(-6px) }
body.satis .hk:hover .hk__banner img:nth-child(2){ transform:translateX(-50%) scale(.98) translateY(-4px) }
/* Web giydirme: tarayıcı çerçevesi */
body.satis .hk__ekran{ position:absolute; left:8%; right:8%; top:12%; bottom:-4%; border-radius:12px 12px 0 0; overflow:hidden; border:1px solid var(--cizgi2); background:#0B1020; box-shadow:0 30px 60px -30px rgba(0,0,0,.9) }
body.satis .hk__ekran::before{ content:""; display:block; height:22px; border-bottom:1px solid var(--cizgi); background:radial-gradient(circle at 12px 11px,#FF5F57 4px,transparent 5px),radial-gradient(circle at 28px 11px,#8A93A6 4px,transparent 5px),radial-gradient(circle at 44px 11px,#28C840 4px,transparent 5px),rgba(255,255,255,.04) }
body.satis .hk__ekran img{ display:block; width:100%; height:calc(100% - 22px); object-fit:cover; object-position:top }
/* Bot: Telegram sohbeti */
body.satis .hk__sohbet{ position:absolute; inset:0; display:grid; align-content:center; gap:.5rem; padding:0 12% }
body.satis .hk__balon{
  justify-self:start; max-width:84%; padding:.6rem .85rem; border-radius:14px 14px 14px 4px;
  background:var(--yuzey2); border:1px solid var(--cizgi2); font-size:.8rem; line-height:1.4; color:var(--yazi);
  display:flex; align-items:center; gap:.55rem;
}
body.satis .hk__balon--sag{ justify-self:end; border-radius:14px 14px 4px 14px; background:linear-gradient(100deg,rgba(0,72,180,.55),rgba(10,186,181,.45)) }
body.satis .hk__balon i{ flex:none; width:8px; height:8px; border-radius:50%; background:#33D17A; box-shadow:0 0 8px #33D17A }
body.satis .hk__balon i.uyari{ background:#8A93A6; box-shadow:0 0 8px #8A93A6 }
body.satis .hk__balon small{ margin-left:auto; font-size:.66rem; color:var(--yazi3) }
@media (max-width:760px){ body.satis .hk-izgara{ grid-template-columns:1fr } }

/* ---------- Referanslar: logo duvarı ---------- */
body.satis .lw__kart{ border-radius:14px; border-color:var(--cizgi); background:var(--yuzey) }
body.satis .lw__kart:hover{ border-color:var(--cizgi2); box-shadow:0 30px 60px -40px rgba(2,231,253,.5) }
body.satis .lw__alt{ padding:.7rem .9rem; border-top:1px solid var(--cizgi) }
body.satis .lw__alt b{ font-family:var(--fb); font-size:.86rem }
body.satis .lw__alt small{ display:none }
body.satis .lw{ --k:var(--rk,4) }
@media (max-width:1000px){ body.satis .lw{ --k:min(var(--rk,4),3) } }
@media (max-width:640px){ body.satis .lw{ --k:2 } body.satis .lw__be{ display:none } body.satis .lw__alt b{ white-space:normal } }
body.satis .lw__not .link{ font-family:var(--fb); letter-spacing:.04em; text-transform:none; font-size:.9rem }

/* ---------- Kullanıma hazır tema ---------- */
body.satis .tema{ border-radius:var(--r); background:linear-gradient(var(--bg2),var(--bg2)) padding-box, linear-gradient(120deg,var(--t1),var(--t3)) border-box; border:1px solid transparent; box-shadow:0 50px 100px -60px var(--t1) }
body.satis .tema__govde{ padding:clamp(1.3rem,2.4vw,2rem) }
body.satis .tema__ad{ font-family:var(--fd); font-size:clamp(1.3rem,2vw,1.8rem) }
body.satis .tema__not{ font-size:.95rem }
body.satis .tema__sayilar{ margin-top:.2rem }

/* ---------- Yazılım ---------- */
body.satis .yaz-izgara{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,5vw,4.5rem); align-items:center }
body.satis .yaz-izgara .lead{ margin-top:1rem; max-width:40ch }
body.satis .yaz-izgara .btn{ margin-top:1.6rem }
body.satis .sis{ border-color:var(--cizgi2); background:linear-gradient(180deg,var(--bg2),var(--bg)); box-shadow:0 50px 100px -60px rgba(2,231,253,.45) }
body.satis .sis__bas{ font-family:var(--fb); color:var(--yazi3) }
body.satis .sis__modul{ border-color:var(--cizgi); background:var(--yuzey) }
body.satis .sis__modul b{ font-size:.86rem }
body.satis .sis__modul span{ font-size:.72rem }
@media (max-width:900px){ body.satis .yaz-izgara{ grid-template-columns:1fr } }

/* Platform logoları */
body.satis .plogos{ padding-block:2.2rem; border-block:1px solid var(--cizgi); background:transparent }
body.satis .plogos__label{ font-family:var(--fb); color:var(--yazi3) }

/* ---------- Süreç: üç adım tek çizgide ---------- */
body.satis .adim-izgara{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.9rem,1.6vw,1.4rem) }
body.satis .adim2{ position:relative; display:grid; gap:.7rem; padding:clamp(1.2rem,2vw,1.7rem); border-radius:var(--r); border:1px solid var(--cizgi); background:var(--yuzey) }
body.satis .adim2__no{ width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:var(--m-grad); color:#fff; font-family:var(--fd); font-size:.8rem; font-weight:700 }
body.satis .adim2 p{ color:var(--yazi2); font-size:.95rem; line-height:1.55 }
@media (max-width:760px){ body.satis .adim-izgara{ grid-template-columns:1fr } }

/* ---------- İletişim ---------- */
body.satis .ilet-izgara{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2rem,5vw,4.5rem); align-items:start }
body.satis .ilet-yol{ display:grid; gap:1.1rem; margin-top:1.4rem }
body.satis .ilet-yol > a, body.satis .ilet-yol > span{ display:grid; gap:.2rem; padding:1rem 1.2rem; border-radius:14px; border:1px solid var(--cizgi); background:var(--yuzey); color:var(--yazi); transition:border-color .3s }
body.satis .ilet-yol > a:hover{ border-color:var(--m2) }
body.satis .ilet-yol small{ font-size:.66rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--yazi3) }
body.satis .ilet-yol b{ font-family:var(--fd); font-size:clamp(.95rem,1.3vw,1.15rem); font-weight:600 }
body.satis #iletisim .form{ padding:clamp(1.3rem,2.4vw,2rem); border-radius:var(--r); border:1px solid var(--cizgi2); background:linear-gradient(180deg,var(--yuzey2),var(--yuzey)) }
body.satis .field__label{ font-family:var(--fb); color:var(--yazi3) }
body.satis .field__input{ font-family:var(--fb); color:var(--yazi); border-color:var(--cizgi2) }
body.satis .field__input::placeholder{ color:var(--yazi3) }
body.satis .consent__row{ color:var(--yazi2); font-size:.86rem }
@media (max-width:900px){ body.satis .ilet-izgara{ grid-template-columns:1fr } }

/* ---------- Alt bilgi ---------- */
body.satis .footer{ background:transparent; border-top:1px solid var(--cizgi) }
body.satis .footer__ttl{ font-family:var(--fb); color:var(--yazi3) }
body.satis .footer__list a, body.satis .footer__legal a, body.satis .footer__bottom{ color:var(--yazi2) }
body.satis .footer__wordmark{ display:none }

/* Dokunmatik ve hareket */
@media (hover:none){
  body.satis .hk:hover, body.satis .lw__kart:hover, body.satis .gd__sekme:hover{ transform:none }
}
@media (prefers-reduced-motion:reduce){
  body.satis .hk, body.satis .hk__sosyal img, body.satis .hk__banner img, body.satis .gd__sekme{ transition:none }
}

/* Son düzeltmeler */
body.satis .tema__durum{ white-space:nowrap }
body.satis .tema__ust{ flex-wrap:wrap; gap:.6rem }
body.satis .lw__alt b{ white-space:normal; line-height:1.25 }

/* ==========================================================================
   Tek ekran ana sayfa, iç sayfalar, görselli hizmet kartları, Telegram
   sohbeti ve ürün kartı
   ========================================================================== */
/* Ana sayfa: yalnızca manşet; alt çizgide yasal bağlantılar */
body.satis.tek-ekran .gd--hero{ min-height:100svh; padding-bottom:4.5rem }
body.satis .gd__alt{ position:absolute; left:0; right:0; bottom:1.1rem; z-index:2; display:flex; justify-content:center; flex-wrap:wrap; gap:.4rem 1.4rem; font-size:.7rem; color:var(--yazi3) }
body.satis .gd__alt a{ color:var(--yazi3) } body.satis .gd__alt a:hover{ color:var(--yazi) }
/* Kolaj kareleri tek boyut, tam dolu */
body.satis .gd__kare{ aspect-ratio:3/2 }
body.satis .gd__kare img{ width:100%; height:100%; object-fit:cover; object-position:center }
/* Portal düğmeler */
body.satis .gd__ustmenu{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; width:min(100%,660px); margin-bottom:clamp(1.8rem,3.4vw,2.6rem) }
body.satis .portal{
  position:relative; overflow:hidden; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.9rem; text-align:left;
  padding:.85rem 1.05rem; border-radius:16px; border:1px solid var(--cizgi2); background:rgba(6,8,15,.6); color:var(--yazi);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  transition:transform .4s var(--ease-out), border-color .3s, box-shadow .4s;
}
html[data-tema="acik"] body.satis .portal{ background:rgba(255,255,255,.72) }
body.satis .portal::before{ content:""; position:absolute; inset:0; background:var(--m-grad); opacity:0; transition:opacity .4s }
body.satis .portal:hover{ border-color:var(--m2); transform:translateY(-3px); box-shadow:0 24px 50px -24px rgba(2,231,253,.6) }
body.satis .portal:hover::before{ opacity:.12 }
body.satis .portal__ikon{ position:relative; width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:var(--m-grad); color:#fff; box-shadow:0 10px 20px -10px rgba(2,231,253,.8) }
body.satis .portal__ikon svg{ width:20px; height:20px }
body.satis .portal__yazi{ position:relative; min-width:0 }
body.satis .portal__yazi b{ display:block; font-family:var(--fd); font-size:.95rem; font-weight:600; line-height:1.2 }
body.satis .portal__yazi small{ display:block; margin-top:.15rem; font-size:.74rem; color:var(--yazi2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
body.satis .portal__ok{ position:relative; font-size:1.1rem; color:var(--yazi3); transition:transform .3s, color .3s }
body.satis .portal:hover .portal__ok{ transform:translateX(4px); color:var(--m3) }
@media (max-width:560px){ body.satis .gd__ustmenu{ grid-template-columns:1fr } body.satis .portal__yazi small{ white-space:normal } }

/* İç sayfa başlığı */
body.satis .sayfa-bas{ padding-top:clamp(7rem,14vh,9rem); display:grid; justify-items:center; text-align:center; gap:.7rem }
body.satis .sayfa-bas h1{ font-size:clamp(1.9rem,4.2vw,3.2rem); font-weight:700; line-height:1.08 }
body.satis .sayfa-bas p{ color:var(--yazi2); font-size:clamp(1rem,1.25vw,1.15rem); max-width:52ch }
body.satis .sayfa-bas + .section{ padding-top:clamp(2.2rem,4.5vw,3.6rem) }
body.satis .section--ara{ padding-top:0 }

/* Hizmet kartı görseli: bulanık arka plan, görselin tamamı görünür */
body.satis .hk__gorsel{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--bg2); border-bottom:1px solid var(--cizgi) }
body.satis .hk__arka{ position:absolute; inset:-12%; width:124%; height:124%; object-fit:cover; filter:blur(24px) saturate(1.25) brightness(.5) }
html[data-tema="acik"] body.satis .hk__arka{ filter:blur(24px) saturate(1.1) brightness(.85) }
body.satis .hk__ic{ position:absolute; inset:8%; display:flex; align-items:center; justify-content:center; gap:4% }
body.satis .hk__ic img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:8px; box-shadow:0 24px 44px -22px rgba(0,0,0,.9); outline:1px solid rgba(255,255,255,.14); transition:transform .6s var(--ease-out) }
body.satis .hk__ic--iki img{ height:100%; width:auto; max-width:48% }
body.satis .hk:hover .hk__ic img{ transform:translateY(-4px) }
body.satis .hk__cerceve{ position:absolute; left:9%; right:9%; top:9%; bottom:0; display:flex; flex-direction:column; border-radius:10px 10px 0 0; overflow:hidden; border:1px solid rgba(255,255,255,.16); background:#0B1020; box-shadow:0 30px 60px -30px rgba(0,0,0,.9) }
body.satis .hk__cerceve::before{ content:""; flex:none; height:20px; border-bottom:1px solid rgba(255,255,255,.08); background:radial-gradient(circle at 12px 10px,#FF5F57 3.5px,transparent 4.5px),radial-gradient(circle at 26px 10px,#8A93A6 3.5px,transparent 4.5px),radial-gradient(circle at 40px 10px,#28C840 3.5px,transparent 4.5px),#141B2B }
body.satis .hk__cerceve img{ flex:1; min-height:0; width:100%; object-fit:cover; object-position:top; display:block }

/* Telegram sohbeti */
body.satis .tg{ position:absolute; inset:7% 9%; display:flex; flex-direction:column; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.14); background:#0E1621; box-shadow:0 30px 60px -30px rgba(0,0,0,.9); font-family:var(--fb) }
body.satis .tg__bas{ display:flex; align-items:center; gap:.6rem; padding:.5rem .75rem; background:#17212B; border-bottom:1px solid rgba(255,255,255,.06) }
body.satis .tg__avatar{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--m-grad); color:#fff; font-size:.62rem; font-weight:800; letter-spacing:.02em }
body.satis .tg__ad{ display:grid; line-height:1.2 }
body.satis .tg__ad b{ font-size:.78rem; color:#fff }
body.satis .tg__ad small{ font-size:.62rem; color:#5EB5F7 }
body.satis .tg__durum{ margin-left:auto; display:flex; align-items:center; gap:.35rem; font-size:.62rem; color:#8BA2B8 }
body.satis .tg__durum i{ width:7px; height:7px; border-radius:50%; background:#4DCB70; animation:tgNabiz 2s ease-out infinite }
body.satis .tg__govde{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:.35rem; padding:.7rem .75rem; background:radial-gradient(120% 80% at 50% 100%, rgba(42,171,238,.10), transparent 60%), #0E1621 }
body.satis .tg__balon{ max-width:84%; padding:.42rem .62rem .46rem; border-radius:12px 12px 12px 3px; background:#182533; color:#E7EEF5; font-size:.73rem; line-height:1.35; opacity:0; transform:translateY(8px) }
body.satis .tg__balon--ben{ align-self:flex-end; border-radius:12px 12px 3px 12px; background:#2B5278 }
body.satis .tg__balon time{ float:right; margin:.5rem 0 0 .6rem; font-size:.56rem; color:#8BA2B8 }
body.satis .tg__balon--ben time{ color:#A9CBEA }
body.satis .tg__balon--ben time::after{ content:" ✓✓"; color:#5EB5F7 }
body.satis .tg__yaziyor{ align-self:flex-start; display:inline-flex; gap:4px; padding:.55rem .7rem; border-radius:12px 12px 12px 3px; background:#182533; opacity:0 }
body.satis .tg__yaziyor i{ width:5px; height:5px; border-radius:50%; background:#8BA2B8; animation:tgNokta 1.2s ease-in-out infinite }
body.satis .tg__yaziyor i:nth-child(2){ animation-delay:.2s } body.satis .tg__yaziyor i:nth-child(3){ animation-delay:.4s }
body.satis .is-in .tg__balon{ animation:tgGel .5s var(--ease-out) forwards }
body.satis .is-in .tg__balon:nth-child(1){ animation-delay:.2s } body.satis .is-in .tg__balon:nth-child(2){ animation-delay:.9s }
body.satis .is-in .tg__balon:nth-child(3){ animation-delay:1.6s } body.satis .is-in .tg__balon:nth-child(4){ animation-delay:2.3s }
body.satis .is-in .tg__yaziyor{ animation:tgGel .4s var(--ease-out) 3s forwards }
@keyframes tgGel{ to{ opacity:1; transform:none } }
@keyframes tgNokta{ 0%,60%,100%{ opacity:.3; transform:translateY(0) } 30%{ opacity:1; transform:translateY(-2px) } }
@keyframes tgNabiz{ 0%{ box-shadow:0 0 0 0 rgba(77,203,112,.45) } 100%{ box-shadow:0 0 0 7px rgba(77,203,112,0) } }
@media (prefers-reduced-motion:reduce){ body.satis .tg__balon, body.satis .tg__yaziyor{ opacity:1; transform:none; animation:none } body.satis .tg__yaziyor i, body.satis .tg__durum i{ animation:none } }

/* Ürün kartı: satışa hazır tema */
body.satis .urun{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); overflow:hidden; border-radius:22px; border:1px solid transparent;
  background:linear-gradient(var(--bg2),var(--bg2)) padding-box, linear-gradient(120deg,var(--t1),var(--t3)) border-box;
  box-shadow:0 60px 120px -60px var(--t1);
}
body.satis .urun__gorsel{ position:relative; padding:clamp(1rem,2vw,1.6rem); background:radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--t1) 30%, transparent), transparent 70%), var(--tz) }
body.satis .urun__rozet{ position:absolute; top:1.5rem; left:1.5rem; z-index:3; padding:.42rem .85rem; border-radius:999px; background:linear-gradient(100deg,var(--t1),var(--t3)); color:#fff; font-size:.64rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; box-shadow:0 12px 26px -10px var(--t1) }
body.satis .urun .tema__ekran{ position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(0,0,0,.9) }
body.satis .urun .tema__kare{ position:absolute; inset:0; margin:0; opacity:0; transition:opacity .9s var(--ease) }
body.satis .urun .tema__kare.is-aktif{ opacity:1 }
body.satis .urun .tema__kare img{ display:block; width:100%; height:100%; object-fit:cover }
body.satis .urun__kucuk{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.4rem; margin-top:.8rem }
body.satis .urun .urun__kucuk button{ padding:0; min-height:0; border:1px solid rgba(255,255,255,.14); border-radius:6px; overflow:hidden; aspect-ratio:16/9; background:none; opacity:.5; transition:opacity .3s, box-shadow .3s; cursor:pointer }
body.satis .urun .urun__kucuk button img{ display:block; width:100%; height:100%; object-fit:cover }
body.satis .urun .urun__kucuk button:hover{ opacity:.85 }
body.satis .urun .urun__kucuk button[aria-selected="true"]{ opacity:1; border-color:var(--t1); box-shadow:0 0 0 2px color-mix(in srgb, var(--t1) 55%, transparent) }
body.satis .urun__bilgi{ display:grid; gap:.75rem; align-content:center; padding:clamp(1.3rem,2.6vw,2.2rem) }
body.satis .urun__logo{ height:54px; width:auto; max-width:55%; object-fit:contain; justify-self:start }
body.satis .urun__ad{ font-family:var(--fd); font-size:clamp(1.4rem,2.2vw,1.9rem); font-weight:700 }
body.satis .urun__tur{ margin-top:-.45rem; font-size:.7rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--t1) }
body.satis .urun__not{ color:var(--yazi2); font-size:.95rem; line-height:1.55 }
body.satis .urun__dahil{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem .9rem }
body.satis .urun__dahil li{ display:flex; align-items:center; gap:.55rem; font-size:.84rem; color:var(--yazi) }
body.satis .urun__dahil i{ position:relative; flex:none; width:18px; height:18px; border-radius:50%; background:linear-gradient(100deg,var(--t1),var(--t3)) }
body.satis .urun__dahil i::after{ content:""; position:absolute; left:6px; top:3px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) }
body.satis .urun__sayilar{ display:flex; flex-wrap:wrap; gap:.4rem }
body.satis .urun__sayilar span{ padding:.32rem .65rem; border-radius:999px; border:1px solid var(--cizgi); font-size:.72rem; color:var(--yazi2) }
body.satis .urun__sayilar b{ margin-right:.35rem; color:var(--yazi) }
body.satis .urun__eylem{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.3rem }
body.satis .urun__iste{ background:linear-gradient(100deg,var(--t1),var(--t3)); box-shadow:0 16px 36px -14px var(--t1) }
@media (max-width:900px){ body.satis .urun{ grid-template-columns:1fr } body.satis .urun__dahil{ grid-template-columns:1fr } }

/* Referanslar sayfası: Behance çağrısı */
body.satis .be-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1rem 1.6rem; margin-top:clamp(2rem,4vw,3rem); padding:1.2rem 1.6rem; border-radius:18px; border:1px solid var(--cizgi); background:var(--yuzey) }
body.satis .be-cta p{ color:var(--yazi2); font-size:.95rem }
body.satis .be-cta .btn .be-yazi{ height:.95rem; margin-right:.3rem }

/* Referanslar sayfası: üreticinin başlığı sayfa başlığı olur */
body.satis #isler{ padding-top:clamp(7rem,14vh,9rem) }
body.satis #isler .hzt__bas h2{ font-size:clamp(1.9rem,4.2vw,3.2rem); font-weight:700 }

/* ==========================================================================
   DÜĞME SİSTEMİ (satış sitesi) — eski .btn kuralları tamamen devre dışı
   Üç kademe: .dg (ana, ışıklı dolgu) · .dg--cam (cam yüzey, gradyan kenar)
   · .dg--yalin (yalnızca metin ve çizgi). Hepsinde aynı ölçü, aynı köşe.
   ========================================================================== */
body.satis .btn, body.satis .btn--ghost, body.satis .btn--lg, body.satis .btn--sm{
  all:unset; box-sizing:border-box; cursor:pointer;
}
body.satis .btn, body.satis .dg{
  --dg-h:48px;
  position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:var(--dg-h); padding:0 1.5rem; border-radius:12px;
  font-family:var(--fb); font-size:.86rem; font-weight:700; letter-spacing:.01em; line-height:1; white-space:nowrap;
  color:#fff; text-decoration:none;
  background:linear-gradient(135deg,#0A5BD6 0%,#0ABAB5 55%,#02E7FD 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 -2px 0 rgba(0,0,0,.25) inset, 0 12px 28px -12px rgba(2,231,253,.7);
  transition:transform .25s var(--ease-out), box-shadow .3s, filter .3s;
}
body.satis .btn > span, body.satis .dg > span{ display:inline-flex; align-items:center; gap:.5rem; position:relative; z-index:2 }
/* ışık süpürmesi: yalnızca üzerine gelince, tek sefer */
body.satis .btn::after, body.satis .dg::after{
  content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; pointer-events:none;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform:translateX(-120%); opacity:0;
}
body.satis .btn:hover::after, body.satis .dg:hover::after{ animation:dgSupur .7s var(--ease-out) forwards }
@keyframes dgSupur{ 0%{ transform:translateX(-120%); opacity:1 } 100%{ transform:translateX(120%); opacity:0 } }
body.satis .btn:hover, body.satis .dg:hover{ transform:translateY(-2px); filter:brightness(1.07); box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 -2px 0 rgba(0,0,0,.25) inset, 0 18px 36px -12px rgba(2,231,253,.85) }
body.satis .btn:active, body.satis .dg:active{ transform:translateY(0) scale(.98); filter:brightness(.97) }
body.satis .btn:focus-visible, body.satis .dg:focus-visible{ outline:2px solid #02E7FD; outline-offset:3px }
body.satis .btn--lg, body.satis .dg--buyuk{ --dg-h:56px; padding:0 2rem; font-size:.94rem; border-radius:14px }
body.satis .btn--sm, body.satis .dg--kucuk{ --dg-h:40px; padding:0 1.1rem; font-size:.78rem; border-radius:10px }
/* cam: koyu yüzey, gradyan ince kenar, hover'da kenar yanar */
body.satis .btn--ghost, body.satis .dg--cam{
  color:var(--yazi);
  background:linear-gradient(rgba(14,20,36,.92),rgba(14,20,36,.92)) padding-box, linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.06)) border-box;
  border:1px solid transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 10px 24px -14px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
body.satis .btn--ghost:hover, body.satis .dg--cam:hover{
  filter:none; color:#fff;
  background:linear-gradient(rgba(14,20,36,.92),rgba(14,20,36,.92)) padding-box, linear-gradient(135deg,#0A5BD6,#02E7FD) border-box;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 14px 30px -14px rgba(2,231,253,.55);
}
body.satis .btn--ghost::after, body.satis .dg--cam::after{ background:linear-gradient(100deg, transparent 30%, rgba(2,231,253,.16) 50%, transparent 70%) }
/* yalın: metin + alttan gelen çizgi */
body.satis .dg--yalin{ --dg-h:auto; padding:.3rem 0; border-radius:0; background:none; box-shadow:none; color:var(--yazi2) }
body.satis .dg--yalin::after{ inset:auto 0 0 0; height:1px; transform:scaleX(0); transform-origin:left; opacity:1; background:linear-gradient(90deg,#0A5BD6,#02E7FD); transition:transform .35s var(--ease-out) }
body.satis .dg--yalin:hover{ transform:none; filter:none; box-shadow:none; color:#fff }
body.satis .dg--yalin:hover::after{ animation:none; transform:scaleX(1) }
/* ikon kutusu */
body.satis .dg__ikon{ display:grid; place-items:center; width:22px; height:22px; border-radius:7px; background:rgba(255,255,255,.14) }
body.satis .dg__ikon svg{ width:14px; height:14px }
@media (hover:none){ body.satis .btn:hover, body.satis .dg:hover{ transform:none } }
@media (prefers-reduced-motion:reduce){ body.satis .btn::after, body.satis .dg::after{ display:none } body.satis .btn:hover, body.satis .dg:hover{ transform:none } }

/* ---------- Header: Behance ve İletişim ---------- */
body.satis .nav__link{
  all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:0 1.1rem; border-radius:12px;
  font-family:var(--fb); font-size:.84rem; font-weight:700; color:var(--yazi);
  background:linear-gradient(rgba(14,20,36,.85),rgba(14,20,36,.85)) padding-box, linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.06)) border-box; border:1px solid transparent;
  transition:background .3s, box-shadow .3s, transform .25s;
}
body.satis .nav__link:hover{ background:linear-gradient(rgba(14,20,36,.85),rgba(14,20,36,.85)) padding-box, linear-gradient(135deg,#1769FF,#02E7FD) border-box; box-shadow:0 12px 26px -14px rgba(23,105,255,.7); transform:translateY(-1px) }
body.satis .nav__link .be-yazi{ height:.95rem; background:#fff }
body.satis .nav__link .gorunmez{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
body.satis .header .btn{ --dg-h:44px; padding:0 1.3rem; font-size:.82rem }
body.satis .tema-dugme{ display:none !important }

/* ---------- Manşet portalları ---------- */
body.satis .gd__ustmenu{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem; width:min(100%,720px) }
body.satis .portal{
  position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:1rem; text-align:left;
  min-height:76px; padding:.9rem 1.1rem .9rem 1.2rem; border-radius:18px; color:var(--yazi); text-decoration:none;
  background:linear-gradient(rgba(10,14,26,.78),rgba(10,14,26,.78)) padding-box, linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.05) 50%,rgba(2,231,253,.35)) border-box;
  border:1px solid transparent; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 30px 60px -40px rgba(0,0,0,.9);
  transition:transform .35s var(--ease-out), box-shadow .35s, background .35s;
}
body.satis .portal::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(120% 140% at 0% 100%, rgba(10,91,214,.35), transparent 55%); opacity:0; transition:opacity .4s }
body.satis .portal::after{ content:""; position:absolute; left:1.2rem; right:1.2rem; bottom:0; height:2px; background:linear-gradient(90deg,#0A5BD6,#02E7FD); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease-out) }
body.satis .portal:hover{ transform:translateY(-3px); box-shadow:0 1px 0 rgba(255,255,255,.1) inset, 0 30px 60px -30px rgba(2,231,253,.45); background:linear-gradient(rgba(10,14,26,.82),rgba(10,14,26,.82)) padding-box, linear-gradient(135deg,#0A5BD6,#02E7FD) border-box }
body.satis .portal:hover::before{ opacity:1 } body.satis .portal:hover::after{ transform:scaleX(1) }
body.satis .portal__no{ font-family:var(--fd); font-size:.7rem; font-weight:700; letter-spacing:.08em; color:#02E7FD; padding:.35rem .5rem; border-radius:8px; background:rgba(2,231,253,.1); border:1px solid rgba(2,231,253,.25) }
body.satis .portal__yazi b{ display:block; font-family:var(--fd); font-size:1.02rem; font-weight:700; line-height:1.15; letter-spacing:-.01em }
body.satis .portal__yazi small{ display:block; margin-top:.3rem; font-size:.74rem; font-weight:500; color:var(--yazi2); letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
body.satis .portal__ok{ width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(135deg,#0A5BD6,#02E7FD); color:#fff; box-shadow:0 10px 20px -10px rgba(2,231,253,.9); transition:transform .3s var(--ease-out) }
body.satis .portal__ok svg{ width:18px; height:18px }
body.satis .portal:hover .portal__ok{ transform:translateX(3px) rotate(-45deg) }
body.satis .portal__ikon{ display:none }

/* ---------- Manşet metni: tek vurucu başlık ---------- */
body.satis .gd__baslik{ font-size:clamp(2rem,5.6vw,4.6rem); max-width:18ch; margin-top:.4rem; text-transform:uppercase; letter-spacing:-.01em }
body.satis .gd__baslik .it{ font-weight:700 }
body.satis .gd__ic .eyebrow{ display:none }

/* ---------- İletişim kartları ---------- */
body.satis .ilet-yol{ margin-top:0 }
body.satis .ilet-yol > a, body.satis .ilet-yol > span{
  position:relative; overflow:hidden; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:1rem; row-gap:.1rem; padding:1.05rem 1.2rem; border-radius:16px;
  background:linear-gradient(rgba(14,20,36,.9),rgba(14,20,36,.9)) padding-box, linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.05)) border-box; border:1px solid transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 20px 40px -30px rgba(0,0,0,.9);
}
body.satis .ilet-yol > a:hover{ background:linear-gradient(rgba(14,20,36,.9),rgba(14,20,36,.9)) padding-box, linear-gradient(135deg,#0A5BD6,#02E7FD) border-box; transform:translateY(-2px); box-shadow:0 20px 40px -24px rgba(2,231,253,.5) }
body.satis .ilet-yol .ik{ grid-row:span 2; width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:linear-gradient(135deg,#0A5BD6,#02E7FD); color:#fff; box-shadow:0 10px 20px -10px rgba(2,231,253,.9) }
body.satis .ilet-yol .ik svg{ width:20px; height:20px }
body.satis .ilet-yol small{ font-size:.64rem }
body.satis .ilet-yol b{ font-size:clamp(.95rem,1.2vw,1.1rem) }
body.satis #iletisim .form{ background:linear-gradient(rgba(12,17,30,.92),rgba(12,17,30,.92)) padding-box, linear-gradient(135deg,rgba(255,255,255,.2),rgba(2,231,253,.3)) border-box; border:1px solid transparent; box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 40px 80px -50px rgba(2,231,253,.4) }
body.satis .field__input{ border-bottom-color:rgba(255,255,255,.14) }
body.satis .field__input:focus{ border-bottom-color:#02E7FD }

/* ---------- Referans duvarı: fotoğraflı kart ---------- */
body.satis .lw__foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
body.satis .lw__kart{ background:linear-gradient(rgba(14,20,36,.9),rgba(14,20,36,.9)) padding-box, linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.04)) border-box; border:1px solid transparent }
body.satis .lw__kart:hover{ background:linear-gradient(rgba(14,20,36,.9),rgba(14,20,36,.9)) padding-box, linear-gradient(135deg,#0A5BD6,#02E7FD) border-box }
body.satis .lw__be{ margin-left:auto }

/* ---------- Kartlar: ortak cam kenar ---------- */
body.satis .hk, body.satis .adim2, body.satis .sis, body.satis .be-cta{
  background:linear-gradient(rgba(12,17,30,.9),rgba(12,17,30,.9)) padding-box, linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.04)) border-box; border:1px solid transparent;
}
body.satis .hk:hover{ background:linear-gradient(rgba(12,17,30,.9),rgba(12,17,30,.9)) padding-box, linear-gradient(135deg,rgba(10,91,214,.8),rgba(2,231,253,.8)) border-box }
body.satis .hk__etiket span{ border-color:rgba(255,255,255,.1); background:rgba(255,255,255,.03) }

/* Son düzeltmeler: simgeler görünsün, küçük resimler, mobil portallar */
body.satis .ilet-yol .ik{ overflow:visible }
body.satis .ilet-yol .ik svg{ width:20px; height:20px; display:block }
body.satis .urun .urun__kucuk button{ all:unset; box-sizing:border-box; cursor:pointer; display:block; position:relative; aspect-ratio:16/9; border-radius:6px; overflow:hidden; border:1px solid rgba(255,255,255,.14); opacity:.5; transition:opacity .3s, box-shadow .3s }
body.satis .urun .urun__kucuk button span{ display:none }
body.satis .urun .urun__kucuk button img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }
body.satis .urun .urun__kucuk button[aria-selected="true"]{ opacity:1; border-color:var(--t1); box-shadow:0 0 0 2px color-mix(in srgb, var(--t1) 55%, transparent) }
@media (max-width:640px){
  body.satis .gd__ustmenu{ grid-template-columns:1fr; width:100%; gap:.7rem }
  body.satis .portal{ min-height:64px; padding:.75rem .9rem .75rem 1rem; gap:.8rem }
  body.satis .portal__yazi small{ white-space:normal }
  body.satis .portal__ok{ width:34px; height:34px }
  body.satis .gd__baslik{ font-size:clamp(1.7rem,8.5vw,2.4rem) }
}
body.satis .ilet-yol .ik{ padding:0; display:grid; place-items:center }

/* ==========================================================================
   Hizmet kartı sahnesi: bulanık fotoğraf yerine temiz, koyu bir sahne.
   Görseller büyük, kendi oranında (bant yok), altta ışık ve gölge.
   ========================================================================== */
body.satis .hk__arka{ display:none }
body.satis .hk__gorsel{
  --isik:#2F7BFF;
  aspect-ratio:16/10;
  background:
    radial-gradient(55% 55% at 50% 58%, color-mix(in srgb, var(--isik) 34%, transparent), transparent 72%),
    radial-gradient(120% 80% at 50% 120%, color-mix(in srgb, var(--isik) 18%, transparent), transparent 60%),
    linear-gradient(180deg,#0A1020 0%,#060912 100%);
}
/* ince nokta ızgarası: sahneye derinlik verir, görselin önüne geçmez */
body.satis .hk__gorsel::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.2px); background-size:18px 18px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%, #000, transparent); mask-image:radial-gradient(70% 70% at 50% 50%, #000, transparent);
}
/* görsel ikilisi: kendi oranında, bant yok, hafif açılı */
body.satis .hk__ic{ inset:9% 7%; gap:5% }
body.satis .hk__ic img,
body.satis .hk__ic--iki img{
  width:auto; height:auto; max-width:46%; max-height:100%; object-fit:contain;
  border-radius:10px; outline:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 30px 50px -18px rgba(0,0,0,.95), 0 0 60px -20px var(--isik);
  transition:transform .6s var(--ease-out);
}
body.satis .hk__ic img:first-child{ transform:rotate(-3deg) }
body.satis .hk__ic img:last-child{ transform:rotate(3deg) translateY(4%) }
body.satis .hk:hover .hk__ic img:first-child{ transform:rotate(-5deg) translate(-4%,-3%) }
body.satis .hk:hover .hk__ic img:last-child{ transform:rotate(5deg) translate(4%,0) }
/* tarayıcı ve sohbet: sahnenin ortasında, ışık halesiyle */
body.satis .hk__cerceve{ left:8%; right:8%; top:10%; bottom:-2%; box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 40px 70px -30px rgba(0,0,0,.95), 0 0 80px -25px var(--isik) }
body.satis .tg{ inset:8% 10%; box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 40px 70px -30px rgba(0,0,0,.95), 0 0 80px -25px var(--isik) }
body.satis .hk__gorsel{ border-bottom:1px solid rgba(255,255,255,.06) }
@media (max-width:760px){ body.satis .hk__ic{ inset:8% 5% } }
@media (prefers-reduced-motion:reduce){ body.satis .hk__ic img{ transform:none !important } }

/* ==========================================================================
   MOBİL (satış sayfaları)
   Header tek satır: logo · Behance · İletişim; açılır menü yok (gezinme
   zaten ana sayfadaki iki portal ve bu iki düğmeyle yapılıyor).
   ========================================================================== */
body.satis .lw__not{ display:none }
@media (max-width:1024px){
  body.satis .nav{ display:flex !important; margin-left:auto }
  body.satis .header__cta{ display:inline-flex !important }
  body.satis .burger, body.satis .menu{ display:none !important }
  body.satis .header__inner{ gap:.5rem }
}
@media (max-width:760px){
  /* header */
  body.satis .header{ padding-block:.7rem }
  body.satis .logo__img{ height:40px !important }
  body.satis .nav__link{ min-height:40px; padding:0 .8rem; border-radius:11px }
  body.satis .nav__link .be-yazi{ height:.8rem }
  body.satis .header .btn{ --dg-h:40px; padding:0 .95rem; font-size:.78rem; border-radius:11px; box-shadow:0 8px 20px -10px rgba(2,231,253,.7) }

  /* bölümler daha sıkı */
  body.satis .section{ padding-block:clamp(2.6rem,9vw,3.4rem) }
  body.satis .sayfa-bas{ padding-top:6.2rem; gap:.55rem }
  body.satis .sayfa-bas h1{ font-size:clamp(1.7rem,8vw,2.2rem) }
  body.satis .sayfa-bas p{ font-size:.95rem }
  body.satis .bas{ margin-bottom:1.6rem }
  body.satis h2{ font-size:clamp(1.4rem,6.6vw,1.8rem) }
  body.satis #isler{ padding-top:6.2rem }
  body.satis #isler .hzt__bas h2{ font-size:clamp(1.7rem,8vw,2.2rem) }

  /* ana sayfa: başlık üstte, portallar altta, ekranın ortasında */
  body.satis .gd--hero{ min-height:100svh; padding-top:5.5rem; padding-bottom:4rem; align-items:center }
  body.satis .gd--hero .gd__ic{ display:flex; flex-direction:column }
  body.satis .gd--hero .gd__baslik{ order:1; margin:0 0 1.6rem; font-size:clamp(1.75rem,8.6vw,2.5rem); line-height:1.08 }
  body.satis .gd--hero .gd__ustmenu{ order:2; margin:0 }
  body.satis .gd__sahne{ opacity:.45 }
  body.satis .gd__alt{ bottom:max(.9rem, env(safe-area-inset-bottom)); font-size:.68rem; gap:.3rem 1rem }

  /* hizmet kartları */
  body.satis .hk__govde{ padding:1rem 1.05rem 1.15rem; gap:.5rem }
  body.satis .hk__govde p{ font-size:.92rem }
  body.satis .hk__etiket span{ font-size:.7rem; padding:.28rem .6rem }

  /* tema ürün kartı */
  body.satis .urun{ border-radius:18px }
  body.satis .urun__gorsel{ padding:.75rem }
  body.satis .urun__rozet{ top:1.1rem; left:1.1rem; font-size:.58rem; padding:.34rem .7rem }
  body.satis .urun__kucuk{ grid-template-columns:repeat(7,minmax(0,1fr)); gap:.3rem; margin-top:.6rem }
  body.satis .urun__bilgi{ padding:1.15rem 1.1rem 1.3rem; gap:.65rem }
  body.satis .urun__logo{ height:44px }
  body.satis .urun__eylem{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem }
  body.satis .urun__eylem .btn{ width:100%; padding:0 .8rem }

  /* yazılım paneli iki sütun, kısa */
  body.satis .yaz-izgara{ gap:1.6rem }
  body.satis .yaz-izgara .btn{ width:100% }
  body.satis .sis__izgara{ grid-template-columns:1fr 1fr; gap:.45rem; padding:.6rem }
  body.satis .sis__modul{ padding:.6rem .65rem; column-gap:.45rem }
  body.satis .sis__modul b{ font-size:.76rem }
  body.satis .sis__modul span{ font-size:.66rem }
  body.satis .sis__modul i{ width:6px; height:6px; margin-top:.4rem }

  /* süreç: kompakt satırlar */
  body.satis .adim-izgara{ gap:.6rem }
  body.satis .adim2{ grid-template-columns:auto 1fr; column-gap:.85rem; row-gap:.2rem; padding:1rem 1.05rem }
  body.satis .adim2__no{ grid-row:span 2; width:34px; height:34px }
  body.satis .adim2 p{ font-size:.88rem }
  body.satis #surec .btn{ width:100% }

  /* referanslar Behance çağrısı */
  body.satis .be-cta{ display:grid; grid-template-columns:1fr 1fr; text-align:center; padding:1.1rem; gap:.7rem }
  body.satis .be-cta p{ grid-column:1/-1 }
  body.satis .be-cta .btn{ width:100%; padding:0 .8rem }

  /* iletişim */
  body.satis .ilet-izgara{ gap:1.2rem }
  body.satis .ilet-yol{ gap:.6rem }
  body.satis .ilet-yol > a, body.satis .ilet-yol > span{ padding:.85rem 1rem }
  body.satis .ilet-yol .ik{ width:40px; height:40px }
  body.satis #iletisim .form{ padding:1.15rem; border-radius:18px }
  body.satis #iletisim .form .btn{ width:100% }

  /* alt bilgi: kısa */
  body.satis .footer{ padding-block:2.2rem 1.6rem }
  body.satis .footer__top{ grid-template-columns:1fr; gap:1.4rem }
  body.satis .footer__brand p, body.satis .footer__brand .footer__sosyal, body.satis .footer__brand > div:not(:first-child){ display:none }
  body.satis .footer__top > .footer__col:nth-child(2){ display:none }
  body.satis .footer__bottom{ flex-direction:column; align-items:flex-start; gap:.6rem; margin-top:1.4rem; padding-top:1.2rem }
  body.satis .totop{ display:none }
}
body.satis .urun__tur{ text-transform:none; letter-spacing:.06em }

/* ==========================================================================
   Manşet portalları v3: yalnızca büyük başlık ve ok.
   Kenarda dönen ışık, başlıkta kayan parıltı, okta nabız halkası;
   üzerine gelince ok dışarı kayıp yeniden içeri girer.
   ========================================================================== */
@property --aci{ syntax:'<angle>'; inherits:false; initial-value:0deg }
body.satis .gd__ustmenu{ gap:1rem; width:min(100%,760px) }
body.satis .portal{
  --aci:0deg;
  grid-template-columns:minmax(0,1fr) auto; gap:1.2rem;
  min-height:92px; padding:1rem 1rem 1rem 1.8rem; border-radius:24px;
  border:1.5px solid transparent;
  background:
    radial-gradient(120% 160% at 0% 100%, rgba(10,91,214,.28), transparent 55%) padding-box,
    linear-gradient(rgba(8,12,24,.86),rgba(8,12,24,.86)) padding-box,
    conic-gradient(from var(--aci), rgba(2,231,253,0) 0deg, #02E7FD 50deg, #0A5BD6 110deg, rgba(10,91,214,0) 170deg, rgba(255,255,255,.14) 260deg, rgba(2,231,253,0) 360deg) border-box;
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 30px 70px -40px rgba(2,231,253,.55);
  animation:portalDon 5s linear infinite;
}
body.satis .portal:nth-child(2){ animation-delay:-2.5s }
@keyframes portalDon{ to{ --aci:360deg } }
body.satis .portal::before, body.satis .portal::after{ display:none }
body.satis .portal:hover{
  transform:translateY(-4px) scale(1.015);
  background:
    radial-gradient(120% 160% at 0% 100%, rgba(10,91,214,.45), transparent 60%) padding-box,
    linear-gradient(rgba(8,12,24,.82),rgba(8,12,24,.82)) padding-box,
    conic-gradient(from var(--aci), #02E7FD, #0A5BD6, #02E7FD, #0A5BD6, #02E7FD) border-box;
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset, 0 34px 70px -30px rgba(2,231,253,.75);
}
body.satis .portal__no, body.satis .portal__yazi small{ display:none }
/* başlık: büyük, kalın, üzerinde kayan parıltı */
body.satis .portal__yazi{
  font-family:var(--fd); font-size:clamp(1.3rem,2.2vw,1.75rem); font-weight:700; line-height:1; letter-spacing:.01em; text-transform:uppercase;
  background:linear-gradient(100deg,#FFFFFF 0%,#FFFFFF 38%,#7FF4FF 48%,#FFFFFF 58%,#FFFFFF 100%);
  background-size:260% 100%; background-position:100% 0;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation:yaziParla 4.5s ease-in-out infinite;
}
body.satis .portal:nth-child(2) .portal__yazi{ animation-delay:-2.2s }
@keyframes yaziParla{ 0%,30%{ background-position:100% 0 } 70%,100%{ background-position:0 0 } }
/* ok: büyük daire, nabız halkası, kayan ok */
body.satis .portal__ok{
  position:relative; width:56px; height:56px; border-radius:50%; overflow:visible;
  display:grid; place-items:center;
  background:linear-gradient(135deg,#0A5BD6 0%,#0ABAB5 60%,#02E7FD 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset, 0 12px 28px -8px rgba(2,231,253,.85);
  transition:transform .35s var(--ease-out), box-shadow .35s;
}
body.satis .portal__ok::before{
  content:""; position:absolute; inset:-1px; border-radius:50%; border:2px solid rgba(2,231,253,.65);
  animation:okNabiz 2.2s ease-out infinite;
}
@keyframes okNabiz{ 0%{ transform:scale(1); opacity:.9 } 100%{ transform:scale(1.55); opacity:0 } }
body.satis .portal__ok svg{ grid-area:1/1; width:24px; height:24px; color:#fff; transition:transform .45s var(--ease-out), opacity .3s }
body.satis .portal__o2{ transform:translateX(-26px); opacity:0 }
body.satis .portal:hover .portal__ok{ transform:scale(1.08); box-shadow:0 0 0 1px rgba(255,255,255,.25) inset, 0 16px 34px -8px rgba(2,231,253,1) }
body.satis .portal:hover .portal__o1{ transform:translateX(26px); opacity:0 }
body.satis .portal:hover .portal__o2{ transform:translateX(0); opacity:1 }
/* ok kendiliğinden de hafifçe ileri itilir, dikkat çeker */
body.satis .portal:not(:hover) .portal__o1{ animation:okIt 2.2s ease-in-out infinite }
@keyframes okIt{ 0%,60%,100%{ transform:translateX(0) } 75%{ transform:translateX(4px) } }
@media (max-width:640px){
  body.satis .gd__ustmenu{ gap:.75rem }
  body.satis .portal{ min-height:78px; padding:.8rem .8rem .8rem 1.35rem; border-radius:20px }
  body.satis .portal__yazi{ font-size:clamp(1.15rem,5.8vw,1.45rem) }
  body.satis .portal__ok{ width:50px; height:50px }
}
@media (prefers-reduced-motion:reduce){
  body.satis .portal, body.satis .portal__yazi, body.satis .portal__ok::before, body.satis .portal__o1{ animation:none !important }
}

/* ==========================================================================
   İLETİŞİM — üç vitrin kartı
   Dönen ışıklı kenar, fareyi izleyen ışık ve üç boyutlu eğim, yörüngede
   dönen uydu, yüzen simge küresi, kartın üstünden geçen parlama.
   Saat kartındaki halka günün ne kadarının geçtiğini gösterir (--gun).
   ========================================================================== */
body.satis .sayfa-bas h1{ margin-bottom:0 }
body.satis .ik3{ --gun:.5; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,1.6rem); max-width:1120px; margin:0 auto; perspective:1400px }
body.satis .ik3__kart{
  --aci:0deg; --mx:50%; --my:0%; --rx:0deg; --ry:0deg;
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.55rem;
  min-height:420px; padding:2.6rem 1.6rem 1.7rem; border-radius:30px; color:var(--yazi); text-decoration:none;
  border:1.5px solid transparent;
  background:
    radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--k1) 16%, transparent), transparent 70%) padding-box,
    linear-gradient(180deg,#0B1122 0%,#060912 100%) padding-box,
    conic-gradient(from var(--aci), transparent 0deg, var(--k1) 55deg, var(--k2) 110deg, transparent 165deg, rgba(255,255,255,.10) 250deg, transparent 360deg) border-box;
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 50px 90px -60px var(--k1);
  transform:rotateX(var(--rx)) rotateY(var(--ry)); transform-style:preserve-3d;
  transition:transform .25s var(--ease-out), box-shadow .4s;
  animation:portalDon 7s linear infinite;
}
body.satis .ik3__kart:nth-child(2){ animation-delay:-2.3s } body.satis .ik3__kart:nth-child(3){ animation-delay:-4.6s }
/* kart üstündeki parlama ve alttaki nokta ızgarası */
body.satis .ik3__kart::before{
  content:""; position:absolute; inset:-40%; z-index:-1; pointer-events:none;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.07) 50%, transparent 58%);
  transform:translateX(-60%); transition:transform 1.1s var(--ease-out);
}
body.satis .ik3__kart:hover::before{ transform:translateX(60%) }
body.satis .ik3__kart::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:55%; z-index:-2; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.3px); background-size:16px 16px;
  -webkit-mask-image:linear-gradient(0deg,#000,transparent); mask-image:linear-gradient(0deg,#000,transparent);
}
body.satis .ik3__isik{ position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(320px circle at var(--mx) var(--my), color-mix(in srgb, var(--k1) 28%, transparent), transparent 70%); opacity:.55; transition:opacity .4s }
body.satis a.ik3__kart:hover, body.satis .ik3__kart:hover{ box-shadow:0 1px 0 rgba(255,255,255,.1) inset, 0 60px 100px -50px var(--k1) }
body.satis .ik3__kart:hover .ik3__isik{ opacity:1 }
body.satis a.ik3__kart:focus-visible{ outline:2px solid var(--k1); outline-offset:4px }

/* yörünge, uydu ve küre */
body.satis .ik3__yorunge{ position:relative; width:136px; height:136px; display:grid; place-items:center; margin-bottom:1.1rem; transform:translateZ(40px) }
body.satis .ik3__yorunge::before{ content:""; position:absolute; inset:0; border-radius:50%; border:1px dashed color-mix(in srgb, var(--k1) 45%, transparent); animation:ik3Don 24s linear infinite }
body.satis .ik3__yorunge::after{ content:""; position:absolute; inset:14%; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--k1) 35%, transparent), transparent 70%); filter:blur(6px) }
body.satis .ik3__uydu{ position:absolute; inset:0; border-radius:50%; animation:ik3Don 7s linear infinite }
body.satis .ik3__uydu::after{ content:""; position:absolute; top:-5px; left:calc(50% - 5px); width:10px; height:10px; border-radius:50%; background:var(--k1); box-shadow:0 0 14px 2px var(--k1) }
body.satis .ik3__kart:nth-child(2) .ik3__uydu{ animation-duration:9s; animation-direction:reverse }
body.satis .ik3__orb{
  position:relative; z-index:1; width:84px; height:84px; border-radius:26px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(140deg, var(--k2), var(--k1));
  box-shadow:0 0 0 1px rgba(255,255,255,.22) inset, 0 -10px 20px -10px rgba(0,0,0,.4) inset, 0 24px 44px -14px var(--k1), 0 0 70px -12px var(--k1);
  animation:ik3Yuz 5s ease-in-out infinite;
}
body.satis .ik3__orb::before{ content:""; position:absolute; inset:1px 1px 50% 1px; border-radius:25px 25px 40% 40%; background:linear-gradient(180deg,rgba(255,255,255,.28),transparent) }
body.satis .ik3__orb svg{ position:relative; width:38px; height:38px; transition:transform .5s var(--ease-out) }
@keyframes ik3Don{ to{ transform:rotate(360deg) } }
@keyframes ik3Yuz{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }
/* simgeye özel hareketler */
body.satis .ik3--tg:hover .ik3__orb svg{ animation:ik3Ucak .9s var(--ease-out) }
@keyframes ik3Ucak{ 0%{ transform:none } 45%{ transform:translate(26px,-26px) scale(.6); opacity:0 } 46%{ transform:translate(-26px,26px) scale(.6); opacity:0 } 100%{ transform:none; opacity:1 } }
body.satis .ik3__kapak{ transform-origin:12px 7px; transition:transform .45s var(--ease-out) }
body.satis .ik3--mail:hover .ik3__kapak{ transform:scaleY(-1) }
body.satis .ik3--mail:hover .ik3__orb svg{ transform:translateY(-2px) }
body.satis .ik3__akrep, body.satis .ik3__yelkovan{ transform-origin:12px 12px }
body.satis .ik3__yelkovan{ animation:ik3Don 6s linear infinite } body.satis .ik3__akrep{ animation:ik3Don 72s linear infinite }
/* saat kartı: yörünge yerine günün ilerleyişini gösteren halka */
body.satis .ik3--saat .ik3__yorunge::before{
  border:0; animation:none;
  background:conic-gradient(var(--k1) calc(var(--gun) * 360deg), rgba(255,255,255,.08) 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}
body.satis .ik3--saat .ik3__uydu{ animation:none; transform:rotate(calc(var(--gun) * 360deg)) }

/* metinler */
body.satis .ik3__etiket{ font-size:.68rem; font-weight:800; letter-spacing:.24em; text-transform:uppercase; color:var(--k1); transform:translateZ(24px) }
body.satis .ik3__deger{ font-family:var(--fd); font-size:clamp(1.3rem,2.1vw,1.7rem); font-weight:700; line-height:1.15; letter-spacing:-.01em; color:#fff; transform:translateZ(30px) }
body.satis .ik3__deger--uzun{ font-size:clamp(.98rem,1.45vw,1.18rem); overflow-wrap:anywhere }
body.satis .ik3__not{ font-size:.9rem; color:var(--yazi2); transform:translateZ(16px) }
body.satis .ik3__eylem{
  margin-top:auto; display:inline-flex; align-items:center; gap:.55rem; min-height:46px; padding:0 1.3rem; border-radius:14px;
  font-size:.84rem; font-weight:700; color:#fff;
  background:linear-gradient(135deg, var(--k2), var(--k1));
  box-shadow:0 0 0 1px rgba(255,255,255,.2) inset, 0 14px 30px -12px var(--k1);
  transform:translateZ(36px); transition:filter .3s, box-shadow .3s;
}
body.satis .ik3__eylem svg{ width:18px; height:18px; transition:transform .35s var(--ease-out) }
body.satis .ik3__kart:hover .ik3__eylem{ filter:brightness(1.08); box-shadow:0 0 0 1px rgba(255,255,255,.28) inset, 0 18px 36px -10px var(--k1) }
body.satis .ik3__kart:hover .ik3__eylem svg{ transform:translateX(5px) }
body.satis .ik3__durum{
  margin-top:auto; display:inline-flex; align-items:center; gap:.55rem; min-height:46px; padding:0 1.1rem; border-radius:14px;
  font-size:.8rem; font-weight:700; color:#D9FBE7; background:rgba(51,209,122,.1); border:1px solid rgba(51,209,122,.35);
  transform:translateZ(36px); font-variant-numeric:tabular-nums;
}
body.satis .ik3__durum i{ width:9px; height:9px; border-radius:50%; background:#33D17A; animation:tgNabiz 1.8s ease-out infinite }
body.satis .ik3__saat{ font-weight:600; color:#9BE8BE }

@media (max-width:900px){
  body.satis .ik3{ grid-template-columns:1fr; max-width:460px }
  body.satis .ik3__kart{ min-height:0; padding:2rem 1.3rem 1.4rem; border-radius:24px }
  body.satis .ik3__yorunge{ width:112px; height:112px; margin-bottom:.7rem }
  body.satis .ik3__orb{ width:70px; height:70px; border-radius:22px }
  body.satis .ik3__orb svg{ width:32px; height:32px }
  body.satis .ik3__eylem, body.satis .ik3__durum{ margin-top:.7rem; width:100%; justify-content:center }
}
@media (prefers-reduced-motion:reduce){
  body.satis .ik3__kart, body.satis .ik3__uydu, body.satis .ik3__orb, body.satis .ik3__yorunge::before, body.satis .ik3__akrep, body.satis .ik3__yelkovan{ animation:none !important }
  body.satis .ik3__kart{ transform:none !important }
}

/* Portal yazısı düğmenin genişliğine göre ölçeklenir: geniş yazı tipinde
   "REFERANSLAR" son harfi okun altına girmesin */
body.satis .portal{ container-type:inline-size }
body.satis .portal__yazi{ min-width:0; white-space:nowrap; font-size:clamp(1rem, 9cqi, 2rem); padding-right:.06em; overflow:visible; letter-spacing:0 }
/* İletişim sayfasında alt bilgideki iletişim sütunu kartları tekrar etmesin */
body.satis:has(.ik3) .footer__top > .footer__col:last-child{ display:none }
/* Portal yazısı, sitenin yazı tipinde (Unbounded) "REFERANSLAR" ≈ 9,45 em genişliğinde.
   Boyut, düğmenin iç genişliğinden ok (56px) ve boşluk düşülerek hesaplanır: her ekranda sığar. */
body.satis .gd__ustmenu{ width:min(100%,880px) }
body.satis .portal__yazi{ font-size:clamp(1rem, calc((100cqi - 86px) / 9.8), 2.05rem) }
@media (max-width:640px){ body.satis .portal__yazi{ font-size:clamp(1rem, calc((100cqi - 80px) / 9.8), 1.7rem) } }

/* ==========================================================================
   v5 — Zemin, başlık çizgileri, kısa alt bilgi
   ========================================================================== */
/* Zemin: kareler büyük (96px) ve sabit; bölümler ve şeritler kendi
   çizgilerini çizmez, böylece kaydırırken ızgaraya yarım kare ya da bant
   karışmaz. */
body.satis::before{
  background:
    radial-gradient(55% 40% at 12% 8%, rgba(0,72,180,.26), transparent 70%),
    radial-gradient(45% 38% at 88% 92%, rgba(10,186,181,.18), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 95px, rgba(255,255,255,.055) 95px 96px),
    repeating-linear-gradient(90deg, transparent 0 95px, rgba(255,255,255,.055) 95px 96px),
    var(--bg);
  background-position:0 0, 0 0, 0 0, calc(50vw - 48px) 0, 0 0;
  -webkit-mask-image:radial-gradient(110% 95% at 50% 35%, #000 45%, rgba(0,0,0,.6));
  mask-image:radial-gradient(110% 95% at 50% 35%, #000 45%, rgba(0,0,0,.6));
}
body.satis .section, body.satis .section--line, body.satis .section--ara, body.satis .plogos, body.satis .footer, body.satis .footer__top, body.satis .footer__bottom{ border:0 !important; background:transparent !important }
body.satis .glow{ display:none }
body.satis .plogos{ padding-block:1rem 1.6rem }
body.satis .plogos__label{ margin-bottom:.9rem }

/* Başlık üstündeki etiket: çizgi iki yanda */
body.satis .eyebrow{ display:inline-flex; align-items:center; gap:.75rem }
body.satis .eyebrow::before, body.satis .eyebrow::after{ content:""; flex:none; width:26px; height:2px; border-radius:2px }
body.satis .eyebrow::before{ background:linear-gradient(90deg, transparent, #0ABAB5) }
body.satis .eyebrow::after{ background:linear-gradient(90deg, #0ABAB5, transparent) }

/* Alt bilgi: her sayfada tek ince satır — logo · menü · yasal · telif */
body.satis .footer{ padding-block:1.1rem 1.2rem !important; overflow:visible }
body.satis .footer > .wrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1.6rem; position:relative }
body.satis .footer > .wrap::before{ content:""; position:absolute; left:0; right:0; top:-1.1rem; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.12) 20%, rgba(255,255,255,.12) 80%, transparent) }
body.satis .footer__top{ display:flex !important; align-items:center; gap:1.4rem; padding:0 !important; margin:0 }
body.satis .footer__brand{ display:flex !important; align-items:center; gap:0; max-width:none }
body.satis .footer__brand > :not(.logo){ display:none !important }
body.satis .footer .logo__img{ height:26px !important }
body.satis .footer__col{ display:none !important }
body.satis .footer__col:nth-child(2){ display:flex !important }
body.satis .footer__col:nth-child(2) .footer__ttl{ display:none }
body.satis .footer__col:nth-child(2) .footer__list{ display:flex; gap:1.1rem; font-size:.8rem }
body.satis .footer__bottom{ display:flex; flex-direction:row-reverse; align-items:center; gap:.5rem 1.4rem; padding:0 !important; margin:0 !important; font-size:.72rem; color:var(--yazi3) }
body.satis .footer__legal{ gap:1rem }
body.satis .footer__legal a, body.satis .footer__list a{ color:var(--yazi3) }
body.satis .footer__legal a:hover, body.satis .footer__list a:hover{ color:var(--yazi); padding-left:0 }
body.satis .footer__wordmark{ display:none }
@media (max-width:900px){
  body.satis .footer > .wrap{ justify-content:center; text-align:center }
  body.satis .footer__top{ display:none !important }
  body.satis .footer__bottom{ flex-direction:column; gap:.45rem !important }
  body.satis .footer__legal{ justify-content:center; gap:.4rem .9rem }
}

/* ==========================================================================
   v5 — Hizmet kartları: dönen ışık kenarı, fareyi izleyen spot, 3B eğim,
   sahnede yükselen görseller ve alt şeritte simge · başlık · ok
   ========================================================================== */
body.satis .hk-izgara{ perspective:1600px; gap:clamp(1rem,2vw,1.7rem) }
body.satis a.hk{
  --aci:0deg; --mx:50%; --my:30%; --rx:0deg; --ry:0deg;
  position:relative; isolation:isolate; display:flex; flex-direction:column; overflow:hidden;
  border-radius:30px; color:var(--yazi); text-decoration:none;
  border:1.5px solid transparent;
  background:
    linear-gradient(180deg,#0B1122 0%,#060912 100%) padding-box,
    conic-gradient(from var(--aci), rgba(255,255,255,.06) 0deg, var(--isik) 60deg, #02E7FD 95deg, rgba(255,255,255,.06) 150deg, rgba(255,255,255,.06) 360deg) border-box;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 40px 80px -60px var(--isik);
  transform:rotateX(var(--rx)) rotateY(var(--ry)); transform-style:preserve-3d;
  transition:transform .3s var(--ease-out), box-shadow .5s;
  animation:portalDon 9s linear infinite;
}
body.satis a.hk:nth-child(2){ animation-delay:-2.2s } body.satis a.hk:nth-child(3){ animation-delay:-4.4s } body.satis a.hk:nth-child(4){ animation-delay:-6.6s }
body.satis a.hk:hover{ transform:rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px); box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 70px 120px -50px var(--isik), 0 0 0 1px color-mix(in srgb, var(--isik) 40%, transparent) }
body.satis a.hk:focus-visible{ outline:2px solid var(--isik); outline-offset:5px }
/* fareyi izleyen spot */
body.satis .hk__isik{ position:absolute; inset:0; z-index:2; pointer-events:none; mix-blend-mode:screen; background:radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--isik) 26%, transparent), transparent 65%); opacity:0; transition:opacity .45s }
body.satis a.hk:hover .hk__isik{ opacity:1 }
/* geçen parlama */
body.satis a.hk::after{
  content:""; position:absolute; inset:-30%; z-index:3; pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.09) 48%, rgba(255,255,255,.02) 52%, transparent 60%);
  transform:translateX(-70%); transition:transform 1.2s var(--ease-out);
}
body.satis a.hk:hover::after{ transform:translateX(70%) }
/* sahne */
body.satis a.hk .hk__gorsel{ aspect-ratio:16/10; border:0; border-radius:28px 28px 0 0; transform:translateZ(0) }
body.satis a.hk .hk__gorsel::after{
  content:""; position:absolute; left:10%; right:10%; bottom:6%; height:18%; z-index:0; pointer-events:none; border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--isik) 55%, transparent), transparent 70%); filter:blur(18px); opacity:.7; transition:opacity .5s, transform .6s var(--ease-out);
}
body.satis a.hk:hover .hk__gorsel::after{ opacity:1; transform:scaleX(1.15) }
body.satis a.hk .hk__ic, body.satis a.hk .hk__cerceve, body.satis a.hk .tg{ z-index:1; transition:transform .7s var(--ease-out) }
body.satis a.hk:hover .hk__ic{ transform:scale(1.04) }
body.satis a.hk:hover .hk__cerceve, body.satis a.hk:hover .tg{ transform:translateY(-6px) scale(1.02) }
/* alt şerit */
body.satis .hk__alt{
  position:relative; z-index:1; display:flex; align-items:center; gap:1rem;
  padding:1.15rem 1.2rem 1.2rem 1.25rem;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0));
}
body.satis .hk__alt::before{ content:""; position:absolute; left:1.25rem; right:1.25rem; top:0; height:1px; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--isik) 70%, transparent), transparent) }
body.satis .hk__ikon{
  position:relative; flex:none; width:48px; height:48px; border-radius:15px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(140deg, color-mix(in srgb, var(--isik) 70%, #fff 10%), color-mix(in srgb, var(--isik) 60%, #000 30%));
  box-shadow:0 0 0 1px rgba(255,255,255,.2) inset, 0 -8px 16px -8px rgba(0,0,0,.45) inset, 0 14px 30px -10px var(--isik);
}
body.satis .hk__ikon::before{ content:""; position:absolute; inset:1px 1px 50% 1px; border-radius:14px 14px 40% 40%; background:linear-gradient(180deg,rgba(255,255,255,.3),transparent) }
body.satis .hk__ikon svg{ position:relative; width:23px; height:23px; transition:transform .5s var(--ease-out) }
body.satis a.hk:hover .hk__ikon svg{ transform:rotate(-8deg) scale(1.1) }
body.satis .hk__alt h3{ flex:1; min-width:0; margin:0; font-size:clamp(1.02rem,1.45vw,1.3rem); font-weight:700; letter-spacing:-.01em; line-height:1.2 }
body.satis .hk__ok{
  position:relative; flex:none; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; overflow:hidden;
  color:#fff; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04);
  transition:background .4s, border-color .4s, box-shadow .4s;
}
body.satis .hk__ok svg{ width:19px; height:19px; transition:transform .45s var(--ease-out) }
body.satis a.hk:hover .hk__ok{ background:var(--isik); border-color:transparent; box-shadow:0 10px 26px -8px var(--isik) }
body.satis a.hk:hover .hk__ok svg{ animation:hkOk .6s var(--ease-out) }
@keyframes hkOk{ 0%{ transform:none } 45%{ transform:translateX(26px) } 46%{ transform:translateX(-26px) } 100%{ transform:none } }
@media (max-width:760px){
  body.satis a.hk{ border-radius:24px }
  body.satis a.hk .hk__gorsel{ border-radius:22px 22px 0 0 }
  body.satis .hk__alt{ padding:.95rem 1rem; gap:.8rem }
  body.satis .hk__ikon{ width:42px; height:42px; border-radius:13px }
  body.satis .hk__ok{ width:40px; height:40px }
}

/* ==========================================================================
   v5 — Hazır tema: satışa hazır ürün kartı
   Solda dizüstü ekranında dönen tasarım, köşede şerit, uçuşan rozetler;
   sağda ürün bilgisi, paket içeriği ve sepet simgeli SATIN AL.
   ========================================================================== */
body.satis .urun2{
  --aci:0deg; --mx:50%; --my:40%; --rx:0deg; --ry:0deg;
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  border-radius:34px; border:1.5px solid transparent;
  background:
    radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--t1) 16%, transparent), transparent 60%) padding-box,
    radial-gradient(60% 80% at 100% 100%, color-mix(in srgb, var(--t3) 14%, transparent), transparent 60%) padding-box,
    linear-gradient(160deg,#0C0A1A 0%,#060810 100%) padding-box,
    conic-gradient(from var(--aci), transparent 0deg, var(--t1) 50deg, var(--t3) 100deg, transparent 150deg, rgba(255,255,255,.10) 240deg, transparent 360deg) border-box;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 60px 120px -70px var(--t1);
  transform:rotateX(var(--rx)) rotateY(var(--ry)); transform-style:preserve-3d;
  transition:transform .3s var(--ease-out);
  animation:portalDon 8s linear infinite;
}
body.satis #temalar .wrap{ perspective:1800px }
body.satis #temalar .urun2 + .urun2{ margin-top:2rem }
body.satis .urun2__isik{ position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(520px circle at var(--mx) var(--my), color-mix(in srgb, var(--t1) 18%, transparent), transparent 65%); opacity:.6; transition:opacity .4s }
body.satis .urun2:hover .urun2__isik{ opacity:1 }

/* sahne */
body.satis .urun2__sahne{
  position:relative; overflow:hidden; display:grid; align-content:center; gap:1.2rem;
  padding:clamp(3.4rem,5.5vw,4.6rem) clamp(1.4rem,4vw,3.4rem) clamp(1.4rem,2.6vw,2rem);
  border-right:1px solid rgba(255,255,255,.06);
}
body.satis .urun2__sahne::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.3px); background-size:20px 20px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 45%, #000, transparent); mask-image:radial-gradient(70% 60% at 50% 45%, #000, transparent);
}
body.satis .urun2__sahne::after{
  content:""; position:absolute; left:15%; right:15%; top:55%; height:30%; z-index:-1; pointer-events:none; border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--t1) 60%, transparent), transparent 70%); filter:blur(40px); opacity:.55;
}
/* köşe şeridi */
body.satis .urun2__serit{
  position:absolute; z-index:4; top:30px; left:-52px; width:210px; transform:rotate(-45deg);
  display:flex; align-items:center; justify-content:center; gap:.45rem; padding:.5rem 0;
  font-size:.62rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:#fff;
  background:linear-gradient(100deg, var(--t1), var(--t3)); box-shadow:0 10px 26px -8px var(--t1);
}
body.satis .urun2__serit i{ width:6px; height:6px; border-radius:50%; background:#fff; box-shadow:0 0 8px #fff; animation:tgNabiz 1.8s ease-out infinite }
/* dizüstü */
body.satis .urun2__laptop{ position:relative; z-index:1; width:100%; transform:translateZ(50px) rotateX(6deg); transform-origin:50% 100%; transition:transform .7s var(--ease-out) }
body.satis .urun2:hover .urun2__laptop{ transform:translateZ(60px) rotateX(0deg) translateY(-4px) }
body.satis .urun2__kapak{
  position:relative; padding:2.4% 2.4% 2.8%; border-radius:16px 16px 6px 6px;
  background:linear-gradient(180deg,#1A1D27,#0C0E14);
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 0 0 1px rgba(0,0,0,.6), 0 40px 70px -30px rgba(0,0,0,.95), 0 0 90px -30px var(--t1);
}
body.satis .urun2__kamera{ position:absolute; top:.9%; left:50%; width:6px; height:6px; margin-left:-3px; border-radius:50%; background:#2A2F3D; box-shadow:0 0 0 1px rgba(255,255,255,.08) }
body.satis .urun2 .tema__ekran{ position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:6px; background:var(--tz) }
body.satis .urun2 .tema__ekran::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(125deg, rgba(255,255,255,.12) 0%, transparent 32%) }
body.satis .urun2 .tema__kare{ position:absolute; inset:0; margin:0; opacity:0; transform:scale(1.04); transition:opacity .9s var(--ease), transform 4.5s linear }
body.satis .urun2 .tema__kare.is-aktif{ opacity:1; transform:scale(1) }
body.satis .urun2 .tema__kare img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top }
body.satis .urun2__taban{
  position:relative; height:clamp(10px,1.4vw,16px); margin:0 -7%; border-radius:2px 2px 16px 16px;
  background:linear-gradient(180deg,#3A3F4D 0%,#20232D 45%,#0E1016 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 24px 34px -14px rgba(0,0,0,.95);
}
body.satis .urun2__taban::before{ content:""; position:absolute; left:50%; top:0; width:16%; height:42%; transform:translateX(-50%); border-radius:0 0 8px 8px; background:#14161D }
/* uçuşan rozetler */
body.satis .urun2__rozet{
  position:absolute; z-index:3; display:inline-flex; align-items:center; gap:.45rem; padding:.55rem .85rem; border-radius:12px;
  font-size:.7rem; font-weight:700; color:#fff; white-space:nowrap;
  background:rgba(14,16,28,.72); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset, 0 18px 34px -14px rgba(0,0,0,.9), 0 0 30px -12px var(--t1);
  transform:translateZ(90px); animation:urunYuz 5.5s ease-in-out infinite;
}
body.satis .urun2__rozet::before{ content:""; width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,var(--t1),var(--t3)); box-shadow:0 0 10px var(--t1) }
body.satis .urun2__rozet--1{ top:20%; right:5%; }
body.satis .urun2__rozet--2{ bottom:27%; left:5%; animation-delay:-2.7s }
@keyframes urunYuz{ 0%,100%{ translate:0 0 } 50%{ translate:0 -9px } }
/* küçük resimler */
body.satis .urun2__kucuk{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.5rem; margin:0; padding:0; width:100% }
body.satis .urun2__kucuk button{ all:unset; box-sizing:border-box; cursor:pointer; position:relative; display:block; aspect-ratio:16/10; border-radius:8px; overflow:hidden; opacity:.45; box-shadow:0 0 0 1px rgba(255,255,255,.14); transition:opacity .3s, transform .3s var(--ease-out), box-shadow .3s }
body.satis .urun2__kucuk button img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; display:block }
body.satis .urun2__kucuk button:hover{ opacity:.85; transform:translateY(-2px) }
body.satis .urun2__kucuk button[aria-selected="true"]{ opacity:1; transform:translateY(-3px); box-shadow:0 0 0 2px var(--t1), 0 10px 20px -8px var(--t1) }
body.satis .urun2__kucuk button:focus-visible{ box-shadow:0 0 0 2px #fff }

/* bilgi */
body.satis .urun2__bilgi{ position:relative; display:flex; flex-direction:column; justify-content:center; gap:1.05rem; padding:clamp(1.6rem,3.2vw,2.8rem) }
body.satis .urun2__ust{ display:flex; align-items:center; justify-content:space-between; gap:1rem }
body.satis .urun2__logo{ height:52px; width:auto; max-width:50%; object-fit:contain; filter:drop-shadow(0 6px 20px color-mix(in srgb, var(--t1) 45%, transparent)) }
body.satis .urun2__tur{ padding:.4rem .75rem; border-radius:999px; font-size:.68rem; font-weight:700; letter-spacing:.06em; color:var(--t1); background:color-mix(in srgb, var(--t1) 12%, transparent); box-shadow:0 0 0 1px color-mix(in srgb, var(--t1) 35%, transparent) inset }
body.satis .urun2__ad{
  margin:0; font-size:clamp(1.8rem,3.2vw,2.7rem); font-weight:800; line-height:1.02; letter-spacing:-.02em;
  background:linear-gradient(100deg,#fff 0%,#fff 35%, var(--t1) 60%, var(--t3) 80%, #fff 100%); background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation:urunParla 7s linear infinite;
}
@keyframes urunParla{ to{ background-position:-220% 0 } }
body.satis .urun2__dahil{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.55rem .8rem }
body.satis .urun2__dahil li{ display:flex; align-items:center; gap:.55rem; padding:.6rem .7rem; border-radius:12px; font-size:.82rem; font-weight:500; color:var(--yazi); background:rgba(255,255,255,.03); box-shadow:0 0 0 1px rgba(255,255,255,.07) inset }
body.satis .urun2__dahil i{ flex:none; width:20px; height:20px; border-radius:7px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--t1),var(--t3)); box-shadow:0 4px 12px -4px var(--t1) }
body.satis .urun2__dahil i svg{ width:12px; height:12px }
body.satis .urun2__sayilar{ display:flex; flex-wrap:wrap; gap:.45rem }
body.satis .urun2__sayilar span{ display:inline-flex; align-items:baseline; gap:.35rem; padding:.36rem .7rem; border-radius:999px; font-size:.72rem; color:var(--yazi2); box-shadow:0 0 0 1px rgba(255,255,255,.09) inset }
body.satis .urun2__sayilar b{ font-family:var(--fd); font-size:.82rem; color:#fff }
/* kasa */
body.satis .urun2__kasa{ display:grid; grid-template-columns:1fr auto; gap:.7rem; margin-top:.4rem }
body.satis .urun2__al{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; justify-content:center; gap:.8rem; min-height:62px; padding:0 1.6rem 0 .6rem; border-radius:18px;
  font-family:var(--fd); font-size:1.05rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fff; text-decoration:none;
  background:linear-gradient(100deg, var(--t1), var(--t2) 50%, var(--t3));
  box-shadow:0 0 0 1px rgba(255,255,255,.25) inset, 0 -10px 20px -12px rgba(0,0,0,.45) inset, 0 22px 44px -16px var(--t1), 0 0 60px -20px var(--t3);
  transition:transform .35s var(--ease-out), box-shadow .35s;
}
body.satis .urun2__al::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 45%, transparent 60%); background-size:250% 100%;
  animation:urunHolo 3.2s ease-in-out infinite;
}
@keyframes urunHolo{ 0%{ background-position:150% 0 } 60%,100%{ background-position:-100% 0 } }
body.satis .urun2__al-ikon{ flex:none; width:46px; height:46px; border-radius:14px; display:grid; place-items:center; color:var(--t1); background:#fff; box-shadow:0 8px 18px -6px rgba(0,0,0,.5) }
body.satis .urun2__al-ikon svg{ width:22px; height:22px }
body.satis .urun2__al:hover{ transform:translateY(-3px); box-shadow:0 0 0 1px rgba(255,255,255,.35) inset, 0 30px 54px -16px var(--t1), 0 0 80px -16px var(--t3) }
body.satis .urun2__al:hover .urun2__al-ikon svg{ animation:urunSepet .7s var(--ease-out) }
@keyframes urunSepet{ 0%{ transform:none } 30%{ transform:translateX(-4px) rotate(-12deg) } 60%{ transform:translateX(5px) rotate(6deg) } 100%{ transform:none } }
body.satis .urun2__al:focus-visible, body.satis .urun2__onizle:focus-visible{ outline:2px solid #fff; outline-offset:3px }
body.satis .urun2__onizle{
  display:flex; align-items:center; gap:.5rem; min-height:62px; padding:0 1.25rem; border-radius:18px;
  font-size:.85rem; font-weight:700; color:#fff; text-decoration:none;
  background:rgba(255,255,255,.04); box-shadow:0 0 0 1px rgba(255,255,255,.16) inset; transition:background .3s, box-shadow .3s;
}
body.satis .urun2__onizle svg{ width:19px; height:19px }
body.satis .urun2__onizle:hover{ background:rgba(255,255,255,.08); box-shadow:0 0 0 1px var(--t1) inset }

@media (max-width:1000px){
  body.satis .urun2{ grid-template-columns:1fr; border-radius:26px }
  body.satis .urun2__sahne{ border-right:0; border-bottom:1px solid rgba(255,255,255,.06) }
}
@media (max-width:640px){
  body.satis .urun2__sahne{ padding:3rem 1rem 1.1rem; gap:.9rem }
  body.satis .urun2__serit{ top:22px; left:-58px; font-size:.55rem }
  body.satis .urun2__rozet{ font-size:.6rem; padding:.4rem .6rem; border-radius:10px }
  body.satis .urun2__rozet--1{ top:12%; right:3% }
  body.satis .urun2__rozet--2{ bottom:22%; left:3% }
  body.satis .urun2__kucuk{ gap:.3rem }
  body.satis .urun2__bilgi{ padding:1.3rem 1.1rem 1.4rem; gap:.85rem }
  body.satis .urun2__logo{ height:40px }
  body.satis .urun2__dahil{ grid-template-columns:1fr }
  body.satis .urun2__kasa{ grid-template-columns:1fr }
  body.satis .urun2__al, body.satis .urun2__onizle{ min-height:56px; justify-content:center }
}
@media (prefers-reduced-motion:reduce){
  body.satis a.hk, body.satis .urun2, body.satis .urun2__rozet, body.satis .urun2__ad, body.satis .urun2__al::before{ animation:none !important }
  body.satis a.hk, body.satis .urun2, body.satis .urun2__laptop{ transform:none !important }
}
/* bölümler arası boşluk daha sıkı; tema başlığı tek satır; yazılım modüllerinde alt yazı yok */
body.satis .section{ padding-block:clamp(2.6rem,5vw,4.4rem) }
body.satis #temalar .bas{ max-width:none }
body.satis .sis__modul span{ display:none }
/* alt bilgi tek satır: logo · yasal · telif (menü üst bilgide ve sayfalarda zaten var) */
body.satis .footer__col:nth-child(2){ display:none !important }
/* zemin katmanı her zaman büyük görünüm alanı kadar: mobilde adres çubuğu açılıp kapanırken alt kenar görünmez */
body.satis::before{ bottom:auto; height:100lvh }
/* uzun e-posta adresi tek satırda */
@media (min-width:901px){ body.satis .ik3__deger--uzun{ font-size:clamp(.85rem,1.1vw,1rem); white-space:nowrap; overflow-wrap:normal } }

/* ==========================================================================
   v6 — Ortalanmış header: logo · Hazır Temalar · Behance · İletişim
   tek cam şerit içinde, ekranın ortasında
   ========================================================================== */
body.satis .header{ padding-block:.9rem !important; border:0 !important }
body.satis .header::before{ display:none }
body.satis .header__inner{
  width:max-content; max-width:calc(100% - 32px); margin-inline:auto; padding:.45rem .5rem .45rem 1.1rem;
  display:flex; align-items:center; justify-content:center; gap:.5rem; border-radius:20px;
  background:linear-gradient(rgba(10,14,26,.78),rgba(10,14,26,.78)) padding-box, linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.04) 40%,rgba(2,231,253,.25)) border-box;
  border:1px solid transparent; -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 20px 50px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.3);
}
body.satis .header .logo{ margin-right:.7rem }
body.satis .header .logo__img, body.satis .header.is-stuck .logo__img{ height:34px !important }
body.satis .nav{ display:flex !important; gap:.5rem; margin:0 !important }
body.satis .nav__tm-ikon{ position:relative; flex:none; width:5px; height:5px; margin:0 .55rem 7px 0; border-radius:1.5px; background:#02E7FD; box-shadow:7px 0 0 #0ABAB5, 0 7px 0 #1769FF, 7px 7px 0 #02E7FD }
body.satis .nav__link:hover .nav__tm-ikon{ animation:tmIkon .7s var(--ease-out) }
@keyframes tmIkon{ 50%{ box-shadow:9px 0 0 #0ABAB5, 0 9px 0 #1769FF, 9px 9px 0 #02E7FD } }
body.satis .header__cta{ margin:0 !important }
@media (max-width:640px){
  body.satis .header{ padding-block:.6rem !important }
  body.satis .header__inner{ width:auto; max-width:none; margin-inline:12px; padding:.35rem .35rem .35rem .7rem; gap:.35rem; border-radius:16px; justify-content:space-between }
  body.satis .header .logo{ margin-right:auto }
  body.satis .header .logo__img, body.satis .header.is-stuck .logo__img{ height:26px !important }
  body.satis .nav{ gap:.35rem }
  body.satis .nav__kisa{ display:none }
  body.satis .nav__link{ min-height:38px; padding:0 .7rem; font-size:.78rem }
  body.satis .nav__tm-ikon{ margin-right:.5rem }
  body.satis .header .btn{ --dg-h:38px; padding:0 .8rem; font-size:.76rem }
}
@media (max-width:360px){ body.satis .nav__tm-ikon{ display:none } }

/* ==========================================================================
   v6 — Hizmet kartları: eğim ve kayma yok; başlıklar büyük harf, simge yok.
   Görsel Tasarım kartında ana sayfadaki akan kolajın küçük hâli.
   ========================================================================== */
body.satis a.hk, body.satis a.hk:hover{ transform:none !important }
body.satis a.hk:hover .hk__ic, body.satis a.hk:hover .hk__cerceve, body.satis a.hk:hover .tg{ transform:none }
body.satis a.hk .hk__ic img:first-child, body.satis a.hk:hover .hk__ic img:first-child{ transform:rotate(-3deg) }
body.satis a.hk .hk__ic img:last-child, body.satis a.hk:hover .hk__ic img:last-child{ transform:rotate(3deg) translateY(4%) }
body.satis .hk__alt{ padding:1.25rem 1.2rem 1.25rem 1.5rem }
body.satis .hk__alt h3{ font-size:clamp(1rem,1.5vw,1.3rem); font-weight:800; letter-spacing:.02em; text-transform:uppercase }
body.satis a.hk:hover .hk__alt h3{ background:linear-gradient(100deg,#fff 30%, color-mix(in srgb, var(--isik) 80%, #fff)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent }

body.satis .hk__gorsel--kolaj{ perspective:900px; perspective-origin:50% 30% }
body.satis .hk__gorsel--kolaj::before{
  z-index:2; background:
    linear-gradient(180deg, #060912 0%, rgba(6,9,18,0) 22%, rgba(6,9,18,0) 70%, #070B16 100%),
    radial-gradient(80% 90% at 50% 50%, transparent 55%, rgba(6,9,18,.85) 100%);
  -webkit-mask-image:none; mask-image:none; background-size:auto;
}
body.satis .mk{
  position:absolute; left:50%; top:-30%; width:135%; height:165%; z-index:1;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px;
  transform:translateX(-50%) rotateX(20deg) rotateZ(-6deg); transform-style:preserve-3d;
}
body.satis .mk__sutun{ min-width:0 }
body.satis .mk__sutun:nth-child(2n){ margin-top:-16% }
body.satis .mk__akis{ display:flex; flex-direction:column; gap:10px; animation:mkAk var(--hiz,40s) linear infinite; will-change:transform }
body.satis .mk__sutun:nth-child(2n) .mk__akis{ animation-direction:reverse }
@keyframes mkAk{ to{ transform:translateY(calc(-50% - 5px)) } }
body.satis .mk__kare{ margin:0; overflow:hidden; border-radius:8px; background:#0E1424; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 16px 30px -16px rgba(0,0,0,.9) }
body.satis .mk__kare img{ display:block; width:100%; height:auto }
@media (prefers-reduced-motion:reduce){ body.satis .mk__akis{ animation:none } }

/* ==========================================================================
   v6 — Hazır tema: kendi sayfasında geniş ürün vitrini.
   Pembe yalnızca temanın kendi görselinde; çerçeve ve düğmeler marka renginde.
   ========================================================================== */
body.satis main > #temalar:first-child{ padding-top:clamp(7.5rem,15vh,9.5rem) }
body.satis .urun2{
  --u1:#1769FF; --u2:#02E7FD;
  display:block; transform:none !important; border-radius:32px;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(23,105,255,.14), transparent 70%) padding-box,
    linear-gradient(180deg,#0A0F1D 0%,#060810 100%) padding-box,
    conic-gradient(from var(--aci), rgba(255,255,255,.06) 0deg, var(--u1) 50deg, var(--u2) 100deg, rgba(255,255,255,.06) 150deg, rgba(255,255,255,.06) 360deg) border-box;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 60px 120px -70px rgba(2,231,253,.5);
}
body.satis .urun2__isik{ background:radial-gradient(560px circle at var(--mx) var(--my), rgba(2,231,253,.08), transparent 65%) }
body.satis .urun2__sahne{ border:0; padding:clamp(3.6rem,6vw,4.8rem) clamp(1.2rem,6vw,5rem) clamp(1.4rem,2.4vw,2rem); justify-items:center }
body.satis .urun2__sahne::after{ background:radial-gradient(50% 50% at 50% 50%, rgba(23,105,255,.55), transparent 70%); opacity:.45 }
body.satis .urun2__laptop{ max-width:860px; transform:none !important }
body.satis .urun2__kapak{ box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 0 0 1px rgba(0,0,0,.6), 0 40px 70px -30px rgba(0,0,0,.95), 0 0 90px -40px var(--u2) }
body.satis .urun2__serit{ background:linear-gradient(100deg, var(--u1), var(--u2)); box-shadow:0 10px 26px -8px rgba(2,231,253,.6); color:#fff }
body.satis .urun2__rozet{ transform:none; box-shadow:0 0 0 1px rgba(255,255,255,.14) inset, 0 18px 34px -14px rgba(0,0,0,.9) }
body.satis .urun2__rozet::before{ background:linear-gradient(135deg,var(--u1),var(--u2)); box-shadow:0 0 10px var(--u2) }
body.satis .urun2__rozet--1{ top:22%; right:max(3%, calc(50% - 470px)) }
body.satis .urun2__rozet--2{ bottom:26%; left:max(3%, calc(50% - 470px)) }
body.satis .urun2__kucuk{ max-width:860px }
body.satis .urun2__kucuk button[aria-selected="true"]{ box-shadow:0 0 0 2px var(--u2), 0 10px 20px -8px var(--u2) }
/* alt bar: kimlik solda, kasa sağda */
body.satis .urun2__bar{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:1.2rem 2rem; flex-wrap:wrap;
  padding:clamp(1.2rem,2.2vw,1.6rem) clamp(1.2rem,3vw,2.4rem); background:rgba(255,255,255,.02);
}
body.satis .urun2__bar::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, transparent, rgba(2,231,253,.4), transparent) }
body.satis .urun2__kimlik{ display:flex; align-items:center; gap:1.1rem; min-width:0 }
body.satis .urun2__kimlik > div{ display:grid; gap:.2rem }
body.satis .urun2__logo{ height:54px; width:auto; max-width:140px; object-fit:contain; filter:none; padding-right:1.1rem; border-right:1px solid rgba(255,255,255,.1) }
body.satis .urun2__ad{ font-size:clamp(1.4rem,2.4vw,2rem); font-weight:800; background:none; -webkit-text-fill-color:#fff; color:#fff; animation:none }
body.satis .urun2__tur{ padding:0; background:none; box-shadow:none; font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--yazi3) }
body.satis .urun2__kasa{ display:flex; align-items:center; gap:.7rem; margin:0 }
body.satis .urun2__al{ background:linear-gradient(100deg, var(--u1), #0ABAB5 60%, var(--u2)); box-shadow:0 0 0 1px rgba(255,255,255,.25) inset, 0 -10px 20px -12px rgba(0,0,0,.45) inset, 0 22px 44px -16px rgba(23,105,255,.9), 0 0 60px -20px var(--u2); min-width:220px }
body.satis .urun2__al:hover{ box-shadow:0 0 0 1px rgba(255,255,255,.35) inset, 0 30px 54px -16px rgba(23,105,255,.9), 0 0 80px -16px var(--u2) }
body.satis .urun2__al-ikon{ color:var(--u1) }
body.satis .urun2__onizle:hover{ box-shadow:0 0 0 1px var(--u2) inset }
@media (max-width:760px){
  body.satis .urun2{ border-radius:24px }
  body.satis .urun2__bar{ flex-direction:column; align-items:stretch }
  body.satis .urun2__kasa{ display:grid; grid-template-columns:auto 1fr }
  body.satis .urun2__al{ min-width:0 }
  body.satis .urun2__logo{ height:42px }
}

/* ==========================================================================
   v6 — Yazılım: sistem kartları; üzerine gelince (dokunmatikte dokununca)
   içerik penceresi açılır
   ========================================================================== */
body.satis .sy .bas{ margin-bottom:clamp(1.8rem,3.5vw,2.6rem) }
body.satis .sy__izgara{ list-style:none; margin:0 auto; padding:0; max-width:1080px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px }
body.satis .sy__kart{
  position:relative; display:flex; align-items:center; gap:.95rem; min-height:76px; padding:.9rem 1rem .9rem .95rem; border-radius:20px; cursor:default; outline:0;
  background:
    radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--r) 10%, transparent), transparent 55%) padding-box,
    linear-gradient(rgba(12,17,30,.92),rgba(12,17,30,.92)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.04)) border-box;
  border:1px solid transparent;
  transition:background .4s, box-shadow .4s;
}
body.satis .sy__kart::before{ content:""; position:absolute; left:18%; right:18%; top:-1px; height:1px; background:linear-gradient(90deg, transparent, var(--r), transparent); opacity:0; transition:opacity .4s }
body.satis .sy__kart:hover, body.satis .sy__kart:focus-within{
  z-index:6;
  background:
    radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--r) 20%, transparent), transparent 60%) padding-box,
    linear-gradient(rgba(12,17,30,.95),rgba(12,17,30,.95)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--r) 70%, transparent), rgba(255,255,255,.06)) border-box;
  box-shadow:0 24px 50px -30px var(--r);
}
body.satis .sy__kart:hover::before, body.satis .sy__kart:focus-within::before{ opacity:1 }
body.satis .sy__kart:focus-visible{ box-shadow:0 0 0 2px var(--r) }
body.satis .sy__ikon{
  position:relative; flex:none; width:46px; height:46px; border-radius:14px; display:grid; place-items:center; color:var(--r);
  background:color-mix(in srgb, var(--r) 12%, transparent); box-shadow:0 0 0 1px color-mix(in srgb, var(--r) 35%, transparent) inset;
  transition:background .35s, color .35s, box-shadow .35s;
}
body.satis .sy__ikon svg{ width:22px; height:22px }
body.satis .sy__kart:hover .sy__ikon, body.satis .sy__kart:focus-within .sy__ikon{ color:#fff; background:var(--r); box-shadow:0 0 0 1px rgba(255,255,255,.25) inset, 0 10px 24px -8px var(--r) }
body.satis .sy__ad{ flex:1; min-width:0; font-family:var(--fd); font-size:.9rem; font-weight:700; line-height:1.25; letter-spacing:-.005em }
/* artı işareti: açılınca eksiye döner */
body.satis .sy__isaret{ position:relative; flex:none; width:28px; height:28px; border-radius:50%; box-shadow:0 0 0 1px rgba(255,255,255,.14) inset; transition:background .35s, box-shadow .35s }
body.satis .sy__isaret::before, body.satis .sy__isaret::after{ content:""; position:absolute; left:50%; top:50%; width:10px; height:1.6px; margin:-.8px 0 0 -5px; border-radius:2px; background:#fff; transition:transform .35s var(--ease-out) }
body.satis .sy__isaret::after{ transform:rotate(90deg) }
body.satis .sy__kart:hover .sy__isaret, body.satis .sy__kart:focus-within .sy__isaret{ background:color-mix(in srgb, var(--r) 22%, transparent); box-shadow:0 0 0 1px color-mix(in srgb, var(--r) 60%, transparent) inset }
body.satis .sy__kart:hover .sy__isaret::after, body.satis .sy__kart:focus-within .sy__isaret::after{ transform:rotate(180deg) }
/* açılır pencere */
body.satis .sy__pop{
  position:absolute; left:0; right:0; top:calc(100% + 12px); z-index:7;
  padding:1rem 1.1rem 1.1rem; border-radius:18px; text-align:left;
  background:rgba(11,15,27,.94); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--r) 40%, transparent) inset, 0 30px 60px -20px rgba(0,0,0,.95), 0 0 60px -30px var(--r);
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.98); transform-origin:50% 0;
  transition:opacity .25s, transform .35s var(--ease-out), visibility 0s .35s; pointer-events:none;
}
body.satis .sy__pop::before{ content:""; position:absolute; top:-6px; left:2.1rem; width:12px; height:12px; transform:rotate(45deg); background:rgba(11,15,27,.98); box-shadow:-1px -1px 0 color-mix(in srgb, var(--r) 40%, transparent) }
body.satis .sy__kart:nth-child(n+7) .sy__pop{ top:auto; bottom:calc(100% + 12px); transform-origin:50% 100%; transform:translateY(8px) scale(.98) }
body.satis .sy__kart:nth-child(n+7) .sy__pop::before{ top:auto; bottom:-6px; box-shadow:1px 1px 0 color-mix(in srgb, var(--r) 40%, transparent) }
body.satis .sy__kart:hover .sy__pop, body.satis .sy__kart:focus-within .sy__pop{ opacity:1; visibility:visible; transform:none; transition:opacity .25s, transform .35s var(--ease-out), visibility 0s }
body.satis .sy__tur{ display:block; font-size:.62rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--r) }
body.satis .sy__pop p{ margin:.45rem 0 0; font-size:.86rem; line-height:1.5; color:var(--yazi2) }
body.satis .sy__cips{ list-style:none; margin:.75rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.35rem }
body.satis .sy__cips li{ padding:.3rem .62rem; border-radius:999px; font-size:.72rem; font-weight:600; color:#E8EEF8; background:color-mix(in srgb, var(--r) 10%, transparent); box-shadow:0 0 0 1px color-mix(in srgb, var(--r) 30%, transparent) inset }
@media (max-width:900px){ body.satis .sy__izgara{ grid-template-columns:repeat(2,minmax(0,1fr)) } body.satis .sy__kart:nth-child(n+7) .sy__pop{ top:calc(100% + 12px); bottom:auto; transform-origin:50% 0 } body.satis .sy__kart:nth-child(n+7) .sy__pop::before{ top:-6px; bottom:auto } body.satis .sy__kart:nth-child(n+8) .sy__pop{ top:auto; bottom:calc(100% + 12px) } body.satis .sy__kart:nth-child(n+8) .sy__pop::before{ top:auto; bottom:-6px } }
@media (max-width:640px){
  body.satis .sy__izgara{ grid-template-columns:1fr; gap:10px }
  body.satis .sy__kart{ flex-wrap:wrap }
  body.satis .sy__pop, body.satis .sy__kart:nth-child(n) .sy__pop{ position:static; flex-basis:100%; display:none; margin-top:.2rem; padding:.2rem .1rem .3rem; background:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; opacity:1; visibility:visible; transform:none; pointer-events:auto }
  body.satis .sy__pop::before{ display:none }
  body.satis .sy__kart:hover .sy__pop, body.satis .sy__kart:focus-within .sy__pop{ display:block }
}

/* ==========================================================================
   v6 — Referans kartları: abartısız ama ince işçilik.
   Fareyi izleyen yumuşak ışık, logodan geçen parıltı, üzerine gelince
   kenarda dönen ışık, Behance hapı dolarak açılır.
   ========================================================================== */
body.satis .lw__kart{
  --aci:0deg; --mx:50%; --my:40%;
  position:relative; isolation:isolate; border-radius:18px; transform:none !important;
  background:
    linear-gradient(#0C111E,#0C111E) padding-box,
    linear-gradient(160deg, rgba(255,255,255,.18), rgba(255,255,255,.04) 45%, rgba(255,255,255,.08)) border-box;
  border:1px solid transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 24px 40px -34px rgba(0,0,0,.9);
  transition:box-shadow .5s var(--ease-out);
}
body.satis .lw__kart:hover{
  background:
    linear-gradient(#0C111E,#0C111E) padding-box,
    conic-gradient(from var(--aci), rgba(255,255,255,.08) 0deg, #1769FF 70deg, #02E7FD 120deg, rgba(255,255,255,.08) 180deg, rgba(255,255,255,.08) 360deg) border-box;
  animation:portalDon 3.5s linear infinite;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 34px 60px -34px rgba(2,231,253,.45);
}
/* fareyi izleyen ışık */
body.satis .lw__kart::after{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit; background:radial-gradient(260px circle at var(--mx) var(--my), rgba(255,255,255,.10), transparent 60%); opacity:0; transition:opacity .4s; mix-blend-mode:screen }
body.satis .lw__kart:hover::after{ opacity:1 }
/* görsel alanı: iç gölge, üst parlaklık ve geçen parıltı */
body.satis .lw__zemin{ isolation:isolate }
body.satis .lw__zemin::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 35%),
    radial-gradient(90% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.35) 100%);
  box-shadow:0 -1px 0 rgba(255,255,255,.06) inset;
}
body.satis .lw__zemin::before{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%; z-index:2; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.18), transparent); transform:skewX(-18deg); opacity:0;
}
body.satis .lw__kart:hover .lw__zemin::before{ animation:lwParilti .9s var(--ease-out) }
@keyframes lwParilti{ 0%{ left:-60%; opacity:1 } 100%{ left:120%; opacity:1 } }
body.satis .lw__logo{ transition:transform .7s var(--ease-out), filter .5s }
body.satis .lw__kart:hover .lw__logo{ transform:scale(1.06); filter:drop-shadow(0 10px 22px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(255,255,255,.12)) }
body.satis .lw__foto{ transition:transform .9s var(--ease-out) }
body.satis .lw__kart:hover .lw__foto{ transform:scale(1.05) }
/* alt şerit */
body.satis .lw__alt{ position:relative; padding:.75rem .8rem .75rem 1rem; border-top:0; background:linear-gradient(180deg, rgba(255,255,255,.025), transparent) }
body.satis .lw__alt b{ font-family:var(--fb); font-size:.86rem; font-weight:700; letter-spacing:.01em; transition:color .3s }
body.satis .lw__be{
  margin-left:auto; display:inline-flex; align-items:center; gap:0; height:28px; padding:0 .65rem; border-radius:999px; color:#9FB3D1;
  box-shadow:0 0 0 1px rgba(255,255,255,.1) inset; transition:background .35s, color .35s, box-shadow .35s, gap .35s var(--ease-out);
}
body.satis .lw__be .be-yazi{ height:.7rem; background:currentColor }
body.satis .lw__be svg{ width:0; height:12px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition:width .35s var(--ease-out) }
body.satis .lw__kart:hover .lw__be, body.satis .lw__kart:focus-visible .lw__be{ gap:.35rem; color:#fff; background:#1769FF; box-shadow:0 0 0 1px rgba(255,255,255,.2) inset, 0 8px 18px -6px rgba(23,105,255,.8) }
body.satis .lw__kart:hover .lw__be svg, body.satis .lw__kart:focus-visible .lw__be svg{ width:12px }
@media (prefers-reduced-motion:reduce){ body.satis .lw__kart:hover{ animation:none } body.satis .lw__kart:hover .lw__zemin::before{ animation:none } }

/* ==========================================================================
   v6 — İletişim: üç karttaki dönen kenar ışığı ve uydular senkron;
   saat kartının noktası da halkada döner
   ========================================================================== */
body.satis .ik3__kart, body.satis .ik3__kart:nth-child(2), body.satis .ik3__kart:nth-child(3){ animation-delay:0s; animation-duration:7s }
body.satis .ik3__uydu, body.satis .ik3__kart:nth-child(2) .ik3__uydu, body.satis .ik3--saat .ik3__uydu{ animation:ik3Don 7s linear infinite; animation-direction:normal; transform:none }
body.satis .nav__link{ gap:0 }
body.satis .nav__kisa{ margin-right:.32em }
body.satis .urun2__al{ white-space:nowrap }
@media (max-width:760px){
  body.satis .urun2__kasa{ grid-template-columns:1fr }
  body.satis .urun2__al{ order:-1; font-size:.98rem }
}
@media (max-width:640px){ body.satis .eyebrow{ white-space:nowrap; font-size:.62rem; letter-spacing:.16em; gap:.55rem } body.satis .eyebrow::before, body.satis .eyebrow::after{ width:18px } }
/* simgenin gölgeyle çizilen sağ sütunu (7px) da boşluğa dahil */
body.satis .nav__tm-ikon{ margin-right:calc(.5rem + 7px) !important }

/* ==========================================================================
   v7 — İletişim: alt yazılar yok; "j" kuyruğu kesilmesin
   ========================================================================== */
body.satis .line-mask{ padding-block:.08em .32em; margin-block:-.08em -.32em }
body.satis .ik3__not{ display:none }

/* ==========================================================================
   v7 — Dünya saatleri: yalnızca şehir ve saat, sade bir liste
   ========================================================================== */
body.satis .dsaat{ list-style:none; margin:-.4rem 0 .9rem; padding:0; width:100%; max-width:250px; display:grid; gap:0; min-height:136px; align-content:center }
body.satis .dsaat li{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.24rem .2rem; border-bottom:1px solid rgba(255,255,255,.06) }
body.satis .dsaat li:last-child{ border-bottom:0 }
body.satis .dsaat span{ font-size:.86rem; font-weight:500; color:var(--yazi2) }
body.satis .dsaat time{ font-family:var(--fd); font-size:.95rem; font-weight:600; color:#fff; font-variant-numeric:tabular-nums; letter-spacing:.02em }
body.satis .dsaat li:first-child span{ color:#fff }
body.satis .dsaat li:first-child time{ color:var(--k1) }
body.satis .ik3--saat .ik3__durum{ margin-top:auto }
@media (max-width:900px){ body.satis .ik3--saat .ik3__durum{ margin-top:.7rem } body.satis .dsaat{ margin-bottom:.7rem } }
/* saat kartı: simge geri geldi; halkada ilerleme yayı ve nokta yok, şehir saatleri başlığın altında */
body.satis .ik3--saat .ik3__yorunge::before{ background:none; -webkit-mask:none; mask:none; border:1px dashed color-mix(in srgb, var(--k1) 45%, transparent); animation:ik3Don 24s linear infinite }
body.satis .ik3--saat .dsaat{ min-height:0; margin:.55rem 0 .3rem; max-width:240px }
body.satis .ik3--saat .dsaat li{ padding:.2rem .15rem }
body.satis .ik3--saat .dsaat span{ font-size:.8rem }
body.satis .ik3--saat .dsaat time{ font-size:.86rem }

/* ==========================================================================
   v8 — İletişim kartları dolu: Telegram'da sohbet, e-postada ileti taslağı
   ========================================================================== */
body.satis .ik3__sohbet, body.satis .ik3__posta{ width:100%; max-width:262px; margin:.55rem 0 .3rem; text-align:left }
/* sohbet */
body.satis .ik3__sohbet{ display:flex; flex-direction:column; gap:.4rem; padding:.7rem; border-radius:16px; background:rgba(14,22,33,.75); box-shadow:0 0 0 1px rgba(255,255,255,.06) inset }
body.satis .ik3__balon{ max-width:88%; padding:.42rem .6rem .45rem; border-radius:12px 12px 12px 4px; background:#182533; color:#E7EEF5; font-size:.74rem; line-height:1.35; opacity:0; transform:translateY(6px) }
body.satis .ik3__balon--ben{ align-self:flex-end; border-radius:12px 12px 4px 12px; background:#2B5278 }
body.satis .ik3__balon time{ float:right; margin:.45rem 0 0 .55rem; font-size:.56rem; color:#8BA2B8 }
body.satis .ik3__balon--ben time{ color:#A9CBEA } body.satis .ik3__balon--ben time::after{ content:" ✓✓"; color:#5EB5F7 }
body.satis .ik3__yaziyor{ align-self:flex-start; display:inline-flex; gap:4px; padding:.5rem .65rem; border-radius:12px 12px 12px 4px; background:#182533; opacity:0 }
body.satis .ik3__yaziyor i{ width:5px; height:5px; border-radius:50%; background:#8BA2B8; animation:tgNokta 1.2s ease-in-out infinite }
body.satis .ik3__yaziyor i:nth-child(2){ animation-delay:.2s } body.satis .ik3__yaziyor i:nth-child(3){ animation-delay:.4s }
body.satis .ik3__kart.is-in .ik3__balon{ animation:tgGel .5s var(--ease-out) forwards }
body.satis .ik3__kart.is-in .ik3__balon:nth-child(1){ animation-delay:.5s } body.satis .ik3__kart.is-in .ik3__balon:nth-child(2){ animation-delay:1.3s }
body.satis .ik3__kart.is-in .ik3__yaziyor{ animation:tgGel .4s var(--ease-out) 2.1s forwards }
/* e-posta taslağı */
body.satis .ik3__posta{ display:flex; flex-direction:column; gap:.5rem; padding:.75rem .8rem .8rem; border-radius:16px; background:rgba(10,24,30,.7); box-shadow:0 0 0 1px rgba(255,255,255,.06) inset }
body.satis .ik3__posta-bas{ display:flex; align-items:center; gap:.45rem; font-size:.7rem; font-weight:700; color:#fff }
body.satis .ik3__posta-bas > i{ width:8px; height:8px; border-radius:50%; background:var(--k1); box-shadow:0 0 8px var(--k1) }
body.satis .ik3__gonder{ margin-left:auto; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; color:#04161A; background:linear-gradient(135deg,var(--k2),var(--k1)); box-shadow:0 6px 14px -6px var(--k1) }
body.satis .ik3__gonder svg{ width:13px; height:13px }
body.satis .ik3__kart:hover .ik3__gonder svg{ animation:ik3Gonder .8s var(--ease-out) }
@keyframes ik3Gonder{ 45%{ transform:translate(8px,-8px); opacity:0 } 46%{ transform:translate(-8px,8px); opacity:0 } 100%{ transform:none; opacity:1 } }
body.satis .ik3__posta-konu{ display:flex; gap:.5rem; padding:.4rem 0; border-block:1px solid rgba(255,255,255,.07); font-size:.74rem; color:#E7EEF5 }
body.satis .ik3__posta-konu b{ font-weight:600; color:var(--yazi3) }
body.satis .ik3__cizgi{ display:block; height:6px; width:0; border-radius:4px; background:linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.05)) }
body.satis .ik3__kart.is-in .ik3__cizgi{ width:var(--w); transition:width 1s var(--ease-out) .5s }
body.satis .ik3__kart.is-in .ik3__cizgi:nth-of-type(2){ transition-delay:.75s } body.satis .ik3__kart.is-in .ik3__cizgi:nth-of-type(3){ transition-delay:1s }
body.satis .ik3__ekler{ display:flex; gap:.35rem; margin-top:.15rem }
body.satis .ik3__ekler span{ display:inline-flex; align-items:center; gap:.3rem; padding:.28rem .55rem; border-radius:8px; font-size:.64rem; font-weight:600; color:#CFF8F6; background:color-mix(in srgb, var(--k1) 10%, transparent); box-shadow:0 0 0 1px color-mix(in srgb, var(--k1) 28%, transparent) inset }
body.satis .ik3__ekler span::before{ content:""; width:7px; height:9px; border-radius:1.5px; background:var(--k1); opacity:.8 }
@media (prefers-reduced-motion:reduce){ body.satis .ik3__balon, body.satis .ik3__yaziyor{ opacity:1; transform:none; animation:none !important } body.satis .ik3__cizgi{ width:var(--w) } }

/* ==========================================================================
   v9 — Başlıklar: yalnızca iki yanı çizgili etiket kalır, altındaki büyük
   cümleler yok. Etiket artık sayfanın/bölümün başlığı.
   ========================================================================== */
body.satis .eyebrow--baslik, body.satis .sayfa-bas .eyebrow--baslik{
  margin:0; font-family:var(--fd); font-size:clamp(1rem,1.5vw,1.3rem); font-weight:700; line-height:1.2;
  letter-spacing:.26em; text-transform:uppercase; color:#fff; gap:1rem; text-wrap:nowrap;
}
body.satis .eyebrow--baslik::before, body.satis .eyebrow--baslik::after{ width:44px; height:2px }
body.satis .sayfa-bas{ padding-top:clamp(7rem,13vh,8.5rem) }
@media (max-width:640px){
  body.satis .eyebrow--baslik, body.satis .sayfa-bas .eyebrow--baslik{ font-size:.92rem; letter-spacing:.2em; gap:.7rem }
  body.satis .eyebrow--baslik::before, body.satis .eyebrow--baslik::after{ width:26px }
}
/* küçük resimler tema sayfa sayısına göre eşit paylaşılır */
body.satis .urun2__kucuk{ display:flex }
body.satis .urun2__kucuk button{ flex:1 1 0; min-width:0 }
/* kolaj ekran genişliğine sığar: soldaki sütunun kartları kenarda kesilmez */
body.satis .gd__duvar{ width:min(94vw,1760px) }
@media (max-width:760px){ body.satis .gd__duvar{ width:110vw; transform:translate3d(calc(-50% + 15vw),0,0) rotateX(14deg) rotateZ(-4deg) } }
/* kolaj iki yanda eşit boşlukla ortada: hiçbir sütun ekran kenarından taşmaz
   (sağa kayma eğimden gelir, 2,6vw sola alınarak dengelenir) */
@media (min-width:761px){
  body.satis .gd__duvar{ width:82vw; transform:translate3d(calc(-50% - 2.6vw + var(--px) * -14px), calc(var(--py) * -10px), 0) rotateX(18deg) rotateZ(-5deg) }
}
@media (min-width:761px) and (max-width:900px){
  body.satis .gd__duvar{ left:50%; right:auto; width:100vw; transform:translate3d(calc(-50% + 7vw),0,0) rotateX(18deg) rotateZ(-5deg) }
}
/* kolaj kareleri görselin kendi oranında: banner'ların kenarı kırpılmaz, kare yine boşluksuz dolu */
body.satis .gd__kare{ aspect-ratio:auto }
body.satis .gd__kare img{ height:auto; object-fit:fill }

/* ==========================================================================
   v10 — Hazır temalar: küçük kartlar yan yana; tıklayınca kart tam genişliğe
   büyür. Geçişi View Transitions çizer (kart, ekran ve alt bar ayrı akar).
   ========================================================================== */
body.satis #temalar .wrap{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1rem,2vw,1.6rem); align-items:start; perspective:none }
body.satis #temalar .bas{ grid-column:1/-1 }
body.satis #temalar .urun2 + .urun2{ margin-top:0 }
body.satis #temalar .urun2.is-acik{ grid-column:1/-1; scroll-margin-top:96px }
body.satis .urun2{ border-radius:26px; cursor:zoom-in }
body.satis .urun2.is-acik{ border-radius:32px; cursor:default }
body.satis .urun2.is-acik .urun2__sahne{ cursor:zoom-out }
/* küçük hâl: yalnızca ekran ve kimlik; rozetler ve küçük resimler gizli */
body.satis .urun2:not(.is-acik) .urun2__sahne{ padding:3rem 1.4rem 1.6rem; gap:0 }
body.satis .urun2:not(.is-acik) .urun2__rozet, body.satis .urun2:not(.is-acik) .urun2__kucuk{ display:none }
body.satis .urun2:not(.is-acik) .urun2__serit{ top:22px; left:-58px; font-size:.54rem; padding:.42rem 0 }
body.satis .urun2:not(.is-acik) .urun2__bar{ padding:1rem 1.2rem; gap:.8rem }
body.satis .urun2:not(.is-acik) .urun2__logo{ height:40px; max-width:96px; padding-right:.8rem }
body.satis .urun2:not(.is-acik) .urun2__ad{ font-size:1.2rem }
body.satis .urun2:not(.is-acik) .urun2__tur{ font-size:.62rem }
body.satis .urun2:not(.is-acik) .urun2__onizle{ min-height:48px; padding:0 .95rem; border-radius:14px; font-size:.78rem }
body.satis .urun2:not(.is-acik) .urun2__al{ min-width:0; min-height:48px; padding:0 1.1rem 0 .4rem; border-radius:14px; font-size:.82rem; gap:.55rem }
body.satis .urun2:not(.is-acik) .urun2__al-ikon{ width:36px; height:36px; border-radius:11px }
body.satis .urun2:not(.is-acik) .urun2__al-ikon svg{ width:18px; height:18px }
body.satis .urun2:not(.is-acik):hover{ box-shadow:0 1px 0 rgba(255,255,255,.1) inset, 0 50px 100px -50px rgba(2,231,253,.55) }
body.satis .urun2:not(.is-acik):hover .urun2__kapak{ transform:translateY(-4px) }
body.satis .urun2__kapak{ transition:transform .5s var(--ease-out) }

/* büyüt / küçült düğmesi: sağ üst köşede */
body.satis .urun2__buyut{
  all:unset; box-sizing:border-box; position:absolute; z-index:5; top:14px; right:14px; cursor:pointer;
  display:inline-flex; align-items:center; gap:.5rem; height:40px; padding:0 .8rem 0 1rem; border-radius:12px;
  font-size:.74rem; font-weight:700; color:#fff;
  background:rgba(12,16,30,.7); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px rgba(255,255,255,.16) inset, 0 12px 26px -12px rgba(0,0,0,.9);
  transition:background .3s, box-shadow .3s;
}
body.satis .urun2__buyut svg{ width:16px; height:16px; transition:transform .45s var(--ease-out) }
body.satis .urun2__b-kapa{ display:none }
body.satis .urun2.is-acik .urun2__b-ac{ display:none } body.satis .urun2.is-acik .urun2__b-kapa{ display:inline }
body.satis .urun2:hover .urun2__buyut, body.satis .urun2__buyut:focus-visible{ background:linear-gradient(100deg,#1769FF,#02E7FD); box-shadow:0 0 0 1px rgba(255,255,255,.25) inset, 0 12px 26px -10px rgba(2,231,253,.7) }
body.satis .urun2:hover .urun2__buyut svg{ transform:scale(1.15) }
body.satis .urun2__buyut:focus-visible{ outline:2px solid #fff; outline-offset:2px }

/* geçiş: kart yumuşak bir yayla büyür, içerik akarken hafifçe solar */
::view-transition-group(*){ animation-duration:.6s; animation-timing-function:cubic-bezier(.22,1,.36,1) }
::view-transition-old(*), ::view-transition-new(*){ height:100%; object-fit:cover; overflow:clip }
@media (prefers-reduced-motion:reduce){ ::view-transition-group(*){ animation:none } }

@media (max-width:900px){
  body.satis #temalar .wrap{ grid-template-columns:minmax(0,1fr) }
  body.satis .urun2:not(.is-acik) .urun2__bar{ flex-direction:row; align-items:center; flex-wrap:wrap }
}
@media (max-width:640px){
  body.satis .urun2:not(.is-acik) .urun2__sahne{ padding:2.8rem 1rem 1.2rem }
  body.satis .urun2__buyut{ top:10px; right:10px; height:36px; padding:0 .7rem }
  body.satis .urun2:not(.is-acik) .urun2__kasa{ display:grid; grid-template-columns:auto 1fr; width:100% }
}
/* büyüyen kart başlığın hemen altına geçer, diğerleri altında küçük kalır */
body.satis #temalar .bas{ order:-2 }
body.satis #temalar .urun2.is-acik{ order:-1 }
/* kartta eğim yok: 3B katman gereksiz ve ekran görselini boş çizdirebiliyor */
body.satis .urun2{ transform-style:flat }

/* ==========================================================================
   v11 — Sosyal medya kartı: Instagram gönderisi ve canlı etkileşim akışı
   ========================================================================== */
body.satis .ig{ position:absolute; inset:7% 6%; z-index:1; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:4%; align-items:center; font-family:var(--fb) }
body.satis .ig__post{ display:flex; flex-direction:column; border-radius:14px; overflow:hidden; background:#0E1220; box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 40px 70px -30px rgba(0,0,0,.95), 0 0 80px -25px var(--isik) }
body.satis .ig__bas{ display:flex; align-items:center; gap:.45rem; padding:.45rem .55rem }
body.satis .ig__avatar{ flex:none; width:24px; height:24px; border-radius:50%; padding:1.5px; background:conic-gradient(#F58529,#DD2A7B,#8134AF,#515BD4,#F58529) }
body.satis .ig__avatar img{ width:100%; height:100%; border-radius:50%; object-fit:contain; background:#14111C; border:1.5px solid #0E1220 }
body.satis .ig__ad{ display:grid; line-height:1.15; min-width:0 }
body.satis .ig__ad b{ font-size:.66rem; color:#fff } body.satis .ig__ad small{ font-size:.54rem; color:#8E96A8 }
body.satis .ig__nokta{ margin-left:auto; display:flex; gap:2px } body.satis .ig__nokta i{ width:3px; height:3px; border-radius:50%; background:#A9B2C5 }
body.satis .ig__resim{ position:relative; aspect-ratio:1; overflow:hidden; background:#0A0D16 }
body.satis .ig__k{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
body.satis .ig__k--2{ animation:igDegis 9s ease-in-out infinite }
@keyframes igDegis{ 0%,42%{ opacity:0 } 50%,92%{ opacity:1 } 100%{ opacity:0 } }
body.satis .ig__kalp{ position:absolute; left:50%; top:50%; width:34%; color:#fff; transform:translate(-50%,-50%) scale(0); opacity:0; filter:drop-shadow(0 6px 16px rgba(0,0,0,.5)); animation:igKalp 4.5s var(--ease-out) infinite }
body.satis .ig__kalp svg{ display:block; width:100%; height:auto }
@keyframes igKalp{ 0%,58%{ transform:translate(-50%,-50%) scale(0); opacity:0 } 64%{ transform:translate(-50%,-50%) scale(1.15); opacity:1 } 70%{ transform:translate(-50%,-50%) scale(.95); opacity:1 } 80%{ transform:translate(-50%,-50%) scale(1); opacity:1 } 92%,100%{ transform:translate(-50%,-62%) scale(1); opacity:0 } }
body.satis .ig__eylem{ display:flex; gap:.5rem; padding:.45rem .55rem .2rem; color:#E7EBF3 }
body.satis .ig__e{ width:16px; height:16px } body.satis .ig__e svg{ width:100%; height:100%; display:block }
body.satis .ig__e--kalp{ color:#FF3B5C; animation:igAtim 4.5s var(--ease-out) infinite }
@keyframes igAtim{ 0%,60%{ transform:none } 66%{ transform:scale(1.3) } 74%,100%{ transform:none } }
body.satis .ig__e--kaydet{ margin-left:auto }
body.satis .ig__begeni{ padding:0 .55rem .5rem; font-size:.6rem; color:#C8CEDB } body.satis .ig__begeni b{ color:#fff }

body.satis .ig__akis{ display:flex; flex-direction:column; gap:.45rem }
body.satis .ig__olay{
  display:flex; align-items:center; gap:.55rem; padding:.5rem .6rem; border-radius:12px; color:#E7EEF5;
  background:rgba(14,20,34,.85); box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 16px 30px -18px rgba(0,0,0,.9);
  opacity:0; transform:translateX(10px);
}
body.satis .ig__olay span{ display:grid; line-height:1.15; font-size:.6rem; color:#9BA6BA }
body.satis .ig__olay b{ font-family:var(--fd); font-size:.82rem; font-weight:700; color:#fff }
body.satis .ig__oi{ flex:none; width:26px; height:26px; border-radius:9px; display:grid; place-items:center; color:#fff }
body.satis .ig__oi svg{ width:14px; height:14px }
body.satis .ig__oi--kalp{ background:linear-gradient(135deg,#FF3B5C,#DD2A7B) }
body.satis .ig__oi--kisi{ background:linear-gradient(135deg,#8134AF,#515BD4) }
body.satis .ig__oi--goz{ background:linear-gradient(135deg,#0ABAB5,#1769FF) }
body.satis .ig__olay--plan{ flex-direction:column; align-items:stretch; gap:.4rem }
body.satis .ig__plan-bas{ display:flex !important; align-items:baseline; justify-content:space-between }
body.satis .ig__plan-bas b{ font-size:.74rem; color:var(--isik) }
body.satis .ig__gunler{ display:grid !important; grid-template-columns:repeat(7,1fr); gap:3px }
body.satis .ig__gunler i{ height:6px; border-radius:2px; background:rgba(255,255,255,.08) }
body.satis .ig__gunler i.is-dolu{ background:color-mix(in srgb, var(--isik) 55%, transparent) }
body.satis .ig__gunler i.is-bugun{ background:var(--isik); box-shadow:0 0 8px var(--isik) }
body.satis .is-in .ig__olay{ animation:tgGel .5s var(--ease-out) forwards }
body.satis .is-in .ig__olay:nth-child(1){ animation-delay:.3s } body.satis .is-in .ig__olay:nth-child(2){ animation-delay:.9s }
body.satis .is-in .ig__olay:nth-child(3){ animation-delay:1.5s } body.satis .is-in .ig__olay:nth-child(4){ animation-delay:2.1s }

/* ==========================================================================
   v11 — Web sitesi giydirme kartı: iskelet siteye tasarım giydirilir
   (önce / sonra çizgisi soldan sağa kayar, sonra geri döner)
   ========================================================================== */
body.satis .wg{ position:absolute; inset:8% 8% 0; z-index:1; display:flex; flex-direction:column; border-radius:12px 12px 0 0; overflow:hidden; background:#0B1020; box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 40px 70px -30px rgba(0,0,0,.95), 0 0 90px -25px var(--isik) }
body.satis .wg__bar{ flex:none; display:flex; align-items:center; gap:.6rem; height:24px; padding:0 .6rem; background:#141B2B; border-bottom:1px solid rgba(255,255,255,.07) }
body.satis .wg__noktalar{ display:flex; gap:4px } body.satis .wg__noktalar i{ width:7px; height:7px; border-radius:50%; background:#FF5F57 }
body.satis .wg__noktalar i:nth-child(2){ background:#8A93A6 } body.satis .wg__noktalar i:nth-child(3){ background:#28C840 }
body.satis .wg__url{ flex:1; max-width:60%; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:.3rem; height:15px; border-radius:6px; background:rgba(255,255,255,.06); font-size:.56rem; color:#A9B2C5 }
body.satis .wg__url svg{ width:9px; height:9px; color:#28C840 }
body.satis .wg__ekran{ position:relative; flex:1; min-height:0; overflow:hidden; --sil:0% }
body.satis .wg__son{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top }
/* iskelet katman: gri bloklar; sağdan sola daralarak tasarımı ortaya çıkarır */
body.satis .wg__iskelet{ position:absolute; inset:0; padding:5% 5%; background:#F1F3F7; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:9% 38% 26% auto; gap:5% 3%; align-content:start; clip-path:inset(0 0 0 0); animation:wgSil 7s cubic-bezier(.65,0,.35,1) infinite }
body.satis .wg__s{ border-radius:5px; background:#D9DEE7 }
body.satis .wg__s--menu{ grid-column:1/-1; background:linear-gradient(90deg,#C9D0DC 18%, transparent 18% 60%, #D9DEE7 60% 66%, transparent 66% 70%, #D9DEE7 70% 76%, transparent 76% 80%, #D9DEE7 80% 86%, transparent 86% 90%, #BFC7D5 90%) }
body.satis .wg__s--hero{ grid-column:1/-1; background:linear-gradient(135deg,#D3D9E3,#E3E7EE); position:relative }
body.satis .wg__s--hero::before{ content:""; position:absolute; left:7%; top:28%; width:38%; height:14%; border-radius:4px; background:#BFC7D5; box-shadow:0 calc(100% + 120%) 0 -0px #CBD2DD }
body.satis .wg__s--satir{ grid-column:1/3; height:8px } body.satis .wg__s--satir2{ grid-column:1/2; height:8px; background:#E1E5EC }
@keyframes wgSil{ 0%,12%{ clip-path:inset(0 0 0 0) } 50%,80%{ clip-path:inset(0 0 0 100%) } 95%,100%{ clip-path:inset(0 0 0 0) } }
/* kayan çizgi ve tutamak */
body.satis .wg__cizgi{ position:absolute; top:0; bottom:0; left:0; width:2px; margin-left:-1px; background:#fff; box-shadow:0 0 14px 2px var(--isik); animation:wgCizgi 7s cubic-bezier(.65,0,.35,1) infinite }
body.satis .wg__cizgi i{ position:absolute; top:50%; left:50%; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%; background:#fff; box-shadow:0 6px 18px -4px rgba(0,0,0,.6), 0 0 0 4px color-mix(in srgb, var(--isik) 35%, transparent) }
body.satis .wg__cizgi i::before, body.satis .wg__cizgi i::after{ content:""; position:absolute; top:50%; width:0; height:0; margin-top:-4px; border:4px solid transparent }
body.satis .wg__cizgi i::before{ left:3px; border-right-color:#7A5CFF } body.satis .wg__cizgi i::after{ right:3px; border-left-color:#7A5CFF }
@keyframes wgCizgi{ 0%,12%{ left:0%; opacity:0 } 14%{ opacity:1 } 50%{ left:100%; opacity:1 } 52%,80%{ left:100%; opacity:0 } 82%{ opacity:1 } 95%{ left:0%; opacity:1 } 97%,100%{ left:0%; opacity:0 } }
/* önce / sonra etiketleri ve ilerleme */
body.satis .wg__cip{ position:absolute; top:calc(24px + 8px); z-index:2; padding:.22rem .5rem; border-radius:6px; font-size:.54rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase }
body.satis .wg__cip--once{ right:8px; color:#3B4457; background:rgba(255,255,255,.85); animation:wgOnce 7s infinite }
body.satis .wg__cip--sonra{ left:8px; color:#fff; background:var(--isik); opacity:0; animation:wgSonra 7s infinite }
@keyframes wgOnce{ 0%,40%{ opacity:1 } 46%,90%{ opacity:0 } 96%,100%{ opacity:1 } }
@keyframes wgSonra{ 0%,30%{ opacity:0 } 36%,84%{ opacity:1 } 90%,100%{ opacity:0 } }
body.satis .wg__ilerleme{ position:absolute; left:50%; bottom:10px; z-index:2; transform:translateX(-50%); display:flex; align-items:center; gap:.5rem; padding:.35rem .6rem; border-radius:10px; white-space:nowrap; font-size:.58rem; font-weight:700; color:#fff; background:rgba(12,16,30,.82); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 0 0 1px rgba(255,255,255,.12) inset }
body.satis .wg__ilerleme i{ position:relative; width:70px; height:5px; border-radius:3px; background:rgba(255,255,255,.12); overflow:hidden }
body.satis .wg__ilerleme b{ position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg,var(--isik),#02E7FD); transform-origin:left; animation:wgIler 7s cubic-bezier(.65,0,.35,1) infinite }
@keyframes wgIler{ 0%,12%{ transform:scaleX(0) } 50%,80%{ transform:scaleX(1) } 95%,100%{ transform:scaleX(0) } }

@media (max-width:640px){
  body.satis .ig{ inset:6% 4%; gap:3% }
  body.satis .ig__olay{ padding:.38rem .45rem; gap:.4rem }
  body.satis .ig__olay b{ font-size:.7rem } body.satis .ig__olay span{ font-size:.52rem }
  body.satis .ig__oi{ width:22px; height:22px } body.satis .ig__oi svg{ width:12px; height:12px }
  body.satis .ig__olay--plan{ display:none }
  body.satis .wg{ inset:7% 5% 0 }
}
@media (prefers-reduced-motion:reduce){
  body.satis .ig__k--2, body.satis .ig__kalp, body.satis .ig__e--kalp, body.satis .wg__iskelet, body.satis .wg__cizgi, body.satis .wg__cip, body.satis .wg__ilerleme b{ animation:none !important }
  body.satis .ig__olay{ opacity:1; transform:none; animation:none !important }
  body.satis .wg__iskelet{ clip-path:inset(0 0 0 100%) } body.satis .wg__cizgi{ display:none }
}
/* gönderi sahneye sığar: görsel alanı kalan yüksekliği alır */
body.satis .ig{ align-items:stretch }
body.satis .ig__post{ height:100%; min-height:0 }
body.satis .ig__resim{ flex:1; min-height:0; aspect-ratio:auto }
body.satis .ig__akis{ justify-content:center }
/* gönderi görseli: yatay banner kırpılmaz; arkada aynı görselin bulanık hâli boşluğu doldurur */
body.satis .ig__k{ display:block; overflow:hidden; background:#120A05 }
body.satis span.ig__k--2{ animation:igDegis 9s ease-in-out infinite }
body.satis .ig__bg{ position:absolute; inset:-10%; width:120%; height:120%; object-fit:cover; filter:blur(14px) brightness(.55) saturate(1.2) }
body.satis .ig__on{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain }
body.satis .ig__ad b{ display:inline-flex; align-items:center; gap:3px }
body.satis .ig__tik{ display:inline-block; width:11px; height:11px } body.satis .ig__tik svg{ display:block; width:100%; height:100% }
body.satis .ig__avatar img{ object-fit:cover; background:#000 }

/* ==========================================================================
   v12 — Bot kartı: günlük rapor mesajları tek tek gelir
   ========================================================================== */
body.satis .tg__govde{ overflow:hidden; justify-content:flex-end }
body.satis .tg__balon span{ display:block; font-size:.62rem; color:#8BA2B8; margin-bottom:.1rem }
body.satis .tg__balon b{ font-family:var(--fd); font-size:.86rem; font-weight:700; color:#fff }
body.satis .tg__balon--bas{ background:linear-gradient(100deg,#1F3A57,#182533); box-shadow:0 0 0 1px rgba(42,171,238,.35) inset }
body.satis .tg__balon--bas b{ font-family:var(--fb); font-size:.74rem; color:#5EB5F7 }
body.satis .tg__balon ol{ margin:.2rem 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:.25rem }
body.satis .tg__balon ol li{ padding:.12rem .4rem; border-radius:6px; font-size:.62rem; font-weight:700; color:#fff; background:rgba(255,255,255,.07); counter-increment:cs }
body.satis .tg__balon ol li::before{ content:counter(cs) ". "; color:#5EB5F7 }
body.satis .tg__balon--ok b{ color:#4DCB70 }
body.satis .tg__balon--ok b::after{ content:" ✓" }
body.satis .tg__balon em{ display:block; font-style:normal; font-size:.6rem; color:#8BA2B8 }
body.satis .tg__balon--canli{ animation:tgGel .45s var(--ease-out) forwards }
body.satis .tg__balon.is-gidiyor{ transition:opacity .5s, transform .5s; opacity:0 !important; transform:translateY(-10px) !important }
body.satis .tg__govde[data-rapor] .tg__yaziyor{ opacity:1; animation:none }
/* JavaScript yoksa ya da azaltılmış harekette: ilk mesajlar sabit görünür */
@media (prefers-reduced-motion:reduce){ body.satis .tg__govde[data-rapor] .tg__balon{ opacity:1; transform:none } }

/* ==========================================================================
   v12 — Web giydirme: tasarım giyince ekran sayfayı aşağı kaydırır,
   ana sayfanın tamamı görünür (9 saniyelik tur)
   ========================================================================== */
body.satis .wg__son{ object-fit:cover; object-position:50% 0%; animation:wgKay 9s cubic-bezier(.45,0,.25,1) infinite }
body.satis .wg__iskelet{ animation:wgSil2 9s cubic-bezier(.65,0,.35,1) infinite }
body.satis .wg__cizgi{ animation:wgCizgi2 9s cubic-bezier(.65,0,.35,1) infinite }
body.satis .wg__ilerleme b{ animation:wgIler2 9s cubic-bezier(.65,0,.35,1) infinite }
body.satis .wg__cip--once{ animation:wgOnce2 9s infinite }
body.satis .wg__cip--sonra{ animation:wgSonra2 9s infinite }
@keyframes wgSil2{ 0%,8%{ clip-path:inset(0 0 0 0) } 36%,86%{ clip-path:inset(0 0 0 100%) } 97%,100%{ clip-path:inset(0 0 0 0) } }
@keyframes wgCizgi2{ 0%,8%{ left:0%; opacity:0 } 10%{ opacity:1 } 36%{ left:100%; opacity:1 } 38%,86%{ left:100%; opacity:0 } 88%{ opacity:1 } 97%{ left:0%; opacity:1 } 99%,100%{ left:0%; opacity:0 } }
@keyframes wgIler2{ 0%,8%{ transform:scaleX(0) } 36%,86%{ transform:scaleX(1) } 97%,100%{ transform:scaleX(0) } }
@keyframes wgOnce2{ 0%,26%{ opacity:1 } 32%,90%{ opacity:0 } 96%,100%{ opacity:1 } }
@keyframes wgSonra2{ 0%,24%{ opacity:0 } 30%,86%{ opacity:1 } 90%,100%{ opacity:0 } }
@keyframes wgKay{ 0%,40%{ object-position:50% 0% } 72%,80%{ object-position:50% 100% } 94%,100%{ object-position:50% 0% } }
@media (prefers-reduced-motion:reduce){ body.satis .wg__son{ animation:none } }
/* rapor balonları: sıra numarasına bağlı gecikme yok (eskiler silindikçe yeniden başlamasın) */
body.satis .is-in [data-rapor] .tg__balon, body.satis [data-rapor] .tg__balon--canli{ animation:tgGel .45s var(--ease-out) forwards; animation-delay:0s }
body.satis [data-rapor] .tg__balon{ flex:none }

/* ==========================================================================
   v13 — İletişim: Telegram bildirimleri düşer; e-posta daktiloyla yazılıp gönderilir
   ========================================================================== */
body.satis .ik3__bildirimler{
  width:100%; max-width:262px; margin:.55rem 0 .3rem; text-align:left; display:flex; flex-direction:column; gap:.45rem;
  padding:.65rem .6rem .7rem; border-radius:18px; background:linear-gradient(180deg,rgba(23,105,255,.16),rgba(14,22,33,.75) 45%); box-shadow:0 0 0 1px rgba(255,255,255,.07) inset
}
body.satis .ik3__bl-ust{ display:flex; align-items:baseline; justify-content:space-between; padding:0 .2rem .1rem }
body.satis .ik3__bl-ust b{ font-family:var(--fd); font-size:1.05rem; font-weight:700; color:#fff; font-variant-numeric:tabular-nums }
body.satis .ik3__bl-ust span{ font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#8BA2B8 }
body.satis .ik3__bl-liste{ display:flex; flex-direction:column; gap:.4rem; height:172px; overflow:hidden }
body.satis .ik3__bl{
  flex:none; display:flex; align-items:flex-start; gap:.5rem; padding:.5rem .55rem; border-radius:14px;
  background:rgba(30,40,58,.78); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 10px 22px -12px rgba(0,0,0,.8);
  animation:ik3Bildirim .6s cubic-bezier(.2,1.3,.4,1) both;
}
body.satis .ik3__bl:first-child{ box-shadow:0 0 0 1px rgba(42,171,238,.45) inset, 0 14px 28px -12px rgba(42,171,238,.55) }
@keyframes ik3Bildirim{ from{ opacity:0; transform:translateY(-70%) scale(.92) } to{ opacity:1; transform:none } }
body.satis .ik3__bl-ikon{ flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; color:#fff; background:linear-gradient(140deg,#2AABEE,#1769FF) }
body.satis .ik3__bl-ikon svg{ width:14px; height:14px }
body.satis .ik3__bl--biz .ik3__bl-ikon{ background:linear-gradient(140deg,#02E7FD,#0ABAB5) }
body.satis .ik3__bl-metin{ flex:1; min-width:0; display:grid; gap:.1rem }
body.satis .ik3__bl-metin b{ font-size:.62rem; font-weight:700; color:#fff }
body.satis .ik3__bl-metin span{ font-size:.66rem; line-height:1.3; color:#C9D3E2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
body.satis .ik3__bl small{ flex:none; font-size:.56rem; color:#8BA2B8 }

/* e-posta: alanlar ve daktilo imleci */
body.satis .ik3__alan{ display:flex; align-items:center; gap:.5rem; min-height:26px; padding:.32rem 0; border-bottom:1px solid rgba(255,255,255,.07); font-size:.74rem; color:#E7EEF5; white-space:nowrap; overflow:hidden }
body.satis .ik3__alan b{ flex:none; width:2.6rem; font-weight:600; color:var(--yazi3) }
body.satis .ik3__govde-m{ display:block; min-height:3.6em; padding-top:.35rem; font-size:.7rem; line-height:1.45; color:#C9D3E2 }
body.satis [data-yaz].is-yaziyor::after{ content:""; display:inline-block; width:2px; height:1em; margin-left:1px; vertical-align:-2px; background:var(--k1); animation:ik3Imlec .8s steps(1) infinite }
@keyframes ik3Imlec{ 50%{ opacity:0 } }
body.satis .ik3__posta .ik3__gonder{ transition:transform .3s var(--ease-out), box-shadow .3s }
body.satis .ik3__posta.is-hazir .ik3__gonder{ transform:scale(1.18); box-shadow:0 0 0 6px color-mix(in srgb, var(--k1) 25%, transparent), 0 8px 18px -6px var(--k1) }
body.satis .ik3__posta.is-gitti .ik3__gonder svg{ animation:ik3Gonder .8s var(--ease-out) }
body.satis .ik3__posta{ position:relative }
body.satis .ik3__gitti{
  position:absolute; left:50%; bottom:.7rem; display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .7rem; border-radius:999px;
  font-size:.66rem; font-weight:800; color:#04161A; background:var(--k1); box-shadow:0 10px 24px -8px var(--k1);
  opacity:0; transform:translate(-50%,10px); transition:opacity .35s, transform .45s cubic-bezier(.2,1.3,.4,1); pointer-events:none
}
body.satis .ik3__gitti svg{ width:12px; height:12px }
body.satis .ik3__posta.is-gitti .ik3__gitti{ opacity:1; transform:translate(-50%,0) }
body.satis .ik3__posta.is-gitti .ik3__alan, body.satis .ik3__posta.is-gitti .ik3__govde-m{ opacity:.35; transition:opacity .4s }
@media (prefers-reduced-motion:reduce){ body.satis .ik3__bl{ animation:none } }
/* en alttaki bildirim yumuşakça solar; gönderildi rozetinin altındaki metin geri çekilir */
body.satis .ik3__bl-liste{ -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent); mask-image:linear-gradient(180deg,#000 72%,transparent) }
body.satis .ik3__posta.is-gitti .ik3__alan, body.satis .ik3__posta.is-gitti .ik3__govde-m{ opacity:.12 }
body.satis .ik3__gitti{ bottom:auto; top:55%; padding:.45rem .9rem; font-size:.72rem }

/* ==========================================================================
   v14 — Sosyal medya kartı VICE konseptinde: neon pembe / mor; sayılar canlı artar
   ========================================================================== */
body.satis .ig__k{ background:#1A0820 }
body.satis .ig__bg{ filter:blur(14px) brightness(.6) saturate(1.4) }
body.satis .ig__post{ background:#120A1C; box-shadow:0 0 0 1px rgba(255,47,154,.25), 0 40px 70px -30px rgba(0,0,0,.95), 0 0 90px -25px #FF2F9A }
body.satis .ig__olay{ background:rgba(28,12,36,.85); box-shadow:0 0 0 1px rgba(255,47,154,.16) inset, 0 16px 30px -18px rgba(0,0,0,.9) }
body.satis .ig__oi--kalp{ background:linear-gradient(135deg,#FF2F9A,#FF4F74) }
body.satis .ig__oi--kisi{ background:linear-gradient(135deg,#8B5CFF,#FF2F9A) }
body.satis .ig__oi--goz{ background:linear-gradient(135deg,#FF4F74,#8B5CFF) }
body.satis .ig__plan-bas b{ color:#FF4F9A }
body.satis .ig__gunler i.is-dolu{ background:rgba(255,47,154,.5) }
body.satis .ig__gunler i.is-bugun{ background:#FF2F9A; box-shadow:0 0 8px #FF2F9A }
body.satis [data-sayac]{ display:inline-block; font-variant-numeric:tabular-nums }
body.satis [data-sayac].is-artti{ animation:igArtti .5s var(--ease-out) }
@keyframes igArtti{ 0%{ transform:translateY(0) } 35%{ transform:translateY(-3px); color:#FF6FB5; text-shadow:0 0 12px rgba(255,47,154,.7) } 100%{ transform:none } }
body.satis .ig__olay:has(.is-artti) .ig__oi{ animation:igIkon .5s var(--ease-out) }
@keyframes igIkon{ 40%{ transform:scale(1.18) } }
/* yükselen kalpler */
body.satis .ig__resim::after{
  content:"♥ ♥ ♥"; position:absolute; right:10%; bottom:6%; font-size:.9rem; letter-spacing:.4rem; color:#FF2F9A; text-shadow:0 0 8px rgba(255,47,154,.8);
  writing-mode:vertical-rl; opacity:0; animation:igYuksel 2.8s ease-out infinite; pointer-events:none;
}
@keyframes igYuksel{ 0%{ opacity:0; transform:translateY(20px) } 25%{ opacity:1 } 100%{ opacity:0; transform:translateY(-70px) } }
@media (prefers-reduced-motion:reduce){ body.satis .ig__resim::after{ display:none } }

/* sistem kartları: açık olan yalnızca .is-acik (betik yönetir); hover/odak kendi başına açmaz */
body.satis .sy__izgara .sy__kart:not(.is-acik) .sy__pop{ opacity:0; visibility:hidden; transform:translateY(-8px) scale(.98); transition:opacity .2s, transform .3s var(--ease-out), visibility 0s .3s }
body.satis .sy__izgara .sy__kart:not(.is-acik):nth-child(n+7) .sy__pop{ transform:translateY(8px) scale(.98) }
body.satis .sy__izgara .sy__kart.is-acik .sy__pop{ opacity:1; visibility:visible; transform:none; transition:opacity .25s, transform .35s var(--ease-out), visibility 0s }
body.satis .sy__izgara .sy__kart:not(.is-acik){ z-index:auto }
body.satis .sy__izgara .sy__kart:not(.is-acik):not(:hover){ background:radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--r) 10%, transparent), transparent 55%) padding-box, linear-gradient(rgba(12,17,30,.92),rgba(12,17,30,.92)) padding-box, linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.04)) border-box; box-shadow:none }
body.satis .sy__izgara .sy__kart:not(.is-acik):not(:hover)::before{ opacity:0 }
body.satis .sy__izgara .sy__kart:not(.is-acik):not(:hover) .sy__ikon{ color:var(--r); background:color-mix(in srgb, var(--r) 12%, transparent); box-shadow:0 0 0 1px color-mix(in srgb, var(--r) 35%, transparent) inset }
body.satis .sy__izgara .sy__kart:not(.is-acik) .sy__isaret::after{ transform:rotate(90deg) }
body.satis .sy__izgara .sy__kart.is-acik{ z-index:6 }
body.satis .sy__izgara .sy__kart.is-acik .sy__isaret::after{ transform:rotate(180deg) }
body.satis .sy__kart{ cursor:pointer }
@media (max-width:640px){
  body.satis .sy__izgara .sy__kart:not(.is-acik) .sy__pop{ display:none }
  body.satis .sy__izgara .sy__kart.is-acik .sy__pop{ display:block }
}

/* ==========================================================================
   Çerez penceresi: sol altta küçük cam kart
   ========================================================================== */
body.satis .cerez{
  position:fixed; z-index:1200; left:16px; bottom:16px; width:min(380px, calc(100vw - 32px));
  display:grid; gap:.8rem; padding:1rem 1.05rem; border-radius:18px; font-family:var(--fb);
  background:rgba(12,16,30,.92); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 30px 60px -20px rgba(0,0,0,.9), 0 0 60px -30px #02E7FD;
  opacity:0; transform:translateY(16px); transition:opacity .35s, transform .45s var(--ease-out);
}
body.satis .cerez.is-acik{ opacity:1; transform:none }
body.satis .cerez__metin{ margin:0; font-size:.82rem; line-height:1.5; color:var(--yazi2) }
body.satis .cerez__metin b{ display:block; margin-bottom:.15rem; font-family:var(--fd); font-size:.9rem; color:#fff }
body.satis .cerez__metin a{ color:#02E7FD; text-decoration:underline; text-underline-offset:2px }
body.satis .cerez__eylem{ display:flex; gap:.5rem; justify-content:flex-end }
body.satis .cerez__eylem button{ all:unset; box-sizing:border-box; cursor:pointer; min-height:40px; padding:0 1.05rem; border-radius:12px; font-size:.8rem; font-weight:700; color:#fff; transition:filter .25s, background .25s }
body.satis .cerez__eylem .cerez__ret{ background:rgba(255,255,255,.06); box-shadow:0 0 0 1px rgba(255,255,255,.14) inset }
body.satis .cerez__eylem .cerez__ret:hover{ background:rgba(255,255,255,.1) }
body.satis .cerez__eylem .cerez__kabul{ background:linear-gradient(100deg,#1769FF,#02E7FD); box-shadow:0 10px 24px -10px rgba(2,231,253,.7) }
body.satis .cerez__eylem .cerez__kabul:hover{ filter:brightness(1.08) }
body.satis .cerez__eylem button:focus-visible{ outline:2px solid #fff; outline-offset:2px }
@media (prefers-reduced-motion:reduce){ body.satis .cerez{ transition:none } }

/* ==========================================================================
   Mobil ana sayfa kolajı: eğim ve kaydırma yok; ekranı dolduran düz üç sütun,
   ortada başlığın okunması için koyu bir hale
   ========================================================================== */
@media (max-width:760px){
  body.satis .gd__sahne{ opacity:1; perspective:none }
  body.satis .gd__duvar{
    left:0; right:0; top:0; bottom:0; width:auto; height:100%; padding:0 10px;
    transform:none; animation:none; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;
  }
  body.satis .gd__sutun:nth-child(n+4){ display:none }
  body.satis .gd__sutun:nth-child(2n){ margin-top:-38% }
  body.satis .gd__akis{ gap:10px }
  body.satis .gd__kare{ border-radius:10px }
  body.satis .gd__sahne::after{
    background:
      radial-gradient(95% 42% at 50% 50%, rgba(6,8,15,.94) 0%, rgba(6,8,15,.82) 55%, rgba(6,8,15,.5) 100%),
      linear-gradient(180deg, rgba(6,8,15,.9) 0%, rgba(6,8,15,0) 18%, rgba(6,8,15,0) 82%, rgba(6,8,15,.95) 100%);
  }
}
/* mobilde sütunlar daha hızlı akar; kenardakiler ortadakinden biraz hızlı */
@media (max-width:760px){
  body.satis .gd__sutun:nth-child(1) .gd__akis{ animation-duration:26s }
  body.satis .gd__sutun:nth-child(2) .gd__akis{ animation-duration:32s }
  body.satis .gd__sutun:nth-child(3) .gd__akis{ animation-duration:28s }
}