/* Harmonik Radar · gündüz teması. Marka: .agents/skills/harmonik-marka. Logo yalnız img/logo-*.png. */
:root{
  --kagit:#F3F0E9; --kagit-2:#EAE5DA; --beyaz:#FFFFFF;
  --murekkep:#0C1622;            /* logonun zemini */
  --soluk:#5E6B74; --cizgi:rgba(12,22,34,.12);
  --teal:#1E9E6E; --teal-parlak:#3DD598;
  --d:#F5A00B; --sari:#E0A800; --kirmizi:#E0485C;
  --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;
}
*{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)}
.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}

/* ---------- nav ---------- */
.ust{position:sticky;top:0;z-index:20;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}
.marka{display:flex;align-items:center;gap:12px;font-family:var(--baslik);font-weight:600;font-size:20px;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.marka img{width:36px;height:36px;border-radius:50%}
.nav-linkler{display:flex;gap:34px;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)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(32px,6vw,96px);min-height:calc(100vh - 78px);padding:24px 0 56px}
.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)}
h1{font-family:var(--baslik);font-weight:800;font-size:clamp(44px,6vw,88px);line-height:.96;letter-spacing:-.035em}
.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:38px;flex-wrap:wrap}
.kontenjan{margin-top:44px;max-width:420px}
.kontenjan .satir{display:flex;justify-content:space-between;font-size:14px;color:var(--soluk)}
.kontenjan .satir b{color:var(--murekkep);font-weight:500;font-family:var(--mono)}
.kontenjan .cubuk-iz{height:3px;background:var(--kagit-2);border-radius:3px;margin-top:10px;overflow:hidden}
.kontenjan .cubuk-iz span{display:block;height:100%;width:0;background:var(--d);transition:width .8s cubic-bezier(.22,1,.36,1)}
.kontenjan .not{font-size:13px;color:var(--soluk);margin-top:8px;min-height:1em}

/* ---------- iPhone ---------- */
.sahne{position:relative;padding:10px 0 30px}
.sahne::after{content:"";position:absolute;left:50%;bottom:4px;width:78%;height:34px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(12,22,34,.30),transparent);filter:blur(6px);z-index:-1}
.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;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)}

