/* Radar Analitik · çatı site. Görsel dil harmonikradar.com "Gündüz" yönünün devamı (kağıt, mürekkep, teal, turuncu D).
   Ürün logoları yalnız img/*-logo*.png; yeniden çizilmez. */
:root{
  --kagit:#F3F0E9; --kagit-2:#EAE5DA; --beyaz:#FFFFFF;
  --murekkep:#0C1622; --soluk:#5E6B74; --cizgi:rgba(12,22,34,.12);
  --teal:#1E9E6E; --teal-parlak:#3DD598;
  --d:#F5A00B; --sari:#E0A800; --kirmizi:#E0485C; --mavi:#4C7BD9; --altin-1:#B9801A; --altin-2:#E8B04A;
  --tg-zemin:#0F1A24; --tg-bar:#1C242F; --tg-gelen:#222E3A; --tg-giden:#2B5278; --tg-link:#6AB2F2; --tg-soluk:#7F91A4;
  --ios:-apple-system,"SF Pro Text","Instrument Sans",system-ui,sans-serif;
  --baslik:"Bricolage Grotesque",system-ui,sans-serif;
  --govde:"Instrument Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --yumusak:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--kagit);color:var(--murekkep);font-family:var(--govde);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.5}
a{color:inherit}
img{max-width:100%}
code{font-family:var(--mono)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.svg-tanim{position:absolute}
.kap{max-width:1200px;margin:0 auto;padding:0 40px}
.gizli-bag{position:absolute;left:-9999px;top:0;background:var(--murekkep);color:#fff;padding:10px 14px;border-radius:8px;z-index:100}
.gizli-bag:focus{left:16px;top:16px}
:focus-visible{outline:2px solid var(--d);outline-offset:3px;border-radius:6px}

/* ---------- görünme animasyonu ---------- */
.js .gorun{opacity:0;transform:translateY(28px);transition:opacity .9s var(--yumusak),transform .9s var(--yumusak)}
.js .gorun.gorundu{opacity:1;transform:none}

/* ---------- nav ---------- */
.ust{position:sticky;top:0;z-index:30;background:rgba(243,240,233,.82);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.ust.golge{border-bottom-color:var(--cizgi)}
nav{display:flex;align-items:center;justify-content:space-between;height:78px;gap:20px}
.marka{display:flex;align-items:center;gap:12px;font-family:var(--baslik);font-weight:700;font-size:20px;letter-spacing:-.015em;text-decoration:none;white-space:nowrap}
.isaret{flex:none;border-radius:50%}
.isaret-koni{transform-origin:32px 32px;animation:don 6s linear infinite}
.nav-linkler{display:flex;gap:30px;font-size:15px;color:var(--soluk)}
.nav-linkler a{text-decoration:none}
.nav-linkler a:hover{color:var(--murekkep)}

.dugme{display:inline-flex;align-items:center;gap:10px;font:600 15px var(--govde);padding:13px 22px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;transition:transform .15s,background .15s;white-space:nowrap}
.dugme:hover{transform:translateY(-1px)}
.dugme.ana{background:var(--murekkep);color:#fff}
.dugme.ana .nokta{width:8px;height:8px;border-radius:50%;background:var(--d);box-shadow:0 0 0 4px rgba(245,160,11,.25)}
.dugme.ikinci{background:transparent;color:var(--murekkep);box-shadow:inset 0 0 0 1px rgba(12,22,34,.25)}
.dugme.ikinci:hover{background:rgba(12,22,34,.04)}

@keyframes don{to{transform:rotate(360deg)}}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);align-items:center;gap:clamp(24px,4vw,64px);min-height:calc(100vh - 78px);padding:24px 0 64px}
.rozet{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500;margin-bottom:28px;padding:7px 14px 7px 10px;border-radius:999px;background:var(--beyaz);box-shadow:0 1px 0 var(--cizgi)}
.rozet i{width:9px;height:9px;border-radius:50%;background:var(--d);animation:nabiz 2.4s ease-out infinite}
@keyframes nabiz{0%{box-shadow:0 0 0 0 rgba(245,160,11,.5)}70%,100%{box-shadow:0 0 0 9px rgba(245,160,11,0)}}
h1{font-family:var(--baslik);font-weight:800;font-size:clamp(46px,6.2vw,92px);line-height:.95;letter-spacing:-.04em}
.t{color:var(--teal)}
.hero .alt{margin-top:28px;font-size:clamp(17px,1.4vw,19px);color:var(--soluk);max-width:520px}
.hero .alt b{color:var(--murekkep);font-weight:600}
.cta{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
.aile{list-style:none;display:flex;gap:26px;margin-top:46px;flex-wrap:wrap}
.aile li{display:flex;align-items:center;gap:10px}
.aile img{width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 3px #fff,0 6px 14px -6px rgba(12,22,34,.5)}
.aile span{font-size:13px;color:var(--soluk);line-height:1.25}
.aile b{display:block;font-family:var(--baslik);font-weight:700;font-size:16px;color:var(--murekkep);letter-spacing:-.01em}

.hero-sahne{position:relative;height:660px}
.radar{position:absolute;left:-10px;top:40px;width:540px;aspect-ratio:1;border-radius:50%}
.radar::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.75),rgba(255,255,255,.2) 70%,transparent);}
.radar-cizim{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.radar-cizim .halkalar circle,.ufuk .halkalar circle,.adim-gorsel .halkalar circle{fill:none;stroke:var(--murekkep);stroke-opacity:.13;stroke-width:1}
.radar-cizim .halkalar circle:last-child{stroke-opacity:.22}
.radar-cizim .eksen path{stroke:var(--murekkep);stroke-opacity:.08;stroke-dasharray:2 5}
.radar-cizim .cetvel line{stroke:var(--murekkep);stroke-opacity:.22}
.radar-cizim .cetvel line.uzun{stroke-opacity:.4}
.radar-cizim .cetvel text{font:500 10px var(--mono);fill:var(--soluk);text-anchor:middle;dominant-baseline:middle}
.supurme{position:absolute;inset:0;border-radius:50%;overflow:hidden;will-change:transform}
.supurme::before{content:"";position:absolute;inset:0;background:conic-gradient(from 0deg,transparent 0deg 285deg,rgba(30,158,110,.0) 285deg,rgba(30,158,110,.22) 358deg,rgba(30,158,110,.32) 360deg)}
.supurme i{position:absolute;left:50%;top:0;width:2px;height:50%;margin-left:-1px;background:linear-gradient(to top,rgba(30,158,110,.9),rgba(30,158,110,.15))}
.iz{position:absolute;width:0;height:0}
.iz i{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--teal);opacity:.35;transition:opacity 2.6s ease-out,background 2.6s}
.iz.sessiz i{width:7px;height:7px;left:-3.5px;top:-3.5px;background:var(--murekkep);opacity:.18}
.iz i::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid var(--d);opacity:0}
.iz span{position:absolute;right:14px;top:-16px;display:flex;flex-direction:row-reverse;align-items:center;gap:7px;white-space:nowrap;font:600 13px var(--govde);background:#fff;padding:4px 4px 4px 11px;border-radius:999px;box-shadow:0 1px 0 var(--cizgi),0 8px 20px -10px rgba(12,22,34,.35);opacity:.55;transform:scale(.94);transform-origin:right center;transition:opacity 2.6s ease-out,transform 1s var(--yumusak)}
.iz span img{width:24px;height:24px;border-radius:50%}
.iz.ping i{background:var(--d);opacity:1;transition:none}
.iz.ping i::after{animation:halka 1.6s ease-out}
.iz.ping span{opacity:1;transform:scale(1);transition:opacity .2s,transform .5s var(--yumusak)}
@keyframes halka{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(5)}}

/* ---------- iPhone (harmonikradar.com ile aynı çizim) ---------- */
.iphone{position:relative;width:318px;height:658px;border-radius:58px;padding:3px;background:linear-gradient(135deg,#e4e6e9 0%,#9ca1a8 22%,#f1f2f4 45%,#8a9098 70%,#d3d6da 100%);
  box-shadow:0 1px 0 1px rgba(0,0,0,.18),0 50px 80px -30px rgba(12,22,34,.55),0 18px 30px -14px rgba(12,22,34,.35)}
.iphone::before,.iphone::after{content:"";position:absolute;width:3px;border-radius:2px;background:#9ca1a8}
.iphone::before{left:-3px;top:132px;height:62px;box-shadow:0 -50px 0 0 #9ca1a8,0 76px 0 0 #9ca1a8}
.iphone::after{right:-3px;top:176px;height:92px}
.bezel{height:100%;border-radius:55px;padding:10px;background:#07080a}
.ekran{position:relative;height:100%;border-radius:45px;overflow:hidden;background:var(--tg-zemin);color:#fff;font-family:var(--ios);display:flex;flex-direction:column}
.ada{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:100px;height:29px;border-radius:20px;background:#000;z-index:3}
.durum{height:50px;flex:none;display:flex;align-items:flex-end;justify-content:space-between;padding:0 26px 6px 34px;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.durum .ikon{display:flex;gap:5px;align-items:center}
.tg-ust{flex:none;display:flex;align-items:center;gap:8px;padding:6px 12px 9px;background:var(--tg-bar);border-bottom:.5px solid rgba(255,255,255,.06)}
.tg-ust .geri{color:var(--tg-link);font-size:26px;line-height:1;width:24px}
.tg-ust .baslik{flex:1;text-align:center;line-height:1.2}
.tg-ust .baslik b{font-size:15px;display:block}
.tg-ust .baslik small{font-size:12px;color:var(--tg-soluk)}
.tg-ust img{width:34px;height:34px;border-radius:50%}
.sohbet{flex:1;padding:10px 9px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;overflow:hidden;background:radial-gradient(120% 80% at 80% 0%,#15283a 0%,transparent 60%),var(--tg-zemin)}
.tarih{align-self:center;font-size:11.5px;font-weight:600;background:rgba(0,0,0,.28);padding:3px 10px;border-radius:10px;margin:2px 0 4px}
.giris{flex:none;display:flex;align-items:center;gap:8px;padding:8px 11px 26px;background:var(--tg-bar)}
.giris .alan{flex:1;height:32px;border-radius:16px;background:#0f1720;border:.5px solid rgba(255,255,255,.08);font-size:13px;color:var(--tg-soluk);display:flex;align-items:center;padding:0 12px}
.ev-cubugu{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:112px;height:4px;border-radius:3px;background:rgba(255,255,255,.85)}

.balon{background:var(--tg-gelen);color:#fff;border-radius:17px 17px 17px 5px;overflow:hidden;font-family:var(--ios);font-size:13px;line-height:1.45;max-width:96%;flex:none}
.balon img{display:block;width:100%;background:#fff}
.balon img.uzun{max-height:215px;object-fit:cover;object-position:top}
.balon .ic{padding:8px 11px 6px}
.balon code{font-size:12px;color:#dbe6ee}
.saat{float:right;font-size:10.5px;color:var(--tg-soluk);margin:5px 0 0 8px}
.tg-bag{color:var(--tg-link)}
.yanit{border-left:2px solid var(--tg-link);padding:1px 0 1px 7px;margin-bottom:4px;font-size:11.5px;background:rgba(106,178,242,.08);border-radius:3px}
.yanit b{color:var(--tg-link);display:block;font-weight:600}
.yanit span{color:#b4c2cf}
.tg-dugmeler{display:grid;grid-template-columns:1fr 1fr;gap:4px;max-width:96%;flex:none}
.tg-dugmeler span{background:rgba(34,46,58,.92);border-radius:9px;text-align:center;font:500 12px var(--ios);padding:7px 4px}

/* hero telefonu: Telegram sohbet listesi */
.hero-tel{position:absolute;right:0;top:0;zoom:.92}
.liste-ust{flex:none;display:flex;align-items:center;justify-content:space-between;padding:4px 16px 8px;background:var(--tg-bar)}
.liste-ust b{font-size:16px}
.liste-ust .duzenle{color:var(--tg-link);font-size:15px}
.arama{flex:none;margin:0 0 0;padding:0 12px 10px;background:var(--tg-bar);display:flex;align-items:center;gap:6px;color:var(--tg-soluk);font-size:14px}
.arama::before{content:"";position:absolute}
.arama{position:relative}
.arama svg{margin-left:10px}
.arama{border-bottom:.5px solid rgba(255,255,255,.06)}
.arama{background:var(--tg-bar)}
.sohbet-liste{list-style:none;flex:1;position:relative;overflow:hidden}
.sohbet-liste li{display:flex;gap:11px;align-items:center;padding:9px 12px 9px 12px;position:relative;background:var(--tg-zemin);transition:background .6s}
.sohbet-liste li::after{content:"";position:absolute;left:74px;right:0;bottom:0;height:.5px;background:rgba(255,255,255,.07)}
.sohbet-liste li.yeni{background:#16283a;transition:none}
.sohbet-liste img,.sohbet-liste .harf{width:52px;height:52px;border-radius:50%;flex:none}
.sohbet-liste .harf{display:grid;place-items:center;background:linear-gradient(#5aa2e8,#3478c4);font-weight:600;font-size:20px}
.sohbet-liste .orta{flex:1;min-width:0}
.sohbet-liste .ad{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.sohbet-liste .ad b{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sohbet-liste time{font-size:12.5px;color:var(--tg-soluk);flex:none}
.sohbet-liste .onizleme{display:flex;gap:8px;align-items:center;margin-top:2px}
.sohbet-liste .onizleme p{flex:1;font-size:13.5px;line-height:1.3;color:var(--tg-soluk);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.rozet-sayi{flex:none;min-width:21px;height:21px;padding:0 6px;border-radius:11px;background:#3E88F7;font-size:12.5px;font-weight:600;display:grid;place-items:center}
.rozet-sayi.soluk{background:#4F5E6D}
.rozet-sayi.zipla{animation:zipla .5s var(--yumusak)}
@keyframes zipla{40%{transform:scale(1.35)}}
.sohbet-liste li.pasif{opacity:.55}
.sekme-cubugu{flex:none;display:grid;grid-template-columns:repeat(4,1fr);padding:9px 6px 30px;background:var(--tg-bar);border-top:.5px solid rgba(255,255,255,.06);font-size:10.5px;color:var(--tg-soluk);text-align:center}
.sekme-cubugu span::before{content:"";display:block;width:24px;height:24px;margin:0 auto 3px;border-radius:7px;background:rgba(127,145,164,.35)}
.sekme-cubugu .aktif{color:var(--tg-link)}
.sekme-cubugu .aktif::before{background:var(--tg-link)}

/* ---------- kayan şerit ---------- */
.serit{border-top:1px solid var(--cizgi);border-bottom:1px solid var(--cizgi);padding:26px 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.serit-iz{display:flex;width:max-content;animation:kay 48s linear infinite}
.serit:hover .serit-iz{animation-play-state:paused}
.serit-ic{display:flex;align-items:center;gap:28px;padding-right:28px;font-family:var(--baslik);font-weight:600;font-size:clamp(22px,2.4vw,32px);letter-spacing:-.02em;white-space:nowrap}
.serit-ic span:nth-child(4n+3){color:var(--soluk)}
.serit-ic i{width:8px;height:8px;border-radius:50%;background:var(--d);flex:none}
@keyframes kay{to{transform:translateX(-50%)}}

/* ---------- bölümler ---------- */
.bolum{padding:130px 0 0}
.bolum-bas{max-width:720px;margin-bottom:56px}
.bolum-bas.ortali{margin-left:auto;margin-right:auto;text-align:center}
.bolum-bas.ortali p{margin-left:auto;margin-right:auto}
.ust-etiket{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--soluk);margin-bottom:18px}
.ust-etiket::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--d)}
h2{font-family:var(--baslik);font-weight:800;font-size:clamp(34px,4.4vw,60px);line-height:1;letter-spacing:-.035em}
.bolum-bas p{margin-top:20px;font-size:18px;color:var(--soluk);max-width:620px}

/* ---------- vitrin (kayan) ---------- */
.vitrin{outline:none}
.sekmeler{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.sekme{position:relative;display:flex;align-items:center;gap:14px;text-align:left;padding:16px 18px 20px;border-radius:22px;background:transparent;box-shadow:inset 0 0 0 1px var(--cizgi);transition:background .3s,box-shadow .3s}
.sekme:hover{background:rgba(255,255,255,.5)}
.sekme.aktif{background:var(--beyaz);box-shadow:0 1px 0 var(--cizgi),0 14px 30px -20px rgba(12,22,34,.35)}
.sekme img{width:46px;height:46px;border-radius:50%;flex:none;filter:saturate(.4);opacity:.75;transition:filter .3s,opacity .3s}
.sekme.aktif img{filter:none;opacity:1}
.sekme b{display:block;font-family:var(--baslik);font-weight:700;font-size:18px;letter-spacing:-.015em}
.sekme small{font-size:14px;color:var(--soluk)}
.ilerleme{position:absolute;left:18px;right:18px;bottom:9px;height:2px;border-radius:2px;background:var(--kagit-2);overflow:hidden;opacity:0;transition:opacity .3s}
.sekme.aktif .ilerleme{opacity:1}
.ilerleme u{display:block;height:100%;width:100%;background:var(--d);transform:scaleX(0);transform-origin:left;text-decoration:none}

.pencere{overflow:hidden;border-radius:36px;background:var(--beyaz);box-shadow:0 1px 0 var(--cizgi);touch-action:pan-y}
.ray{display:flex;transition:transform .8s var(--yumusak);will-change:transform}
.ray.surukle{transition:none}
.slayt{flex:0 0 100%;min-width:0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:40px;padding:56px 64px 0 64px;min-height:640px;position:relative;overflow:hidden}
.slayt::before{content:"";position:absolute;right:-120px;top:50%;width:760px;aspect-ratio:1;transform:translateY(-46%);border-radius:50%;
  background:repeating-radial-gradient(circle,transparent 0 79px,rgba(12,22,34,.07) 79px 80px);pointer-events:none}
.slayt::after{content:"";position:absolute;right:-120px;top:50%;width:760px;aspect-ratio:1;transform:translateY(-46%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(243,240,233,.9),rgba(243,240,233,.5) 55%,transparent);pointer-events:none;z-index:0}
.slayt-metin{position:relative;z-index:1;padding-bottom:56px}
.urun-bas{display:flex;align-items:center;gap:18px}
.urun-bas img{width:72px;height:72px;border-radius:50%;box-shadow:0 0 0 5px var(--kagit),0 12px 24px -12px rgba(12,22,34,.6)}
.urun-tur{font:500 13px var(--mono);color:var(--soluk)}
.urun-bas h3{font-family:var(--baslik);font-weight:800;font-size:clamp(32px,3.4vw,46px);letter-spacing:-.035em;line-height:1}
.urun-soz{margin-top:24px;font-size:17.5px;color:var(--soluk);max-width:500px}
.ozellik{list-style:none;margin-top:28px;display:grid;gap:16px;max-width:500px}
.ozellik li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:15.5px;color:var(--soluk)}
.ozellik li i{width:10px;height:10px;border-radius:50%;margin-top:7px}
.ozellik b{display:block;color:var(--murekkep);font-weight:600}
.i-sari{background:var(--sari)} .i-yesil{background:var(--teal-parlak)} .i-kirmizi{background:var(--kirmizi)} .i-turuncu{background:var(--d)} .i-mavi{background:var(--mavi)}
.olcu{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.olcu span{font-size:13.5px;color:var(--soluk);background:var(--kagit);border-radius:999px;padding:6px 12px}
.olcu code{color:var(--murekkep);font-size:13px}
.slayt .cta{margin-top:30px}
.slayt-cihaz{position:relative;z-index:1;display:flex;justify-content:center;align-self:end}
.slayt-cihaz .iphone{zoom:.9;height:600px;border-radius:58px 58px 0 0;padding-bottom:0}
.slayt-cihaz .bezel{border-radius:55px 55px 0 0;padding-bottom:0}
.slayt-cihaz .ekran{border-radius:45px 45px 0 0}
.slayt-cihaz .ev-cubugu{display:none}
.slayt-cihaz .giris{padding-bottom:12px}

/* aktif slaytta mesajlar sırayla düşer */
.js .slayt .sirali{opacity:0;transform:translateY(16px) scale(.98);transform-origin:left bottom}
.js .slayt.oynat .sirali{animation:dus .6s var(--yumusak) forwards}
.js .slayt.oynat .sirali:nth-of-type(2){animation-delay:.25s}
.js .slayt.oynat .sirali:nth-of-type(3){animation-delay:1.1s}
.js .slayt.oynat .sirali:nth-of-type(4){animation-delay:1.6s}
@keyframes dus{to{opacity:1;transform:none}}

.vitrin-alt{display:flex;justify-content:space-between;align-items:center;margin-top:20px}
.noktalar{display:flex;gap:8px}
.noktalar button{width:8px;height:8px;border-radius:999px;background:rgba(12,22,34,.2);transition:width .4s var(--yumusak),background .3s}
.noktalar button.aktif{width:28px;background:var(--murekkep)}
.oklar{display:flex;gap:10px}
.ok-dugme{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(12,22,34,.25);transition:background .2s,transform .15s}
.ok-dugme:hover{background:var(--murekkep);color:#fff}
.geri-ok svg{transform:rotate(180deg)}

/* ---------- yöntem ---------- */
.adimlar{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.adim-kart{background:var(--beyaz);border-radius:28px;padding:18px 18px 30px;box-shadow:0 1px 0 var(--cizgi)}
.adim-kart:nth-child(2){transition-delay:.1s}.adim-kart:nth-child(3){transition-delay:.2s}
.adim-gorsel{height:190px;border-radius:20px;background:var(--kagit);display:grid;place-items:center;overflow:hidden;margin-bottom:24px}
.adim-gorsel svg{height:150px;width:auto;overflow:visible}
.kucuk-koni{animation:don 5s linear infinite;transform-origin:0 0}
.kucuk-koni path{fill:rgba(30,158,110,.16)}
.kucuk-koni .kenar{fill:none;stroke:var(--teal);stroke-width:1.6}
.goster svg{height:140px}
.goster polyline{fill:none;stroke:var(--teal);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:220;stroke-dashoffset:220}
.goster .d{fill:var(--d);stroke:#fff;stroke-width:2;opacity:0}
.goster .yeni{fill:#fff;stroke:var(--teal);stroke-width:1.4;opacity:0}
.goster text{font:700 8.5px var(--govde);fill:var(--teal);text-anchor:middle;opacity:0}
.adim-kart.gorundu .goster polyline{animation:ciz 1.6s .3s var(--yumusak) forwards}
.adim-kart.gorundu .goster .d,.adim-kart.gorundu .goster .yeni,.adim-kart.gorundu .goster text{animation:belir .5s 1.6s forwards}
@keyframes ciz{to{stroke-dashoffset:0}}
@keyframes belir{to{opacity:1}}
.karar{font-family:var(--baslik);font-weight:800;font-size:46px;letter-spacing:-.035em;line-height:1;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center}
.karar b{position:relative}
.karar b::after{content:"";position:absolute;right:-16px;top:2px;width:10px;height:10px;border-radius:50%;background:var(--d);animation:nabiz 2.4s ease-out infinite}
.karar span{display:block;color:var(--soluk);font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:4px}
.karar b{color:var(--teal);font-weight:800}
.adim-no{font:500 13px var(--mono);color:var(--soluk);padding:0 8px}
.adim-kart h3{font-family:var(--baslik);font-weight:700;font-size:26px;letter-spacing:-.02em;margin:8px 8px 8px}
.adim-kart p{color:var(--soluk);font-size:15.5px;padding:0 8px}

/* ---------- cihaz sahnesi ---------- */
.sahne-kap{position:relative;width:100%}
.sahne{position:relative;width:1120px;height:700px;transform-origin:top left}
.sahne::before{content:"";position:absolute;left:50%;top:48%;width:980px;height:980px;transform:translate(-50%,-50%);border-radius:50%;
  background:repeating-radial-gradient(circle,transparent 0 109px,rgba(12,22,34,.06) 109px 110px);-webkit-mask-image:radial-gradient(closest-side,#000 60%,transparent);mask-image:radial-gradient(closest-side,#000 60%,transparent)}

.macbook{position:absolute;left:180px;top:10px;width:760px}
.kapak{width:700px;margin:0 auto;padding:14px 14px 18px;border-radius:22px 22px 6px 6px;background:#0b0c0e;box-shadow:inset 0 0 0 1.5px #3a3d42,0 30px 60px -30px rgba(12,22,34,.5)}
.mac-ekran{position:relative;height:420px;border-radius:6px;overflow:hidden;background:var(--tg-zemin)}
.mac-centik{position:absolute;left:50%;top:0;width:110px;height:16px;transform:translateX(-50%);background:#0b0c0e;border-radius:0 0 8px 8px;z-index:2}
.taban{position:relative;height:20px;border-radius:2px 2px 14px 14px;background:linear-gradient(#e2e4e7,#a9aeb4 55%,#7d828a);box-shadow:0 22px 30px -16px rgba(12,22,34,.55)}
.taban i{position:absolute;left:50%;top:0;width:120px;height:7px;transform:translateX(-50%);border-radius:0 0 8px 8px;background:linear-gradient(#b4b8bd,#d7dadd)}
.masaustu{display:grid;grid-template-columns:200px 1fr;height:100%;font-family:var(--ios);color:#fff}
.m-liste{background:#17212b;border-right:1px solid rgba(255,255,255,.05);padding:26px 8px 8px}
.m-ara{display:flex;align-items:center;gap:6px;background:#242f3d;border-radius:8px;padding:6px 8px;font-size:11px;color:var(--tg-soluk);margin-bottom:8px}
.m-satir{display:flex;gap:8px;align-items:center;padding:7px 6px;border-radius:8px}
.m-satir.aktif{background:#2b5278}
.m-satir img{width:34px;height:34px;border-radius:50%;flex:none}
.m-satir div{min-width:0}
.m-satir b{display:block;font-size:11.5px;font-weight:600}
.m-satir span{display:block;font-size:10.5px;color:#9fb2c6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-satir.aktif span{color:#cfe0f0}
.m-sohbet{display:flex;flex-direction:column;background:radial-gradient(120% 80% at 80% 0%,#15283a 0%,transparent 60%),#0e1621}
.m-bas{padding:22px 16px 9px;background:#17212b;border-bottom:1px solid rgba(255,255,255,.05);font-size:12px}
.m-bas small{color:var(--tg-soluk);margin-left:8px}
.m-akis{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:12px 16px}
.m-balon{max-width:440px;font-size:11.5px}
.m-balon code{font-size:10.5px}

.ipad{position:absolute;left:0;top:200px;width:340px;height:470px;border-radius:30px;padding:12px;background:#111214;box-shadow:inset 0 0 0 2px #45484d,0 40px 70px -30px rgba(12,22,34,.6)}
.ipad-ekran{height:100%;border-radius:19px;overflow:hidden;background:var(--tg-zemin);font-family:var(--ios);color:#fff;display:flex;flex-direction:column}
.ipad-bas{display:flex;align-items:center;gap:8px;padding:12px 14px 9px;background:var(--tg-bar);font-size:13px}
.ipad-bas img{width:26px;height:26px;border-radius:50%}
.ipad-akis{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:10px;overflow:hidden}
.ipad-balon{font-size:11.5px}
.ipad-balon img{max-height:300px;object-fit:cover;object-position:top}

.sahne-tel{position:absolute;left:820px;top:150px;zoom:.78}
.sahne-tel .sohbet .balon{max-width:100%}

.saat-kol{position:absolute;left:770px;top:440px;width:150px;display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 26px 30px rgba(12,22,34,.4))}
.kordon{width:112px;height:56px;background:linear-gradient(90deg,#2a2f36,#3c434c 50%,#2a2f36)}
.ust-k{border-radius:14px 14px 4px 4px}
.alt-k{border-radius:4px 4px 14px 14px}
.kasa{position:relative;width:150px;height:180px;border-radius:44px;padding:9px;background:linear-gradient(135deg,#d7dadf,#8d939b 40%,#e9ebee 60%,#7c828a);margin:-6px 0}
.kadran{width:100%;height:100%;border-radius:36px;background:#000;overflow:hidden;padding:16px 12px;color:#fff;font-family:var(--ios)}
.tac{position:absolute;right:-6px;top:42px;width:8px;height:30px;border-radius:4px;background:linear-gradient(90deg,#8d939b,#e3e5e8)}
.yan-tus{position:absolute;right:-4px;top:92px;width:5px;height:30px;border-radius:3px;background:#a7acb3}
.bildirim{background:#1c1c1e;border-radius:18px;padding:10px 10px 11px;transition:opacity .35s,transform .45s var(--yumusak)}
.bildirim.gizle{opacity:0;transform:translateY(14px)}
.b-bas{display:flex;align-items:center;gap:6px;font-size:10px;color:#a1a1a6;margin-bottom:5px}
.b-bas img{width:18px;height:18px;border-radius:50%}
.bildirim b{display:block;font-size:13px;line-height:1.2}
.bildirim p{font-size:11.5px;color:#d1d1d6;margin-top:3px;line-height:1.3}

/* dar ekran: MacBook çıkar, kalan üç cihaz 640 genişlikte dizilir */
.sahne.dar{width:640px}
.sahne.dar::before{width:640px;height:640px}
.sahne.dar .macbook{display:none}
.sahne.dar .ipad{left:0;top:110px}
.sahne.dar .sahne-tel{left:385px;top:0}
.sahne.dar .saat-kol{left:330px;top:440px}

/* ---------- ilke ---------- */
.ilke{margin-top:130px;background:var(--kagit-2);border-radius:36px;overflow:hidden;display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:40px;padding:72px}
.ilke ul{list-style:none;margin-top:36px;display:grid;gap:20px;max-width:540px}
.ilke li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:17px;color:var(--soluk)}
.ilke li b{color:var(--murekkep);font-weight:600;display:block;margin-bottom:2px}
.ilke li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--d);margin-top:9px}
.ilke-disk{position:relative;justify-self:center;width:100%;max-width:380px;aspect-ratio:1}
.ilke-disk .buyuk{width:100%;height:100%;box-shadow:0 0 0 12px #fff,0 0 0 13px var(--cizgi),0 50px 80px -40px rgba(12,22,34,.5)}
.yorunge{position:absolute;width:22%;border-radius:50%;box-shadow:0 0 0 5px #fff,0 14px 24px -10px rgba(12,22,34,.5);animation:suzul 6s ease-in-out infinite}
.y1{left:-6%;top:12%}
.y2{right:-8%;top:40%;animation-delay:-2s}
.y3{left:14%;bottom:-6%;animation-delay:-4s}
@keyframes suzul{50%{transform:translateY(-10px)}}

/* ---------- premium ---------- */
.premium{position:relative}
.ufuk{position:absolute;left:50%;top:60px;width:min(1100px,100%);transform:translateX(-50%);pointer-events:none;opacity:.9}
.ufuk svg{display:block;width:100%;height:auto}
.ufuk-koni{animation:salin 9s ease-in-out infinite;transform-origin:0 0}
.ufuk-koni path{fill:url(#g-ufuk)}
@keyframes salin{0%,100%{transform:rotate(-70deg)}50%{transform:rotate(30deg)}}
.ufuk-iz{position:absolute;right:21%;top:30%;width:12px;height:12px;border-radius:50%;background:var(--altin-2);box-shadow:0 0 0 0 rgba(232,176,74,.6);animation:altin-nabiz 2.6s ease-out infinite}
@keyframes altin-nabiz{0%{box-shadow:0 0 0 0 rgba(232,176,74,.55)}80%,100%{box-shadow:0 0 0 22px rgba(232,176,74,0)}}
.altin{background:linear-gradient(100deg,var(--altin-1),var(--altin-2) 45%,var(--altin-1) 70%,var(--altin-2));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:parilti 5s linear infinite}
@keyframes parilti{to{background-position:-200% 0}}
.premium .bolum-bas{position:relative;margin-bottom:64px}

.premium-kartlar{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.p-kart{position:relative;overflow:hidden;border-radius:28px;padding:30px 28px 26px;background:
  linear-gradient(var(--beyaz),var(--beyaz)) padding-box,
  linear-gradient(140deg,rgba(185,128,26,.55),rgba(12,22,34,.08) 40%,rgba(12,22,34,.08) 60%,rgba(232,176,74,.6)) border-box;
  border:1.5px solid transparent;display:flex;flex-direction:column}
.p-kart:nth-child(2){transition-delay:.1s}.p-kart:nth-child(3){transition-delay:.2s}
.p-tarama{position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(232,176,74,.13) 48%,rgba(232,176,74,.02) 52%,transparent 60%);background-size:250% 100%;animation:tara 5.5s ease-in-out infinite}
.p-kart:nth-child(2) .p-tarama{animation-delay:-1.8s}.p-kart:nth-child(3) .p-tarama{animation-delay:-3.6s}
@keyframes tara{0%{background-position:150% 0}60%,100%{background-position:-60% 0}}
.p-bas{display:flex;align-items:center;gap:12px}
.p-bas img{width:46px;height:46px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--altin-2)}
.p-bas div{flex:1;line-height:1.15}
.p-bas b{display:block;font-family:var(--baslik);font-weight:700;font-size:18px;letter-spacing:-.015em}
.p-ad{font-family:var(--baslik);font-weight:800;font-size:22px;letter-spacing:-.025em;background:linear-gradient(100deg,var(--altin-1),var(--altin-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.yakinda{display:inline-flex;align-items:center;gap:5px;font:500 11px var(--mono);font-style:normal;letter-spacing:.06em;color:var(--altin-1);background:rgba(232,176,74,.12);padding:5px 9px;border-radius:999px;align-self:flex-start}
.p-kart>p{margin-top:20px;color:var(--soluk);font-size:15.5px}
.p-kart ul{list-style:none;margin-top:18px;display:grid;gap:11px;flex:1}
.p-kart li{display:grid;grid-template-columns:16px 1fr;gap:8px;font-size:15px}
.p-kart li::before{content:"";width:8px;height:8px;margin-top:7px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--altin-1)}
.p-durum{margin-top:22px;padding-top:16px;border-top:1px dashed rgba(12,22,34,.18);display:flex;align-items:center;gap:8px;font:500 12.5px var(--mono);color:var(--soluk)}
.p-durum span{width:7px;height:7px;border-radius:50%;background:var(--altin-2);animation:nabiz-a 2s ease-out infinite}
@keyframes nabiz-a{0%{box-shadow:0 0 0 0 rgba(232,176,74,.6)}70%,100%{box-shadow:0 0 0 7px rgba(232,176,74,0)}}
.premium-not{margin:40px auto 0;max-width:780px;display:flex;gap:28px;align-items:center;justify-content:space-between;background:var(--kagit-2);border-radius:24px;padding:24px 28px}
.premium-not p{color:var(--soluk);font-size:15.5px}
.premium-not b{color:var(--murekkep);font-weight:600}
.premium-not code{background:var(--beyaz);padding:1px 7px;border-radius:6px;font-size:14px;color:var(--murekkep)}

/* ---------- sss ---------- */
.sss{display:grid;grid-template-columns:1fr 1.6fr;gap:60px;align-items:start}
.sss .bolum-bas{position:sticky;top:120px;margin:0}
.sorular details{border-top:1px solid var(--cizgi)}
.sorular details:last-child{border-bottom:1px solid var(--cizgi)}
.sorular summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font-family:var(--baslik);font-weight:600;font-size:20px;letter-spacing:-.01em}
.sorular summary::-webkit-details-marker{display:none}
.sorular summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--murekkep);border-bottom:2px solid var(--murekkep);transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s}
.sorular details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.sorular details p{padding:0 40px 24px 0;color:var(--soluk);font-size:16.5px;max-width:640px}
.sorular code{background:var(--beyaz);padding:1px 7px;border-radius:6px;font-size:14px;color:var(--murekkep)}

/* ---------- alt ---------- */
.alt-bilgi{margin-top:140px;border-top:1px solid var(--cizgi);padding-top:40px;padding-bottom:48px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}
.alt-bilgi .uyari{font-family:var(--baslik);font-weight:600;font-size:18px;letter-spacing:-.01em;margin-top:14px}
.alt-bilgi .linkler{display:flex;gap:22px;font-size:14px;color:var(--soluk);flex-wrap:wrap}
.alt-bilgi .linkler a{text-decoration:none}
.alt-bilgi .linkler a:hover{color:var(--murekkep)}

/* ---------- duyarlı ---------- */
@media (max-width:1180px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,500px)}
  .hero-sahne{height:600px}
  .radar{width:470px;left:-20px}
  .hero-tel{zoom:.82}
  .slayt{padding:48px 44px 0;gap:24px}
}
@media (max-width:1020px){
  .nav-linkler{gap:22px}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:20px}
  .hero-sahne{height:640px;max-width:620px;width:100%;justify-self:center}
  .radar{width:540px;left:0}
  .slayt{grid-template-columns:1fr;padding:44px 40px 0}
  .slayt-metin{padding-bottom:0}
  .slayt::before,.slayt::after{right:50%;top:auto;bottom:-380px;transform:translateX(50%)}
  .adimlar,.premium-kartlar{grid-template-columns:1fr;max-width:560px}
  .premium-kartlar{margin:0 auto}
  .ilke{grid-template-columns:1fr;padding:56px 44px}
  .ilke-disk{max-width:300px}
  .sss{grid-template-columns:1fr}
  .sss .bolum-bas{position:static;margin-bottom:24px}
}
@media (max-width:860px){.nav-linkler{display:none}}
@media (max-width:720px){
  .ust .dugme{padding:10px 16px;font-size:14px}
  .kap{padding:0 16px}
  h1{font-size:clamp(42px,12vw,60px)}
  .aile{gap:16px}
  .hero-sahne{height:520px}
  .radar{width:min(420px,100%);left:50%;top:0;transform:translateX(-50%)}
  .iz span{display:none}
  .aile{gap:14px;flex-wrap:nowrap}
  .aile li{gap:8px}
  .aile img{width:34px;height:34px}
  .aile b{font-size:14px}
  .aile span{font-size:12px}
  .hero-tel{zoom:.66;right:50%;top:auto;bottom:0;transform:translateX(50%)}
  .bolum{padding-top:96px}
  .sekmeler{grid-template-columns:repeat(3,1fr);gap:6px}
  .sekme{flex-direction:column;align-items:center;text-align:center;gap:8px;padding:12px 6px 18px;border-radius:18px}
  .sekme b{font-size:14px}
  .sekme small{display:none}
  .sekme img{width:38px;height:38px}
  .pencere{border-radius:28px}
  .slayt{padding:32px 20px 0;min-height:0}
  .urun-bas img{width:56px;height:56px}
  .urun-soz{font-size:16px}
  .slayt-cihaz .iphone{zoom:.78}
  .premium-not{flex-direction:column;align-items:flex-start;padding:22px}
  .ilke{border-radius:28px;margin-top:96px;padding:40px 22px}
  .ilke-disk{max-width:240px}
  .alt-bilgi{grid-template-columns:1fr}
  .sorular summary{font-size:18px}
  .sorular details p{padding-right:8px}
  .ufuk{top:90px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .gorun,.js .slayt .sirali{opacity:1;transform:none}
}