/* catchhub.net — beyaz, sade. Harici yazı tipi ya da kütüphane yok; Windows'ta Segoe UI Variable, diğerlerinde sistem yazısı. */
:root{
  --zemin:#ffffff; --zemin2:#f6f5f8; --yazi:#17141d; --yazi2:#55505f; --yazi3:#8b8694;
  --cizgi:#e7e5ec; --vurgu:#f0447f; --en:1120px;
  --baslik:"Segoe UI Variable Display","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --govde:"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--zemin);color:var(--yazi);font:17px/1.6 var(--govde);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--baslik);letter-spacing:-.022em;font-weight:600}

/* üst */
.ust{max-width:var(--en);margin:0 auto;padding:22px 24px;display:flex;align-items:center}
.marka{display:inline-flex;align-items:center;gap:9px;font-family:var(--baslik);font-weight:600;font-size:17px;letter-spacing:-.01em}
nav{margin-left:auto;display:flex;align-items:center;gap:26px;font-size:15px;color:var(--yazi2)}
nav a:hover{color:var(--yazi)}
nav .destek-btn{padding:6px 14px;border:1px solid var(--cizgi);border-radius:999px;color:var(--yazi);font-weight:500;transition:background .15s,border-color .15s}
nav .destek-btn:hover,nav .destek-btn.aktif{background:var(--zemin2);border-color:#d9d6e0}
.diller{display:flex;gap:2px;margin-left:6px}
.diller button{all:unset;cursor:pointer;padding:2px 6px;font-size:13px;color:var(--yazi3);border-radius:5px}
.diller button:hover{color:var(--yazi)}
.diller button.aktif{color:var(--yazi);font-weight:600}

main{max-width:var(--en);margin:0 auto;padding:0 24px}

/* giriş */
.giris{text-align:center;padding:64px 0 56px}
.duyuru{display:inline-flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border:1px solid var(--cizgi);border-radius:999px;font-size:13.5px;
  color:var(--yazi2);background:#fff;box-shadow:0 1px 2px rgba(23,20,29,.05);transition:border-color .2s,box-shadow .2s;animation:gir .7s cubic-bezier(.2,.7,.2,1) both}
.duyuru:hover{border-color:#d9d6e0;box-shadow:0 4px 14px -6px rgba(23,20,29,.18)}
.duyuru b{background:var(--vurgu);color:#fff;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px}
.duyuru i{font-style:normal;color:var(--yazi3)}
.giris h1{max-width:15em}
/* renk geçişi yazının kutusuna boyanır: sıkı satır aralığında y, g kuyrukları kesiliyordu; alt boşluk boya alanını uzatır */
h1 em{display:block;padding-bottom:.14em;margin-bottom:-.14em;font-style:normal;background:linear-gradient(100deg,#f0447f 10%,#a855f7 60%,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent}
.simge{margin:0 auto;border-radius:17px;box-shadow:0 1px 2px rgba(23,20,29,.08),0 8px 24px -10px rgba(23,20,29,.35);animation:gir .7s cubic-bezier(.2,.7,.2,1) both}
.ad{margin-top:18px;font-family:var(--baslik);font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--yazi2);animation:gir .7s .05s cubic-bezier(.2,.7,.2,1) both}
h1{font-size:clamp(40px,6vw,74px);line-height:1.03;margin:26px auto 0;max-width:12em;letter-spacing:-.038em;animation:gir .8s .1s cubic-bezier(.2,.7,.2,1) both}
.on{font-size:clamp(18px,2vw,21px);line-height:1.5;color:var(--yazi2);max-width:30em;margin:20px auto 0;animation:gir .8s .18s cubic-bezier(.2,.7,.2,1) both}
.giris .indir,.giris .bilgi,.giris .guven{animation:gir .8s .26s cubic-bezier(.2,.7,.2,1) both}
.guven{margin-top:6px;font-size:13.5px;color:var(--yazi3)}
@keyframes gir{from{opacity:0;transform:translateY(14px)}}
.indir{display:inline-block;margin-top:34px;padding:13px 26px;border-radius:10px;background:var(--yazi);color:#fff;font-weight:600;font-size:16px;
  transition:background .15s}
.indir:hover{background:#2f2a38}
.bilgi{margin-top:14px;font-size:14px;color:var(--yazi3);display:flex;justify-content:center;flex-wrap:wrap;gap:0 14px}
.bilgi span+span::before{content:"·";margin-right:14px;color:var(--cizgi)}

/* ekran görüntüleri */
.ekran{position:relative;container-type:inline-size;border-radius:12px;overflow:hidden;border:1px solid var(--cizgi);
  box-shadow:0 1px 2px rgba(23,20,29,.04),0 30px 60px -32px rgba(23,20,29,.28);background:var(--zemin2)}
.vitrin{position:relative;isolation:isolate;margin:0 -40px;animation:gir 1s .32s cubic-bezier(.2,.7,.2,1) both}
/* vitrinin arkasında yumuşak marka rengi parlaması */
.parilti{position:absolute;inset:-6% -4% 10%;z-index:-1;filter:blur(70px);opacity:.42;pointer-events:none;
  background:radial-gradient(40% 50% at 22% 40%,#f9a8c9,transparent 70%),radial-gradient(45% 55% at 78% 35%,#c4b5fd,transparent 70%),
             radial-gradient(35% 40% at 50% 85%,#fbcfe8,transparent 70%)}
/* süzülen örnek kartlar */
/* süzülme ekran kartında (transform + will-change) yapılır: "translate" ve arka plan bulanıklığıyla piksel piksel titriyordu */
.yuzen{position:absolute;z-index:2;display:flex;align-items:center;gap:11px;padding:12px 16px;background:#fff;
  border:1px solid var(--cizgi);border-radius:14px;font-size:13px;line-height:1.35;will-change:transform;backface-visibility:hidden;
  box-shadow:0 2px 4px rgba(23,20,29,.04),0 18px 40px -16px rgba(23,20,29,.28);
  animation:yuzgir .8s cubic-bezier(.2,.7,.2,1) both,yuz 8s cubic-bezier(.45,0,.55,1) infinite}
.yuzen div{display:flex;flex-direction:column}
.yuzen b{font-family:var(--baslik);font-size:15px;font-weight:600;color:var(--yazi);font-variant-numeric:tabular-nums}
.yuzen span{color:var(--yazi3)}
.yuzen svg{width:60px;height:22px;fill:none;stroke:var(--vurgu);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.yuzen .nokta{width:10px;height:10px;border-radius:50%;background:var(--vurgu);box-shadow:0 0 0 0 rgba(240,68,127,.5);animation:nabiz 2s infinite}
.y1{left:-58px;top:44%;animation-delay:.9s,0s} .y2{right:-46px;top:9%;animation-delay:1.1s,-2s}
.y3{right:-66px;bottom:24%;animation-delay:1.3s,-4s} .y4{left:-42px;bottom:6%;animation-delay:1.5s,-1s}
@keyframes yuzgir{from{opacity:0;scale:.94}}
@keyframes yuz{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-8px,0)}}
@keyframes nabiz{70%{box-shadow:0 0 0 9px rgba(240,68,127,0)}100%{box-shadow:0 0 0 0 rgba(240,68,127,0)}}
.vitrin .ekran img{transition:opacity .45s ease}
.vitrin .ekran img.soluk{opacity:0}
/* selamlama: her açılışta farklı bir isim; konum ve boyut görüntü genişliğine oranlı (uygulamada 1440 px pencerede 12 px yazı).
   Yazı tipi, renk ve küçük dikey fark temaya göre dil.js'ten gelir (uygulamadaki ölçümler). */
.selam{position:absolute;left:calc(var(--sx,100) * 100cqw / 1440);top:calc(var(--sy,78.3) * 100cqw / 1440);
  font:calc(100cqw * 12 / 1440)/1.45 var(--sf,"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif);
  color:var(--sr,rgba(16,14,28,.6));white-space:nowrap;transition:opacity .4s}
.selam b{color:var(--sb,rgba(16,14,28,.92));font-weight:600}
/* tema seçici */
.temalar{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 8px;margin-top:22px}
.temalar .etk{font-size:13px;color:var(--yazi3);margin-right:6px}
.temalar button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 8px;border-radius:999px;
  font-size:13.5px;color:var(--yazi2);border:1px solid transparent;transition:background .2s,border-color .2s,color .2s}
.temalar button:hover{background:var(--zemin2);color:var(--yazi)}
.temalar button.aktif{border-color:var(--cizgi);background:#fff;color:var(--yazi);box-shadow:0 1px 2px rgba(23,20,29,.06)}
.temalar i{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--z) 0 55%,var(--v) 55%);box-shadow:inset 0 0 0 1px rgba(23,20,29,.12)}

/* özellikler: her biri kendi açık renkli panelinde; metin üstte, ekran görüntüsü panelin altına yaslı */
.satir{margin-top:28px}
#ozellikler{margin-top:130px}
.panel{border-radius:28px;padding:64px 64px 0;overflow:hidden}
.panel.lavanta{background:#f4f1ff} .panel.pembe{background:#fff1f6} .panel.nane{background:#ecf8f2}
.metin{max-width:620px}
.metin h2{font-size:clamp(28px,3.2vw,38px);line-height:1.12}
.metin p{color:var(--yazi2);margin-top:16px;font-size:18px}
.panel .ekran{margin-top:44px;border-radius:14px 14px 0 0;border-bottom:0;box-shadow:0 -1px 0 rgba(23,20,29,.02),0 24px 60px -24px rgba(23,20,29,.3);
  transform:translateY(24px);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.panel.gorundu .ekran{transform:none}

/* oyun modu: koyu panel, adımlar sırayla yanar */
.oyun{margin-top:28px;border-radius:28px;padding:64px;background:#15121b;color:#f4f1f8;display:grid;grid-template-columns:5fr 6fr;gap:56px;align-items:center}
.oyun .metin p{color:#b4adbf}
.akis{list-style:none;position:relative}
.akis::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:2px;background:#2c2735}
.akis li{position:relative;padding:12px 0 12px 32px;display:grid;grid-template-columns:52px 1fr;column-gap:12px;opacity:.38;transition:opacity .5s}
.akis li::before{content:"";position:absolute;left:0;top:19px;width:12px;height:12px;border-radius:50%;background:#2c2735;transition:background .4s,box-shadow .4s}
.akis li.yandi{opacity:1}
.akis li.yandi::before{background:var(--vurgu);box-shadow:0 0 0 5px rgba(240,68,127,.18)}
.akis .saat{grid-row:span 2;font-variant-numeric:tabular-nums;color:#8c8597;font-size:14px;padding-top:2px}
.akis b{font-family:var(--baslik);font-weight:600;font-size:17px}
.akis span:last-child{color:#a59fb0;font-size:14.5px}

.ust-etk{font-size:14px;font-weight:600;color:var(--vurgu);letter-spacing:.01em}
.bas-orta{text-align:center;max-width:760px;margin:0 auto}
.bas-orta h2,.tek h2{font-size:clamp(30px,3.8vw,46px);line-height:1.08;margin-top:10px;letter-spacing:-.03em}

/* tek uygulama: araç çipleri sırayla işaretlenir, sayaç artar */
.tek{margin-top:150px;display:grid;grid-template-columns:5fr 6fr;gap:64px;align-items:center}
.tek-metin p:not(.ust-etk){color:var(--yazi2);font-size:18px;margin-top:18px}
.sayac{display:flex;align-items:baseline;gap:12px;margin-top:30px}
.sayac b{font-family:var(--baslik);font-size:64px;line-height:1;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  background:linear-gradient(100deg,#f0447f,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent}
.sayac span{font-size:17px;color:var(--yazi2)}
.araclar{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.araclar li{display:inline-flex;align-items:center;gap:8px;padding:9px 15px 9px 12px;border:1px solid var(--cizgi);border-radius:999px;
  font-size:14.5px;color:var(--yazi3);background:#fff;transition:color .4s,border-color .4s,background .4s,transform .4s}
.araclar li::before{content:"";width:16px;height:16px;border-radius:50%;border:1.5px solid #d6d2dd;transition:all .35s;flex:none;
  background:no-repeat center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.araclar li.alindi{color:var(--yazi);border-color:#f6c3d6;background:#fff7fa}
.araclar li.alindi::before{border-color:var(--vurgu);background-color:var(--vurgu)}
.no-js .araclar li,.araclar.hepsi li{color:var(--yazi)}

/* tur: solda sekmeler (ilerleme çubuğuyla), sağda ekran */
.tur{margin-top:150px}
.tur-ic{display:grid;grid-template-columns:340px 1fr;gap:40px;margin-top:48px;align-items:start}
.sekmeler{display:flex;flex-direction:column;gap:4px}
.sekme{all:unset;cursor:pointer;position:relative;display:block;padding:16px 18px 16px 20px;border-radius:14px;transition:background .25s}
.sekme b{display:block;font-family:var(--baslik);font-weight:600;font-size:17px;color:var(--yazi3);transition:color .25s}
.sekme span{display:block;font-size:14.5px;line-height:1.5;color:var(--yazi3);margin-top:4px;max-height:0;overflow:hidden;opacity:0;
  transition:max-height .45s ease,opacity .35s ease}
.sekme i{position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--cizgi);overflow:hidden}
.sekme i::after{content:"";position:absolute;inset:0;background:var(--vurgu);transform:scaleY(0);transform-origin:top}
.sekme:hover b{color:var(--yazi)}
.sekme.aktif{background:var(--zemin2)}
.sekme.aktif b{color:var(--yazi)}
.sekme.aktif span{max-height:6em;opacity:1;color:var(--yazi2)}
.sekme.aktif i::after{animation:dolum var(--sure,6s) linear forwards}
.sekme.aktif.durdu i::after{animation:none;transform:none}
@keyframes dolum{to{transform:scaleY(1)}}
.tur-ekran{aspect-ratio:16/10;background:#f1eef8}
.tur-ekran img{width:100%;height:100%;object-fit:cover;object-position:top center;
  /* güncellemeler gibi kısa ekranlar yanlardan kırpılmasın */transition:opacity .4s ease}
.tur-ekran img.soluk{opacity:0}
.tur-ekran img.genis{object-fit:contain}

/* bütün özellikler */
.katalog{margin-top:150px}
.kartlar{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.kart{padding:26px 26px 24px;border:1px solid var(--cizgi);border-radius:20px;background:#fff;transition:border-color .25s,box-shadow .25s,translate .25s}
.kart:hover{border-color:#e2dfe8;box-shadow:0 18px 40px -24px rgba(23,20,29,.25);translate:0 -2px}
.kart svg{width:36px;height:36px;padding:7px;border-radius:10px;background:#f4f1ff;fill:none;stroke:#7c3aed;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.kart:nth-child(3n+2) svg{background:#fff1f6;stroke:#e11d74} .kart:nth-child(3n) svg{background:#ecf8f2;stroke:#0f9b63}
.kart h3{font-size:18px;margin-top:14px}
.kart ul{list-style:none;margin-top:10px}
.kart li{font-size:15px;color:var(--yazi2);padding:5px 0 5px 18px;position:relative}
.kart li::before{content:"";position:absolute;left:2px;top:13px;width:6px;height:6px;border-radius:50%;background:#d6d2dd}

/* kaydırınca yumuşakça belirme (hareket azaltma tercihinde kapalı) */
.js .belir{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js .belir.gorundu{opacity:1;transform:none}

.uclu{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:120px;padding-top:40px;border-top:1px solid var(--cizgi)}
.uclu h3{font-size:19px;line-height:1.3}
.uclu p{color:var(--yazi2);margin-top:10px;font-size:16px}

.ozet{margin:130px auto 0;max-width:28em;text-align:center;font-family:var(--baslik);font-size:clamp(22px,2.6vw,28px);line-height:1.4;
  letter-spacing:-.015em;color:var(--yazi)}

/* yenilikler, sorular */
#yenilikler,#sss{margin-top:140px}
.baslik{font-size:clamp(26px,3vw,32px);padding-bottom:18px;border-bottom:1px solid var(--cizgi)}
.surumler{list-style:none}
.surumler li{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--cizgi)}
.surumler .no{font-family:var(--baslik);font-weight:600;font-variant-numeric:tabular-nums}
.surumler p{color:var(--yazi2)}
.sorular{display:grid;grid-template-columns:1fr 1fr;gap:34px 56px;margin-top:30px}
.sorular h3{font-size:18px;line-height:1.35}
.sorular p{color:var(--yazi2);margin-top:8px;font-size:16px}

.son{position:relative;isolation:isolate;text-align:center;margin-top:150px;padding:80px 0 40px}
.son .parilti{inset:0 10%;opacity:.35}
.son img{margin:0 auto;border-radius:15px;box-shadow:0 1px 2px rgba(23,20,29,.08),0 10px 28px -10px rgba(23,20,29,.35)}
.son h2{font-size:clamp(32px,4.4vw,54px);line-height:1.05;letter-spacing:-.035em;margin-top:26px}
.son p{color:var(--yazi2);font-size:18px;margin-top:14px}
.son .indir{margin-top:28px}

footer{max-width:var(--en);margin:90px auto 0;padding:28px 24px 44px;border-top:1px solid var(--cizgi);display:flex;align-items:center;
  flex-wrap:wrap;gap:12px 26px;font-size:14px;color:var(--yazi3)}
footer .marka{font-size:14px;color:var(--yazi)}
footer a:hover{color:var(--yazi)}
footer .sag{margin-left:auto}

/* gizlilik */
.yazi-sayfa{max-width:720px;margin:56px auto 0}
.yazi-sayfa h1{font-size:clamp(34px,4.4vw,44px);margin-top:0}
.yazi-sayfa .tarih{color:var(--yazi3);font-size:14px;margin-top:10px}
.yazi-sayfa h2{font-size:21px;margin-top:40px}
.yazi-sayfa p,.yazi-sayfa li{color:var(--yazi2);margin-top:12px}
.yazi-sayfa ul{padding-left:20px}
.yazi-sayfa a{color:var(--yazi);text-decoration:underline;text-decoration-color:var(--vurgu);text-underline-offset:3px}

.lisans-liste li{font-size:15px}
.lisans-liste a{text-decoration-color:var(--cizgi)}
/* destek */
.destek{max-width:640px}
.destek .giris-yazi{font-size:19px;color:var(--yazi2);margin-top:14px}
.destek form{margin-top:40px}
.destek label{display:block;font-weight:600;font-size:15px;margin:22px 0 8px}
.destek textarea,.destek input{width:100%;font:16px/1.5 var(--govde);color:var(--yazi);background:#fff;border:1px solid var(--cizgi);border-radius:10px;
  padding:12px 14px;transition:border-color .15s,box-shadow .15s;resize:vertical}
.destek textarea:focus,.destek input:focus{outline:0;border-color:#b9b3c4;box-shadow:0 0 0 4px rgba(23,20,29,.06)}
.destek ::placeholder{color:var(--yazi3)}
.destek .ipucu{font-size:13.5px;color:var(--yazi3);margin-top:6px}
.destek details{margin-top:26px;border-top:1px solid var(--cizgi);padding-top:16px}
.destek summary{cursor:pointer;font-weight:600;font-size:15px;color:var(--yazi2)}
.destek details textarea{margin-top:10px;font:13px/1.55 Consolas,"Cascadia Mono",monospace;color:var(--yazi2);background:var(--zemin2)}
.destek .indir{border:0;cursor:pointer;font-family:inherit}
.destek .indir:disabled{opacity:.6;cursor:default}
.destek .durum{margin-top:12px;font-size:14.5px;color:var(--yazi2);min-height:1.6em}
.destek .durum.kotu{color:#c2264f}
.destek .tuzak{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.destek .tamam{margin-top:40px;padding:28px 30px;border-radius:18px;background:#ecf8f2}
.destek .tamam h2{margin-top:0}
.destek .alt-not{margin-top:48px;font-size:15px}

@media (max-width:1180px){.vitrin{margin:0} .y1,.y4{left:-14px} .y2,.y3{right:-14px}}
@media (max-width:980px){
  .tek{grid-template-columns:1fr;gap:36px}
  .tur-ic{grid-template-columns:1fr;gap:20px}
  .sekmeler{flex-direction:row;overflow-x:auto;gap:6px;scrollbar-width:none;margin:0 -24px;padding:0 24px}
  .sekme{flex:none;padding:10px 16px;border-radius:999px;border:1px solid var(--cizgi)}
  .sekme b{font-size:14.5px} .sekme span,.sekme i{display:none}
  .kartlar{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  #ozellikler{margin-top:80px}
  .panel{padding:34px 22px 0;border-radius:22px}
  .panel .ekran{margin-top:26px}
  .oyun{grid-template-columns:1fr;gap:28px;padding:34px 22px;border-radius:22px}
  .uclu,.sorular{grid-template-columns:1fr;gap:28px}
  .surumler li{grid-template-columns:80px 1fr;gap:16px}
  nav a:not(.destek-btn){display:none}
  .yuzen{display:none}
  .kartlar{grid-template-columns:1fr}
  .tek,.tur,.katalog{margin-top:96px}
  .sayac b{font-size:52px}
  nav{gap:14px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}
  .js .belir{opacity:1;transform:none} .panel .ekran{transform:none} .akis li{opacity:1}
  .araclar li{color:var(--yazi)} .sekme.aktif i::after{transform:none}}