/* Telegram balonları (telefonda ve kartlarda ortak) */
.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:94%}
.balon.giden{align-self:flex-end;background:var(--tg-giden);border-radius:17px 17px 5px 17px;padding:6px 11px}
.balon img{display:block;width:100%;background:#fff}
.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}
.giden .saat{color:#8fb3d6}
.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}
.balon.genis{max-width:100%}
.sayfa .guncelleme{margin-top:40px;font-size:14px}
.klavye{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.klavye span{background:rgba(34,46,58,.9);color:#fff;border-radius:9px;text-align:center;font:500 12px var(--ios);padding:8px 4px;white-space:nowrap}
.klavye .tam{grid-column:1/-1}

/* ---------- şerit ---------- */
.serit{border-top:1px solid var(--cizgi);border-bottom:1px solid var(--cizgi);padding:30px 0;display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
.serit .f{font-family:var(--baslik);font-weight:600;font-size:clamp(22px,2.6vw,34px);letter-spacing:-.02em;display:flex;gap:28px;flex-wrap:wrap}
.serit .f span:nth-child(even){color:var(--soluk)}
.serit small{color:var(--soluk);font-size:14px}

/* ---------- bölümler ---------- */
.bolum{padding:120px 0 0}
.bolum-bas{max-width:720px;margin-bottom:56px}
.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.2vw,56px);line-height:1;letter-spacing:-.03em}
.bolum-bas p{margin-top:20px;font-size:18px;color:var(--soluk);max-width:620px}

/* nasıl çalışır: üç aşama */
.asamalar{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.asama{background:var(--beyaz);border-radius:28px;padding:14px;display:flex;flex-direction:column;box-shadow:0 1px 0 var(--cizgi)}
.asama .pencere{background:var(--tg-zemin);border-radius:18px;padding:14px 12px;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;
  background-image:radial-gradient(120% 80% at 80% 0%,#15283a 0%,transparent 60%)}
.asama .pencere .balon{max-width:100%}
.asama .metin{padding:22px 10px 12px}
.asama .adim{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;color:var(--soluk)}
.asama .adim i{width:10px;height:10px;border-radius:50%}
.asama h3{font-family:var(--baslik);font-weight:700;font-size:26px;letter-spacing:-.02em;margin:10px 0 8px}
.asama p{color:var(--soluk);font-size:15.5px}
.i-sari{background:var(--sari)} .i-yesil{background:var(--teal-parlak)} .i-kirmizi{background:var(--kirmizi)}

/* kendi radarını kur */
.kur{margin-top:20px;display:grid;grid-template-columns:1.1fr 1fr;gap:20px}
.kur .kart{background:var(--beyaz);border-radius:28px;padding:40px;box-shadow:0 1px 0 var(--cizgi)}
.kur h3{font-family:var(--baslik);font-weight:700;font-size:30px;letter-spacing:-.02em;line-height:1.05}
.kur p{color:var(--soluk);margin-top:14px;font-size:16px;max-width:460px}
.kur ol{list-style:none;margin-top:28px;display:grid;gap:14px;counter-reset:s}
.kur li{display:flex;gap:14px;align-items:baseline;font-size:16px}
.kur li::before{counter-increment:s;content:counter(s);font-family:var(--mono);font-size:13px;color:var(--soluk);width:18px;flex:none}
.kur li b{font-weight:600}
.kur .koyu{background:var(--tg-zemin);border-radius:28px;padding:28px;display:flex;flex-direction:column;justify-content:center;gap:8px;
  background-image:radial-gradient(120% 80% at 80% 0%,#15283a 0%,transparent 60%)}

/* kapsam: formasyon şekilleri */
.formlar{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.form-kart{background:var(--beyaz);border-radius:24px;padding:22px 22px 24px;box-shadow:0 1px 0 var(--cizgi);display:flex;flex-direction:column}
.form-kart svg{width:100%;height:auto;background:var(--kagit);border-radius:14px;padding:14px 12px;margin-bottom:20px;overflow:visible}
.form-kart svg .dolgu{fill:rgba(30,158,110,.12)}
.form-kart svg polyline{fill:none;stroke:var(--teal);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.form-kart svg .d{fill:var(--d);stroke:#fff;stroke-width:2}
.form-kart h3{font-family:var(--baslik);font-weight:700;font-size:22px;letter-spacing:-.02em}
.form-kart p{color:var(--soluk);font-size:15px;margin-top:6px;flex:1}
.form-kart small{margin-top:16px;font-size:13px;color:var(--soluk);display:flex;align-items:center;gap:8px}
.form-kart small::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--d)}

/* kapsam: nerede, hangi ölçekte */
.nerede{margin-top:16px;display:grid;grid-template-columns:1.25fr 1fr;gap:16px}
.nerede .kart{background:var(--beyaz);border-radius:28px;padding:36px;box-shadow:0 1px 0 var(--cizgi)}
.nerede h3{font-family:var(--baslik);font-weight:700;font-size:26px;letter-spacing:-.02em;margin-bottom:24px}
.nerede .kart-alt{color:var(--soluk);margin:-14px 0 22px}
.piyasa-grup{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:16px 0;border-top:1px solid var(--cizgi)}
.piyasa-grup .grup-ad{font-size:14px;font-weight:600;color:var(--soluk);padding-top:2px}
.piyasa-grup ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 22px}
.piyasa-grup li{font-size:16.5px;font-weight:500}
.piyasa-grup em{font-style:normal;font-size:12.5px;color:var(--soluk);font-weight:400;margin-left:5px}
.olcek{list-style:none;position:relative;display:grid;gap:22px;padding-left:28px}
.olcek::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--kagit-2),var(--d))}
.olcek li{position:relative}
.olcek li::before{content:"";position:absolute;left:-28px;top:6px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--d)}
.olcek li:last-child::before{background:var(--d)}
.olcek b{display:block;font-family:var(--baslik);font-weight:700;font-size:19px;letter-spacing:-.01em}
.olcek span{color:var(--soluk);font-size:15px}
.dipnot{margin-top:18px;font-size:14px;color:var(--soluk);padding:0 6px}

/* ilke: kağıt zeminle uyumlu açık bant; logo beyaz çerçeveli disk içinde (çizim aynı, yalnız daireye kırpılır) */
.ilke{margin-top:120px;background:var(--kagit-2);border-radius:36px;overflow:hidden;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:40px;padding:72px}
.ilke ul{list-style:none;margin-top:36px;display:grid;gap:22px;max-width:520px}
.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{justify-self:center;width:100%;max-width:400px;aspect-ratio:1;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 12px #fff,0 0 0 13px var(--cizgi),0 50px 80px -40px rgba(12,22,34,.5)}
.ilke .disk img{width:100%;height:100%;display:block;transform:scale(1.04)}

/* bekleme */
.bekleme{display:grid;grid-template-columns:1fr 1.25fr;gap:20px}
.bekleme .kart{background:var(--beyaz);border-radius:28px;padding:40px;box-shadow:0 1px 0 var(--cizgi)}
.bekleme h3{font-family:var(--baslik);font-weight:700;font-size:26px;letter-spacing:-.02em}
.bekleme .kart>p{color:var(--soluk);margin-top:10px}
.bekleme .yol{display:flex;flex-direction:column}
.bekleme .yol .dugme{margin-top:28px;align-self:flex-start}
.bekleme .yol ol{list-style:none;margin-top:26px;display:grid;gap:12px;font-size:15.5px}
.bekleme .yol ol li{display:flex;gap:12px}
.bekleme .yol ol code{background:var(--kagit);padding:1px 7px;border-radius:6px;font-size:14px}
.bekleme .yol ol li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--d);margin-top:8px;flex:none}
.form{margin-top:26px;display:grid;gap:16px}
.form .iki{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.alan label{display:block;font-size:14px;font-weight:600;margin-bottom:7px}
.alan label em{font-style:normal;font-weight:400;color:var(--soluk)}
.alan input{width:100%;font:16px var(--govde);color:var(--murekkep);background:var(--kagit);border:1px solid transparent;border-radius:14px;padding:14px 16px;transition:border-color .15s,background .15s}
.alan input:focus{outline:none;border-color:var(--murekkep);background:#fff}
.onay{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--soluk);line-height:1.45}
.onay input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin-top:1px;border-radius:6px;border:1.5px solid rgba(12,22,34,.35);background:#fff;display:grid;place-content:center;cursor:pointer}
.onay input:checked{background:var(--murekkep);border-color:var(--murekkep)}
.onay input:checked::after{content:"";width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.onay b{color:var(--murekkep);font-weight:600}
.onay a{color:var(--murekkep)}
.tuzak{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .dugme{justify-self:start;margin-top:4px}
.form .dugme:disabled{opacity:.6;cursor:default;transform:none}
.form-mesaj{font-size:15px;font-weight:500;min-height:1.4em}
.form-mesaj.ok{color:var(--teal)}
.form-mesaj.hata{color:var(--kirmizi)}

/* 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 details p+p{margin-top:-12px}
.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:40px 0 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:26px;font-size:14px;color:var(--soluk);flex-wrap:wrap}
.alt-bilgi .linkler a{text-decoration:none}
.alt-bilgi .linkler a:hover{color:var(--murekkep)}

/* statik sayfa (kvkk, 404) */
.sayfa{max-width:760px;padding:60px 0 0}
.sayfa h1{font-size:clamp(38px,5vw,64px)}
.sayfa h2{font-size:24px;letter-spacing:-.01em;margin:44px 0 12px;line-height:1.2}
.sayfa p,.sayfa li{color:var(--soluk);font-size:16.5px}
.sayfa p+p{margin-top:12px}
.sayfa ul{margin:8px 0 0 20px;display:grid;gap:6px}
.sayfa strong{color:var(--murekkep)}
.sayfa .giris-yazi{font-size:19px;margin-top:22px}
.sayfa .dugme{margin-top:40px}
.yok{min-height:calc(100vh - 260px);display:flex;flex-direction:column;justify-content:center}
.yok .kod{font-family:var(--mono);color:var(--soluk);font-size:15px;margin-bottom:18px}

/* ---------- duyarlı ---------- */
@media (max-width:1100px){
  .iphone{zoom:.86}
  .asama .pencere{min-height:260px}
  .ilke{padding:56px 48px}
  .formlar{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:960px){
  .iphone{zoom:.74}
  .kap{padding:0 28px}
  .asamalar{grid-template-columns:1fr;max-width:560px}
  .kur,.bekleme,.sss{grid-template-columns:1fr}
  .sss .bolum-bas{position:static;margin-bottom:24px}
  .nerede{grid-template-columns:1fr}
  .ilke{grid-template-columns:1fr}
  .ilke .disk{max-width:320px}
}
@media (max-width:720px){
  .nav-linkler{display:none}
  .ust .dugme{padding:10px 16px;font-size:14px}
  .kap{padding:0 16px}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:12px}
  .sahne{justify-self:center}
  .iphone{zoom:.9}
  .bolum{padding-top:88px}
  .kur .kart,.bekleme .kart,.nerede .kart{padding:26px}
  .form .iki{grid-template-columns:1fr}
  .formlar{grid-template-columns:1fr 1fr;gap:12px}
  .form-kart{padding:16px}
  .form-kart p{font-size:14px}
  .piyasa-grup{grid-template-columns:1fr;gap:8px}
  .ilke{border-radius:28px;margin-top:88px;padding:40px 22px}
  .ilke .disk{max-width:260px}
  .alt-bilgi{grid-template-columns:1fr}
  .sorular summary{font-size:18px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}