:root{
  --ground:#FFFFFF; --soft:#F6F9FD; --ink:#0F1B2E; --ink-soft:#4E5F7A; --ink-faint:#8A99B0;
  --line:#E3E9F3; --lacivert:#1E3A5F; --lacivert-koyu:#152B47; --mavi:#2F6FD0; --mavi-soft:#E8F0FC;
  --yesil:#16A34A; --amber:#B45309;
  --golge:0 1px 2px rgba(15,27,46,.05), 0 10px 30px rgba(15,27,46,.08);
}
*{box-sizing:border-box}
body{margin:0; background:var(--ground); color:var(--ink);
  font:400 16px/1.6 Karla, ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing:antialiased}
.kap{max-width:1120px; margin:0 auto; padding:0 24px}
h1,h2,h3{font-family:Sora, sans-serif; margin:0; text-wrap:balance}
.mono{font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums}

/* ust bar */
.ustbar{display:flex; align-items:center; justify-content:space-between; padding:18px 0}
.marka{font-family:Sora,sans-serif; font-weight:800; font-size:19px; color:var(--lacivert)}
.marka span{color:var(--mavi)}
.ust-sag{display:flex; align-items:center; gap:14px; font-size:14px}
.dil-kutu select{background:#fff; color:var(--ink-soft); border:1px solid var(--line);
  border-radius:8px; padding:6px 10px; font-size:13px}
.btn{display:inline-block; border-radius:11px; padding:12px 22px; font-weight:700; font-size:15px;
  text-decoration:none; text-align:center; border:none; cursor:pointer}
