/* Weorclip secondary pages — LIGHT THEME (CapCut language, 2K scale). The variable names of the old dark theme (--ink/--dim/--faint/--hair/--hair2/--mono/--sans) are kept, mapped to their LIGHT equivalents, so the in-page <style> blocks do not break. */

@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;
  /* aliases for the old names */
  --ink:#12141f; --dim:#5b6070; --faint:#9aa0ae;
  --hair:#e8eaf0; --hair2:#d8dbe4;
  --mono:'Inter',system-ui,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;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
img{max-width:100%}
/* a very light aurora background, matching the home page */
body{background:#f3f5fc}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(62vw 46vh at 4% 0%,rgba(124,58,237,.16),transparent 64%),
  radial-gradient(56vw 42vh at 100% 22%,rgba(46,168,255,.17),transparent 64%),
  radial-gradient(50vw 36vh at 46% 100%,rgba(236,72,153,.10),transparent 62%)}
body::after{content:'';position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.04;
  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")}
@media (max-width:820px){body::after{display:none}}
/* long text and eyebrows in Inter — headings/buttons/badges in Baloo 2 (chosen pairing) */
p,li,dd,td,.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}
}

/* ── PAGE SKELETON ── */
.orta,.kolon{max-width:clamp(720px,52vw,1000px);margin:0 auto;
  padding:calc(clamp(58px,5vw,96px) + 7vh) clamp(20px,3vw,48px) 10vh}
.orta{text-align:center}
.kolon{text-align:start}

.gozkasi,.cap{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)}
.cap::before{content:"";width:.6em;height:.6em;border-radius:50%;background:var(--grad)}

h1{margin-top:clamp(20px,1.6vw,32px);font-weight:800;
  font-size:clamp(32px,3.3vw,60px);line-height:1.08;letter-spacing:-.014em;text-wrap:balance}
h1 em{font-style:normal;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.vurgu{margin:clamp(16px,1.2vw,24px) auto 0;max-width:38em;font-weight:500;
  font-size:clamp(15px,1.2vw,21px);line-height:1.65;color:var(--govde)}
.kolon .vurgu{margin-inline-start:0}

h2{margin:clamp(34px,2.6vw,52px) 0 10px;font-weight:800;
  font-size:clamp(20px,1.6vw,29px);letter-spacing:-.015em}
p{font-weight:500;font-size:clamp(14.5px,1.05vw,18.5px);line-height:1.7;color:var(--govde)}
p + p{margin-top:12px}
a{color:var(--mavi)}
/* 🔴 `.link` detay.css'te vardi, pages.css'te YOKTU: ayni isaretleme
   ozellik sayfalarinda kalin+altcizgisiz, gizlilik/kosullar/lisanslar/
   bagis sayfalarinda ince+altcizgili ciziliyordu. Ayni sinif, iki gorunum. */
.link{color:var(--mavi);font-weight:700;font-size:clamp(15px,1vw,19px);text-decoration:none}
.link:hover{text-decoration:underline}
b,strong{color:var(--murekkep)}

.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);margin-top:clamp(24px,1.8vw,36px)}
.btn:hover{background:var(--mavi-koyu)}
.btn span{color:#fff}

.spec{margin-top:16px;font-weight:700;font-size:clamp(12px,.85vw,16px);
  color:#9aa0ae;letter-spacing:.08em}

.kart{background:#fff;border:1px solid var(--cizgi);border-radius:1.4em;
  padding:clamp(22px,1.8vw,36px) clamp(22px,2vw,40px);text-align:start;
  box-shadow:0 14px 36px rgba(28,36,84,.08)}

.kod{font-weight:600;font-size:clamp(12px,.85vw,15px);letter-spacing:.04em;
  color:#3b4050;background:var(--kutu);border:1px solid var(--cizgi);
  border-radius:.7em;padding:12px 16px;word-break:break-all}

.geri{display:inline-block;margin-top:clamp(40px,3vw,60px);font-weight:700;
  font-size:clamp(14px,1vw,18px);color:var(--mavi);text-decoration:none}
.geri:hover{text-decoration:underline}

/* ── FOOTER ── */
footer{margin-top:auto;border-top:1px solid var(--cizgi);background:#fbfbfd}
footer > span,footer div{display:contents}
footer{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:18px clamp(20px,3vw,64px);
  font-weight:600;font-size:clamp(11.5px,.8vw,14px);color:#9aa0ae;letter-spacing:.05em}
footer a{color:#5b6070;text-decoration:none;font-weight:700}
footer a:hover{color:var(--murekkep)}
footer .f-sosyal{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
footer .f-sosyal a{display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--cizgi);
  transition:border-color .25s ease,transform .25s ease}
footer .f-sosyal svg{width:16px;height:16px;fill:#5b6070;transition:fill .25s ease}
footer .f-sosyal a:hover{border-color:#d4ddff;transform:translateY(-2px)}
footer .f-sosyal a:hover svg{fill:var(--mavi)}

@media (max-width:760px){
  .orta,.kolon{max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ── 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 ── */
/* 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-oz{flex-basis:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;
  margin:0 0 6px;padding-bottom:14px;border-bottom:1px solid var(--cizgi);
  font-weight:700;font-size:clamp(13px,.95vw,16px)}
.f-oz a{color:var(--govde);text-decoration:none}
.f-oz a:hover{color:#335cff}
@media (max-width:900px){
  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}
  main{padding-top:52px}
}

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