@font-face{font-family:'Baloo 2';src:url('fonts/baloo2-var.woff2') format('woff2');font-weight:400 800;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Baloo 2';src:url('fonts/baloo2-var-ext.woff2') format('woff2');font-weight:400 800;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';src:url('fonts/inter-var.woff2') format('woff2');font-weight:100 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';src:url('fonts/inter-var-ext.woff2') format('woff2');font-weight:100 900;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* NON-LATIN SCRIPTS - each file is downloaded ONLY on the pages that actually
   need it (unicode-range decides per character, and a family that is not in
   the used stack is never fetched at all).
   NOTE: shared by every language, so this comment is in English on purpose -
   a language-specific comment here would leak into all of them.

   CYRILLIC is declared under the EXISTING family names 'Inter' and 'Baloo 2'.
   That is safe because no other script claims its range, and it means NO font
   stack has to change. (index.html does NOT use this shared stylesheet - it
   carries its own <style> - and in the Russian round the stack was edited here
   only, so the Russian HOME PAGE never got its Cyrillic font at all.)

   CJK CANNOT be aliased the same way: Japanese and Chinese claim the SAME
   range (U+4E00-9FFF ...). With the same family and an overlapping range the
   LAST rule wins, so Japanese pages would render in the Chinese font - kana
   and most kanji exist there, so the page would look fine while shared
   characters carried the wrong regional form (直 骨 今 每 者 differ). Each CJK
   language therefore gets its OWN family name and the stack is picked with
   :lang(). site_dil_test locks this: no two faces of one family may overlap.

   ARABIC gets its own family too. Its range collides with nothing, but the
   same :lang() mechanism keeps every non-Latin script on one predictable
   pattern. The subset deliberately KEEPS the Arabic presentation forms
   (U+FE70-FEFF, U+FB50-FDFF): a browser does not need them - it shapes with
   GSUB - but the IMAGE GENERATOR does, because Pillow here has no HarfBuzz
   and pre-shapes the text before drawing. One file serves both. */
@font-face{font-family:'Inter';src:url('fonts/inter-var-ru.woff2') format('woff2');font-weight:100 900;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Baloo 2';src:url('fonts/nunito-var-ru.woff2') format('woff2');font-weight:400 800;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'CJK JA';src:url('fonts/noto-jp.woff2') format('woff2');font-weight:100 900;font-display:swap;
  unicode-range:U+2E80-2EFF,U+3000-303F,U+3040-309F,U+30A0-30FF,U+3190-319F,U+31F0-31FF,U+3200-32FF,U+3300-33FF,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FE10-FE1F,U+FE30-FE4F,U+FF00-FFEF}
@font-face{font-family:'CJK SC';src:url('fonts/noto-sc.woff2') format('woff2');font-weight:100 900;font-display:swap;
  unicode-range:U+2E80-2EFF,U+3000-303F,U+3040-309F,U+30A0-30FF,U+3190-319F,U+31F0-31FF,U+3200-32FF,U+3300-33FF,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FE10-FE1F,U+FE30-FE4F,U+FF00-FFEF}
@font-face{font-family:'CJK KR';src:url('fonts/noto-kr.woff2') format('woff2');font-weight:100 900;font-display:swap;
  unicode-range:U+1100-11FF,U+2E80-2EFF,U+3000-303F,U+3040-309F,U+30A0-30FF,U+3130-318F,U+3190-319F,U+31F0-31FF,U+3200-32FF,U+3300-33FF,U+3400-4DBF,U+4E00-9FFF,U+A960-A97F,U+AC00-D7AF,U+D7B0-D7FF,U+F900-FAFF,U+FE10-FE1F,U+FE30-FE4F,U+FF00-FFEF}
@font-face{font-family:'Arabic';src:url('fonts/noto-ar.woff2') format('woff2');font-weight:100 900;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+2066-2069,U+FB50-FDFF,U+FE70-FEFF}
:root:lang(ja){--sans:'Baloo 2','CJK JA',system-ui,-apple-system,sans-serif;
  --metin:'Inter','CJK JA',system-ui,-apple-system,sans-serif}
:root:lang(zh){--sans:'Baloo 2','CJK SC',system-ui,-apple-system,sans-serif;
  --metin:'Inter','CJK SC',system-ui,-apple-system,sans-serif}
:root:lang(ko){--sans:'Baloo 2','CJK KR',system-ui,-apple-system,sans-serif;
  --metin:'Inter','CJK KR',system-ui,-apple-system,sans-serif}
:root:lang(ar){--sans:'Baloo 2','Arabic',system-ui,-apple-system,sans-serif;
  --metin:'Inter','Arabic',system-ui,-apple-system,sans-serif}
:root{
  --zemin:#ffffff; --kutu:#f5f6fa; --murekkep:#12141f; --govde:#5b6070; --cizgi:#e8eaf0;
  --mavi:#335cff; --mavi-koyu:#2646d4;
  --grad:linear-gradient(92deg,#7c3aed 0%,#335cff 60%,#2ea8ff 100%);
  --sans:'Baloo 2',system-ui,-apple-system,sans-serif;
  --metin:'Inter',system-ui,-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--zemin);color:var(--murekkep);font-family:var(--sans);overflow-x:hidden}
img{max-width:100%}
.atla{position:fixed;inset-inline-start:16px;top:-64px;z-index:200;background:var(--mavi);color:#fff;
  font-weight:700;font-size:15px;padding:10px 18px;border-radius:0 0 12px 12px;
  text-decoration:none;transition:top .2s ease}
.atla:focus{top:0}
/* long text and eyebrows in Inter — headings/buttons/badges in Baloo 2 (chosen pairing) */
p,.gozkasi{font-family:var(--metin)}

/* ═══ NAV ═══ */
nav{position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;gap:32px;
  padding:clamp(14px,1vw,20px) clamp(24px,3.5vw,72px);
  background:rgba(255,255,255,.95);
  border-bottom:1px solid rgba(18,20,31,.07)}
nav .marka{display:flex;align-items:center;gap:12px;font-weight:800;
  font-size:clamp(18px,1.2vw,24px);letter-spacing:-.01em;text-decoration:none;color:var(--murekkep)}
nav .marka img{width:clamp(30px,2vw,40px);height:auto}
nav .linkler{display:flex;gap:clamp(22px,2vw,42px);margin-inline-start:auto;align-items:center}
nav .linkler a{font-weight:700;font-size:clamp(14px,.95vw,18px);color:var(--govde);text-decoration:none}
nav .linkler a:hover{color:var(--murekkep)}
nav .mini-cta{background:var(--mavi);color:#fff !important;font-weight:700;
  font-size:clamp(14px,.95vw,18px);padding:.6em 1.5em;border-radius:.7em;text-decoration:none}
nav .mini-cta:hover{background:var(--mavi-koyu)}
/* ── DESTEK DUGMESI (10 Eylul 2026) ─────────────────────────────────
   Nav'da SESSIZ (cerceveli), altbilgide DOLGULU. Indir dugmesi
   birincil kalmali: nav'da iki dolgulu dugme olsa ziyaretci hangisine
   basacagini bilemez. */
nav .nav-destek{display:inline-flex;align-items:center;gap:.45em;
  font-weight:800;font-size:clamp(14px,.96vw,18px);
  padding:.6em 1.25em;border-radius:.7em;text-decoration:none;
  color:var(--murekkep);border:1.5px solid var(--cizgi);white-space:nowrap}
/* ⚠ --hair2 YALNIZ pages.css'te tanimli; index.html ve detay.css
   bilmiyor ve cerceve SESSIZCE kayboluyordu. --cizgi ucunde de var. */
nav .nav-destek:hover{border-color:var(--mavi);color:var(--mavi)}
/* Kalp sayfanin TEK sicak lekesi: gozu ceker, mavi CTA ile yarismaz
   cunku dolgu degil tek bir isaret. Dugme cerceveli KALIR — iki dolgulu
   dugme « Indir »in birincilligini bozardi. */
nav .nav-destek .dk{width:1.05em;height:1.05em;flex:0 0 auto;display:block;
  color:#e0245e}
nav .nav-destek:hover .dk{color:#e0245e}
.f-destek{display:inline-flex;align-items:center;gap:.5em;
  background:var(--grad);color:#fff !important;font-weight:800;
  font-size:clamp(13px,.92vw,16px);padding:.62em 1.3em;border-radius:.7em;
  text-decoration:none;white-space:nowrap}
.f-destek:hover{filter:brightness(1.07)}
@media (max-width:760px){
  nav .nav-destek{padding:.45em .8em;font-size:13px}
}

/* ═══ ORTAK ═══ */
.gozkasi{display:inline-flex;align-items:center;gap:10px;font-weight:700;
  font-size:clamp(12.5px,.85vw,17px);letter-spacing:.14em;color:#4a3ec8;
  background:#efeaff;border-radius:999px;padding:.7em 1.6em}
.gozkasi b{width:.6em;height:.6em;border-radius:50%;background:var(--grad)}
.btn{display:inline-block;background:var(--mavi);color:#fff;font-weight:700;
  font-size:clamp(16px,1.15vw,22px);padding:.9em 2.1em;border-radius:.75em;text-decoration:none;
  box-shadow:0 12px 30px rgba(51,92,255,.3)}
.btn:hover{background:var(--mavi-koyu)}
.link{color:var(--mavi);font-weight:700;font-size:clamp(15px,1vw,19px);text-decoration:none}
.rozet{font-weight:700;font-size:clamp(12px,.85vw,16px);letter-spacing:.05em;color:#4a4f5e;
  background:var(--kutu);border:1px solid var(--cizgi);border-radius:999px;padding:.6em 1.3em}
.rozet.on{color:#3050e0;background:#e9eeff;border-color:#d4ddff}

.bolum{position:relative;padding:clamp(70px,7vw,130px) clamp(20px,3vw,64px) 0}
.bolum-bas{text-align:center;max-width:1700px;margin:0 auto}
.bolum-bas h2{margin-top:clamp(20px,1.6vw,32px);font-weight:800;
  font-size:clamp(32px,3.3vw,64px);line-height:1.08;letter-spacing:-.014em;text-wrap:balance}
.bolum-bas h2 em{font-style:normal;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.bolum-bas > p{margin:clamp(16px,1.2vw,24px) auto 0;max-width:40em;font-weight:500;
  font-size:clamp(15px,1.2vw,22px);line-height:1.6;color:var(--govde)}
.seffaf{background:linear-gradient(180deg,#f7f9fe,#f3f5fc)}

/* ═══ HERO ═══ */
.hero{position:relative;padding:calc(clamp(58px,5vw,96px) + 4vh) clamp(20px,3vw,64px) 0;
  text-align:center}
.hero-fon{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-fon::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 46% 38% at 22% 20%,rgba(124,58,237,.11),transparent 70%),
    radial-gradient(ellipse 46% 38% at 78% 26%,rgba(46,168,255,.11),transparent 70%),
    radial-gradient(ellipse 50% 34% at 50% 78%,rgba(124,58,237,.08),transparent 72%)}
.hero-fon::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(51,92,255,.08) 1.5px,transparent 1.5px);
  background-size:clamp(24px,2vw,38px) clamp(24px,2vw,38px);
  mask-image:radial-gradient(ellipse 80% 66% at 50% 34%,#000 20%,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 80% 66% at 50% 34%,#000 20%,transparent 76%)}
.ic{position:relative;z-index:2;max-width:1700px;margin:0 auto}
.hero h1{margin-top:clamp(22px,1.8vw,36px);font-weight:800;
  font-size:clamp(40px,4.6vw,96px);line-height:1.05;letter-spacing:-.014em;text-wrap:balance}
.hero h1 em{font-style:normal;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero .alt{margin:clamp(18px,1.4vw,28px) auto 0;max-width:42em;font-weight:500;
  font-size:clamp(16px,1.25vw,24px);line-height:1.6;color:var(--govde)}
.url-bar{margin:clamp(26px,2vw,40px) auto 0;display:flex;align-items:center;gap:12px;
  max-width:clamp(520px,42vw,780px);
  background:#fff;border:2px solid var(--cizgi);border-radius:1.1em;
  padding:.55em .55em .55em 1.4em;font-size:clamp(14px,1vw,19px);
  box-shadow:0 14px 34px rgba(28,36,84,.12)}
.url-bar svg{flex:none;width:1.2em;height:1.2em}
.url-bar .adres{flex:1;min-width:0;font-weight:600;color:var(--murekkep);text-align:start;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.url-bar .imlec{display:inline-block;width:2px;height:1.1em;background:var(--mavi);
  vertical-align:-2px;animation:imlec 1.1s steps(1) infinite}
@keyframes imlec{50%{opacity:0}}
.url-bar .dugme{flex:none;background:var(--mavi);color:#fff;font-weight:700;
  padding:.75em 1.6em;border-radius:.75em}
.url-ipucu{margin-top:12px;font-weight:600;font-size:clamp(12px,.85vw,16px);color:#9aa0ae}
.url-ipucu kbd{font-family:inherit;font-weight:800;font-size:.92em;color:#4a4f5e;
  background:#f1f2f6;border:1px solid var(--cizgi);border-bottom-width:2px;
  border-radius:.4em;padding:.15em .55em}
.cta-satir{margin-top:clamp(24px,1.8vw,36px);display:flex;gap:18px;justify-content:center;
  align-items:center;flex-wrap:wrap}
.notlar{margin-top:14px;font-weight:600;font-size:clamp(12px,.85vw,16px);color:#9aa0ae;
  letter-spacing:.04em}
.ozellikler{margin:clamp(34px,2.6vw,54px) auto 0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.2vw,24px);
  max-width:clamp(880px,68vw,1280px)}
.oz{display:flex;align-items:center;gap:clamp(14px,1vw,20px);text-align:start;
  background:#fff;border:1px solid var(--cizgi);border-radius:1.2em;
  padding:clamp(16px,1.2vw,24px) clamp(18px,1.3vw,28px);
  font-size:clamp(13px,.95vw,18px);
  box-shadow:0 10px 26px rgba(28,36,84,.08)}
.oz .ikon{flex:none;width:3em;height:3em;border-radius:.9em;background:var(--grad);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 18px rgba(51,92,255,.28)}
.oz .ikon svg{width:1.5em;height:1.5em}
.oz b{display:block;font-weight:800;font-size:1.12em;letter-spacing:-.01em}
.oz span{display:block;margin-top:.25em;font-weight:500;color:var(--govde);
  font-size:.92em;line-height:1.45}

.deste{position:relative;z-index:2;width:min(1560px,96vw);margin:clamp(44px,3.6vw,72px) auto 0;
  padding-bottom:clamp(40px,3vw,64px)}
.deste::before{content:"";position:absolute;z-index:0;inset:8% -2.5% 1% 5%;
  border-radius:2em;transform:rotate(-1.4deg);
  background:linear-gradient(135deg,#e9e5ff,#ddebff)}
.ekran{position:relative;z-index:1;border-radius:1.4em;
  padding:clamp(12px,1vw,20px);
  background:#fff;border:1px solid var(--cizgi);
  box-shadow:0 26px 48px rgba(28,36,84,.13),0 80px 140px rgba(28,36,84,.24)}
.ekran img{display:block;width:100%;height:auto;border-radius:.8em}
.logo-kat{position:absolute;z-index:3;left:-2%;top:-9%;width:clamp(200px,17vw,330px)}
.logo-kat .gorsel{animation:suzul 7s ease-in-out infinite;will-change:transform}
.logo-kat img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 34px 44px rgba(74,48,180,.33)) drop-shadow(0 8px 14px rgba(28,36,84,.2))}
.logo-kat .golge{margin:12px auto 0;width:62%;height:24px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(40,44,90,.22),transparent 66%);
  animation:golge-nefes 7s ease-in-out infinite}
@keyframes suzul{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes golge-nefes{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.85);opacity:.7}}

.pkart{position:absolute;z-index:3;border-radius:1em;overflow:hidden;background:#101218;
  border:1px solid rgba(255,255,255,.14);font-size:clamp(11px,.85vw,16px);
  box-shadow:0 14px 28px rgba(16,20,40,.22),0 40px 70px rgba(16,20,40,.32)}
.pk-bar{display:flex;align-items:center;gap:.5em;padding:.55em .8em;background:#171a22}
.pk-bar i{width:.55em;height:.55em;border-radius:50%}
.pk-bar i:nth-child(1){background:#ff5f57}
.pk-bar i:nth-child(2){background:#febc2e}
.pk-bar i:nth-child(3){background:#28c840}
.pk-bar span{margin-inline-start:.15em;font-weight:600;font-size:.8em;color:#aeb3c0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-foto{position:relative;aspect-ratio:16/9;overflow:hidden}
.pk-foto img{width:100%;height:100%;object-fit:cover;display:block}
.pk-foto.kilitli img{filter:brightness(.45) saturate(.7)}
.pk-etiket{position:absolute;right:.5em;top:.5em;font-weight:800;font-size:.72em;
  color:#fff;background:rgba(16,18,24,.74);border-radius:.4em;padding:.25em .6em}
.pk-cubuk{position:relative;height:.28em;background:#242836;overflow:hidden}
.pk-cubuk i{position:absolute;left:0;top:0;bottom:0;width:100%;
  background:linear-gradient(90deg,#7c3aed,#335cff);
  transform-origin:left;transform:scaleX(.55);animation:ilerle 4.5s ease-in-out infinite}
@keyframes ilerle{0%{transform:scaleX(.55)}60%{transform:scaleX(.86)}100%{transform:scaleX(.55)}}
.pk-alt{display:flex;align-items:center;gap:.5em;padding:.55em .8em;background:#12151c}
.pk-alt b{width:.5em;height:.5em;border-radius:50%;background:#35d07f;flex:none}
.pk-alt b.kirmizi{background:#ff5f57;animation:yanip 1.2s steps(1) infinite}
.pk-alt b.bekle{background:#f5b74e}
@keyframes yanip{50%{opacity:.25}}
.pk-alt span{font-weight:700;font-size:.78em;color:#c7ccda;white-space:nowrap}
.hero .kart-rec{right:-2%;top:-10%;width:clamp(200px,17vw,320px);transform:rotate(2.5deg)}
.hero .kart-render{right:3%;bottom:-6%;width:clamp(210px,18vw,340px);transform:rotate(-2deg)}
.hap{position:absolute;z-index:3;display:flex;align-items:center;gap:.6em;
  background:#fff;border:1px solid var(--cizgi);border-radius:999px;
  font-size:clamp(12px,.95vw,18px);
  padding:.65em 1.3em;font-weight:700;color:#3b4050;transform:rotate(-2deg);
  box-shadow:0 8px 18px rgba(28,36,84,.1),0 22px 42px rgba(28,36,84,.15)}
.hap b{width:1.35em;height:1.35em;border-radius:50%;background:var(--grad);flex:none;
  display:flex;align-items:center;justify-content:center}
.hero .hap{left:-1.5%;bottom:16%}

/* ═══ MERKEZ SAHNE ═══ */
.sahneler{max-width:1700px;margin:0 auto;display:flex;flex-direction:column;
  gap:clamp(80px,7vw,140px);padding-top:clamp(50px,4vw,80px)}
.sahne{text-align:center}
.sahne .no{display:inline-flex;align-items:center;gap:10px;font-weight:800;
  font-size:clamp(12.5px,.85vw,17px);letter-spacing:.16em;color:var(--mavi)}
.sahne .no::before,.sahne .no::after{content:"";height:2px;width:2.6em;border-radius:2px}
.sahne .no::before{background:linear-gradient(270deg,var(--mavi),transparent)}
.sahne .no::after{background:linear-gradient(90deg,var(--mavi),transparent)}
.sahne h3{margin-top:14px;font-weight:800;font-size:clamp(27px,2.6vw,48px);
  line-height:1.14;letter-spacing:-.012em;text-wrap:balance}
.sahne h3 em{font-style:normal;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sahne > p{margin:14px auto 0;font-weight:500;font-size:clamp(14.5px,1.1vw,20px);
  line-height:1.7;color:var(--govde);max-width:40em}
.sahne .rozetler{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.komp{position:relative;margin:clamp(38px,3vw,60px) auto 0;width:min(1560px,96vw)}
.mock-kart{position:relative;z-index:2;width:min(70%,1080px);margin:0 auto;border-radius:1.3em;
  padding:clamp(12px,1.1vw,20px);
  background:linear-gradient(135deg,#f2f0ff,#eef4ff);
  box-shadow:0 34px 64px rgba(28,36,84,.2)}
.mock-kart img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 14px 22px rgba(28,36,84,.2))}
.yan{position:absolute;z-index:1;width:clamp(190px,16vw,300px);top:50%;
  font-size:clamp(11px,.8vw,15px);
  border-radius:1em;overflow:hidden;background:#101218;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 38px rgba(16,20,40,.34)}
.yan.sol{left:0;transform:translateY(-50%) rotate(-4deg)}
.yan.sag{right:0;transform:translateY(-50%) rotate(4deg)}
.pk-kilit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}

/* ═══ SUPER EDIT ═══ */
.se-deste{width:min(1560px,96vw)}
.se-grid{max-width:1700px;margin:clamp(44px,3.4vw,70px) auto 0;display:grid;
  grid-template-columns:1fr 1fr;gap:clamp(20px,1.8vw,36px)}
.se-hucre{background:#fff;border:1px solid var(--cizgi);border-radius:1.4em;
  padding:clamp(20px,1.6vw,32px);text-align:start;
  box-shadow:0 12px 30px rgba(28,36,84,.07)}
.se-hucre h4{font-weight:800;font-size:clamp(19px,1.4vw,27px);letter-spacing:-.014em}
.se-hucre h4 em{font-style:normal;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.se-hucre p{margin-top:6px;font-weight:500;font-size:clamp(13.5px,1vw,18px);
  line-height:1.55;color:var(--govde)}
.se-hucre .cerceve{margin-top:16px;border-radius:1em;overflow:hidden;
  background:linear-gradient(135deg,#f2f0ff,#eef4ff);padding:clamp(10px,.9vw,16px)}
.se-hucre .cerceve img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 10px 18px rgba(28,36,84,.18))}
.se-rozetler{max-width:1700px;margin:clamp(26px,2vw,40px) auto 0;display:flex;
  flex-wrap:wrap;gap:10px;justify-content:center}

/* ═══ COLLAGE ROW (overlays + export) ═══ */
.kolaj-satirlar{max-width:1700px;margin:clamp(70px,6vw,120px) auto 0;display:flex;
  flex-direction:column;gap:clamp(70px,6vw,120px)}
.kolaj-oge{display:grid;grid-template-columns:4.6fr 7.4fr;gap:clamp(26px,4vw,64px);align-items:center}
.kolaj-oge:nth-child(even){grid-template-columns:7.4fr 4.6fr}
.kolaj-oge:nth-child(even) .k-metin{order:2}
.kolaj-oge:nth-child(even) .k-gorsel{order:1}
.k-metin{text-align:start}
.k-metin .no{display:flex;align-items:center;gap:12px;font-weight:800;
  font-size:clamp(12.5px,.85vw,17px);letter-spacing:.16em;color:var(--mavi)}
.k-metin .no::after{content:"";height:2px;width:2.6em;border-radius:2px;
  background:linear-gradient(90deg,var(--mavi),transparent)}
.k-metin h3{margin-top:14px;font-weight:800;font-size:clamp(26px,2.4vw,44px);
  line-height:1.14;letter-spacing:-.012em;text-wrap:balance}
.k-metin h3 em{font-style:normal;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.k-metin p{margin-top:14px;font-weight:500;font-size:clamp(14.5px,1.1vw,20px);
  line-height:1.7;color:var(--govde);max-width:29em}
.k-metin .rozetler{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px}
.k-gorsel{position:relative;padding:9% 0 5% 4%}
.k-gorsel .mock{position:relative;z-index:2;border-radius:1.3em;
  padding:clamp(12px,1.1vw,20px);
  background:linear-gradient(135deg,#f2f0ff,#eef4ff);
  box-shadow:0 34px 64px rgba(28,36,84,.2)}
.k-gorsel .mock img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 14px 22px rgba(28,36,84,.2))}
.k-gorsel .pkart{position:static;display:block}
.k-gorsel .pk-sarici{position:absolute;z-index:3;right:-2%;top:-6%;
  width:clamp(190px,15vw,280px);transform:rotate(2.5deg)}
.kolaj-oge:nth-child(even) .k-gorsel .pk-sarici{right:auto;left:-2%;transform:rotate(-2.5deg)}
.k-gorsel .desen{position:absolute;z-index:0;width:150px;height:110px;
  background-image:radial-gradient(#c9cfe4 1.6px,transparent 1.6px);background-size:15px 15px;
  left:-6px;bottom:-4px}

/* ═══ SUPER EDIT MAGAZINE — dark showcase + mixed-width mosaic ═══ */
.dergi{max-width:1700px;margin:clamp(40px,3.2vw,64px) auto 0;
  display:flex;flex-direction:column;gap:clamp(18px,1.6vw,30px)}
.d-vitrin{position:relative;isolation:isolate;border-radius:1.6em;overflow:hidden;background:#0b0d16;
  display:grid;grid-template-columns:minmax(330px,.56fr) 1.44fr;align-items:center;
  gap:clamp(24px,2.6vw,60px);padding:clamp(24px,2.4vw,52px);
  box-shadow:0 26px 60px rgba(10,13,30,.35)}
.d-vitrin::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(720px 480px at 6% 10%,rgba(124,58,237,.30),transparent 62%),
  radial-gradient(760px 520px at 96% 88%,rgba(51,92,255,.26),transparent 62%)}
.d-vitrin h4{font-weight:800;font-size:clamp(24px,2vw,40px);letter-spacing:-.014em;color:#fff}
.d-vitrin h4 em{font-style:normal;background:linear-gradient(92deg,#c4b5fd 0%,#93c5fd 55%,#7dd3fc 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.d-vitrin p{margin-top:12px;font-weight:500;font-size:clamp(13.5px,1vw,18px);
  line-height:1.65;color:#a7aec9;max-width:30em}
.d-vitrin .rozetler{margin-top:16px;display:flex;flex-wrap:wrap;gap:9px}
.d-vitrin img{display:block;width:100%;height:auto;border-radius:1em;
  box-shadow:0 20px 44px rgba(0,0,0,.45)}
.d-vitrin.ters{grid-template-columns:1.28fr minmax(360px,.72fr)}
.d-duzen{position:relative;isolation:isolate;border-radius:1.6em;overflow:hidden;background:#0b0d16;
  padding:clamp(28px,2.6vw,56px);display:flex;flex-direction:column;gap:clamp(24px,2.2vw,44px);
  box-shadow:0 26px 60px rgba(10,13,30,.35)}
.d-duzen::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(760px 520px at 4% 6%,rgba(124,58,237,.30),transparent 62%),
  radial-gradient(800px 560px at 98% 50%,rgba(51,92,255,.24),transparent 62%),
  radial-gradient(640px 460px at 40% 108%,rgba(236,72,153,.14),transparent 60%)}
.dz-baslik{text-align:center;max-width:56em;margin:0 auto}
.d-duzen h4{font-weight:800;font-size:clamp(26px,2.2vw,44px);letter-spacing:-.014em;color:#fff}
.d-duzen h4 em{font-style:normal;background:linear-gradient(92deg,#c4b5fd 0%,#93c5fd 55%,#7dd3fc 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.dz-baslik p{margin-top:12px;font-weight:500;font-size:clamp(13px,.98vw,17.5px);
  line-height:1.62;color:#a7aec9}
.dz-alt img{display:block;width:100%;height:auto;border-radius:1em;
  box-shadow:0 20px 44px rgba(0,0,0,.45)}
.dz-galeri-bas{text-align:center;font-family:var(--metin);font-weight:600;
  font-size:clamp(11.5px,.85vw,15px);letter-spacing:.08em;color:#7c86ab}
.dz-kaliplar{margin-top:clamp(12px,1.1vw,20px);display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(12px,1.1vw,22px)}
.dz-kaliplar figure{margin:0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);
  border-radius:1em;padding:clamp(10px,.9vw,16px);display:flex;flex-direction:column;gap:10px;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),border-color .35s ease}
.dz-kaliplar figure:hover{transform:translateY(-4px);border-color:rgba(147,165,255,.45)}
.dz-kaliplar img{display:block;width:100%;height:auto;border-radius:.7em}
.dz-kaliplar b{display:block;font-weight:800;color:#fff;
  font-size:clamp(13.5px,1vw,18.5px);letter-spacing:-.01em}
.dz-kaliplar figcaption span{display:block;margin-top:4px;font-family:var(--metin);font-weight:500;
  color:#a7aec9;font-size:clamp(11px,.82vw,14.5px);line-height:1.5}
.d-arama .ar-giris{max-width:58em}
.d-arama .ar-giris p{margin-top:12px;font-weight:500;font-size:clamp(13px,.98vw,17.5px);
  line-height:1.62;color:#a7aec9}
.d-arama .rozetler{margin-top:16px;display:flex;flex-wrap:wrap;gap:9px}
.ar-kartlar{grid-template-columns:repeat(3,1fr)}
.ss-kareler{grid-template-columns:1fr 1fr}
.ar-kartlar figcaption b{font-size:clamp(15px,1.12vw,21px)}
.ar-kartlar figcaption span{font-size:clamp(11.5px,.88vw,15.5px)}
.ind-ek{max-width:1200px;margin:clamp(48px,4vw,80px) auto 0;display:grid;
  grid-template-columns:1fr 1fr;gap:clamp(14px,1.3vw,24px);text-align:start}
.ind-ek > div{background:#fff;border:1px solid var(--cizgi);border-radius:1.2em;
  padding:clamp(16px,1.4vw,26px) clamp(18px,1.5vw,28px);
  box-shadow:0 10px 26px rgba(28,36,84,.06)}
.ind-ek b{display:block;font-weight:800;font-size:clamp(15px,1.15vw,21px);letter-spacing:-.012em}
.ind-ek span{display:block;margin-top:6px;font-family:var(--metin);font-weight:500;
  color:var(--govde);font-size:clamp(12.5px,.92vw,16px);line-height:1.55}
.dz-alt-not{margin-top:10px;text-align:center;font-family:var(--metin);font-weight:600;
  font-size:clamp(11.5px,.85vw,15px);letter-spacing:.08em;color:#7c86ab}
.d-satir{display:flex;gap:clamp(18px,1.6vw,30px)}
.d-kart{border-radius:1.4em;background:#fff;border:1px solid var(--cizgi);
  padding:clamp(16px,1.5vw,28px);text-align:start;
  display:flex;flex-direction:column;
  box-shadow:0 10px 26px rgba(28,36,84,.06);
  transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s ease}
.d-kart:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(28,36,84,.13)}
.w55,.w45,.w33,.w50{flex:1;min-width:0}
.d-kart h4{font-weight:800;font-size:clamp(16px,1.25vw,24px);letter-spacing:-.012em}
.d-kart h4 em{font-style:normal;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.d-kart > p{margin-top:6px;margin-bottom:14px;font-weight:500;font-size:clamp(13px,.95vw,17px);
  line-height:1.55;color:var(--govde)}
.d-kart .cerceve{margin-top:auto;border-radius:1em;overflow:hidden;
  background:linear-gradient(135deg,#f2f0ff,#eef4ff);padding:clamp(8px,.8vw,14px);
  aspect-ratio:2.05/1;display:flex;align-items:center;justify-content:center}
.d-kart .cerceve img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;
  filter:drop-shadow(0 10px 16px rgba(28,36,84,.16))}
.d-cipbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;
  background:var(--kutu);border:1px solid var(--cizgi);border-radius:1.2em;
  padding:clamp(16px,1.4vw,26px) clamp(20px,1.8vw,36px)}
.d-cipbar b{font-weight:800;font-size:clamp(15px,1.1vw,21px);margin-inline-end:8px}
.d-cipbar .not{flex-basis:100%;margin:0 0 2px;font-weight:500;
  font-size:clamp(12px,.9vw,16px);color:var(--govde)}

/* ═══ OVERLAPPING BAND (live clip) ═══ */
.bantlar{max-width:1700px;margin:clamp(44px,3.6vw,72px) auto 0;display:flex;
  flex-direction:column;gap:clamp(64px,5.5vw,110px)}
.bant{position:relative}
.bant:not(:last-child)::after{content:"";position:absolute;left:50%;
  bottom:calc(-1*clamp(64px,5.5vw,110px));height:clamp(44px,4vw,80px);
  transform:translate(-50%,-12px);border-left:2px dashed #c3cdf2}
.b-gorsel{width:min(74%,1240px);margin-inline-start:auto}
.bant.ters .b-gorsel{margin-inline-start:0;margin-inline-end:auto}
.b-gorsel .mock{border-radius:1.4em;padding:clamp(12px,1.1vw,20px);
  background:linear-gradient(135deg,#f2f0ff,#eef4ff);
  box-shadow:0 30px 60px rgba(28,36,84,.18)}
.b-gorsel .mock img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 14px 22px rgba(28,36,84,.2))}
.b-kart2{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:2;
  width:min(38%,560px);background:#fff;border:1px solid var(--cizgi);
  border-radius:1.4em;padding:clamp(22px,1.9vw,38px);text-align:start;
  box-shadow:0 24px 54px rgba(28,36,84,.16)}
.bant.ters .b-kart2{left:auto;right:0}
.madalyon{position:absolute;top:calc(-1*clamp(20px,1.7vw,30px));left:clamp(22px,1.9vw,38px);
  width:clamp(44px,3.2vw,60px);height:clamp(44px,3.2vw,60px);border-radius:50%;
  background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:clamp(17px,1.25vw,25px);
  box-shadow:0 10px 24px rgba(51,92,255,.32)}
.b-kart2 h3{margin-top:clamp(10px,.9vw,16px);font-weight:800;
  font-size:clamp(22px,1.9vw,35px);line-height:1.16;letter-spacing:-.012em;text-wrap:balance}
.b-kart2 h3 em{font-style:normal;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.b-kart2 p{margin-top:10px;font-weight:500;font-size:clamp(13.5px,1vw,18px);
  line-height:1.65;color:var(--govde)}
.b-kart2 .rozetler{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.bant .b-gorsel,.bant .b-kart2{
  transition:opacity .65s cubic-bezier(.22,.61,.36,1),transform .65s cubic-bezier(.22,.61,.36,1)}
.bant .b-gorsel{opacity:0;transform:translateX(36px)}
.bant.ters .b-gorsel{transform:translateX(-36px)}
.bant .b-kart2{opacity:0;transform:translateY(calc(-50% + 26px))}
.bant.in .b-gorsel{opacity:1;transform:none}
.bant.in .b-kart2{opacity:1;transform:translateY(-50%);transition-delay:.22s}

/* ═══ SPINE (your own settings) — TEXT on one side, VISUAL on the other ═══ */
.omur{position:relative;max-width:1700px;margin:clamp(40px,3.2vw,64px) auto 0;
  padding:clamp(10px,1vw,20px) 0}
.omur .ray{position:absolute;left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%);
  background:linear-gradient(180deg,#7c3aed,#335cff 55%,#2ea8ff);border-radius:3px;opacity:.8}
.o-satir{position:relative;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(54px,5vw,110px);align-items:center;margin:clamp(44px,3.6vw,76px) 0}
.dugum{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:clamp(48px,3.6vw,68px);height:clamp(48px,3.6vw,68px);border-radius:50%;
  border:3px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#7c3aed,#2ea8ff) border-box;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:clamp(15px,1.15vw,23px);
  box-shadow:0 10px 24px rgba(51,92,255,.22)}
.dugum i{font-style:normal;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.o-metin{position:relative;grid-column:1;grid-row:1;justify-self:end;
  max-width:34em;text-align:start}
.o-satir.ters .o-metin{grid-column:2;justify-self:start}
.o-metin .no{font-weight:800;font-size:clamp(12px,.85vw,16px);letter-spacing:.16em;color:var(--mavi)}
.o-metin h3{margin-top:10px;font-weight:800;font-size:clamp(24px,2.2vw,42px);
  line-height:1.14;letter-spacing:-.012em;text-wrap:balance}
.o-metin h3 em{font-style:normal;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.o-metin p{margin-top:12px;font-weight:500;font-size:clamp(14px,1.05vw,19px);
  line-height:1.7;color:var(--govde)}
.o-metin .rozetler{margin-top:16px;display:flex;flex-wrap:wrap;gap:9px}
.o-metin::after{content:"";position:absolute;top:50%;right:calc(-1*clamp(34px,3.5vw,75px));
  width:clamp(34px,3.5vw,75px);border-top:2px dashed #c3cdf2}
.o-satir.ters .o-metin::after{right:auto;left:calc(-1*clamp(34px,3.5vw,75px))}
.o-gorsel{position:relative;grid-column:2;grid-row:1;justify-self:start;
  width:calc(100% + clamp(30px,4vw,110px));margin-inline-end:calc(-1*clamp(30px,4vw,110px));
  padding:2% 0}
.o-satir.ters .o-gorsel{grid-column:1;justify-self:end;
  margin-inline-end:0;margin-inline-start:calc(-1*clamp(30px,4vw,110px))}
.o-gorsel .mock{position:relative;z-index:1;border-radius:1.3em;
  padding:clamp(12px,1.1vw,20px);
  background:linear-gradient(135deg,#f2f0ff,#eef4ff);
  box-shadow:0 26px 56px rgba(28,36,84,.18)}
.o-gorsel .mock img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 14px 22px rgba(28,36,84,.2))}
.o-satir .o-metin,.o-satir .o-gorsel,.o-satir .dugum{
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.o-satir .o-metin{opacity:0;transform:translateX(-30px)}
.o-satir.ters .o-metin{transform:translateX(30px)}
.o-satir .o-gorsel{opacity:0;transform:translateY(24px)}
.o-satir .dugum{opacity:0;transform:translate(-50%,-50%) scale(.5)}
.o-satir.in .o-metin{opacity:1;transform:none;transition-delay:.1s}
.o-satir.in .o-gorsel{opacity:1;transform:none;transition-delay:.2s}
.o-satir.in .dugum{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ═══ SSS ═══ */
.sss-grid{max-width:1700px;margin:clamp(40px,3vw,60px) auto 0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:clamp(18px,1.6vw,32px);text-align:start}
.soru{background:#fff;border:1px solid var(--cizgi);border-radius:1.3em;
  padding:clamp(20px,1.7vw,34px);box-shadow:0 10px 26px rgba(28,36,84,.06)}
.soru h4{font-weight:800;font-size:clamp(16.5px,1.2vw,23px);letter-spacing:-.012em}
.soru p{margin-top:8px;font-weight:500;font-size:clamp(13.5px,1vw,18px);
  line-height:1.6;color:var(--govde)}
.sss-link{text-align:center;margin-top:clamp(22px,1.6vw,34px)}

/* ═══ SON CTA ═══ */
.son-cta{position:relative;max-width:1700px;margin:clamp(70px,6vw,120px) auto 0;
  padding:0 clamp(20px,3vw,64px)}
.son-cta::before{content:"";position:absolute;left:50%;top:-14%;width:100vw;height:128%;
  transform:translateX(-50%);z-index:-1;pointer-events:none;background:
  radial-gradient(40vw 26vw at 24% 40%,rgba(124,58,237,.16),transparent 66%),
  radial-gradient(38vw 24vw at 80% 62%,rgba(46,168,255,.16),transparent 66%)}
.son-kart{animation:akan-grad 16s ease-in-out infinite;background-size:280% 280%}
@keyframes akan-grad{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.son-kart{position:relative;border-radius:2em;overflow:hidden;text-align:center;
  background:linear-gradient(120deg,#6d28d9 0%,#335cff 55%,#2ea8ff 115%);
  padding:clamp(50px,4.6vw,90px) clamp(24px,3vw,60px);color:#fff}
.son-kart::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.14) 1.5px,transparent 1.5px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 70% 80% at 50% 40%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 40%,#000 20%,transparent 75%)}
.son-kart img{width:clamp(80px,6.5vw,120px);height:auto;
  filter:drop-shadow(0 18px 26px rgba(20,16,60,.4))}
.son-kart h2{position:relative;margin-top:18px;font-weight:800;
  font-size:clamp(30px,3vw,58px);letter-spacing:-.014em}
.son-kart p{position:relative;margin:14px auto 0;max-width:36em;font-weight:500;
  font-size:clamp(14.5px,1.15vw,21px);line-height:1.6;color:rgba(255,255,255,.85)}
.son-kart .btn{position:relative;margin-top:26px;background:#fff;color:var(--mavi-koyu);
  box-shadow:0 16px 36px rgba(10,14,40,.3)}
.son-kart .btn:hover{background:#f1f4ff}
.son-kart .mini{position:relative;margin-top:14px;font-weight:600;
  font-size:clamp(12px,.85vw,16px);color:rgba(255,255,255,.72);letter-spacing:.04em}

/* ═══ FOOTER ═══ */
footer{position:relative;margin-top:clamp(70px,6vw,120px);border-top:1px solid var(--cizgi);
  background:linear-gradient(180deg,#e9edfa 0%,#f4f6fd 46%,#fbfbfd 100%)}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1.6em;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,rgba(51,92,255,.30) 0 1px,transparent 1px 44px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);opacity:.4}
footer::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(46vw 22vw at 12% 0%,rgba(124,58,237,.13),transparent 66%),
  radial-gradient(42vw 20vw at 92% 12%,rgba(46,168,255,.13),transparent 66%)}
.f-ic,.f-alt{position:relative;z-index:1}
.f-ic{max-width:1700px;margin:0 auto;padding:clamp(40px,3.4vw,64px) clamp(20px,3vw,64px);
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(26px,3vw,60px);text-align:start}
.f-marka{display:flex;align-items:center;gap:12px;font-weight:800;
  font-size:clamp(18px,1.2vw,24px);color:var(--murekkep)}
.f-marka img{width:clamp(30px,2vw,40px);height:auto}
.f-ic p{margin-top:12px;font-weight:500;font-size:clamp(13.5px,.95vw,17px);
  line-height:1.6;color:var(--govde);max-width:26em}
.f-kol h5{font-weight:800;font-size:clamp(12px,.85vw,15px);letter-spacing:.12em;color:#9aa0ae}
.f-kol a{display:block;margin-top:12px;font-weight:600;
  font-size:clamp(14px,1vw,18px);color:var(--govde);text-decoration:none}
.f-kol a:hover{color:var(--murekkep)}
.f-sosyal{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.f-sosyal a{display:flex;align-items:center;justify-content:center;
  width:clamp(38px,2.6vw,46px);height:clamp(38px,2.6vw,46px);border-radius:50%;
  background:#fff;border:1px solid var(--cizgi);
  transition:transform .3s cubic-bezier(.22,.61,.36,1),border-color .3s ease,box-shadow .3s ease}
.f-sosyal svg{width:52%;height:52%;fill:#4a4f5e;transition:fill .3s ease}
.f-sosyal a:hover{transform:translateY(-3px);border-color:#d4ddff;
  box-shadow:0 8px 18px rgba(51,92,255,.16)}
.f-sosyal a:hover svg{fill:#335cff}
.f-mail{display:inline-block;margin-top:16px;font-family:var(--metin);font-weight:600;
  font-size:clamp(13.5px,.95vw,17px);color:var(--govde);text-decoration:none}
.f-mail:hover{color:#335cff}
.f-alt{border-top:1px solid var(--cizgi)}
.f-alt div{max-width:1700px;margin:0 auto;padding:18px clamp(20px,3vw,64px);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-weight:600;font-size:clamp(11.5px,.8vw,14px);color:#9aa0ae;letter-spacing:.05em}

/* ═══ ANIMATIONS ═══ */
@keyframes gir{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes gir-don{from{opacity:0}to{opacity:1}}
.g1,.g2,.g3,.g4,.g5,.g6,.g7{opacity:0;animation:gir .65s cubic-bezier(.22,.61,.36,1) forwards}
.g1{animation-delay:.04s}.g2{animation-delay:.12s}.g3{animation-delay:.2s}
.g4{animation-delay:.28s}.g5{animation-delay:.36s}.g6{animation-delay:.44s}.g7{animation-delay:.52s}
.hero .deste .ekran{opacity:0;animation:gir .8s cubic-bezier(.22,.61,.36,1) .3s forwards}
.hero .logo-kat,.hero .kart-rec,.hero .kart-render,.hero .hap{opacity:0;
  animation:gir-don .6s ease forwards}
.hero .logo-kat{animation-delay:.55s}
.hero .kart-rec{animation-delay:.65s}
.hero .kart-render{animation-delay:.72s}
.hero .hap{animation-delay:.8s}
.rv{opacity:0;transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.rv{transform:translateY(24px)}
.rv.in{opacity:1;transform:none}
.komp .mock-kart,.komp .yan{transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
.komp .mock-kart{opacity:0;transform:translateY(30px)}
.komp .yan.sol{opacity:0;transform:translateY(-42%) translateX(-36px) rotate(-4deg)}
.komp .yan.sag{opacity:0;transform:translateY(-42%) translateX(36px) rotate(4deg)}
.in .komp .mock-kart,.sahne.in .mock-kart{opacity:1;transform:none;transition-delay:.15s}
.sahne.in .yan.sol{opacity:1;transform:translateY(-50%) rotate(-4deg);transition-delay:.35s}
.sahne.in .yan.sag{opacity:1;transform:translateY(-50%) rotate(4deg);transition-delay:.44s}

@media (max-width:1000px){
  .ozellikler{grid-template-columns:1fr;max-width:520px}
  .se-grid{grid-template-columns:1fr}
  .d-satir{flex-direction:column}
  .d-vitrin,.d-vitrin.ters{grid-template-columns:1fr}
  .dz-kaliplar{grid-template-columns:repeat(2,1fr)}
  .ar-kartlar{grid-template-columns:1fr}
  .ss-kareler{grid-template-columns:1fr}
  .ind-ek{grid-template-columns:1fr}
  .kolaj-oge,.kolaj-oge:nth-child(even){grid-template-columns:1fr}
  .bant .b-gorsel,.bant.ters .b-gorsel{width:100%}
  .b-kart2,.bant.ters .b-kart2{position:static;transform:none !important;width:100%;
    margin-top:16px;opacity:1}
  .bant:not(:last-child)::after{display:none}
  .omur .ray{left:22px}
  .o-satir,.o-satir.ters{grid-template-columns:1fr;gap:18px;padding-inline-start:58px}
  .o-metin,.o-satir.ters .o-metin,.o-gorsel,.o-satir.ters .o-gorsel{
    grid-column:1;justify-self:stretch;width:100%;max-width:none}
  .o-metin{grid-row:1}.o-gorsel{grid-row:2;padding:0}
  .o-metin::after,.o-satir.ters .o-metin::after{display:none}
  .dugum{left:22px;top:0;transform:translate(-50%,0) !important}

  .kolaj-oge:nth-child(even) .k-metin{order:1}
  .kolaj-oge:nth-child(even) .k-gorsel{order:2}
  .k-gorsel .pk-sarici{display:none}
  .sss-grid{grid-template-columns:1fr}
  .f-ic{grid-template-columns:1fr}
  .yan{display:none}
  .mock-kart{width:100%}
  .hero .kart-rec,.hero .kart-render{display:none}
  .logo-kat{left:0;top:-12%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .g1,.g2,.g3,.g4,.g5,.g6,.g7,.hero .deste .ekran,.hero .logo-kat,.hero .kart-rec,
  .hero .kart-render,.hero .hap,.rv,.komp .mock-kart,.komp .yan{
    opacity:1 !important;animation:none !important;transition:none !important;transform:none !important}
  .komp .yan.sol{transform:translateY(-50%) rotate(-4deg) !important}
  .komp .yan.sag{transform:translateY(-50%) rotate(4deg) !important}
  .logo-kat .gorsel,.logo-kat .golge,.pk-cubuk i,.url-bar .imlec,.pk-alt b.kirmizi{animation:none !important}
}

/* ═══ BACKGROUND SYSTEM — section backdrops, all edge to edge ═══ */
.zmn{position:relative;isolation:isolate}
.zmn::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:100vw;
  transform:translateX(-50%);z-index:-1;pointer-events:none}

/* aurora corner washes */
.zmn-aurora::before{background:
  radial-gradient(52vw 30vw at 6% 18%,rgba(124,58,237,.15),transparent 65%),
  radial-gradient(46vw 28vw at 96% 42%,rgba(46,168,255,.16),transparent 65%),
  radial-gradient(40vw 24vw at 50% 104%,rgba(255,122,70,.11),transparent 62%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent)}

/* logo monogram dokusu */
.zmn-desen::before{background:url('logo_desen.webp') repeat;background-size:460px 460px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}

/* fine engineering grid */
.zmn-izgara::before{background:
  linear-gradient(rgba(51,92,255,.12) 1px,transparent 1px),
  linear-gradient(90deg,rgba(51,92,255,.12) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(closest-side at 50% 50%,#000 30%,transparent 100%);
  mask-image:radial-gradient(closest-side at 50% 50%,#000 30%,transparent 100%)}

/* corner blobs */
.zmn-kose::before{background:
  radial-gradient(38vw 38vw at 0% 0%,rgba(124,58,237,.14),transparent 70%),
  radial-gradient(42vw 42vw at 100% 100%,rgba(46,168,255,.14),transparent 70%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent)}

/* konsantrik halkalar */
.zmn-halka::before{background:repeating-radial-gradient(circle at 50% 46%,
  transparent 0 118px,rgba(93,63,211,.08) 118px 120px);
  -webkit-mask-image:radial-gradient(closest-side at 50% 46%,#000 35%,transparent 96%);
  mask-image:radial-gradient(closest-side at 50% 46%,#000 35%,transparent 96%)}

/* hayalet logo */
.zmn-logo::after{content:'';position:absolute;left:1vw;top:50%;
  transform:translateY(-46%);width:clamp(420px,30vw,720px);aspect-ratio:1221/1233;
  z-index:-1;background:url('logo3d_buyuk.webp') no-repeat center/contain;
  opacity:.16;pointer-events:none}
.zmn-logo.z-sag::after{left:auto;right:1vw}

/* ═══ NIGHT SECTION — white-to-dark transition + neon logo (clip) ═══ */
#klip.gece{background:linear-gradient(180deg,#f3f5fc 0px,#151936 58px,#0b0d16 620px,
  #0b0d16 calc(100% - 420px),#f3f5fc 100%);
  padding-bottom:clamp(110px,9vw,190px)}
/* baslik koyu zemine otursun: acik gecis kisa, icerik biraz asagida */
.gece.bolum:first-of-type{padding-top:clamp(58px,4.4vw,86px)}
#klip.gece::before{content:'';position:absolute;inset:460px 0 260px;pointer-events:none;background:
  radial-gradient(900px 620px at 86% 26%,rgba(124,58,237,.20),transparent 62%),
  radial-gradient(820px 560px at 8% 62%,rgba(51,92,255,.16),transparent 62%),
  radial-gradient(700px 480px at 55% 96%,rgba(236,72,153,.10),transparent 60%)}
#klip.gece::after{content:'';position:absolute;right:-2vw;top:34%;z-index:1;
  width:min(44vw,880px);aspect-ratio:1400/933;
  background:url('logo_neon.webp') no-repeat center/contain;
  mix-blend-mode:screen;opacity:.9;pointer-events:none}
.gece .bolum-bas,.gece .bantlar{position:relative;z-index:2}
.gece .bolum-bas h2{color:#fff}
.gece .bolum-bas h2 em{background:linear-gradient(92deg,#c4b5fd 0%,#93c5fd 55%,#7dd3fc 100%);
  -webkit-background-clip:text;background-clip:text}
.gece .bolum-bas > p{color:#a7aec9}
.gece .gozkasi{background:rgba(13,16,35,.58);color:#d3daff}

/* night mode for the settings section — the spine adapted to a dark background */
#ayarlar.gece{background:linear-gradient(180deg,#f3f5fc 0px,#151936 58px,#0b0d16 620px,
  #0b0d16 calc(100% - 420px),#f3f5fc 100%);padding-bottom:clamp(110px,9vw,190px)}
#ayarlar.gece::before{content:'';position:absolute;inset:460px 0 260px;pointer-events:none;background:
  radial-gradient(900px 620px at 12% 22%,rgba(124,58,237,.18),transparent 62%),
  radial-gradient(820px 560px at 90% 58%,rgba(51,92,255,.15),transparent 62%),
  radial-gradient(700px 480px at 45% 96%,rgba(236,72,153,.09),transparent 60%)}
.gece .omur{z-index:2}
.gece .o-metin h3{color:#fff}
.gece .o-metin h3 em{background:linear-gradient(92deg,#c4b5fd 0%,#93c5fd 55%,#7dd3fc 100%);
  -webkit-background-clip:text;background-clip:text}
.gece .o-metin p{color:#a7aec9}
.gece .o-metin .no{color:#8fb3ff}
.gece .zmn-halka::before{background:repeating-radial-gradient(circle at 50% 46%,
  transparent 0 118px,rgba(158,140,255,.13) 118px 120px)}
/* DETAIL PAGES — shared shell (v2 background + page head + transition cards) */
body{background:#f3f5fc}
.gren{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
.zmn-aurora::before{background:
  radial-gradient(54vw 34vw at 6% 16%,rgba(124,58,237,.24),transparent 64%),
  radial-gradient(50vw 32vw at 96% 40%,rgba(46,168,255,.25),transparent 64%),
  radial-gradient(46vw 28vw at 46% 104%,rgba(236,72,153,.16),transparent 62%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent)}
nav{transition:box-shadow .25s ease}
nav.kaydi{box-shadow:0 8px 30px rgba(28,36,84,.09)}
nav .linkler a.aktif{color:var(--murekkep);position:relative}
nav .linkler a.aktif::after{content:"";position:absolute;left:0;right:0;bottom:-.5em;height:2px;
  border-radius:2px;background:var(--grad)}

/* breadcrumb */
.kirinti{max-width:1700px;margin:0 auto;padding:clamp(90px,7vw,130px) clamp(20px,3vw,64px) 0;
  font-family:var(--metin);font-weight:600;font-size:clamp(12.5px,.9vw,16px);color:#8a92a8}
.kirinti a{color:var(--mavi);text-decoration:none}
.kirinti a:hover{text-decoration:underline}
.kirinti span{margin:0 .5em;color:#c2c8d8}
.bolum:first-of-type{padding-top:clamp(24px,2vw,40px)}
.bolum-bas h1{margin-top:clamp(20px,1.6vw,32px);font-weight:800;
  font-size:clamp(34px,3.6vw,68px);line-height:1.06;letter-spacing:-.016em;text-wrap:balance}
.bolum-bas h1 em{font-style:normal;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.gece .bolum-bas h1{color:#fff}
.gece .bolum-bas h1 em{background:linear-gradient(92deg,#c4b5fd 0%,#93c5fd 55%,#7dd3fc 100%);
  -webkit-background-clip:text;background-clip:text}

/* cards leading to the other features */
.sonraki-bolum{padding-bottom:clamp(20px,2vw,40px)}
.sonraki{max-width:1700px;margin:clamp(30px,2.4vw,50px) auto 0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.2vw,24px);text-align:start}
.snk{display:flex;flex-direction:column;gap:.5em;padding:clamp(18px,1.5vw,30px);
  background:#fff;border:1px solid var(--cizgi);border-radius:1.2em;text-decoration:none;
  color:inherit;box-shadow:0 10px 26px rgba(28,36,84,.06);
  transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease,border-color .2s ease}
.snk:hover{transform:translateY(-5px);border-color:#cfdaff;box-shadow:0 20px 44px rgba(28,36,84,.13)}
.snk i{font-style:normal;font-weight:800;font-size:clamp(11px,.8vw,14px);letter-spacing:.1em;
  color:#fff;background:var(--grad);border-radius:.45em;padding:.3em .7em;align-self:flex-start}
.snk b{font-weight:800;font-size:clamp(16px,1.25vw,23px);letter-spacing:-.012em;line-height:1.2}
.snk p{font-family:var(--metin);font-weight:500;font-size:clamp(13px,.95vw,17px);
  line-height:1.5;color:var(--govde)}
.snk span{margin-top:auto;display:inline-flex;align-items:center;gap:.45em;
  font-weight:800;font-size:clamp(13px,.95vw,17px);color:var(--mavi)}
.snk span svg{flex:none;width:1.05em;height:1.05em;
  transition:transform .18s cubic-bezier(.22,.61,.36,1)}
.snk:hover span svg{transform:translateX(5px)}
@media (max-width:1000px){.sonraki{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.sonraki{grid-template-columns:1fr}}

/* ── keep the nav from overflowing on a narrow screen ── */
@media (max-width:760px){
  nav{gap:14px;padding:10px 16px}
  nav .marka{font-size:17px;gap:8px}
  nav .marka img{width:26px}
  nav .linkler{gap:14px}
  nav .linkler a{font-size:13.5px}
  nav .mini-cta{padding:.5em 1.1em;font-size:13.5px}
  .sadece-genis{display:none}
}

/* ── mobile menu button (CSS-only, no JS needed) ── */
.nav-ac{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.nav-dug{display:none;align-items:center;justify-content:center;flex:none;
  width:44px;height:40px;cursor:pointer;border-radius:11px;
  border:1px solid var(--cizgi);background:#fff}
.nav-dug span{position:relative;display:block;width:18px;height:2px;border-radius:2px;
  background:var(--murekkep);transition:background .2s ease}
.nav-dug span::before,.nav-dug span::after{content:"";position:absolute;left:0;
  width:18px;height:2px;border-radius:2px;background:var(--murekkep);
  transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.nav-dug span::before{top:-6px}
.nav-dug span::after{top:6px}
.nav-ac:checked ~ .nav-dug span{background:transparent}
.nav-ac:checked ~ .nav-dug span::before{transform:translateY(6px) rotate(45deg)}
.nav-ac:checked ~ .nav-dug span::after{transform:translateY(-6px) rotate(-45deg)}
.nav-ac:focus-visible ~ .nav-dug{outline:2px solid var(--mavi);outline-offset:2px}

/* ── nav: 5 feature links + EN + CTA · footer in 4 columns ── */
/* DIL SEKMESI - alti dil tek dugmede (9 Eylul 2026).
   Bes ayri dil baglantisi navigasyonu tasiriyordu. <details>/<summary>:
   JS'siz acilir, klavyeyle gezilir, ekran okuyucu acik/kapali durumunu
   kendi soyler. Sitede harici JS dosyasi yok. */
.dil-sec{position:relative}
.dil-sec>summary{list-style:none;cursor:pointer;-webkit-user-select:none;user-select:none;
  display:inline-flex;align-items:center;gap:.4em;padding:.2em .1em;
  font-weight:700;font-size:clamp(14px,.95vw,18px);color:var(--govde);
  transition:color .2s ease}
.dil-sec>summary::-webkit-details-marker{display:none}
.dil-sec>summary::after{content:"";width:.4em;height:.4em;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-.14em) rotate(45deg);transition:transform .2s ease}
.dil-sec[open]>summary::after{transform:translateY(.08em) rotate(-135deg)}
.dil-sec>summary:hover,.dil-sec[open]>summary{color:var(--murekkep)}
.dil-sec>summary:focus-visible{outline:2px solid var(--mavi);outline-offset:3px;border-radius:6px}
.dil-liste{position:absolute;top:calc(100% + 12px);inset-inline-end:0;z-index:60;
  min-width:176px;padding:6px;border-radius:14px;
  background:var(--zemin);border:1px solid var(--cizgi);
  box-shadow:0 18px 44px rgba(18,20,31,.16);
  display:flex;flex-direction:column}
.dil-liste a,.dil-liste .dil-simdi{position:relative;display:block;
  padding:.5em .9em .5em 2.1em;border-radius:9px;white-space:nowrap;
  font-size:15px;font-weight:600;color:var(--govde);text-decoration:none}
.dil-liste a:hover{background:var(--kutu);color:var(--murekkep)}
.dil-liste .dil-simdi{color:var(--murekkep);font-weight:800}
.dil-liste .dil-simdi::before{content:"\2713";position:absolute;inset-inline-start:.85em;color:var(--mavi)}
nav .linkler a{white-space:nowrap}
.f-ic{grid-template-columns:2fr 1fr 1fr 1fr}
@media (max-width:1180px){
  nav .linkler{gap:clamp(16px,1.6vw,28px)}
  .f-ic{grid-template-columns:1.6fr 1fr 1fr 1fr}
}
@media (max-width:900px){
  .deste,.se-deste{width:100%}
  nav{flex-wrap:wrap;row-gap:10px;gap:12px;padding:10px clamp(16px,3vw,32px)}
  nav .marka{margin-inline-end:auto}
  nav{row-gap:0}
  .nav-dug{display:flex;order:3}
  .sadece-genis{display:none}
  nav .linkler{order:4;width:100%;margin-inline-start:0;flex-direction:column;align-items:stretch;
    gap:0;max-height:0;overflow:hidden;transition:max-height .3s ease}
  .nav-ac:checked ~ .linkler{max-height:78vh;overflow-y:auto}
  nav .linkler a{font-size:16px;padding:14px 2px;border-top:1px solid var(--cizgi)}
  nav .linkler a:first-child{margin-top:6px}
  .kirinti{padding-top:84px}
  .f-ic{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .f-ic{grid-template-columns:1fr}
}

/* pulled inward so the decorative overflow is not clipped on a narrow screen */
@media (max-width:1000px){
  .deste::before{inset:8% 0 1% 0}
  #klip.gece::after,#ayarlar.gece::after{right:0}
}

/* BETA ROZETI — kelime markasinin yanindaki statu etiketi.
   Baloo 2 (rozet/dugme fontu) · marka gradyani · her dilde LATIN « beta ». */
nav .marka .beta{
  font-family:var(--sans);font-weight:800;font-size:.60em;line-height:1;
  letter-spacing:.10em;text-transform:lowercase;
  padding:.30em .55em .34em;border-radius:6px;
  background:var(--grad);color:#fff;
  margin-inline-start:.45em;vertical-align:.28em;
  box-shadow:0 1px 5px rgba(51,92,255,.30)
}
@media (max-width:640px){nav .marka .beta{font-size:.55em;padding:.26em .45em .30em}}

/* « henuz beta » notu — bes sayfada ayni cumle, ayni bicim. */
.beta-not{max-width:660px;margin:16px auto 0;padding:11px 14px;
  font-family:var(--metin);font-size:13.5px;line-height:1.6;color:var(--govde);
  border-radius:10px;background:rgba(51,92,255,.055);
  border:1px solid rgba(51,92,255,.16);text-align:start}
.beta-not b{color:var(--murekkep);font-weight:700}

/* 🖨 BASKI — kagida yalnizca ICERIK gider.
   Gizlilik ve Belgeler sayfalari basilmaya aday; menu, altbilgi, dekor
   katmani ve canli maketler kagitta ise yaramaz, murekkep harcar. */
@media print{
  nav, footer, .f-sosyal, .dil-sec, .dekor, .arka, video, .beta-not{display:none!important}
  html,body{background:#fff!important;color:#000!important}
  *{box-shadow:none!important; text-shadow:none!important;
    background-image:none!important; animation:none!important}
  a{color:#000!important; text-decoration:underline}
  /* baglantinin nereye gittigi kagitta gorunmez — adresi yazdir */
  main a[href^="http"]::after{content:" (" attr(href) ")"; font-size:.85em; word-break:break-all}
  img{max-width:100%!important; page-break-inside:avoid}
  h1,h2,h3{page-break-after:avoid}
  p,li{orphans:3; widows:3}
  @page{margin:1.6cm}
}

/* ♿ YUKSEK KONTRAST — isletim sisteminde acan kullanici icin.
   Soluk gri govde metni koyulasiyor, sac teli cizgiler belirginlesiyor. */
@media (prefers-contrast:more){
  :root{--govde:#2a2d3a; --cizgi:#9aa0b0; --dim:#2a2d3a; --faint:#4a4f5e}
  a{text-decoration:underline}
  :focus-visible{outline:3px solid currentColor; outline-offset:2px}
}