.btn-ana{background:var(--mavi); color:#fff}
.btn-buyuk{padding:15px 30px; font-size:16.5px}
.btn-cerceve{background:#fff; color:var(--mavi); border:1.5px solid var(--mavi)}

/* hero */
/* 16.10 Patron "ana sayfa haricindeki tum sayfalar koyu mavi arka planinda animasyon yok": koyu bantlar ana sayfayla AYNI
   gecis (site.css --koyu) + canli baglanti agi (site-ust.js .ag/canvas ekler, /baglanti-agi.js ciziyor) */
.hero,.guven,.fy-hero{--koyu:linear-gradient(155deg,#1e3a5f 0%,#2360bd 55%,#2360bd 100%)}
.ag{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ag canvas{display:block;width:100%;height:100%}
.hero>:not(.ag),.guven>:not(.ag),.fy-hero>:not(.ag){position:relative;z-index:1}
.hero{background:var(--koyu);
  color:#fff; padding:72px 0 84px; position:relative; overflow:hidden}
.hero .kap{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center}
@media(max-width:880px){.hero .kap{grid-template-columns:1fr}}
.hero-etiket{font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:#8FB4E8; margin-bottom:16px}
.hero h1{font-size:clamp(32px,4.6vw,52px); font-weight:800; line-height:1.08; letter-spacing:-.02em}
.hero p{font-size:18px; color:#B8C7DE; margin:18px 0 30px; max-width:52ch}
.hero-ci{display:flex; gap:12px; flex-wrap:wrap}
.hero-alt{margin-top:26px; font-size:13.5px; color:#8FA5C4}
.hero-alt b{color:#fff}

/* hero panel gorseli */
.panelim{background:#fff; border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.35); overflow:hidden}
.panelim-bar{background:var(--soft); border-bottom:1px solid var(--line); padding:10px 14px; display:flex; gap:6px}
.panelim-bar i{width:10px; height:10px; border-radius:50%; background:#D6DEEA; display:block}
.panelim-ic{padding:18px; color:var(--ink)}
.p-baslik{font-family:Sora,sans-serif; font-weight:700; font-size:14px; color:var(--lacivert); margin-bottom:12px}
.p-sat{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--soft); font-size:13px}
.p-sat:last-child{border-bottom:none}
.p-avatar{width:30px; height:30px; border-radius:50%; background:var(--mavi-soft); color:var(--mavi);
  font-weight:700; font-size:11px; display:flex; align-items:center; justify-content:center; flex:none}
.p-led{width:8px; height:8px; border-radius:50%; background:var(--yesil); margin-left:auto}
.p-led.mesgul{background:var(--amber)}

/* ozellik grid */
section{padding:76px 0}
.bolum-bas{text-align:center; max-width:64ch; margin:0 auto 46px}
.bolum-bas h2{font-size:clamp(26px,3.2vw,36px); font-weight:700}
.bolum-bas p{color:var(--ink-soft); font-size:16.5px; margin-top:12px}
.ozgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media(max-width:880px){.ozgrid{grid-template-columns:1fr}}
.oz{background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:var(--golge)}
.oz-ikon{width:44px; height:44px; border-radius:12px; background:var(--mavi-soft);
  display:flex; align-items:center; justify-content:center; font-size:21px; margin-bottom:14px}
.oz h3{font-size:17px; font-weight:600; margin-bottom:7px}
.oz p{font-size:14.5px; color:var(--ink-soft); margin:0; line-height:1.55}

/* nasil calisir */
.nasil{background:var(--soft)}
.adimlar{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media(max-width:880px){.adimlar{grid-template-columns:1fr 1fr}}
.adim{background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; text-align:center}
.adim-no{font-family:"JetBrains Mono",monospace; font-weight:700; color:var(--mavi);
  border:1.5px solid var(--mavi); border-radius:999px; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center; margin:0 auto 12px; font-size:14px}
.adim h3{font-size:15.5px; font-weight:600; margin-bottom:6px}
.adim p{font-size:13.5px; color:var(--ink-soft); margin:0}

/* fiyat */
.fiyatlar{display:grid; grid-template-columns:1fr .82fr; gap:22px; max-width:820px; margin:0 auto; align-items:start}
@media(max-width:760px){.fiyatlar{grid-template-columns:1fr}}
.fk{background:#fff; border:1px solid var(--line); border-radius:20px; padding:32px; box-shadow:var(--golge); position:relative}
.fk.one{border:2px solid var(--mavi)}
.fk.eklenti{border:1.5px dashed var(--mavi); background:var(--mavi-soft)}
.fk.eklenti .fk-fiyat{font-size:38px}
.fk-rozet{position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--mavi);
  color:#fff; font-size:11.5px; font-weight:700; border-radius:999px; padding:4px 14px; letter-spacing:.04em}
.fk-ad{font-family:Sora,sans-serif; font-weight:700; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.08em; font-size:12.5px}
.fk-fiyat{font-family:Sora,sans-serif; font-weight:800; font-size:46px; color:var(--lacivert); margin:10px 0 2px}
.fk-fiyat small{font-size:16px; font-weight:600; color:var(--ink-faint)}
@media(max-width:480px){.fk-fiyat{font-size:34px}.fk.eklenti .fk-fiyat{font-size:30px}}
.fk-alt{font-size:13.5px; color:var(--ink-faint); margin-bottom:20px}
.fk ul{list-style:none; margin:0 0 24px; padding:0}
.fk li{padding:7px 0 7px 26px; font-size:14.5px; color:var(--ink-soft); position:relative}
.fk li::before{content:"✓"; position:absolute; left:2px; color:var(--yesil); font-weight:700}
.fk .btn{width:100%}

/* dunya seridi */
.dunya{background:var(--lacivert); color:#fff; text-align:center}
.dunya h2{font-size:clamp(24px,3vw,32px)}
.dunya p{color:#B8C7DE; max-width:58ch; margin:14px auto 0; font-size:16px}
.sayilar{display:flex; justify-content:center; gap:56px; margin-top:38px; flex-wrap:wrap}
.sayi b{font-family:Sora,sans-serif; font-size:34px; font-weight:800; display:block}
.sayi span{font-size:13px; color:#8FA5C4; letter-spacing:.06em; text-transform:uppercase}

/* sss */
.sss{max-width:760px; margin:0 auto}
.sss details{border-bottom:1px solid var(--line); padding:16px 4px}
.sss summary{font-weight:700; font-size:15.5px; cursor:pointer; list-style:none; display:flex; justify-content:space-between}
.sss summary::after{content:"+"; color:var(--mavi); font-weight:700}
.sss details[open] summary::after{content:"–"}
.sss details p{color:var(--ink-soft); font-size:14.5px; margin:10px 0 0; max-width:66ch}

/* resco bulut seridi */
.bulut-serit{background:var(--mavi-soft)}
.bulut-ic{display:flex; gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.bulut-ic h3{font-size:22px; font-weight:700; color:var(--lacivert)}
.bulut-ic p{color:var(--ink-soft); font-size:15px; margin:8px 0 0; max-width:62ch}
.bulut-etiket{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em; color:var(--mavi)}

/* kapanis */
.kapanis{background:var(--soft); text-align:center}
.kapanis h2{font-size:clamp(24px,3vw,34px)}
.kapanis p{color:var(--ink-soft); margin:12px 0 28px}
footer{border-top:1px solid var(--line); padding:26px 0 50px; color:var(--ink-faint); font-size:13px; text-align:center}

/* --- taslak ek: urun sayfalari ortak --- */
.yakinda{display:inline-block; background:#FFF4E5; color:var(--amber); border:1px solid #F5D7A8; border-radius:999px;
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.12em; padding:4px 12px; margin-bottom:14px}
.tablo-kap{overflow-x:auto; max-width:880px; margin:0 auto}
table.tur{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--golge); font-size:14.5px}
table.tur th{background:var(--soft); text-align:left; font-weight:700; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); padding:12px 16px}
table.tur td{padding:14px 16px; border-top:1px solid var(--line); vertical-align:top; color:var(--ink-soft)}
table.tur td b{color:var(--ink); display:block; font-size:15px}
table.tur td.s{font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums; color:var(--lacivert); white-space:nowrap}
.dipnot{max-width:880px; margin:14px auto 0; font-size:12.5px; color:var(--ink-faint)}
.iki{display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:900px; margin:0 auto}
@media(max-width:760px){.iki{grid-template-columns:1fr}}
.iki.uc{grid-template-columns:repeat(3,1fr)}
@media(max-width:880px){.iki.uc{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.iki.uc{grid-template-columns:1fr}}
.bilgi{background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px}
.bilgi h3{font-size:17px; margin-bottom:8px}
.bilgi p,.bilgi li{font-size:14.5px; color:var(--ink-soft)}
.bilgi ul{margin:8px 0 0; padding-left:18px}