@charset "UTF-8";
/* =========================================================
   Bulutz — Kurumsal Tema
   Yön: B · Stratos (azur palet, yumuşak kartlar, keskin butonlar)
   ========================================================= */

@font-face{
  font-family:"Manrope";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("../yazitipi/Manrope-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,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:"Manrope";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("../yazitipi/Manrope-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------------- jetonlar ---------------- */
:root{
  /* renk */
  --gece:#0D2440;
  --gece-2:#14396B;
  --azur:#0E6BE8;
  --azur-koyu:#0B57BE;
  --gok:#5CC2F5;
  --kagit:#F2F7FE;
  --kart:#FFFFFF;
  --metin:#0D2440;
  --metin-2:#52708F;
  --cizgi:#DEE9F7;
  --sonuk:#A6C0DE;
  --tel:#1D3E68;
  --kahraman:linear-gradient(158deg,#0D2440 0%,#14396B 55%,#12539F 100%);

  /* durum */
  --olumlu:#0E9A6C;
  --uyari:#C77A0A;

  /* biçim */
  --r-buyuk:16px;
  --r-orta:12px;
  --r-dugme:2px;

  /* tipografi */
  --yazi:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --b-agirlik:800;
  --b-aralik:-.036em;

  /* düzen */
  --en:1240px;
  --bosluk:84px;

  /* gölge */
  --golge:0 1px 2px rgba(13,36,64,.04), 0 10px 30px -14px rgba(13,36,64,.16);
  --golge-2:0 2px 4px rgba(13,36,64,.05), 0 18px 46px -18px rgba(13,36,64,.24);
}

/* ---------------- temel ---------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--kagit);
  color:var(--metin);
  font-family:var(--yazi);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%}
a{color:inherit; text-decoration:none}
:where(a,button,input,select,summary):focus-visible{
  outline:2px solid var(--azur); outline-offset:3px; border-radius:var(--r-dugme);
}
h1,h2,h3,h4{margin:0; font-weight:var(--b-agirlik); letter-spacing:var(--b-aralik); line-height:1.1; text-wrap:balance}
p{margin:0}
ul{margin:0; padding:0; list-style:none}

.ic{max-width:var(--en); margin:0 auto; padding:0 24px}
.gorunmez{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.atla{
  position:absolute; top:-100px; left:12px; z-index:200; background:var(--azur);
  color:#fff; padding:10px 18px; font-weight:600; border-radius:var(--r-dugme);
}
.atla:focus{top:12px}

/* ---------------- etiket ---------------- */
.etiket{
  font-size:12px; font-weight:700; letter-spacing:.02em;
  color:var(--azur); margin:0;
}
.etiket--acik{color:var(--gok)}

/* ---------------- düğme ---------------- */
.dugme{
  font-family:var(--yazi); font-size:14.5px; font-weight:600; letter-spacing:.01em;
  padding:12px 22px; border-radius:var(--r-dugme); border:1px solid transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; white-space:nowrap; line-height:1.2;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.dugme--dolu{background:var(--azur); color:#fff}
.dugme--dolu:hover{background:var(--azur-koyu)}
.dugme--cizgi{border-color:var(--tel); color:#fff}
.dugme--cizgi:hover{border-color:var(--gok); color:var(--gok)}
.dugme--acik{border-color:var(--cizgi); color:var(--metin); background:var(--kart)}
.dugme--acik:hover{border-color:var(--azur); color:var(--azur)}
.dugme--kucuk{font-size:13.5px; padding:9px 16px}
.dugme--genis{width:100%}
.dugme svg{width:16px; height:16px; flex:none}

/* ---------------- üst bant ---------------- */
.ust-bant{background:var(--gece-2); color:var(--sonuk); font-size:13px}
.ust-bant .ic{display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding-top:9px; padding-bottom:9px}
.ust-bant a:hover{color:#fff}
.ust-bant__sag{margin-left:auto; display:flex; gap:18px; flex-wrap:wrap}
.ust-bant__nokta{display:inline-flex; align-items:center; gap:7px}
.ust-bant__nokta i{width:7px; height:7px; border-radius:50%; background:var(--olumlu); flex:none}
@media (max-width:720px){.ust-bant{display:none}}

/* ---------------- başlık / menü ---------------- */
.baslik{background:var(--gece); border-bottom:1px solid var(--tel); position:relative; z-index:50}
.baslik .ic{display:flex; align-items:center; gap:28px; padding-top:15px; padding-bottom:15px}

.logo{display:flex; align-items:center; gap:10px; flex:none}
.logo svg{width:32px; height:32px; display:block; flex:none}
.logo b{font-size:23px; font-weight:800; letter-spacing:-.045em; color:#fff; line-height:1}

.menu{display:flex; gap:4px; flex:1}
.menu__oge{position:relative}
.menu__bag{
  display:flex; align-items:center; gap:6px; padding:9px 13px;
  font-size:14.5px; font-weight:600; color:var(--sonuk); border-radius:var(--r-dugme);
  background:none; border:0; font-family:var(--yazi); cursor:pointer;
}
.menu__bag:hover,.menu__oge[data-acik="true"] .menu__bag{color:#fff}
.menu__ok{width:11px; height:11px; transition:transform .18s ease}
.menu__oge[data-acik="true"] .menu__ok{transform:rotate(180deg)}

.menu__panel{
  position:absolute; top:calc(100% + 12px); left:0; min-width:290px;
  background:var(--kart); border:1px solid var(--cizgi); border-radius:var(--r-orta);
  box-shadow:var(--golge-2); padding:8px; display:none; flex-direction:column; gap:2px;
}
/* buton ile panel arasındaki boşluğu kapatan görünmez köprü —
   olmazsa fare boşluktan geçerken mouseleave tetiklenip menü kapanır */
.menu__panel::before{
  content:""; position:absolute; left:0; right:0; top:-14px; height:14px;
}
.menu__oge[data-acik="true"] .menu__panel{display:flex}
.menu__alt{display:flex; gap:12px; padding:11px 12px; border-radius:var(--r-dugme)}
.menu__alt:hover{background:var(--kagit)}
.menu__alt svg{width:19px; height:19px; color:var(--azur); flex:none; margin-top:2px}
.menu__alt strong{display:block; font-size:14.5px; font-weight:700; color:var(--metin); letter-spacing:-.01em}
.menu__alt span{display:block; font-size:12.5px; color:var(--metin-2); line-height:1.45}

.baslik__islem{display:flex; align-items:center; gap:12px; flex:none}
.baslik__giris{font-size:14.5px; font-weight:600; color:#fff}

.mobil-ac{display:none; background:none; border:1px solid var(--tel); border-radius:var(--r-dugme); padding:8px; cursor:pointer; color:#fff}
.mobil-ac svg{width:20px; height:20px; display:block}

@media (max-width:1080px){
  .menu{display:none}
  .mobil-ac{display:block}
  .baslik .ic{gap:14px}
  .menu[data-mobil="acik"]{
    display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0;
    background:var(--gece); border-bottom:1px solid var(--tel); padding:10px 24px 20px; gap:0;
  }
  .menu[data-mobil="acik"] .menu__panel{
    position:static; display:flex; box-shadow:none; border:0; background:transparent;
    padding:0 0 8px 28px; min-width:0;
  }
  .menu[data-mobil="acik"] .menu__alt strong{color:#fff}
  .menu[data-mobil="acik"] .menu__alt span{color:var(--sonuk)}
  .menu[data-mobil="acik"] .menu__alt:hover{background:rgba(255,255,255,.05)}
  .menu[data-mobil="acik"] .menu__bag{width:100%; justify-content:space-between; padding:13px 0; font-size:16px}
}

/* ---------------- kahraman ---------------- */
.kahraman{background:var(--kahraman); color:#fff; padding:var(--bosluk) 0; position:relative; overflow:hidden}
.kahraman::after{
  content:""; position:absolute; right:-160px; top:-160px; width:520px; height:520px;
  background:radial-gradient(circle,rgba(92,194,245,.22) 0%,transparent 65%);
  pointer-events:none;
}
.kahraman .ic{display:grid; grid-template-columns:1.06fr .94fr; gap:54px; align-items:center; position:relative; z-index:1}
.kahraman__yazi{display:flex; flex-direction:column; gap:19px; align-items:flex-start}
.kahraman h1{font-size:clamp(34px,4.7vw,56px)}
.kahraman__alt{font-size:17.5px; line-height:1.6; color:var(--sonuk); max-width:52ch}
.kahraman__dugmeler{display:flex; gap:12px; flex-wrap:wrap; margin-top:5px}
.kahraman__tik{display:flex; gap:22px; flex-wrap:wrap; margin-top:12px}
.kahraman__tik span{font-size:13.5px; color:var(--sonuk); display:inline-flex; align-items:center; gap:8px}
.kahraman__tik svg{width:15px; height:15px; color:var(--gok); flex:none}
@media (max-width:960px){
  .kahraman .ic{grid-template-columns:1fr; gap:40px}
  .kahraman::after{display:none}
}

/* yapılandırıcı kartı */
.yapilandir{
  background:rgba(255,255,255,.06); border:1px solid var(--tel);
  border-radius:var(--r-buyuk); overflow:hidden;
}
.yapilandir__ust{padding:16px 22px; border-bottom:1px solid var(--tel); display:flex; align-items:center; justify-content:space-between; gap:12px}
.yapilandir__ust .etiket{color:var(--sonuk)}
.yapilandir__rozet{font-size:12px; font-weight:700; color:var(--gok)}
.yapilandir__satir{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 22px; border-bottom:1px solid var(--tel)}
.yapilandir__satir dt{font-size:13.5px; color:var(--sonuk); margin:0}
.yapilandir__satir dd{margin:0; font-size:14.5px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; text-align:right}
.yapilandir__alt{padding:19px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.yapilandir__fiyat{display:flex; align-items:baseline; gap:5px}
.yapilandir__fiyat strong{font-size:32px; font-weight:800; letter-spacing:var(--b-aralik); color:#fff; font-variant-numeric:tabular-nums}
.yapilandir__fiyat span{font-size:13px; color:var(--sonuk)}

/* ---------------- güven şeridi ---------------- */
.guven{background:var(--kart); border-bottom:1px solid var(--cizgi)}
.guven .ic{display:grid; grid-template-columns:repeat(4,1fr); padding:0}
.guven__oge{padding:28px 26px; display:flex; flex-direction:column; gap:5px; border-left:1px solid var(--cizgi)}
.guven__oge:first-child{border-left:0}
.guven__oge strong{font-size:28px; font-weight:800; letter-spacing:var(--b-aralik); font-variant-numeric:tabular-nums}
.guven__oge span{font-size:13px; color:var(--metin-2); font-weight:500}
@media (max-width:820px){
  .guven .ic{grid-template-columns:repeat(2,1fr)}
  .guven__oge:nth-child(3){border-left:0}
  .guven__oge:nth-child(n+3){border-top:1px solid var(--cizgi)}
}

/* ---------------- bölüm ---------------- */
.bolum{padding:var(--bosluk) 0}
.bolum--kart{background:var(--kart); border-top:1px solid var(--cizgi); border-bottom:1px solid var(--cizgi)}
.bolum__ust{display:flex; flex-direction:column; gap:12px; margin-bottom:40px; max-width:62ch}
.bolum__ust h2{font-size:clamp(27px,3.4vw,40px)}
.bolum__ust p{font-size:17px; line-height:1.6; color:var(--metin-2)}
.bolum__ust--orta{margin-left:auto; margin-right:auto; text-align:center; align-items:center}

/* ---------------- alan adı sorgu ---------------- */
.alanadi{
  background:var(--gece); border-radius:var(--r-buyuk); padding:44px 40px;
  color:#fff; display:flex; flex-direction:column; gap:22px;
}
.alanadi__ust{display:flex; flex-direction:column; gap:10px; max-width:56ch}
.alanadi h2{font-size:clamp(24px,2.9vw,33px)}
.alanadi__ust p{color:var(--sonuk); font-size:16px; line-height:1.6}
.alanadi__form{display:flex; gap:10px; flex-wrap:wrap}
.alanadi__giris{
  flex:1 1 320px; background:rgba(255,255,255,.07); border:1px solid var(--tel);
  border-radius:var(--r-dugme); padding:14px 18px; color:#fff;
  font-family:var(--yazi); font-size:15.5px;
}
.alanadi__giris::placeholder{color:#7E9CC4}
.alanadi__giris:focus{outline:none; border-color:var(--gok); background:rgba(255,255,255,.1)}
.alanadi__uzanti{display:flex; gap:8px; flex-wrap:wrap}
.alanadi__uzanti li{
  display:flex; align-items:baseline; gap:7px; padding:8px 14px;
  border:1px solid var(--tel); border-radius:var(--r-dugme); font-size:13.5px;
}
.alanadi__uzanti b{font-weight:700}
.alanadi__uzanti span{color:var(--gok); font-variant-numeric:tabular-nums}
@media (max-width:600px){.alanadi{padding:30px 24px}}

/* ---------------- plan kartları ---------------- */
.planlar{display:grid; gap:20px}
.planlar--4{grid-template-columns:repeat(4,1fr)}
.planlar--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1080px){.planlar--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:940px){.planlar--3{grid-template-columns:1fr}}
@media (max-width:620px){.planlar--4{grid-template-columns:1fr}}

.plan{
  background:var(--kart); border:1px solid var(--cizgi); border-radius:var(--r-buyuk);
  padding:26px 24px; display:flex; flex-direction:column; gap:19px; position:relative;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.plan:hover{border-color:var(--gok); box-shadow:var(--golge)}
.plan--one{border-color:var(--azur); box-shadow:0 0 0 1px var(--azur), var(--golge)}
.plan__rozet{
  position:absolute; top:0; right:22px; transform:translateY(-50%);
  background:var(--azur); color:#fff; padding:5px 12px; border-radius:var(--r-dugme);
  font-size:11px; font-weight:700; letter-spacing:.02em; white-space:nowrap;
}
.plan__ad{display:flex; flex-direction:column; gap:5px}
.plan__ad h3{font-size:18.5px}
.plan__ad p{font-size:13.5px; color:var(--metin-2); line-height:1.45}
.plan__fiyat{display:flex; align-items:baseline; gap:6px; padding-bottom:19px; border-bottom:1px solid var(--cizgi)}
.plan__fiyat strong{font-size:33px; font-weight:800; letter-spacing:var(--b-aralik); font-variant-numeric:tabular-nums}
.plan__fiyat span{font-size:13.5px; color:var(--metin-2)}
.plan__ustu{font-size:12.5px; color:var(--metin-2); text-decoration:line-through; margin-left:2px}
.plan__ozellik{display:flex; flex-direction:column; gap:11px; flex:1}
.plan__ozellik li{display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--metin-2); line-height:1.45}
.plan__ozellik svg{width:15px; height:15px; flex:none; margin-top:3px; color:var(--azur)}
.plan__ozellik b{color:var(--metin); font-weight:700}

/* ---------------- özellikler ---------------- */
.ozellikler{display:grid; grid-template-columns:repeat(3,1fr); gap:30px 34px}
@media (max-width:940px){.ozellikler{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.ozellikler{grid-template-columns:1fr}}
.ozellik{display:flex; flex-direction:column; gap:12px}
.ozellik__ikon{
  width:44px; height:44px; border-radius:var(--r-orta); display:grid; place-items:center;
  background:rgba(14,107,232,.09); color:var(--azur); flex:none;
}
.ozellik__ikon svg{width:21px; height:21px}
.ozellik h3{font-size:16.5px}
.ozellik p{font-size:14.5px; line-height:1.6; color:var(--metin-2)}

/* ---------------- SSL şeridi ---------------- */
.ssl{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media (max-width:940px){.ssl{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ssl{grid-template-columns:1fr}}
.ssl__kart{
  background:var(--kart); border:1px solid var(--cizgi); border-radius:var(--r-orta);
  padding:22px 20px; display:flex; flex-direction:column; gap:11px;
}
.ssl__tip{font-size:11.5px; font-weight:700; letter-spacing:.06em; color:var(--azur)}
.ssl__kart h3{font-size:16px}
.ssl__kart p{font-size:13.5px; color:var(--metin-2); line-height:1.5; flex:1}
.ssl__fiyat{display:flex; align-items:baseline; gap:5px; padding-top:11px; border-top:1px solid var(--cizgi)}
.ssl__fiyat strong{font-size:21px; font-weight:800; letter-spacing:var(--b-aralik); font-variant-numeric:tabular-nums}
.ssl__fiyat span{font-size:12.5px; color:var(--metin-2)}

/* ---------------- altyapı ---------------- */
.altyapi{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
@media (max-width:940px){.altyapi{grid-template-columns:1fr; gap:34px}}
.altyapi__liste{display:flex; flex-direction:column; gap:1px; background:var(--cizgi); border:1px solid var(--cizgi); border-radius:var(--r-orta); overflow:hidden}
.altyapi__satir{background:var(--kart); padding:17px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.altyapi__satir dt{margin:0; font-size:14.5px; font-weight:700}
.altyapi__satir dd{margin:0; font-size:14px; color:var(--metin-2); text-align:right; font-variant-numeric:tabular-nums}

/* ---------------- SSS ---------------- */
.sss{display:flex; flex-direction:column; gap:1px; background:var(--cizgi); border:1px solid var(--cizgi); border-radius:var(--r-orta); overflow:hidden}
.sss__oge{background:var(--kart)}
.sss__oge summary{
  padding:19px 22px; cursor:pointer; font-size:16px; font-weight:700; letter-spacing:-.015em;
  display:flex; align-items:center; justify-content:space-between; gap:16px; list-style:none;
}
.sss__oge summary::-webkit-details-marker{display:none}
.sss__oge summary::after{
  content:""; width:11px; height:11px; flex:none;
  border-right:2px solid var(--azur); border-bottom:2px solid var(--azur);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .18s ease;
}
.sss__oge[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.sss__cevap{padding:0 22px 20px; font-size:14.5px; line-height:1.65; color:var(--metin-2); max-width:78ch}

/* ---------------- çağrı bandı ---------------- */
.serit{
  background:var(--kahraman); color:#fff; border-radius:var(--r-buyuk);
  padding:48px 44px; display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center;
}
@media (max-width:820px){.serit{grid-template-columns:1fr; padding:34px 26px}}
.serit h2{font-size:clamp(23px,2.7vw,32px); margin-bottom:11px}
.serit p{font-size:16px; line-height:1.6; color:var(--sonuk); max-width:56ch}
.serit__dugmeler{display:flex; gap:12px; flex-wrap:wrap}

/* ---------------- altbilgi ---------------- */
.altbilgi{background:var(--gece); color:var(--sonuk); padding:62px 0 0; margin-top:var(--bosluk)}
.altbilgi__sutunlar{display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:38px; padding-bottom:44px}
@media (max-width:1080px){.altbilgi__sutunlar{grid-template-columns:repeat(3,1fr); gap:32px}}
@media (max-width:680px){.altbilgi__sutunlar{grid-template-columns:repeat(2,1fr)}}
.altbilgi__marka{display:flex; flex-direction:column; gap:15px}
.altbilgi__marka p{font-size:14px; line-height:1.65; max-width:34ch}
.altbilgi__iletisim{display:flex; flex-direction:column; gap:7px; font-size:14px}
.altbilgi__iletisim a:hover{color:#fff}
.altbilgi__sutun{display:flex; flex-direction:column; gap:12px}
.altbilgi__sutun h3{font-size:13px; font-weight:700; color:#fff; letter-spacing:.01em}
.altbilgi__sutun a{font-size:14px}
.altbilgi__sutun a:hover{color:#fff}
.altbilgi__son{
  border-top:1px solid var(--tel); padding:22px 0 44px;
  display:flex; gap:20px; flex-wrap:wrap; align-items:center; font-size:13px;
}
.altbilgi__son .sag{margin-left:auto; display:flex; gap:18px; flex-wrap:wrap}
.altbilgi__son a:hover{color:#fff}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
}

/* ---------------- iç sayfa başlığı ---------------- */
.sayfa-basi{background:var(--kahraman); color:#fff; padding:64px 0 60px; position:relative; overflow:hidden}
.sayfa-basi::after{
  content:""; position:absolute; right:-140px; top:-180px; width:460px; height:460px;
  background:radial-gradient(circle,rgba(92,194,245,.2) 0%,transparent 65%); pointer-events:none;
}
.sayfa-basi .ic{position:relative; z-index:1; display:flex; flex-direction:column; gap:15px; align-items:flex-start}
.sayfa-basi h1{font-size:clamp(30px,4.1vw,48px); max-width:20ch}
.sayfa-basi p{font-size:17.5px; line-height:1.6; color:var(--sonuk); max-width:58ch}
.sayfa-basi__dugmeler{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px}

/* kırıntı */
.kirinti{display:flex; gap:9px; flex-wrap:wrap; font-size:13px; color:var(--sonuk); align-items:center}
.kirinti a:hover{color:#fff}
.kirinti span{opacity:.5}

/* ---------------- karşılaştırma tablosu ---------------- */
.tablo-kaydir{
  overflow-x:auto; background:var(--kart); border:1px solid var(--cizgi);
  border-radius:var(--r-orta); box-shadow:var(--golge);
}
.tablo{border-collapse:collapse; width:100%; min-width:720px; font-size:14.5px}
.tablo th,.tablo td{text-align:left; padding:15px 20px; border-bottom:1px solid var(--cizgi); vertical-align:middle}
.tablo thead th{
  font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--metin-2);
  background:var(--kagit); border-bottom:1px solid var(--cizgi); white-space:nowrap;
}
.tablo tbody th{font-weight:700; color:var(--metin); white-space:nowrap}
.tablo td{color:var(--metin-2); font-variant-numeric:tabular-nums}
.tablo tbody tr:last-child th,.tablo tbody tr:last-child td{border-bottom:0}
.tablo tbody tr:hover{background:var(--kagit)}
.tablo__fiyat{font-weight:800; color:var(--metin); font-size:16px; letter-spacing:var(--b-aralik)}
.tablo__islem{text-align:right; white-space:nowrap}

/* ---------------- iletişim ---------------- */
.iletisim{display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:start}
@media (max-width:940px){.iletisim{grid-template-columns:1fr; gap:34px}}
.iletisim__kutular{display:grid; gap:16px}
.iletisim__kutu{
  background:var(--kart); border:1px solid var(--cizgi); border-radius:var(--r-orta);
  padding:22px 24px; display:flex; flex-direction:column; gap:7px;
}
.iletisim__kutu h3{font-size:16px}
.iletisim__kutu p{font-size:14.5px; color:var(--metin-2); line-height:1.55}
.iletisim__kutu a{font-weight:700; color:var(--azur)}
.form{display:flex; flex-direction:column; gap:16px}
.form__satir{display:flex; flex-direction:column; gap:7px}
.form__satir label{font-size:13.5px; font-weight:700}
.form__satir input,.form__satir textarea,.form__satir select{
  font-family:var(--yazi); font-size:15px; padding:12px 15px; color:var(--metin);
  background:var(--kart); border:1px solid var(--cizgi); border-radius:var(--r-dugme);
}
.form__satir textarea{min-height:140px; resize:vertical}
.form__satir input:focus,.form__satir textarea:focus,.form__satir select:focus{outline:none; border-color:var(--azur)}
.form__ikili{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:560px){.form__ikili{grid-template-columns:1fr}}

/* ---------------- rehber / uzun metin ---------------- */
.yazi{max-width:74ch}
.yazi h2{font-size:clamp(24px,3vw,34px); margin-bottom:26px}
.yazi h3{font-size:19px; margin:34px 0 10px; letter-spacing:-.022em}
.yazi h3:first-of-type{margin-top:0}
.yazi p{font-size:16.5px; line-height:1.72; color:var(--metin-2)}
.yazi p + h3{margin-top:34px}
.yazi p b{color:var(--metin); font-weight:700}
.yazi a{color:var(--azur); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.yazi a:hover{color:var(--azur-koyu)}

/* 404 kısayol kartlarındaki bağlantı başlıkları */
.ozellik h3 a{color:inherit}
.ozellik h3 a:hover{color:var(--azur)}

/* =========================================================
   v2 — dinamik / dolu kurgu bileşenleri
   ========================================================= */

/* ---------------- kampanya bandı ---------------- */
.kampanya{
  background:linear-gradient(90deg,#0B57BE 0%,#0E6BE8 45%,#2E8BF0 100%);
  color:#fff; font-size:14px; position:relative; overflow:hidden;
}
.kampanya .ic{display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; padding:11px 24px}
.kampanya__rozet{
  background:#fff; color:var(--azur); font-weight:800; font-size:11.5px;
  letter-spacing:.04em; padding:4px 10px; border-radius:var(--r-dugme); flex:none;
}
.kampanya b{font-weight:800}
.kampanya__sayac{display:flex; gap:6px; align-items:center; font-variant-numeric:tabular-nums}
.kampanya__sayac span{
  background:rgba(255,255,255,.18); border-radius:var(--r-dugme);
  padding:3px 7px; font-weight:700; font-size:13px; min-width:30px; text-align:center;
}
.kampanya__bag{text-decoration:underline; text-underline-offset:3px; font-weight:700; white-space:nowrap}
@media (max-width:640px){.kampanya__sayac{display:none}}

/* ---------------- teknoloji şeridi ---------------- */
.teknoloji{background:var(--kart); border-bottom:1px solid var(--cizgi); padding:26px 0}
.teknoloji__ust{text-align:center; font-size:12.5px; font-weight:700; color:var(--metin-2); margin-bottom:18px; letter-spacing:.02em}
.teknoloji__liste{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:14px 38px;
}
.teknoloji__liste span{
  font-size:17px; font-weight:800; letter-spacing:-.03em; color:var(--metin);
  opacity:.34; transition:opacity .18s ease; white-space:nowrap;
}
.teknoloji__liste span:hover{opacity:.72}
@media (max-width:640px){.teknoloji__liste{gap:12px 24px} .teknoloji__liste span{font-size:15px}}

/* ---------------- sayaç paneli ---------------- */
.sayac{background:var(--gece); color:#fff; padding:44px 0}
.sayac__izgara{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--tel)}
@media (max-width:820px){.sayac__izgara{grid-template-columns:repeat(2,1fr)}}
.sayac__oge{background:var(--gece); padding:24px 22px; display:flex; flex-direction:column; gap:6px}
.sayac__deger{
  font-size:clamp(28px,3.4vw,38px); font-weight:800; letter-spacing:var(--b-aralik);
  font-variant-numeric:tabular-nums; line-height:1; color:#fff;
}
.sayac__deger small{font-size:.52em; font-weight:700; color:var(--gok); margin-left:3px}
.sayac__ad{font-size:13.5px; color:var(--sonuk); font-weight:500}

/* ---------------- kategori kartları ---------------- */
.kategoriler{display:grid; grid-template-columns:repeat(5,1fr); gap:16px}
@media (max-width:1080px){.kategoriler{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){.kategoriler{grid-template-columns:repeat(2,1fr)}}
@media (max-width:440px){.kategoriler{grid-template-columns:1fr}}
.kategori{
  background:var(--kart); border:1px solid var(--cizgi); border-radius:var(--r-buyuk);
  padding:24px 22px; display:flex; flex-direction:column; gap:11px; position:relative;
  overflow:hidden; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.kategori::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--gok),var(--azur)); transform:scaleX(0);
  transform-origin:left; transition:transform .22s ease;
}
.kategori:hover{transform:translateY(-3px); border-color:var(--gok); box-shadow:var(--golge-2)}
.kategori:hover::after{transform:scaleX(1)}
.kategori__ikon{
  width:46px; height:46px; border-radius:var(--r-orta); display:grid; place-items:center;
  background:linear-gradient(135deg,rgba(92,194,245,.16),rgba(14,107,232,.14)); color:var(--azur);
}
.kategori__ikon svg{width:23px; height:23px}
.kategori h3{font-size:16.5px}
.kategori p{font-size:13.5px; line-height:1.5; color:var(--metin-2); flex:1}
.kategori__fiyat{font-size:13px; color:var(--metin-2); font-weight:600; padding-top:11px; border-top:1px solid var(--cizgi)}
.kategori__fiyat b{color:var(--azur); font-size:16px; font-weight:800; letter-spacing:-.02em}

/* ---------------- dönem seçici ---------------- */
.donem{display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:32px; flex-wrap:wrap}
.donem__anahtar{
  display:inline-flex; background:var(--kart); border:1px solid var(--cizgi);
  border-radius:var(--r-dugme); padding:4px; gap:3px;
}
.donem__dugme{
  font-family:var(--yazi); font-size:14px; font-weight:700; color:var(--metin-2);
  background:none; border:0; padding:9px 20px; border-radius:var(--r-dugme); cursor:pointer;
  transition:background .16s ease, color .16s ease;
}
.donem__dugme[aria-pressed="true"]{background:var(--azur); color:#fff}
.donem__kazanc{
  font-size:13px; font-weight:700; color:var(--olumlu);
  background:rgba(14,154,108,.1); padding:6px 12px; border-radius:var(--r-dugme);
}

/* ---------------- plan kartı (yeniden tasarım) ---------------- */
.plan{
  background:var(--kart); border:1px solid var(--cizgi); border-radius:var(--r-buyuk);
  padding:0; display:flex; flex-direction:column; position:relative; overflow:hidden;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.plan:hover{transform:translateY(-4px); border-color:var(--gok); box-shadow:var(--golge-2)}
.plan--one{border-color:var(--azur); box-shadow:0 0 0 2px var(--azur), var(--golge)}
.plan--one:hover{box-shadow:0 0 0 2px var(--azur), var(--golge-2)}

.plan__ust{padding:24px 24px 0; display:flex; flex-direction:column; gap:14px}
.plan__rozetler{display:flex; gap:7px; flex-wrap:wrap; min-height:23px}
.plan__rozet{
  font-size:11px; font-weight:800; letter-spacing:.03em; padding:5px 10px;
  border-radius:var(--r-dugme); white-space:nowrap;
  position:static; transform:none; top:auto; right:auto;
}
.plan__rozet--indirim{background:rgba(14,154,108,.12); color:var(--olumlu)}
.plan__rozet--populer{background:var(--azur); color:#fff}
.plan__rozet--stok{background:rgba(199,122,10,.12); color:var(--uyari)}

.plan__ad h3{font-size:20px; margin-bottom:4px}
.plan__ad p{font-size:13.5px; color:var(--metin-2); line-height:1.45}

/* teknik özellik çipleri — düz liste yerine görsel veri */
.plan__cipler{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
.plan__cip{
  background:var(--kagit); border:1px solid var(--cizgi); border-radius:var(--r-orta);
  padding:10px 12px; display:flex; flex-direction:column; gap:2px; min-width:0;
}
.plan__cip b{
  font-size:16px; font-weight:800; letter-spacing:-.03em; color:var(--metin);
  font-variant-numeric:tabular-nums; line-height:1.1; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.plan__cip span{font-size:11px; font-weight:600; color:var(--metin-2); letter-spacing:.02em}
.plan--one .plan__cip{background:rgba(14,107,232,.05); border-color:rgba(14,107,232,.18)}

/* fiyat bloğu */
.plan__fiyat{
  padding:20px 24px; margin-top:18px; border-top:1px solid var(--cizgi);
  display:flex; flex-direction:column; gap:5px; background:var(--kagit);
}
.plan--one .plan__fiyat{background:rgba(14,107,232,.045)}
.plan__eski{font-size:14px; color:var(--metin-2); text-decoration:line-through; font-variant-numeric:tabular-nums}
.plan__simdi{display:flex; align-items:baseline; gap:6px; flex-wrap:wrap}
.plan__simdi strong{font-size:38px; font-weight:800; letter-spacing:-.04em; font-variant-numeric:tabular-nums; line-height:1}
.plan__simdi span{font-size:14px; color:var(--metin-2); font-weight:600}
.plan__tasarruf{font-size:12.5px; font-weight:700; color:var(--olumlu)}

/* özellikler */
.plan__ozellik{padding:20px 24px 0; display:flex; flex-direction:column; gap:11px; flex:1}
.plan__ozellik li{display:flex; align-items:flex-start; gap:9px; font-size:14px; color:var(--metin-2); line-height:1.45}
.plan__ozellik svg{width:15px; height:15px; flex:none; margin-top:3px; color:var(--olumlu)}
.plan__ozellik b{color:var(--metin); font-weight:700}

/* satın alma alanı */
.plan__alt{padding:20px 24px 24px; display:flex; flex-direction:column; gap:10px}
.plan__guven{
  display:flex; align-items:center; justify-content:center; gap:7px;
  font-size:11.5px; color:var(--metin-2); font-weight:600;
}
.plan__guven svg{width:13px; height:13px; flex:none; color:var(--olumlu)}

.dugme--satin{
  font-size:15px; font-weight:800; padding:14px 22px; letter-spacing:.01em;
  background:var(--azur); color:#fff; width:100%;
}
.dugme--satin:hover{background:var(--azur-koyu)}
.dugme--satin-cizgi{
  font-size:15px; font-weight:800; padding:14px 22px; width:100%;
  background:var(--kart); border-color:var(--cizgi); color:var(--metin);
}
.dugme--satin-cizgi:hover{border-color:var(--azur); color:var(--azur); background:var(--kart)}

/* ---------------- yapılandırıcı ---------------- */
.yapilandirici{
  background:var(--gece); border-radius:var(--r-buyuk); color:#fff; overflow:hidden;
  display:grid; grid-template-columns:1.25fr .75fr;
}
@media (max-width:880px){.yapilandirici{grid-template-columns:1fr}}
.yapilandirici__sol{padding:34px 36px; display:flex; flex-direction:column; gap:26px}
@media (max-width:600px){.yapilandirici__sol{padding:26px 22px}}
.yapilandirici__ust{display:flex; flex-direction:column; gap:9px}
.yapilandirici__ust h2{font-size:clamp(22px,2.6vw,29px)}
.yapilandirici__ust p{font-size:15px; color:var(--sonuk); line-height:1.55}
.kaydirici{display:flex; flex-direction:column; gap:9px}
.kaydirici__ust{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.kaydirici__ad{font-size:14px; font-weight:700; color:var(--sonuk)}
.kaydirici__deger{font-size:17px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.kaydirici input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:99px;
  background:var(--tel); outline:none; cursor:pointer;
}
.kaydirici input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--gok); border:3px solid var(--gece); cursor:pointer;
  box-shadow:0 0 0 1px var(--gok);
}
.kaydirici input[type=range]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; background:var(--gok);
  border:3px solid var(--gece); cursor:pointer; box-shadow:0 0 0 1px var(--gok);
}
.kaydirici input[type=range]:focus-visible{outline:2px solid var(--gok); outline-offset:4px}
.yapilandirici__sag{
  padding:34px 32px; background:rgba(255,255,255,.05); border-left:1px solid var(--tel);
  display:flex; flex-direction:column; gap:18px; justify-content:center;
}
@media (max-width:880px){.yapilandirici__sag{border-left:0; border-top:1px solid var(--tel)}}
.yapilandirici__ozet{display:flex; flex-direction:column; gap:9px}
.yapilandirici__satir{display:flex; justify-content:space-between; gap:12px; font-size:13.5px}
.yapilandirici__satir dt{color:var(--sonuk); margin:0}
.yapilandirici__satir dd{margin:0; font-weight:700; font-variant-numeric:tabular-nums}
.yapilandirici__toplam{
  padding-top:16px; border-top:1px solid var(--tel);
  display:flex; align-items:baseline; gap:6px;
}
.yapilandirici__toplam strong{font-size:36px; font-weight:800; letter-spacing:-.04em; font-variant-numeric:tabular-nums; line-height:1}
.yapilandirici__toplam span{font-size:13.5px; color:var(--sonuk)}

/* ---------------- adımlar ---------------- */
.adimlar{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; position:relative}
@media (max-width:820px){.adimlar{grid-template-columns:1fr; gap:20px}}
.adim{display:flex; flex-direction:column; gap:12px; position:relative}
.adim__no{
  width:42px; height:42px; border-radius:var(--r-orta); display:grid; place-items:center;
  background:var(--azur); color:#fff; font-size:17px; font-weight:800; flex:none;
}
.adim h3{font-size:17px}
.adim p{font-size:14.5px; line-height:1.6; color:var(--metin-2)}
.adim::after{
  content:""; position:absolute; top:21px; left:54px; right:-26px; height:2px;
  background:repeating-linear-gradient(90deg,var(--cizgi) 0 6px,transparent 6px 12px);
}
.adim:last-child::after{display:none}
@media (max-width:820px){.adim::after{display:none}}

/* ---------------- senaryolar ---------------- */
.senaryolar{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media (max-width:940px){.senaryolar{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.senaryolar{grid-template-columns:1fr}}
.senaryo{
  background:var(--kart); border:1px solid var(--cizgi); border-radius:var(--r-orta);
  padding:22px 20px; display:flex; flex-direction:column; gap:10px;
  transition:border-color .18s ease, transform .18s ease;
}
.senaryo:hover{border-color:var(--azur); transform:translateY(-2px)}
.senaryo__ikon{width:38px; height:38px; border-radius:var(--r-orta); display:grid; place-items:center; background:rgba(14,107,232,.09); color:var(--azur)}
.senaryo__ikon svg{width:19px; height:19px}
.senaryo h3{font-size:15.5px}
.senaryo p{font-size:13.5px; line-height:1.5; color:var(--metin-2); flex:1}
.senaryo__oneri{font-size:12.5px; font-weight:700; color:var(--azur)}

/* ---------------- lokasyonlar ---------------- */
.lokasyonlar{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:820px){.lokasyonlar{grid-template-columns:1fr}}
.lokasyon{
  background:var(--kart); border:1px solid var(--cizgi); border-radius:var(--r-orta);
  padding:22px 22px; display:flex; flex-direction:column; gap:10px;
}
.lokasyon__ust{display:flex; align-items:center; justify-content:space-between; gap:12px}
.lokasyon h3{font-size:17px}
.lokasyon__durum{
  font-size:11px; font-weight:800; letter-spacing:.03em; padding:4px 9px; border-radius:var(--r-dugme);
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.lokasyon__durum i{width:6px; height:6px; border-radius:50%; flex:none}
.lokasyon__durum--acik{background:rgba(14,154,108,.11); color:var(--olumlu)}
.lokasyon__durum--acik i{background:var(--olumlu)}
.lokasyon__durum--yakinda{background:rgba(82,112,143,.11); color:var(--metin-2)}
.lokasyon__durum--yakinda i{background:var(--metin-2)}
.lokasyon dl{display:flex; flex-direction:column; gap:7px; margin:0}
.lokasyon dl > div{display:flex; justify-content:space-between; gap:12px; font-size:13.5px}
.lokasyon dt{color:var(--metin-2); margin:0}
.lokasyon dd{margin:0; font-weight:700; font-variant-numeric:tabular-nums}

/* ---------------- karşılaştırma ---------------- */
.karsilastir td svg{width:16px; height:16px; vertical-align:-3px}
.karsilastir .evet{color:var(--olumlu)}
.karsilastir .hayir{color:#C0CCDA}
.karsilastir thead th:not(:first-child){text-align:center}
.karsilastir td:not(:first-child){text-align:center}

/* ---------------- altbilgi zenginleştirme ---------------- */
.altbilgi__rozetler{
  display:flex; gap:10px; flex-wrap:wrap; padding:22px 0;
  border-top:1px solid var(--tel);
}
.altbilgi__rozet{
  font-size:11.5px; font-weight:700; color:var(--sonuk); border:1px solid var(--tel);
  border-radius:var(--r-dugme); padding:7px 12px; letter-spacing:.02em;
}

/* Kart hizalaması: açıklama 1 veya 2 satır olsun, çip ve fiyat blokları
   tüm kartlarda aynı yükseklikte başlasın. */
.plan__ad p{min-height:2.9em}
.plan__cipler{margin-top:auto}
.plan__ust{flex:0 0 auto}

/* =========================================================
   v3 — AÇIK KURGU: beyaz + mavi, ilk ekranda güven
   ========================================================= */
:root{
  --kagit-2:#F7FAFF;   /* en açık zemin */
  --cizgi-2:#E8EFF9;   /* çok ince ayraç */
}

/* ---------------- üst bant: açık ---------------- */
.ust-bant{background:var(--kagit-2); color:var(--metin-2); border-bottom:1px solid var(--cizgi-2)}
.ust-bant a{color:var(--metin-2)}
.ust-bant a:hover{color:var(--azur)}
.ust-bant__nokta i{box-shadow:0 0 0 3px rgba(14,154,108,.14)}

/* ---------------- başlık: koyu, beyaz menü yazısı ---------------- */
.baslik{background:var(--gece); border-bottom:1px solid var(--tel); backdrop-filter:none}
.baslik .ic{padding-top:0; padding-bottom:0; gap:34px; align-items:stretch}
.logo{align-self:center}
.logo b{color:#fff}
.baslik__islem{align-self:center}
.baslik__giris{color:#fff}
.baslik__giris:hover{color:var(--gok)}
.mobil-ac{border-color:var(--tel); color:#fff}

/* menü çubuğu — bağlantılar tam yükseklikte, altında vurgu çizgisi */
.menu{gap:2px; align-items:stretch}
.menu__oge{display:flex}
.menu__bag{
  color:#fff; font-size:15px; font-weight:600; padding:20px 15px;
  border-radius:0; position:relative; align-items:center;
}
.menu__bag::after{
  content:""; position:absolute; left:15px; right:15px; bottom:0; height:3px;
  background:var(--gok); transform:scaleX(0); transform-origin:center;
  transition:transform .18s ease;
}
.menu__bag:hover,.menu__oge[data-acik="true"] .menu__bag{color:#fff; background:rgba(255,255,255,.06)}
.menu__oge[data-acik="true"] .menu__bag::after{transform:scaleX(1)}
.menu__ok{opacity:.7}

/* ---------------- mega menü ---------------- */
/* Panel, menü öğesine değil BAŞLIK KABINA sabitlenir; böylece soldaki
   öğelerde ekran dışına taşmaz ve gerçek mega menü gibi tam genişlik açılır. */
@media (min-width:1081px){
  .baslik .ic{position:relative}
  .menu__oge{position:static}
  .menu__panel{
    position:absolute; top:100%; left:0; right:0; width:auto; max-width:none;
    transform:none; min-width:0; padding:0;
    border-radius:0 0 var(--r-buyuk) var(--r-buyuk); border-top:0; overflow:hidden;
  }
  .menu__panel::before{top:-6px; height:6px}
}

.mega{display:flex; gap:0; align-items:stretch}
.mega__sutun{
  padding:24px 22px; display:flex; flex-direction:column; gap:3px;
  flex:0 1 320px; min-width:0;
}
.mega__baslik{
  font-size:10.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:var(--metin-2); padding:0 12px 10px;
}
.mega__one{
  margin-left:auto; flex:0 0 300px;
  background:var(--kagit-2); border-left:1px solid var(--cizgi);
  padding:24px 24px; display:flex; flex-direction:column; gap:11px; justify-content:center;
}
.mega__one .etiket{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase}
.mega__one h4{font-size:18px; font-weight:800; letter-spacing:-.03em; margin:0}
.mega__one p{font-size:13px; color:var(--metin-2); line-height:1.5}
.mega__fiyat{display:flex; align-items:baseline; gap:5px}
.mega__fiyat strong{font-size:27px; font-weight:800; letter-spacing:-.035em; font-variant-numeric:tabular-nums}
.mega__fiyat span{font-size:12.5px; color:var(--metin-2)}

@media (max-width:1080px){
  .menu__bag{padding:13px 0; font-size:16px}
  .menu__bag::after{display:none}
  .menu__panel{width:auto; max-width:none; transform:none; left:auto; border-radius:0}
  .mega{flex-direction:column}
  .mega__sutun{flex:1 1 auto; min-width:0; padding:0}
  .mega__baslik{color:var(--sonuk); padding:10px 0 4px}
  .mega__one{display:none}
}

/* ---------------- kahraman: açık ---------------- */
.kahraman{
  background:linear-gradient(180deg,#FFFFFF 0%,#F3F8FF 58%,#EAF2FE 100%);
  color:var(--metin); padding:64px 0 72px;
}
.kahraman::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(760px 420px at 78% 8%, rgba(92,194,245,.24), transparent 62%),
    radial-gradient(620px 380px at 8% 92%, rgba(14,107,232,.12), transparent 64%),
    radial-gradient(circle at 1px 1px, rgba(13,36,64,.055) 1px, transparent 0) 0 0/22px 22px;
  right:auto; top:auto; width:auto; height:auto;
}
.kahraman .ic{gap:48px}
.kahraman h1{color:var(--metin); font-size:clamp(35px,4.9vw,58px)}
.kahraman__alt{color:var(--metin-2); font-size:18px}
.kahraman__tik span{color:var(--metin-2)}
.kahraman__tik svg{color:var(--olumlu)}

/* canlı rozet */
.kahraman__rozet{
  display:inline-flex; align-items:center; gap:9px; background:#fff;
  border:1px solid var(--cizgi); border-radius:99px; padding:7px 15px 7px 11px;
  font-size:13px; font-weight:700; color:var(--metin); box-shadow:var(--golge);
}
.kahraman__rozet i{
  width:8px; height:8px; border-radius:50%; background:var(--olumlu); flex:none;
  box-shadow:0 0 0 3px rgba(14,154,108,.16);
}
.kahraman__rozet b{color:var(--metin-2); font-weight:600}

/* açık zeminde ikincil buton */
.kahraman .dugme--cizgi{border-color:var(--metin); color:var(--metin); background:#fff}
.kahraman .dugme--cizgi:hover{border-color:var(--azur); color:var(--azur)}

/* yapılandırıcı kartı — açık zeminde beyaz kart */
.kahraman .yapilandir{
  background:#fff; border:1px solid var(--cizgi); box-shadow:var(--golge-2); position:relative;
}
.kahraman .yapilandir__ust{border-bottom-color:var(--cizgi); background:var(--kagit-2)}
.kahraman .yapilandir__ust .etiket{color:var(--metin-2)}
.kahraman .yapilandir__rozet{color:var(--azur)}
.kahraman .yapilandir__satir{border-bottom-color:var(--cizgi-2)}
.kahraman .yapilandir__satir dt{color:var(--metin-2)}
.kahraman .yapilandir__satir dd{color:var(--metin)}
.kahraman .yapilandir__fiyat strong{color:var(--metin)}
.kahraman .yapilandir__fiyat span{color:var(--metin-2)}
.kahraman .yapilandir__alt{border-top:1px solid var(--cizgi-2)}

/* kartın altına iliştirilen vurgu etiketi — karta binmez */
.yapilandir-sar{display:flex; flex-direction:column; gap:14px}
.yapilandir__yuzen{
  align-self:flex-start; background:var(--gece); color:#fff;
  border-radius:var(--r-orta); padding:12px 18px; box-shadow:var(--golge-2);
  display:flex; align-items:center; gap:11px;
}
.yapilandir__yuzen svg{width:19px; height:19px; color:var(--gok); flex:none}
.yapilandir__yuzen strong{font-size:13.5px; font-weight:800; letter-spacing:-.01em; display:block}
.yapilandir__yuzen span{display:block; font-size:11px; font-weight:600; color:var(--sonuk); margin-top:2px}

/* ---------------- hızlı hizmet seçimi ---------------- */
.hizli{position:relative; z-index:2; margin-top:-34px}
.hizli__izgara{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:880px){.hizli__izgara{grid-template-columns:1fr}}
.hizli__kart{
  background:#fff; border:1px solid var(--cizgi); border-radius:var(--r-buyuk);
  padding:24px; display:flex; gap:16px; align-items:flex-start;
  box-shadow:var(--golge); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hizli__kart:hover{transform:translateY(-3px); box-shadow:var(--golge-2); border-color:var(--gok)}
.hizli__ikon{
  width:44px; height:44px; border-radius:var(--r-orta); flex:none; display:grid; place-items:center;
  background:linear-gradient(135deg,#5CC2F5,#0E6BE8); color:#fff;
}
.hizli__ikon svg{width:22px; height:22px}
.hizli__yazi{display:flex; flex-direction:column; gap:4px; min-width:0}
.hizli__yazi h3{font-size:16.5px}
.hizli__yazi p{font-size:13.5px; color:var(--metin-2); line-height:1.5}
.hizli__fiyat{font-size:13.5px; font-weight:700; color:var(--azur); margin-top:5px; display:inline-flex; align-items:center; gap:6px}
.hizli__fiyat b{font-size:18px; font-weight:800; letter-spacing:-.03em}
.hizli__fiyat svg{width:14px; height:14px; transition:transform .18s ease}
.hizli__kart:hover .hizli__fiyat svg{transform:translateX(3px)}

/* ---------------- sertifika / güven şeridi ---------------- */
.sertifika{background:#fff; border-top:1px solid var(--cizgi); border-bottom:1px solid var(--cizgi); padding:22px 0}
.sertifika .ic{display:flex; align-items:center; justify-content:center; gap:12px 30px; flex-wrap:wrap}
.sertifika__oge{
  display:inline-flex; align-items:center; gap:9px; font-size:13px;
  font-weight:700; color:var(--metin-2);
}
.sertifika__oge svg{width:17px; height:17px; color:var(--azur); flex:none}
.sertifika__oge b{color:var(--metin); font-weight:800}

/* ---------------- gerçek marka logoları ---------------- */
.marka{background:var(--kagit-2); padding:38px 0; border-bottom:1px solid var(--cizgi-2)}
.marka__ust{text-align:center; font-size:12.5px; font-weight:700; color:var(--metin-2); margin-bottom:26px}
.marka__liste{
  display:grid; grid-template-columns:repeat(6,1fr); gap:26px 20px; align-items:center;
}
@media (max-width:940px){.marka__liste{grid-template-columns:repeat(4,1fr)}}
@media (max-width:560px){.marka__liste{grid-template-columns:repeat(3,1fr)}}
.marka__oge{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  opacity:.45; transition:opacity .2s ease;
}
.marka__oge:hover{opacity:.9}
.marka__oge svg{width:28px; height:28px; fill:var(--gece); display:block}
.marka__oge span{font-size:11px; font-weight:700; color:var(--metin-2); letter-spacing:.01em; text-align:center}

/* eski metin şeridi artık kullanılmıyor ama sayfada kalırsa bozulmasın */
.teknoloji{background:var(--kagit-2)}

/* renkli marka logoları */
.marka{background:#fff}
.marka__liste{grid-template-columns:repeat(5,1fr); gap:22px 16px}
@media (max-width:940px){.marka__liste{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.marka__liste{grid-template-columns:repeat(2,1fr)}}
.marka__oge{
  opacity:1; gap:9px; padding:16px 10px; border:1px solid var(--cizgi-2);
  border-radius:var(--r-orta); background:var(--kagit-2);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.marka__oge:hover{border-color:var(--cizgi); transform:translateY(-2px); box-shadow:var(--golge)}
.marka__oge svg{width:30px; height:30px}
.marka__oge span{font-size:12px; font-weight:700; color:var(--metin)}
.lokasyonlar--iki{grid-template-columns:repeat(2,1fr)}
@media (max-width:820px){.lokasyonlar--iki{grid-template-columns:1fr}}

/* Simple Icons glifleri 24×24 kutuda; geniş-alçak kelime markaları küçük
   görünüyordu — kutuyu büyütmek hepsini okunur kılıyor. */
.marka__oge svg{width:38px; height:38px}

/* =========================================================
   v4 — canlı kurulum konsolu (hero sağ panel)
   ========================================================= */
.kurulum-sar{display:flex; flex-direction:column; gap:16px}
.kurulum{
  background:#fff; border:1px solid var(--cizgi); border-radius:var(--r-buyuk);
  box-shadow:var(--golge-2); overflow:hidden;
}

/* pencere başlığı */
.kurulum__ust{
  display:flex; align-items:center; gap:12px; padding:13px 18px;
  background:var(--gece); border-bottom:1px solid var(--tel);
}
.kurulum__noktalar{display:flex; gap:6px; flex:none}
.kurulum__noktalar i{width:9px; height:9px; border-radius:50%; background:#33507C}
.kurulum__noktalar i:first-child{background:#F0645B}
.kurulum__noktalar i:nth-child(2){background:#F2BF4E}
.kurulum__noktalar i:last-child{background:#5FCB7C}
.kurulum__ad{
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:12px; color:var(--sonuk); letter-spacing:.01em; flex:1;
}
.kurulum__canli{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; color:#7FE0A5; flex:none;
}
.kurulum__canli i{
  width:7px; height:7px; border-radius:50%; background:#5FCB7C;
  box-shadow:0 0 0 0 rgba(95,203,124,.6); animation:nabiz 2s infinite;
}
@keyframes nabiz{
  0%{box-shadow:0 0 0 0 rgba(95,203,124,.55)}
  70%{box-shadow:0 0 0 7px rgba(95,203,124,0)}
  100%{box-shadow:0 0 0 0 rgba(95,203,124,0)}
}

/* sayaç halkası + durum */
.kurulum__govde{display:flex; align-items:center; gap:18px; padding:22px 20px 18px}
.kurulum__sayac{position:relative; width:76px; height:76px; flex:none}
.kurulum__halka{width:76px; height:76px; transform:rotate(-90deg); display:block}
.kurulum__halka circle{fill:none; stroke-width:5; stroke-linecap:round}
.kurulum__halka-iz{stroke:var(--cizgi)}
.kurulum__halka-dolu{
  stroke:url(#kurulumGradyan); stroke-dasharray:176; stroke-dashoffset:176;
  transition:stroke-dashoffset .25s linear;
}
.kurulum__sn{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:0;
}
.kurulum__sn b{
  font-size:25px; font-weight:800; letter-spacing:-.04em; line-height:1;
  font-variant-numeric:tabular-nums; color:var(--metin);
}
.kurulum__sn span{font-size:10.5px; font-weight:700; color:var(--metin-2); margin-top:1px}
.kurulum__durum{display:flex; flex-direction:column; gap:4px; min-width:0}
.kurulum__durum strong{font-size:17px; font-weight:800; letter-spacing:-.03em; color:var(--metin)}
.kurulum__durum span{font-size:13px; color:var(--metin-2); line-height:1.45}
.kurulum__durum--bitti strong{color:var(--olumlu)}

/* adım listesi */
.kurulum__adimlar{
  list-style:none; margin:0; padding:0 20px 4px;
  display:flex; flex-direction:column; gap:0;
}
.kurulum__adimlar li{
  display:flex; align-items:center; gap:11px; padding:9px 0;
  border-top:1px solid var(--cizgi-2); font-size:13.5px; color:var(--metin-2);
  transition:color .2s ease;
}
.kurulum__adimlar li:first-child{border-top:0}
.kurulum__adimlar li i{
  width:17px; height:17px; border-radius:50%; flex:none; position:relative;
  border:2px solid var(--cizgi); background:#fff; transition:all .2s ease;
}
.kurulum__adimlar li em{
  margin-left:auto; font-style:normal; font-size:12px; font-weight:700;
  color:var(--cizgi); font-variant-numeric:tabular-nums; transition:color .2s ease;
}
/* sürüyor */
.kurulum__adimlar li[data-durum="suruyor"]{color:var(--metin); font-weight:600}
.kurulum__adimlar li[data-durum="suruyor"] i{
  border-color:var(--azur); border-right-color:transparent; animation:donuyor .7s linear infinite;
}
@keyframes donuyor{to{transform:rotate(360deg)}}
/* tamam */
.kurulum__adimlar li[data-durum="tamam"]{color:var(--metin)}
.kurulum__adimlar li[data-durum="tamam"] i{border-color:var(--olumlu); background:var(--olumlu)}
.kurulum__adimlar li[data-durum="tamam"] i::after{
  content:""; position:absolute; left:4px; top:1px; width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg);
}
.kurulum__adimlar li[data-durum="tamam"] em{color:var(--metin-2)}

/* alt: fiyat + satın alma */
.kurulum__alt{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 20px; margin-top:12px; border-top:1px solid var(--cizgi); background:var(--kagit-2);
  flex-wrap:wrap;
}
.kurulum__paket{display:flex; flex-direction:column; gap:2px; min-width:0}
.kurulum__paket b{font-size:14px; font-weight:800; letter-spacing:-.02em; color:var(--metin)}
.kurulum__paket span{font-size:11.5px; color:var(--metin-2)}
.kurulum__fiyat{display:flex; align-items:baseline; gap:4px; margin-left:auto}
.kurulum__fiyat strong{font-size:24px; font-weight:800; letter-spacing:-.035em; font-variant-numeric:tabular-nums}
.kurulum__fiyat span{font-size:12.5px; color:var(--metin-2)}

/* yüzen etiket — halka nabızlı, biraz daha gösterişli */
.yapilandir__yuzen{
  align-self:flex-start; background:var(--gece); color:#fff;
  border-radius:var(--r-orta); padding:12px 18px 12px 14px; box-shadow:var(--golge-2);
  display:flex; align-items:center; gap:12px; position:relative; overflow:hidden;
}
.yapilandir__yuzen::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(160px 60px at 12% 50%, rgba(92,194,245,.22), transparent 70%);
  pointer-events:none;
}
.yapilandir__yuzen .simsek{
  width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:rgba(92,194,245,.16); color:var(--gok); position:relative;
}
.yapilandir__yuzen .simsek::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 0 rgba(92,194,245,.5); animation:nabiz 2.4s infinite;
}
.yapilandir__yuzen svg{width:17px; height:17px; position:relative}
.yapilandir__yuzen strong{font-size:14px; font-weight:800; letter-spacing:-.02em; display:block; position:relative}
.yapilandir__yuzen span span{display:block; font-size:11px; font-weight:600; color:var(--sonuk); margin-top:2px}

@media (max-width:960px){.yapilandir__yuzen{align-self:stretch}}
@media (prefers-reduced-motion:reduce){
  .kurulum__canli i,.kurulum__adimlar li[data-durum="suruyor"] i,
  .yapilandir__yuzen .simsek::after{animation:none}
}

/* hero ağ tuvali — içeriğin altında, dekoratif */
.kahraman__ag{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; z-index:0; pointer-events:none;
}
.kahraman .ic{position:relative; z-index:2}
/* nokta ızgarası kaldırıldı — dokuyu artık ağ animasyonu veriyor */
.kahraman::after{
  background:
    radial-gradient(760px 420px at 78% 8%, rgba(92,194,245,.20), transparent 62%),
    radial-gradient(620px 380px at 8% 92%, rgba(14,107,232,.10), transparent 64%);
  z-index:1;
}

/* =========================================================
   v5 — hero rozet üçlüsü + hızlı kartlara nefes alanı
   ========================================================= */

/* konsolun altındaki üçlü rozet şeridi */
.hero-rozetler{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
@media (max-width:520px){.hero-rozetler{grid-template-columns:1fr}}
.hero-rozet{
  background:var(--gece); color:#fff; border-radius:var(--r-orta);
  padding:12px 14px; box-shadow:var(--golge-2);
  display:flex; align-items:center; gap:11px; position:relative; overflow:hidden;
  min-width:0;
}
.hero-rozet::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120px 50px at 10% 50%, rgba(92,194,245,.20), transparent 72%);
}
.hero-rozet__ikon{
  width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:rgba(92,194,245,.16); color:var(--gok); position:relative;
}
.hero-rozet__ikon svg{width:15px; height:15px; position:relative}
.hero-rozet__ikon--nabiz::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 0 rgba(92,194,245,.5); animation:nabiz 2.4s infinite;
}
.hero-rozet__yazi{position:relative; min-width:0}
.hero-rozet__yazi strong{
  display:block; font-size:14px; font-weight:800; letter-spacing:-.025em;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.hero-rozet__yazi span{
  display:block; font-size:10.5px; font-weight:600; color:var(--sonuk);
  margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media (prefers-reduced-motion:reduce){.hero-rozet__ikon--nabiz::after{animation:none}}

/* hızlı hizmet kartları ile alttaki şerit arasına nefes alanı */
.hizli{padding-bottom:58px}
@media (max-width:880px){.hizli{padding-bottom:44px}}

/* =========================================================
   v5 — altyapı bölümü: koyu zemin + canlı ağ haritası
   ========================================================= */
.altyapi-bolum{
  background:
    radial-gradient(900px 460px at 82% 6%, rgba(92,194,245,.14), transparent 62%),
    radial-gradient(700px 420px at 4% 96%, rgba(14,107,232,.16), transparent 66%),
    var(--gece);
  color:#fff; padding:var(--bosluk) 0; position:relative; overflow:hidden;
}
.altyapi-bolum::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0) 0 0/26px 26px;
  mask-image:linear-gradient(180deg,#000,transparent 78%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 78%);
}
.altyapi-bolum .ic{position:relative; z-index:1}
.altyapi-bolum .bolum__ust h2{color:#fff}
.altyapi-bolum .bolum__ust p{color:var(--sonuk)}

/* panel: harita + teknik özet */
.altyapi__panel{
  display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr); gap:20px;
  margin-bottom:22px;
}
@media (max-width:940px){.altyapi__panel{grid-template-columns:1fr}}

/* ---- harita ---- */
.harita{
  position:relative; border:1px solid var(--tel); border-radius:var(--r-buyuk);
  background:rgba(255,255,255,.035); overflow:hidden; min-height:360px;
}
@media (max-width:600px){.harita{min-height:300px}}
.harita canvas{position:absolute; inset:0; width:100%; height:100%; display:block}

.harita__nokta{position:absolute; transform:translate(-50%,-50%); z-index:2}
.harita__cekirdek{
  display:block; width:13px; height:13px; border-radius:50%;
  background:#6E8FBF; border:2px solid var(--gece); box-shadow:0 0 0 1px #6E8FBF;
}
.harita__nokta--aktif .harita__cekirdek{
  width:17px; height:17px; background:var(--gok); box-shadow:0 0 0 1px var(--gok), 0 0 18px rgba(92,194,245,.7);
}
.harita__hale{
  position:absolute; left:50%; top:50%; width:17px; height:17px; margin:-8.5px 0 0 -8.5px;
  border-radius:50%; border:2px solid var(--gok); opacity:0; animation:haleAt 2.8s ease-out infinite;
}
@keyframes haleAt{
  0%{transform:scale(1); opacity:.75}
  100%{transform:scale(5.2); opacity:0}
}
.harita__etiket{
  position:absolute; left:26px; top:50%; transform:translateY(-50%);
  white-space:nowrap; pointer-events:none;
}
.harita__etiket b{display:block; font-size:13px; font-weight:800; letter-spacing:-.02em; color:#fff}
.harita__etiket em{display:block; font-style:normal; font-size:11px; font-weight:600; color:var(--sonuk); margin-top:2px}
@media (max-width:600px){
  .harita__etiket b{font-size:11.5px}
  .harita__etiket em{font-size:10px}
}

/* haritanın köşesindeki canlı trafik göstergesi */
.harita__rozet{
  position:absolute; left:18px; bottom:18px; z-index:2;
  display:flex; align-items:baseline; gap:7px; flex-wrap:wrap;
  background:rgba(8,20,38,.72); border:1px solid var(--tel); border-radius:var(--r-orta);
  padding:11px 15px; backdrop-filter:blur(6px);
}
.harita__canli{
  display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:var(--sonuk); width:100%;
}
.harita__canli i{
  width:6px; height:6px; border-radius:50%; background:#5FCB7C; flex:none;
  animation:nabiz 2s infinite;
}
.harita__deger{font-size:24px; font-weight:800; letter-spacing:-.035em; font-variant-numeric:tabular-nums; color:#fff}
.harita__birim{font-size:12px; font-weight:700; color:var(--gok)}

/* ---- teknik özet ---- */
.altyapi__ozet{
  margin:0; border:1px solid var(--tel); border-radius:var(--r-buyuk);
  background:rgba(255,255,255,.035); display:flex; flex-direction:column; overflow:hidden;
}
.altyapi__ozet > div{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:13px 18px; border-bottom:1px solid var(--tel);
}
.altyapi__ozet > div:last-child{border-bottom:0}
.altyapi__ozet dt{margin:0; font-size:13px; color:var(--sonuk)}
.altyapi__ozet dd{margin:0; font-size:13.5px; font-weight:700; color:#fff; text-align:right; font-variant-numeric:tabular-nums}

/* ---- koyu lokasyon kartları ---- */
.altyapi-bolum .lokasyon{
  background:rgba(255,255,255,.04); border-color:var(--tel);
  transition:border-color .18s ease, transform .18s ease;
}
.altyapi-bolum .lokasyon:hover{border-color:var(--gok); transform:translateY(-2px)}
.altyapi-bolum .lokasyon h3{color:#fff}
.altyapi-bolum .lokasyon dt{color:var(--sonuk)}
.altyapi-bolum .lokasyon dd{color:#fff}
.altyapi-bolum .lokasyon__durum--acik{background:rgba(95,203,124,.14); color:#7FE0A5}
.altyapi-bolum .lokasyon__durum--acik i{background:#5FCB7C}
.altyapi-bolum .lokasyon__durum--yakinda{background:rgba(166,192,222,.12); color:var(--sonuk)}
.altyapi-bolum .lokasyon__durum--yakinda i{background:var(--sonuk)}
.lokasyon__not{
  font-size:12.5px; line-height:1.5; color:var(--sonuk);
  padding-top:12px; margin-top:2px; border-top:1px solid var(--tel);
}

@media (prefers-reduced-motion:reduce){
  .harita__hale,.harita__canli i{animation:none}
  .harita__hale{opacity:0}
}

/* =========================================================
   v6 — hizmet gezgini · kaynak istikrarı · zaman çizelgesi
   ========================================================= */

/* ---------------- hizmet gezgini (sekmeli) ---------------- */
.gezgin{
  display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr);
  background:var(--kart); border:1px solid var(--cizgi);
  border-radius:var(--r-buyuk); box-shadow:var(--golge); overflow:hidden;
}
@media (max-width:880px){.gezgin{grid-template-columns:1fr}}

.gezgin__sekmeler{
  display:flex; flex-direction:column; gap:2px; padding:12px;
  background:var(--kagit-2); border-right:1px solid var(--cizgi);
}
@media (max-width:880px){
  .gezgin__sekmeler{
    flex-direction:row; overflow-x:auto; border-right:0;
    border-bottom:1px solid var(--cizgi); padding:10px; scrollbar-width:thin;
  }
}
.gezgin__sekme{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:14px 14px; border:1px solid transparent; border-radius:var(--r-orta);
  background:transparent; cursor:pointer; font-family:var(--yazi);
  transition:background .16s ease, border-color .16s ease;
}
.gezgin__sekme:hover{background:#fff; border-color:var(--cizgi-2)}
.gezgin__sekme[aria-selected="true"]{background:#fff; border-color:var(--azur); box-shadow:var(--golge)}
@media (max-width:880px){.gezgin__sekme{width:auto; flex:0 0 auto; white-space:nowrap}}

.gezgin__sekme-ikon{
  width:38px; height:38px; border-radius:var(--r-orta); flex:none; display:grid; place-items:center;
  background:rgba(14,107,232,.09); color:var(--azur); transition:background .16s ease, color .16s ease;
}
.gezgin__sekme-ikon svg{width:19px; height:19px}
.gezgin__sekme[aria-selected="true"] .gezgin__sekme-ikon{
  background:linear-gradient(135deg,#5CC2F5,#0E6BE8); color:#fff;
}
.gezgin__sekme-yazi{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.gezgin__sekme-yazi b{font-size:15px; font-weight:700; letter-spacing:-.02em; color:var(--metin)}
.gezgin__sekme-yazi em{font-style:normal; font-size:11.5px; color:var(--metin-2); font-weight:600}
.gezgin__ok{width:14px; height:14px; flex:none; color:var(--cizgi); transition:color .16s ease, transform .16s ease}
.gezgin__sekme[aria-selected="true"] .gezgin__ok{color:var(--azur); transform:translateX(2px)}
@media (max-width:880px){.gezgin__ok{display:none}}

.gezgin__govde{padding:30px 32px; display:flex; flex-direction:column}
@media (max-width:600px){.gezgin__govde{padding:24px 20px}}
.gezgin__panel{display:flex; flex-direction:column; gap:22px; animation:gezginGir .28s ease}
.gezgin__panel[hidden]{display:none}
@keyframes gezginGir{from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none}}

.gezgin__ust{display:flex; flex-direction:column; gap:9px}
.gezgin__rozet{
  align-self:flex-start; font-size:11px; font-weight:800; letter-spacing:.03em;
  color:var(--azur); background:rgba(14,107,232,.09);
  padding:5px 11px; border-radius:var(--r-dugme);
}
.gezgin__ust h3{font-size:clamp(21px,2.4vw,27px)}
.gezgin__ust p{font-size:15.5px; line-height:1.62; color:var(--metin-2); max-width:60ch}

.gezgin__cipler{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
@media (max-width:720px){.gezgin__cipler{grid-template-columns:repeat(2,1fr)}}
.gezgin__cip{
  background:var(--kagit-2); border:1px solid var(--cizgi-2); border-radius:var(--r-orta);
  padding:12px 14px; display:flex; flex-direction:column; gap:2px; min-width:0;
}
.gezgin__cip b{
  font-size:16px; font-weight:800; letter-spacing:-.03em; color:var(--metin);
  font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gezgin__cip span{font-size:11px; font-weight:600; color:var(--metin-2)}

.gezgin__alt{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,230px); gap:26px;
  padding-top:22px; border-top:1px solid var(--cizgi); align-items:center;
}
@media (max-width:720px){.gezgin__alt{grid-template-columns:1fr; gap:20px}}
.gezgin__baslik{
  font-size:10.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:var(--metin-2); margin-bottom:11px;
}
.gezgin__kimler ul{display:flex; flex-direction:column; gap:9px}
.gezgin__kimler li{display:flex; align-items:flex-start; gap:9px; font-size:14px; color:var(--metin-2); line-height:1.45}
.gezgin__kimler svg{width:15px; height:15px; flex:none; margin-top:3px; color:var(--olumlu)}
.gezgin__islem{display:flex; flex-direction:column; gap:5px}
.gezgin__fiyat{display:flex; align-items:baseline; gap:5px}
.gezgin__fiyat strong{font-size:32px; font-weight:800; letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.gezgin__fiyat span{font-size:13.5px; color:var(--metin-2)}
.gezgin__not{font-size:11.5px; color:var(--metin-2); margin-bottom:8px}

/* ---------------- kaynak istikrarı paneli ---------------- */
.istikrar{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:22px;
  margin-bottom:34px; align-items:stretch;
}
@media (max-width:940px){.istikrar{grid-template-columns:1fr}}

.istikrar__grafik{
  background:var(--gece); border-radius:var(--r-buyuk); padding:20px 22px 16px;
  display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden;
}
.istikrar__grafik::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(600px 260px at 90% 0%, rgba(92,194,245,.14), transparent 62%);
}
.istikrar__ust{display:flex; flex-direction:column; gap:10px; position:relative}
.istikrar__baslik{font-size:14.5px; font-weight:800; letter-spacing:-.02em; color:#fff}
.istikrar__aciklama{display:flex; gap:18px; flex-wrap:wrap}
.istikrar__anahtar{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--sonuk)}
.istikrar__anahtar i{width:11px; height:3px; border-radius:2px; flex:none}
.istikrar__anahtar--paylasimli i{background:#E4835C}
.istikrar__anahtar--garantili i{background:#5CC2F5}
.istikrar__grafik canvas{
  width:100%; height:190px; display:block; position:relative;
}
@media (max-width:600px){.istikrar__grafik canvas{height:158px}}
.istikrar__eksen{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:11.5px; color:var(--sonuk); position:relative; font-variant-numeric:tabular-nums;
}
.istikrar__eksen span:last-child{font-weight:700; color:var(--gok)}

.istikrar__yazi{
  background:var(--kart); border:1px solid var(--cizgi); border-radius:var(--r-buyuk);
  padding:26px 26px; display:flex; flex-direction:column; gap:12px; justify-content:center;
}
.istikrar__yazi h3{font-size:20px; letter-spacing:-.03em}
.istikrar__yazi > p{font-size:14.5px; line-height:1.62; color:var(--metin-2)}
.istikrar__liste{display:flex; flex-direction:column; gap:10px; margin-top:4px}
.istikrar__liste li{display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--metin-2); line-height:1.45}
.istikrar__liste svg{width:15px; height:15px; flex:none; margin-top:3px; color:var(--olumlu)}
.istikrar__liste b{color:var(--metin); font-weight:700}

/* ---------------- zaman çizelgesi ---------------- */
.zaman{
  list-style:none; margin:0; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
@media (max-width:880px){.zaman{grid-template-columns:1fr; gap:0}}

/* yatay ray + dolan çizgi */
.zaman__ray{
  position:absolute; left:calc(16.66% + 0px); right:calc(16.66% + 0px); top:22px; height:3px;
  background:var(--cizgi); border-radius:2px; overflow:hidden;
}
.zaman__dolgu{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,#5CC2F5,#0E6BE8);
  transition:width .9s cubic-bezier(.4,0,.2,1);
}
@media (max-width:880px){
  .zaman__ray{left:22px; right:auto; top:22px; bottom:22px; width:3px; height:auto}
  .zaman__dolgu{width:100%; height:0%; transition:height .9s cubic-bezier(.4,0,.2,1)}
}

.zaman__adim{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center;
}
@media (max-width:880px){
  .zaman__adim{flex-direction:row; align-items:flex-start; text-align:left; gap:20px; padding-bottom:26px}
}

.zaman__isaret{position:relative; width:47px; height:47px; flex:none; z-index:1}
.zaman__no{
  position:absolute; inset:0; display:grid; place-items:center; border-radius:50%;
  background:#fff; border:3px solid var(--cizgi); color:var(--metin-2);
  font-size:17px; font-weight:800; transition:all .4s ease;
}
.zaman__hale{
  position:absolute; inset:0; border-radius:50%; border:2px solid var(--gok);
  opacity:0; pointer-events:none;
}
.zaman__adim[data-aktif] .zaman__no{
  background:linear-gradient(135deg,#5CC2F5,#0E6BE8); border-color:transparent; color:#fff;
  box-shadow:0 6px 20px -6px rgba(14,107,232,.7);
}
.zaman__adim[data-aktif] .zaman__hale{animation:haleAt 2.4s ease-out infinite}
.zaman__adim[data-gecti] .zaman__no{
  background:var(--olumlu); border-color:transparent; color:#fff;
}

.zaman__kart{
  background:var(--kart); border:1px solid var(--cizgi); border-radius:var(--r-buyuk);
  padding:22px 22px; display:flex; flex-direction:column; gap:10px; align-items:center;
  flex:1; transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
@media (max-width:880px){.zaman__kart{align-items:flex-start; text-align:left}}
.zaman__adim[data-aktif] .zaman__kart{
  border-color:var(--gok); transform:translateY(-4px); box-shadow:var(--golge-2);
}
.zaman__ikon{
  width:40px; height:40px; border-radius:var(--r-orta); display:grid; place-items:center;
  background:rgba(14,107,232,.09); color:var(--azur); transition:background .3s ease, color .3s ease;
}
.zaman__ikon svg{width:20px; height:20px}
.zaman__adim[data-aktif] .zaman__ikon{background:linear-gradient(135deg,#5CC2F5,#0E6BE8); color:#fff}
.zaman__kart h3{font-size:17px}
.zaman__kart p{font-size:14px; line-height:1.6; color:var(--metin-2)}
.zaman__rozet{
  font-size:11px; font-weight:800; letter-spacing:.03em; color:var(--azur);
  background:rgba(14,107,232,.09); padding:5px 11px; border-radius:var(--r-dugme); margin-top:2px;
}

@media (prefers-reduced-motion:reduce){
  .gezgin__panel{animation:none}
  .zaman__adim[data-aktif] .zaman__hale{animation:none}
  .zaman__dolgu{transition:none}
}

/* =========================================================
   v7 — alan adı · senaryolar · karşılaştırma · neden Bulutz
   ========================================================= */

/* ---------------- alan adı: iki sütun ---------------- */
.alanadi{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:34px; align-items:center}
@media (max-width:940px){.alanadi{grid-template-columns:1fr; gap:26px}}
.alanadi__sol{display:flex; flex-direction:column; gap:20px}
.alanadi__uzanti li{
  flex-direction:row; align-items:baseline; gap:6px;
  background:rgba(255,255,255,.05); transition:border-color .16s ease, background .16s ease;
}
.alanadi__uzanti li:hover{border-color:var(--gok); background:rgba(255,255,255,.09)}
.alanadi__uzanti em{font-style:normal; font-size:11px; color:#7E9CC4}

.alanadi__sag{
  background:rgba(255,255,255,.05); border:1px solid var(--tel);
  border-radius:var(--r-orta); padding:22px 22px; display:flex; flex-direction:column; gap:16px;
}
.alanadi__sag-baslik{
  font-size:10.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:var(--sonuk);
}
.alanadi__fayda{display:flex; gap:13px; align-items:flex-start}
.alanadi__fayda-ikon{
  width:34px; height:34px; border-radius:var(--r-orta); flex:none; display:grid; place-items:center;
  background:rgba(92,194,245,.14); color:var(--gok);
}
.alanadi__fayda-ikon svg{width:17px; height:17px}
.alanadi__fayda b{display:block; font-size:13.5px; font-weight:700; color:#fff; letter-spacing:-.01em}
.alanadi__fayda p{font-size:12.5px; line-height:1.5; color:var(--sonuk); margin-top:3px}

/* ---------------- senaryolar: eşleşen plan ---------------- */
.senaryo{display:flex; flex-direction:column; gap:10px}
.senaryo__eslesme{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-top:13px; margin-top:2px; border-top:1px solid var(--cizgi); flex-wrap:wrap;
}
.senaryo__plan{display:flex; flex-direction:column; gap:2px; min-width:0}
.senaryo__plan b{font-size:13.5px; font-weight:800; letter-spacing:-.02em; color:var(--azur)}
.senaryo__plan em{font-style:normal; font-size:11px; color:var(--metin-2); font-variant-numeric:tabular-nums}
.senaryo__fiyat{
  font-size:17px; font-weight:800; letter-spacing:-.03em; color:var(--metin);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.senaryo__fiyat small{font-size:11px; font-weight:600; color:var(--metin-2); margin-left:3px}

/* ---------------- karşılaştırma: önerilen sütun ---------------- */
.karsilastir__onerilen{
  position:relative; color:var(--azur) !important;
  background:rgba(14,107,232,.06) !important;
}
.karsilastir__rozet{
  display:block; font-size:9.5px; font-weight:800; letter-spacing:.05em;
  color:#fff; background:var(--azur); border-radius:var(--r-dugme);
  padding:3px 7px; margin-top:6px; white-space:nowrap;
}
.karsilastir tbody td:nth-child(3){background:rgba(14,107,232,.045); font-weight:600; color:var(--metin)}
.karsilastir tbody tr:hover td:nth-child(3){background:rgba(14,107,232,.085)}

/* ---------------- neden Bulutz: ölçülebilir değer ---------------- */
.ozellik--degerli{
  background:var(--kart); border:1px solid var(--cizgi); border-radius:var(--r-buyuk);
  padding:22px 22px; gap:10px;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ozellik--degerli:hover{border-color:var(--gok); transform:translateY(-3px); box-shadow:var(--golge)}
.ozellik__ust{display:flex; align-items:center; justify-content:space-between; gap:12px}
.ozellik__deger{
  font-size:19px; font-weight:800; letter-spacing:-.035em; color:var(--azur);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.ozellik--degerli h3{font-size:16px}

/* =========================================================
   v8 — karar sihirbazı · senaryo yığını · bento · SSS düzeni
   ========================================================= */

/* ---------------- karar sihirbazı ---------------- */
.karar{display:flex; flex-direction:column; gap:24px}
.karar__sihirbaz{
  background:var(--kart); border:1px solid var(--cizgi); border-radius:var(--r-buyuk);
  padding:24px 26px; display:grid; grid-template-columns:1fr 1fr; gap:22px 32px;
  box-shadow:var(--golge); position:relative;
}
@media (max-width:860px){.karar__sihirbaz{grid-template-columns:1fr; padding:20px}}
.karar__soru{display:flex; flex-direction:column; gap:11px}
.karar__soru-metin{
  display:flex; align-items:center; gap:10px;
  font-size:14.5px; font-weight:700; letter-spacing:-.015em; color:var(--metin);
}
.karar__soru-metin span{
  width:22px; height:22px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:rgba(14,107,232,.1); color:var(--azur); font-size:11.5px; font-weight:800;
}
.karar__cevaplar{display:flex; flex-direction:column; gap:7px}
.karar__cevap{
  font-family:var(--yazi); font-size:13.5px; font-weight:600; color:var(--metin-2);
  text-align:left; background:var(--kagit-2); border:1px solid var(--cizgi-2);
  border-radius:var(--r-orta); padding:11px 14px; cursor:pointer;
  transition:border-color .16s ease, background .16s ease, color .16s ease;
}
.karar__cevap:hover{border-color:var(--gok); color:var(--metin)}
.karar__cevap[aria-pressed="true"]{
  background:rgba(14,107,232,.07); border-color:var(--azur); color:var(--metin); font-weight:700;
}

.karar__sonuc{
  grid-column:1 / -1; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:linear-gradient(120deg, rgba(14,107,232,.08), rgba(92,194,245,.1));
  border:1px solid rgba(14,107,232,.22); border-radius:var(--r-orta); padding:16px 18px;
}
.karar__sonuc[hidden]{display:none}
.karar__sonuc-ikon{
  width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--azur); color:#fff;
}
.karar__sonuc-ikon svg{width:19px; height:19px}
.karar__sonuc p{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0}
.karar__sonuc b{font-size:15.5px; font-weight:800; letter-spacing:-.02em; color:var(--metin)}
.karar__sonuc span{font-size:13px; color:var(--metin-2); line-height:1.45}
.karar__sifirla{
  font-family:var(--yazi); font-size:12.5px; font-weight:700; color:var(--azur);
  background:none; border:0; cursor:pointer; text-decoration:underline;
  text-underline-offset:3px; flex:none;
}

/* karşılaştırma kartları */
.karar__kartlar{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:940px){.karar__kartlar{grid-template-columns:1fr}}
.karar__kart{
  background:var(--kart); border:1px solid var(--cizgi); border-radius:var(--r-buyuk);
  padding:24px 22px; display:flex; flex-direction:column; gap:16px; position:relative;
  transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.karar__oneri{
  position:absolute; top:0; left:22px; transform:translateY(-50%);
  background:var(--azur); color:#fff; font-size:11px; font-weight:800; letter-spacing:.03em;
  padding:5px 12px; border-radius:var(--r-dugme); opacity:0; pointer-events:none;
  transition:opacity .22s ease;
}
.karar__kart[data-onerilen]{
  border-color:var(--azur); box-shadow:0 0 0 2px var(--azur), var(--golge-2); transform:translateY(-3px);
}
.karar__kart[data-onerilen] .karar__oneri{opacity:1}
.karar__ust{display:flex; flex-direction:column; gap:9px}
.karar__ikon{
  width:42px; height:42px; border-radius:var(--r-orta); display:grid; place-items:center;
  background:rgba(14,107,232,.09); color:var(--azur);
}
.karar__kart[data-onerilen] .karar__ikon{background:linear-gradient(135deg,#5CC2F5,#0E6BE8); color:#fff}
.karar__ikon svg{width:21px; height:21px}
.karar__ust h3{font-size:18.5px}
.karar__ust p{font-size:13.5px; line-height:1.5; color:var(--metin-2)}
.karar__fiyat{display:flex; align-items:baseline; gap:6px; padding-bottom:16px; border-bottom:1px solid var(--cizgi)}
.karar__fiyat strong{font-size:27px; font-weight:800; letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.karar__fiyat span{font-size:12.5px; color:var(--metin-2)}
.karar__liste{display:flex; flex-direction:column; gap:9px; flex:1}
.karar__liste li{display:flex; align-items:flex-start; gap:9px; font-size:13.5px; line-height:1.45}
.karar__liste svg{width:15px; height:15px; flex:none; margin-top:3px}
.karar__arti{color:var(--metin-2)} .karar__arti svg{color:var(--olumlu)}
.karar__eksi{color:var(--metin-2); opacity:.72} .karar__eksi svg{color:#C0CCDA}

.karar__detay{
  background:var(--kart); border:1px solid var(--cizgi); border-radius:var(--r-orta); overflow:hidden;
}
.karar__detay summary{
  padding:16px 20px; cursor:pointer; font-size:14.5px; font-weight:700; color:var(--metin);
  display:flex; align-items:center; justify-content:space-between; gap:14px; list-style:none;
}
.karar__detay summary::-webkit-details-marker{display:none}
.karar__detay summary::after{
  content:""; width:10px; height:10px; flex:none;
  border-right:2px solid var(--azur); border-bottom:2px solid var(--azur);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .18s ease;
}
.karar__detay[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.karar__detay-ic{padding:0 20px 20px}
.karar__detay-ic .tablo-kaydir{border:1px solid var(--cizgi); box-shadow:none}

/* ---------------- senaryo yığını ---------------- */
.senaryo__yigin{display:flex; flex-wrap:wrap; gap:6px}
.senaryo__yigin span{
  font-size:11px; font-weight:700; color:var(--metin-2);
  background:var(--kagit-2); border:1px solid var(--cizgi-2);
  border-radius:var(--r-dugme); padding:4px 9px;
}
.senaryo:hover .senaryo__yigin span{border-color:var(--cizgi)}

/* ---------------- bento ızgara ---------------- */
.bento{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:940px){.bento{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.bento{grid-template-columns:1fr}}
.bento__kutu{
  background:var(--kart); border:1px solid var(--cizgi); border-radius:var(--r-buyuk);
  padding:24px 24px; display:flex; flex-direction:column; gap:11px;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.bento__kutu:hover{border-color:var(--gok); transform:translateY(-3px); box-shadow:var(--golge)}
.bento__kutu--genis{grid-column:span 2}
@media (max-width:620px){.bento__kutu--genis{grid-column:span 1}}
.bento__kutu--koyu{
  background:var(--gece); border-color:var(--tel); color:#fff;
  position:relative; overflow:hidden;
}
.bento__kutu--koyu::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(360px 180px at 88% 0%, rgba(92,194,245,.16), transparent 66%);
}
.bento__kutu--koyu h3{color:#fff; position:relative}
.bento__kutu--koyu p{color:var(--sonuk); position:relative}
.bento__ust{display:flex; align-items:center; justify-content:space-between; gap:12px; position:relative}
.bento__ikon{
  width:42px; height:42px; border-radius:var(--r-orta); display:grid; place-items:center;
  background:rgba(14,107,232,.09); color:var(--azur); flex:none;
}
.bento__ikon--acik{background:rgba(92,194,245,.16); color:var(--gok)}
.bento__ikon svg{width:21px; height:21px}
.bento__deger{
  font-size:22px; font-weight:800; letter-spacing:-.04em; color:var(--azur);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.bento__deger--acik{color:var(--gok)}
.bento__kutu h3{font-size:17px}
.bento__kutu--genis h3{font-size:20px}
.bento__kutu p{font-size:14px; line-height:1.6; color:var(--metin-2)}

.bento__cubuk{margin-top:auto; padding-top:14px; display:flex; flex-direction:column; gap:7px}
.bento__cubuk-dolgu{
  display:block; height:6px; border-radius:99px; background:var(--cizgi); position:relative; overflow:hidden;
}
.bento__cubuk-dolgu::after{
  content:""; position:absolute; inset:0 auto 0 0; width:0;
  background:linear-gradient(90deg,#5CC2F5,#0E6BE8); border-radius:99px;
  animation:kurulumCubuk 4.2s ease-in-out infinite;
}
@keyframes kurulumCubuk{
  0%{width:0} 70%{width:97%} 85%,100%{width:100%}
}
.bento__cubuk-etiket{font-size:11.5px; font-weight:700; color:var(--metin-2); font-variant-numeric:tabular-nums}

.bento__ozet{margin:6px 0 0; display:flex; flex-direction:column; gap:8px; position:relative}
.bento__ozet > div{display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:12.5px}
.bento__ozet dt{margin:0; color:var(--sonuk)}
.bento__ozet dd{margin:0; font-weight:700; color:#fff; text-align:right}

/* ---------------- SSS düzeni ---------------- */
.sss-duzen{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,300px); gap:20px; align-items:start}
@media (max-width:940px){.sss-duzen{grid-template-columns:1fr}}
.sss-yardim{
  background:var(--gece); border-radius:var(--r-buyuk); padding:26px 24px;
  display:flex; flex-direction:column; gap:12px; color:#fff;
  position:relative; overflow:hidden; position:sticky; top:20px;
}
@media (max-width:940px){.sss-yardim{position:static}}
.sss-yardim::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(320px 180px at 90% 0%, rgba(92,194,245,.18), transparent 68%);
}
.sss-yardim__ikon{
  width:42px; height:42px; border-radius:var(--r-orta); display:grid; place-items:center;
  background:rgba(92,194,245,.16); color:var(--gok); position:relative;
}
.sss-yardim__ikon svg{width:21px; height:21px}
.sss-yardim h3{font-size:18px; color:#fff; position:relative}
.sss-yardim > p{font-size:13.5px; line-height:1.6; color:var(--sonuk); position:relative}
.sss-yardim__iletisim{
  margin:6px 0 4px; display:flex; flex-direction:column; gap:9px; position:relative;
  padding-top:14px; border-top:1px solid var(--tel);
}
.sss-yardim__iletisim > div{display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:13px}
.sss-yardim__iletisim dt{margin:0; color:var(--sonuk)}
.sss-yardim__iletisim dd{margin:0; font-weight:700; color:#fff; text-align:right}
.sss-yardim__iletisim a{color:#fff}
.sss-yardim__iletisim a:hover{color:var(--gok)}
.sss-yardim .dugme{position:relative; margin-top:4px}

@media (prefers-reduced-motion:reduce){
  .bento__cubuk-dolgu::after{animation:none; width:100%}
}

/* =========================================================
   v9 — yapışkan başlık · hizalama · mobil kampanya bandı
   ========================================================= */

/* Başlık artık yapışkan: sayfa 14 ekran uzunluğunda, menü kaybolmamalı */
.baslik{position:sticky; top:0; z-index:60}
.baslik.baslik--kayik{box-shadow:0 6px 24px -10px rgba(8,20,38,.55)}

/* Menü gizlendiğinde (≤1080px) sağdaki işlemler sola yapışıyordu */
.baslik__islem{margin-left:auto}

/* okuma ilerlemesi */
.baslik__ilerleme{
  position:absolute; left:0; bottom:-1px; height:2px; width:0;
  background:linear-gradient(90deg,#5CC2F5,#0E6BE8); z-index:2;
  transition:width .12s linear; pointer-events:none;
}

/* Mobil kampanya bandı: uzun cümle 4 satıra yayılıyordu */
.kampanya__kisa{display:none}
@media (max-width:640px){
  .kampanya__uzun{display:none}
  .kampanya__kisa{display:inline}
  .kampanya .ic{gap:10px; padding-top:9px; padding-bottom:9px}
  .kampanya{font-size:13px}
  .kampanya__rozet{font-size:10.5px; padding:3px 8px}
  .kampanya__bag{font-size:12.5px}
}

/* mobil menü yapışkan başlığın altında kaydırılabilir olsun */
@media (max-width:1080px){
  .menu[data-mobil="acik"]{max-height:calc(100vh - 100%); overflow-y:auto}
}

@media (prefers-reduced-motion:reduce){.baslik__ilerleme{transition:none}}

/* Menü gizliyken başlığın yüksekliğini menü butonları veriyordu; ≤1080px'de
   başlık 39px'e düşüp sıkışıyordu. */
@media (max-width:1080px){
  .baslik .ic{padding-top:13px; padding-bottom:13px}
}

/* =========================================================
   v10 — bulut sunucu ürün sayfası
   ========================================================= */

/* ---- ürün kahramanı: koyu zemin ----
   Anasayfa kahramanı açık; ürün sayfasına geçildiği ilk bakışta anlaşılsın
   diye ürün kahramanı gece mavisi gradyanla kuruluyor. */
.kahraman--urun{
  background:var(--kahraman); color:#fff; padding:34px 0 66px;
  border-bottom:1px solid var(--tel);
}
.kahraman--urun::after{
  background:
    radial-gradient(820px 460px at 76% 6%, rgba(92,194,245,.20), transparent 62%),
    radial-gradient(660px 400px at 4% 96%, rgba(14,107,232,.26), transparent 66%);
}
.kahraman--urun h1{color:#fff; font-size:clamp(31px,4.2vw,49px)}
.kahraman--urun .kahraman__alt{color:var(--sonuk); font-size:17px}
.kahraman--urun .kahraman__tik span{color:var(--sonuk)}
.kahraman--urun .kahraman__tik svg{color:var(--gok)}
.kahraman--urun .kirinti{margin-bottom:-5px; color:var(--sonuk)}
.kahraman--urun .kirinti a{color:var(--gok); font-weight:700}
.kahraman--urun .kirinti a:hover{color:#fff}

/* koyu zeminde cam rozet */
.kahraman--urun .kahraman__rozet{
  background:rgba(255,255,255,.06); border-color:var(--tel); color:#fff;
  box-shadow:none; backdrop-filter:blur(6px);
}
.kahraman--urun .kahraman__rozet b{color:var(--sonuk)}

/* koyu zeminde ikincil buton beyaz konturlu */
.kahraman--urun .dugme--cizgi{
  border-color:rgba(255,255,255,.42); color:#fff; background:transparent;
}
.kahraman--urun .dugme--cizgi:hover{border-color:#fff; background:rgba(255,255,255,.08); color:#fff}

/* konsol beyaz bir kart: koyu kahramanın #fff metin rengini miras alınca
   fiyat beyaz üstüne beyaz kalıyordu */
.kahraman--urun .kurulum{color:var(--metin)}

/* rozet şeridi koyu zeminde erimesin — cam yüzeye dönüşüyor */
.kahraman--urun .hero-rozet{
  background:rgba(255,255,255,.055); border:1px solid var(--tel);
  box-shadow:none; backdrop-filter:blur(6px);
}

/* ---- tüm planlar tablosu ---- */
/* Kart içinde kart görünümü kötüydü: .tumu da .tablo-kaydir da çerçeveliydi.
   Artık tek çerçeve tablonun kendisinde; .tumu yalnızca boşluk taşıyor. */
.tumu{margin-top:0}
.tumu__ust{display:flex; flex-direction:column; gap:8px; margin-bottom:20px; max-width:78ch}
.tumu__ust h3{font-size:20px}
.tumu__ust p{font-size:14.5px; line-height:1.6; color:var(--metin-2)}
.tumu__not{margin-top:14px; font-size:12.5px; color:var(--metin-2); text-align:center}

/* paket tablosu: tek, net kart */
.tablo-kaydir[data-kart]{border-radius:var(--r-buyuk); box-shadow:var(--golge-2)}
.tablo-kaydir[data-kart] .tablo thead th{
  background:var(--kagit); font-size:11.5px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; padding:14px 20px;
}
.tablo-kaydir[data-kart] .tablo th,
.tablo-kaydir[data-kart] .tablo td{padding:16px 20px}
.tablo-kaydir[data-kart] .tablo tbody th{font-size:15px}
.tablo-kaydir[data-kart] .tablo tbody tr:hover{background:var(--kagit-2)}

.tablo tr[data-one]{background:rgba(14,107,232,.055)}
.tablo tr[data-one] th[scope="row"]{color:var(--azur)}
.tablo__rozet{
  display:inline-block; margin-left:9px; padding:3px 8px; border-radius:99px;
  background:var(--azur); color:#fff; font-size:10px; font-weight:800;
  letter-spacing:.02em; vertical-align:middle; white-space:nowrap;
}

/* ---- premium seri: karar notu ---- */
.premium-not{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:34px}
@media (max-width:880px){.premium-not{grid-template-columns:1fr}}
/* ikon 38px kutuyla 23px'lik başlık satırı yan yana hizalanmıyordu (11px kayma);
   dikey yığına geçti, ikon da büyütüldü */
.premium-not__oge{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:24px;
  background:var(--kart); border:1px solid var(--cizgi); border-radius:var(--r-orta);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.premium-not__oge:hover{border-color:var(--gok); transform:translateY(-2px); box-shadow:var(--golge)}
.premium-not__oge > span.premium-not__ikon{
  width:46px; height:46px; flex:none; border-radius:13px; display:grid;
  place-items:center; margin-bottom:12px;
  background:linear-gradient(135deg,rgba(92,194,245,.20),rgba(14,107,232,.14));
  border:1px solid rgba(14,107,232,.16); color:var(--azur);
}
.premium-not__ikon svg{width:23px; height:23px; display:block}
.premium-not__oge > b{display:block; font-size:16px; letter-spacing:-.02em}
/* DİKKAT: `.premium-not__oge span` seçicisi ikon kutusunu da yakalıyordu; ikonun
   display:grid'ini block'a çevirip ortalamayı bozuyordu (1px ofset). Artık hariç. */
.premium-not__oge > span:not(.premium-not__ikon){
  display:block; font-size:14px; line-height:1.6; color:var(--metin-2); margin-top:2px;
}

/* ---- işletim sistemi şablonları ---- */
/* 9 aile kartı: 3/2/1 kolonda satırlar tam dolar.
   Logo solda, sürümler sağda çip olarak — panelde sunulan gerçek şablonlar. */
.isletim{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:980px){.isletim{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.isletim{grid-template-columns:1fr}}
.isletim__kart{
  position:relative; background:var(--kart); border:1px solid var(--cizgi);
  border-radius:var(--r-orta); padding:20px; display:flex; gap:15px; align-items:flex-start;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.isletim__kart:hover{
  transform:translateY(-3px); border-color:var(--os);
  box-shadow:0 2px 4px rgba(13,36,64,.04), 0 14px 34px -16px var(--os);
}
.isletim__logo{
  width:46px; height:46px; flex:none; border-radius:13px; display:grid; place-items:center;
  background:var(--kagit-2); border:1px solid var(--cizgi-2); color:var(--os);
  transition:background .18s ease;
}
.isletim__kart:hover .isletim__logo{background:#fff}
.isletim__logo svg{width:26px; height:26px; fill:currentColor}
.isletim__yazi{display:flex; flex-direction:column; gap:9px; min-width:0}
.isletim__kart b{font-size:15px; letter-spacing:-.02em}
.isletim__surumler{display:flex; flex-wrap:wrap; gap:6px}
.isletim__surumler em{
  font-style:normal; font-size:11.5px; font-weight:700; color:var(--metin-2);
  background:var(--kagit-2); border:1px solid var(--cizgi-2);
  border-radius:99px; padding:3px 9px; white-space:nowrap;
}
.isletim__kart:hover .isletim__surumler em{border-color:var(--cizgi)}
.isletim__rozet{
  position:absolute; top:-9px; right:16px;
  background:var(--gece); color:#fff; font-size:9.5px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:99px;
  white-space:nowrap;
}

.isletim__alt{
  margin-top:20px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--cizgi); border:1px solid var(--cizgi); border-radius:var(--r-orta);
  overflow:hidden;
}
@media (max-width:880px){.isletim__alt{grid-template-columns:1fr}}
.isletim__alt-oge{
  background:var(--kart); padding:20px; display:flex; gap:13px; align-items:flex-start;
}
.isletim__alt-oge svg{width:20px; height:20px; flex:none; color:var(--azur); margin-top:2px}
.isletim__alt-oge b{display:block; font-size:14px; letter-spacing:-.01em}
.isletim__alt-oge span{display:block; font-size:13px; line-height:1.55; color:var(--metin-2); margin-top:4px}

/* ---- zaman çizelgesi: dört adımlı sürüm ---- */
.zaman--dort{grid-template-columns:repeat(4,1fr)}
.zaman--dort .zaman__ray{left:12.5%; right:12.5%}
@media (max-width:880px){
  .zaman--dort{grid-template-columns:1fr}
  .zaman--dort .zaman__ray{left:22px; right:auto}
}

/* ---- teknik künye: iki kolonlu özet ---- */
.altyapi__ozet--iki{display:grid; grid-template-columns:1fr 1fr; margin-bottom:20px}
.altyapi__ozet--iki > div{border-bottom:1px solid var(--tel)}
.altyapi__ozet--iki > div:nth-child(2n){border-left:1px solid var(--tel)}
.altyapi__ozet--iki > div:nth-last-child(-n+2){border-bottom:0}
@media (max-width:700px){
  .altyapi__ozet--iki{grid-template-columns:1fr}
  .altyapi__ozet--iki > div:nth-child(2n){border-left:0}
  .altyapi__ozet--iki > div:nth-last-child(2){border-bottom:1px solid var(--tel)}
}

/* Kurulum konsolunun içindeki 0x0 gradyan tanımı satır içi öğe olduğu için
   kartın üstünde ~19px'lik boş bir satır kutusu açıyordu — anasayfada da vardı. */
.kurulum > svg[focusable="false"]{display:block; height:0}

/* Dar ekranda çok sütunlu veri tabloları yatay kaydırmayla okunmuyordu;
   `data-kart` işaretli tablolarda ≤880px'de her satır kendi kartına dönüşüyor.
   Karşılaştırma tablosu (✓/✗) hariç — o tablo olarak daha okunur. */
@media (max-width:880px){
  .tablo-kaydir[data-kart]{overflow:visible; border:0; box-shadow:none; background:none}
  .tablo-kaydir[data-kart] .tablo{display:block; border:0; width:100%; min-width:0}
  .tablo-kaydir[data-kart] .tablo thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .tablo-kaydir[data-kart] .tablo tbody, .tablo-kaydir[data-kart] .tablo tr, .tablo-kaydir[data-kart] .tablo th, .tablo-kaydir[data-kart] .tablo td{display:block}
  .tablo-kaydir[data-kart] .tablo tr{
    border:1px solid var(--cizgi); border-radius:var(--r-orta);
    padding:16px 16px 14px; margin-bottom:12px; background:var(--kart);
  }
  .tablo-kaydir[data-kart] .tablo tr[data-one]{border-color:var(--azur); box-shadow:0 0 0 1px var(--azur)}
  .tablo-kaydir[data-kart] .tablo tr:last-child{margin-bottom:0}
  .tablo-kaydir[data-kart] .tablo th[scope="row"]{
    padding:0 0 10px; font-size:16.5px; letter-spacing:-.02em; border:0;
    display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  }
  .tablo-kaydir[data-kart] .tablo th[scope="row"] .tablo__rozet{margin-left:0}
  .tablo-kaydir[data-kart] .tablo td{
    display:flex; align-items:baseline; justify-content:space-between; gap:14px;
    padding:7px 0; border:0; border-top:1px solid var(--cizgi-2); text-align:right;
  }
  .tablo-kaydir[data-kart] .tablo td::before{
    content:attr(data-etiket); font-size:12.5px; font-weight:700;
    color:var(--metin-2); text-align:left;
  }
  .tablo-kaydir[data-kart] .tablo td.tablo__fiyat{font-size:19px}
  .tablo-kaydir[data-kart] .tablo td.tablo__islem{display:block; padding-top:13px; text-align:left}
  .tablo-kaydir[data-kart] .tablo td.tablo__islem::before{content:none}
  .tablo-kaydir[data-kart] .tablo td.tablo__islem .dugme{display:block; width:100%; text-align:center}
}

/* ---- rehber: içindekiler + numaralı makale ---- */
.rehber{display:grid; grid-template-columns:minmax(0,268px) minmax(0,1fr); gap:36px; align-items:start}
@media (max-width:940px){.rehber{grid-template-columns:1fr; gap:24px}}

.rehber__yan{position:sticky; top:88px; display:flex; flex-direction:column; gap:16px}
@media (max-width:940px){.rehber__yan{position:static}}
.rehber__yan-baslik{
  font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--metin-2);
}
.rehber__icindekiler{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px}
.rehber__icindekiler a{
  display:flex; gap:11px; align-items:baseline; padding:10px 12px; border-radius:8px;
  font-size:13.5px; line-height:1.4; color:var(--metin); font-weight:600;
  transition:background .16s ease, color .16s ease;
}
.rehber__icindekiler a:hover{background:var(--kagit); color:var(--azur)}
.rehber__icindekiler a span{
  font-size:11px; font-weight:800; color:var(--azur); font-variant-numeric:tabular-nums; flex:none;
}
.rehber__kutu{
  border:1px solid var(--cizgi); border-radius:var(--r-orta); background:var(--kagit-2);
  padding:20px; display:flex; flex-direction:column; gap:8px; align-items:flex-start;
}
.rehber__kutu-ikon{
  width:34px; height:34px; border-radius:var(--r-orta); display:grid; place-items:center;
  background:rgba(14,107,232,.09); color:var(--azur); margin-bottom:2px;
}
.rehber__kutu-ikon svg{width:18px; height:18px}
.rehber__kutu b{font-size:14.5px; letter-spacing:-.01em}
.rehber__kutu > span{font-size:13px; line-height:1.55; color:var(--metin-2)}
.rehber__kutu .dugme{margin-top:6px}

.rehber__govde{
  background:var(--kart); border:1px solid var(--cizgi); border-radius:var(--r-buyuk);
  padding:34px 38px 30px; box-shadow:var(--golge); max-width:none;
}
@media (max-width:600px){.rehber__govde{padding:24px 20px 20px}}
.rehber__giris{
  font-size:17px; line-height:1.65; color:var(--metin); font-weight:600;
  padding-bottom:22px; margin-bottom:6px; border-bottom:1px solid var(--cizgi);
}
.rehber__govde h3{
  display:flex; gap:12px; align-items:baseline; font-size:20px; letter-spacing:-.028em;
  margin:28px 0 12px; scroll-margin-top:96px;
}
.rehber__no{
  font-size:12px; font-weight:800; color:var(--azur); font-variant-numeric:tabular-nums;
  flex:none; padding-top:2px;
}
.rehber__govde p{font-size:15.5px; line-height:1.72; color:var(--metin-2); margin-bottom:12px; max-width:74ch}
.rehber__govde p:last-child{margin-bottom:0}
.rehber__govde a{color:var(--azur); font-weight:700; text-decoration:underline; text-underline-offset:2px}
.rehber__govde a:hover{color:var(--azur-koyu)}

/* =========================================================
   v12 — responsive denetimi düzeltmeleri
   (8 sayfa × 13 genişlik taramasıyla bulundu)
   ========================================================= */

/* 1) ≤430px'de başlık sığmıyordu: içerik 389px'de kilitleniyor, sayfa yatay kayıyordu.
      "Giriş" gizlenir, panel butonu kısa etikete düşer. */
.baslik__kisa{display:none}
@media (max-width:430px){
  .baslik__giris{display:none}
  .baslik__uzun{display:none}
  .baslik__kisa{display:inline}
  .baslik .ic{gap:10px}
  .logo b{font-size:19px}
}
@media (max-width:340px){
  .logo b{display:none}          /* çok dar ekranda yalnızca işaret kalır */
}

/* 2) dokunma hedefleri — 28px altındaki bağlantılar parmakla zor seçiliyordu */
@media (max-width:640px){
  /* dokunma alanı büyürken bant yükselmesin: bandın kendi dolgusu kısıldı */
  .kampanya .ic{padding-top:5px; padding-bottom:5px}
  .kampanya__bag{padding:6px 2px; display:inline-block}
  .baslik__giris{padding:6px 2px}
  .ust-bant a{padding:4px 0; display:inline-block}
}

/* 3) fiyat hesaplayıcı kaydırıcıları 6px yüksekliğindeydi — parmakla tutulamıyordu */
.kaydirici input[type="range"]{height:28px; background:transparent; cursor:pointer}
.kaydirici input[type="range"]::-webkit-slider-runnable-track{
  height:6px; border-radius:99px; background:rgba(255,255,255,.16);
}
.kaydirici input[type="range"]::-moz-range-track{
  height:6px; border-radius:99px; background:rgba(255,255,255,.16);
}
.kaydirici input[type="range"]::-webkit-slider-thumb{margin-top:-7px}

/* 4) hero rozetlerinin alt etiketi 1024px civarında kesiliyordu */
@media (max-width:1180px){
  .hero-rozet{padding:11px 12px; gap:9px}
  .hero-rozet__ikon{width:27px; height:27px}
  .hero-rozet__yazi strong{font-size:13px}
  .hero-rozet__yazi span{font-size:10px; letter-spacing:-.01em}
}
@media (max-width:1080px) and (min-width:521px){
  /* menü gizlendiğinde hero tek kolona düşüyor, yer bollaşıyor */
  .hero-rozet__yazi span{font-size:10.5px}
}

/* 5) mobilde 10.5px'lik üst etiketler okunmuyordu */
@media (max-width:640px){
  .etiket{font-size:11.5px}
  .mega__baslik{font-size:11.5px}
  .marka__ust{font-size:12px}
}

/* 6) altbilgi telefon/e-posta bağlantıları parmakla dar kalıyordu */
@media (max-width:640px){
  .altbilgi__iletisim a{padding:7px 0; display:inline-block}
  .sss-yardim__iletisim a{padding:5px 0; display:inline-block}
}

/* 7) 1024px civarında rozet alt etiketi üç nokta ile kesiliyordu — sarsın */
@media (max-width:1180px){
  .hero-rozet{align-items:flex-start}
  .hero-rozet__ikon{margin-top:1px}
  .hero-rozet__yazi span{white-space:normal; overflow:visible; text-overflow:clip; line-height:1.3}
}

/* =========================================================
   v13 — paket tablosu: ikonlu değerler, dahiller şeridi, vurgulu CTA
   ========================================================= */

/* her pakette ücretsiz dahil olanlar */
.dahil__ust{
  text-align:center; font-size:11.5px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--metin-2); margin-bottom:14px;
}
.dahil{display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-bottom:30px}
.dahil__oge{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--kagit-2); border:1px solid var(--cizgi); border-radius:99px;
  padding:9px 16px 9px 12px; font-size:13px; font-weight:700; color:var(--metin);
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.dahil__oge:hover{border-color:var(--gok); transform:translateY(-1px); box-shadow:var(--golge)}
.dahil__oge svg{width:16px; height:16px; flex:none; color:var(--azur)}
@media (max-width:520px){
  .dahil{gap:7px}
  .dahil__oge{font-size:12px; padding:7px 12px 7px 10px}
  .dahil__oge svg{width:14px; height:14px}
}

/* tablo hücrelerinde ikonlu değer */
/* nowrap uzun işlemci adlarında tabloyu taşırıyordu; geniş ekranda zaten sarmıyor */
.tablo__deger{display:inline-flex; align-items:center; gap:8px; white-space:normal}
.tablo__deger svg{width:16px; height:16px; flex:none; color:var(--azur); opacity:.8}
.tablo__deger b{font-weight:700; color:var(--metin); letter-spacing:-.01em}
.tablo tr[data-one] .tablo__deger svg{opacity:1}

/* paket adı ikonu */
.tablo__ad{display:inline-flex; align-items:center; gap:9px}
.tablo__ad svg{width:18px; height:18px; flex:none; color:var(--metin-2); opacity:.65}
.tablo tr[data-one] .tablo__ad svg{color:var(--azur); opacity:1}

/* satın al butonu: dolu, kalın ve oklu — tabloda kaybolmasın */
.dugme--vurgu{
  font-weight:800; letter-spacing:-.012em; box-shadow:0 6px 16px -8px rgba(14,107,232,.7);
}
.dugme--vurgu svg{width:14px; height:14px; transition:transform .18s ease}
.dugme--vurgu:hover svg{transform:translateX(3px)}
.tablo tr[data-one] .dugme--vurgu{box-shadow:0 8px 20px -8px rgba(14,107,232,.85)}

/* ana CTA'lar biraz daha kalın ve sıkı — daha iddialı dursun */
.dugme--dolu,.dugme--satin{font-weight:800; letter-spacing:-.012em}

/* dar ekran kart düzeninde ikonlar ve buton */
@media (max-width:880px){
  .tablo-kaydir[data-kart] .tablo th[scope="row"] .tablo__ad svg{width:20px; height:20px}
  .tablo-kaydir[data-kart] .tablo td.tablo__islem .dugme--vurgu{justify-content:center}
}

/* =========================================================
   v14 — tablo fiyatı: soluk görünüyordu, yeniden tasarlandı
   Sebep: `.tablo td{color:var(--metin-2)}` özgüllükte
   `.tablo__fiyat{color:var(--metin)}` kuralını eziyordu.
   ========================================================= */
.tablo td.tablo__fiyat{
  color:var(--metin); white-space:nowrap; text-align:left;
  padding-top:12px; padding-bottom:12px;
}
.tablo td.tablo__fiyat s{
  display:block; font-size:12px; font-weight:700; color:var(--metin-2);
  text-decoration:line-through; text-decoration-color:rgba(82,112,143,.6);
  letter-spacing:-.01em; margin-bottom:1px;
}
.tablo__tutar{
  font-size:22px; font-weight:800; letter-spacing:-.04em; color:var(--metin);
  font-variant-numeric:tabular-nums; line-height:1.05;
}
.tablo td.tablo__fiyat em{
  font-style:normal; font-size:12px; font-weight:700; color:var(--metin-2);
  letter-spacing:0; margin-left:4px;
}
/* öne çıkan satırda fiyat markaya döner */
.tablo tr[data-one] .tablo__tutar{color:var(--azur)}
.tablo tr[data-one] td.tablo__fiyat s{color:rgba(82,112,143,.85)}

/* kart düzeninde fiyat bloğu sağa hizalı ve daha büyük */
@media (max-width:880px){
  .tablo-kaydir[data-kart] .tablo td.tablo__fiyat{
    align-items:center; padding-top:11px; padding-bottom:11px;
  }
  .tablo-kaydir[data-kart] .tablo td.tablo__fiyat s{
    display:inline; font-size:12.5px; margin:0 6px 0 0;
  }
  .tablo-kaydir[data-kart] .tablo__tutar{font-size:23px}
}

/* =========================================================
   v15 — paket tabloları: kaymayı bitir, kaydırma gerekiyorsa belli olsun
   Premium tablo 8 sütunla 1255px istiyordu ve 1440px'de bile kayıyordu.
   Her satırda aynı olan sütunlar (Ağ, İşlemci tipi) kaldırıldı; kalan
   genişlik dar ekranlarda sıkıştırılıyor, artık kaymıyor.
   ========================================================= */
.tablo-kaydir[data-kart] .tablo{min-width:0}
@media (min-width:881px) and (max-width:1120px){
  .tablo-kaydir[data-kart] .tablo{font-size:13.5px}
  .tablo-kaydir[data-kart] .tablo th,
  .tablo-kaydir[data-kart] .tablo td{padding:13px 12px}
  .tablo-kaydir[data-kart] .tablo thead th{padding:12px 12px; font-size:10.5px; letter-spacing:.04em}
  .tablo-kaydir[data-kart] .tablo__deger{gap:6px}
  .tablo-kaydir[data-kart] .tablo__deger svg{width:15px; height:15px}
  .tablo-kaydir[data-kart] .tablo__ad{gap:7px}
  .tablo-kaydir[data-kart] .tablo__tutar{font-size:19px}
  .tablo-kaydir[data-kart] .dugme--vurgu{padding:8px 12px; font-size:12.5px}
  .tablo-kaydir[data-kart] .tablo__rozet{font-size:9.5px; padding:2px 7px; margin-left:6px}
}

/* yine de kayması gerekirse kaydırma çubuğu görünür olsun */
.tablo-kaydir{scrollbar-width:thin; scrollbar-color:var(--sonuk) transparent}
.tablo-kaydir::-webkit-scrollbar{height:9px}
.tablo-kaydir::-webkit-scrollbar-track{background:var(--kagit); border-radius:99px}
.tablo-kaydir::-webkit-scrollbar-thumb{background:var(--sonuk); border-radius:99px}
.tablo-kaydir::-webkit-scrollbar-thumb:hover{background:var(--metin-2)}

/* =========================================================
   v16 — fiziksel sunucu sayfası: model tablosunda alt açıklama,
   koyu kahramanda beyaz künye kartı
   ========================================================= */

/* model adının altındaki tek satır açıklama */
.tablo__aciklama{
  display:block; font-size:12px; font-weight:600; color:var(--metin-2);
  letter-spacing:0; margin-top:3px; white-space:normal;
}
.tablo tr[data-one] .tablo__aciklama{color:var(--azur)}
.tablo-kaydir[data-kart] .tablo tbody th{line-height:1.25}

/* koyu ürün kahramanında künye kartı da beyaz — metin rengi miras kalmasın */
.kahraman--urun .yapilandir{color:var(--metin)}
.kahraman--urun .yapilandir dl{margin:0}

/* rack sunucu çizimi — telifli ürün fotoğrafı yerine kendi SVG'miz */
.yapilandir__gorsel{padding:16px 22px 4px}
.yapilandir__rack{display:block; width:100%; height:auto; border-radius:8px}

/* donanım marka şeridi: 8 logo, satırlar tam dolsun */
.marka__liste--dort{grid-template-columns:repeat(4,1fr)}
@media (max-width:820px){.marka__liste--dort{grid-template-columns:repeat(2,1fr)}}

/* işlemci markası hücre ikonu olarak kullanılıyor — kontur değil dolgu */
.tablo__deger svg[style*="fill"]{opacity:1}

/* Model tablosunda işlemci adları uzun ("Ryzen 9 5900X · 12c/24t"); nowrap
   yüzünden 1024px ve 320px'de tablo kayıyordu. O aralıklarda sarmasına izin ver. */
@media (min-width:881px) and (max-width:1120px){
  .tablo-kaydir[data-kart] .tablo__deger{white-space:normal}
  .tablo-kaydir[data-kart] .tablo__aciklama{font-size:11px}
  .tablo-kaydir[data-kart] .tablo th,
  .tablo-kaydir[data-kart] .tablo td{padding:12px 10px}
}
@media (max-width:880px){
  .tablo-kaydir[data-kart] .tablo__deger{white-space:normal; text-align:right}
  .tablo-kaydir[data-kart] .tablo td{align-items:flex-start}
  .tablo-kaydir[data-kart] .tablo td::before{flex:none; padding-top:1px}
}

/* 320px: kart içindeki fiyat satırı ("Ücret ₺25.999,99 ₺12.490 / ay") tek satıra
   sığmıyor, kart 5px taşıyordu. Eski fiyat üst satıra alınıp dolgu kısıldı. */
@media (max-width:400px){
  .tablo-kaydir[data-kart] .tablo tr{padding:14px 12px 12px}
  .tablo-kaydir[data-kart] .tablo td.tablo__fiyat s{display:block; margin:0 0 2px}
  .tablo-kaydir[data-kart] .tablo__tutar{font-size:20px}
  .tablo-kaydir[data-kart] .tablo td{gap:10px}
}

/* =========================================================
   v17 — site haritası sayfası
   ========================================================= */
.kahraman--sade{padding:34px 0 54px}
.kahraman--sade .ic{grid-template-columns:1fr}
.kahraman--sade h1{font-size:clamp(30px,3.8vw,44px)}

.harita{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-bottom:44px}
@media (max-width:820px){.harita{grid-template-columns:1fr}}
.harita-grup{
  background:var(--kart); border:1px solid var(--cizgi); border-radius:var(--r-buyuk);
  padding:24px 26px; box-shadow:var(--golge);
}
@media (max-width:600px){.harita-grup{padding:20px 18px}}
.harita-grup__ust{display:flex; align-items:center; gap:12px; margin-bottom:16px}
.harita-grup__ikon{
  width:38px; height:38px; flex:none; border-radius:var(--r-orta); display:grid;
  place-items:center; background:rgba(14,107,232,.09); color:var(--azur);
}
.harita-grup__ikon svg{width:19px; height:19px; display:block}
.harita-grup__ust h2{font-size:18px; letter-spacing:-.025em}
.harita-grup__liste{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px}
.harita-grup__liste a{
  display:block; padding:11px 12px; border-radius:8px;
  transition:background .16s ease;
}
.harita-grup__liste a:hover{background:var(--kagit)}
.harita-grup__liste b{display:block; font-size:14.5px; color:var(--metin); letter-spacing:-.01em}
.harita-grup__liste a:hover b{color:var(--azur)}
.harita-grup__liste span{display:block; font-size:12.5px; color:var(--metin-2); margin-top:2px; line-height:1.45}

/* =========================================================
   v18 — colocation: kabin görselli kartlar + veri merkezi tesis şeridi
   ========================================================= */

/* tablo hücresi altındaki ikinci satır (RAID 0 · toplam kapasite) */
.tablo__alt{
  display:block; font-size:11.5px; font-weight:600; color:var(--metin-2);
  margin-top:3px; letter-spacing:0;
}
.tablo tr[data-one] .tablo__alt{color:var(--azur)}

/* veri merkezi tesis özellikleri */
.tesis{
  display:grid; grid-template-columns:repeat(6,1fr); gap:1px; margin-bottom:28px;
  background:var(--cizgi); border:1px solid var(--cizgi); border-radius:var(--r-orta);
  overflow:hidden;
}
@media (max-width:1080px){.tesis{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.tesis{grid-template-columns:repeat(2,1fr)}}
.tesis__oge{background:var(--kart); padding:18px 16px; text-align:center}
.tesis__oge b{
  display:block; font-size:19px; font-weight:800; letter-spacing:-.035em; color:var(--azur);
  font-variant-numeric:tabular-nums;
}
.tesis__oge span{display:block; font-size:12.5px; font-weight:700; color:var(--metin); margin-top:4px}
.tesis__oge em{display:block; font-style:normal; font-size:11.5px; line-height:1.45; color:var(--metin-2); margin-top:5px}

/* kabin kartları */
.kabinler{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:1080px){.kabinler{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.kabinler{grid-template-columns:1fr}}
.kabin{
  position:relative; display:flex; gap:18px; padding:22px;
  background:var(--kart); border:1px solid var(--cizgi); border-radius:var(--r-buyuk);
  box-shadow:var(--golge);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kabin:hover{transform:translateY(-3px); box-shadow:var(--golge-2); border-color:var(--gok)}
.kabin--one{border-color:var(--azur); box-shadow:0 0 0 1px var(--azur), var(--golge-2)}
.kabin--genis{grid-column:span 3}
@media (max-width:1080px){.kabin--genis{grid-column:span 2}}
@media (max-width:700px){.kabin--genis{grid-column:span 1}}
.kabin--koyu{background:var(--gece); border-color:var(--tel); color:#fff}
.kabin--koyu h3{color:#fff}
.kabin--koyu .kabin__aciklama{color:var(--sonuk)}
.kabin--koyu .kabin__ozet dt{color:var(--sonuk)}
.kabin--koyu .kabin__ozet dd{color:#fff}
.kabin--koyu .kabin__ozet > div{border-bottom-color:var(--tel)}
.kabin--koyu .kabin__fiyat strong{color:#fff}
.kabin--koyu .kabin__fiyat span{color:var(--sonuk)}
.kabin--koyu .kabin__alt{border-top-color:var(--tel)}

.kabin__sol{flex:none}
/* 1U ile 42U farkı okunsun diye görsel biraz büyük tutuluyor */
.kabin__gorsel{display:block; width:64px; height:auto}
.kabin--genis .kabin__gorsel{width:78px}
@media (max-width:700px){.kabin__gorsel,.kabin--genis .kabin__gorsel{width:56px}}
.kabin__sag{display:flex; flex-direction:column; min-width:0; flex:1}
.kabin__sag h3{font-size:17px; letter-spacing:-.025em}
.kabin__aciklama{font-size:13px; color:var(--metin-2); margin-top:3px; line-height:1.45}
.kabin__ozet{margin:14px 0 0; display:flex; flex-direction:column}
.kabin__ozet > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:8px 0; border-bottom:1px solid var(--cizgi-2);
}
.kabin__ozet > div:last-child{border-bottom:0}
.kabin__ozet dt{margin:0; font-size:12.5px; color:var(--metin-2)}
.kabin__ozet dd{margin:0; font-size:13px; font-weight:700; color:var(--metin); text-align:right}
.kabin__alt{
  margin-top:auto; padding-top:16px; border-top:1px solid var(--cizgi);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.kabin__fiyat{display:flex; align-items:baseline; gap:5px}
.kabin__fiyat strong{font-size:23px; font-weight:800; letter-spacing:-.04em; color:var(--metin); font-variant-numeric:tabular-nums}
.kabin__fiyat span{font-size:12.5px; color:var(--metin-2)}
.kabin__rozet{
  position:absolute; top:-9px; left:22px; background:var(--azur); color:#fff;
  font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 9px; border-radius:99px; white-space:nowrap;
}

/* hosting teknoloji şeridi: 6 logo */
.marka__liste--alti{grid-template-columns:repeat(6,1fr)}
@media (max-width:900px){.marka__liste--alti{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.marka__liste--alti{grid-template-columns:repeat(2,1fr)}}

/* =========================================================
   v19 — alan adı sayfası: kahraman içindeki sorgulama kutusu
   ========================================================= */
.alanadi__kutu{display:flex; gap:8px; flex-wrap:wrap}
.alanadi__girdi{
  flex:1 1 190px; min-width:0; font-family:var(--yazi); font-size:15px; font-weight:600;
  padding:12px 15px; border-radius:var(--r-dugme);
  border:1px solid var(--cizgi); background:#fff; color:var(--metin);
}
.alanadi__girdi::placeholder{color:var(--metin-2); font-weight:500}
.alanadi__girdi:focus{outline:2px solid var(--azur); outline-offset:1px; border-color:var(--azur)}
.alanadi__kutu .dugme{flex:0 0 auto}
.alanadi__not{font-size:12px; color:var(--metin-2); margin-top:9px; line-height:1.45}
@media (max-width:420px){.alanadi__kutu .dugme{width:100%}}

/* =========================================================
   v20 — iletişim sayfası: kanal kartları
   ========================================================= */
.kanallar{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media (max-width:1080px){.kanallar{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.kanallar{grid-template-columns:1fr}}
.kanal{
  background:var(--kart); border:1px solid var(--cizgi); border-radius:var(--r-buyuk);
  padding:24px; display:flex; flex-direction:column; box-shadow:var(--golge);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kanal:hover{transform:translateY(-3px); box-shadow:var(--golge-2); border-color:var(--gok)}
.kanal__ikon{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background:linear-gradient(135deg,rgba(92,194,245,.20),rgba(14,107,232,.14));
  border:1px solid rgba(14,107,232,.16); color:var(--azur); margin-bottom:14px;
}
.kanal__ikon svg{width:23px; height:23px; display:block}
.kanal h3{font-size:16.5px; letter-spacing:-.025em}
.kanal p{font-size:13.5px; line-height:1.55; color:var(--metin-2); margin-top:6px; flex:1}
.kanal__deger{
  display:inline-block; margin-top:14px; font-size:15px; font-weight:800;
  color:var(--azur); letter-spacing:-.02em; word-break:break-word;
}
.kanal__deger:hover{color:var(--azur-koyu); text-decoration:underline}
.kanal__not{display:block; font-size:11.5px; color:var(--metin-2); margin-top:6px}

/* iletişim formu yan yana yardım kartıyla hizalanıyor */
#form .form{
  background:var(--kart); border:1px solid var(--cizgi); border-radius:var(--r-buyuk);
  padding:26px; box-shadow:var(--golge);
}
@media (max-width:600px){#form .form{padding:20px 18px}}

/* =========================================================
   v21 — iki kolonlu bentoda tek kalan kart + SSL tablosu eşiği
   ========================================================= */
/* 940-621px arası bento 2 kolona düşüyor; tek sayıda hücre kalınca son kart
   yalnız kalıyordu. İşaretli kart o aralıkta satırı tamamlıyor. */
@media (max-width:940px) and (min-width:621px){
  .bento__kutu--tam{grid-column:span 2}
}

/* SSL tablosunda "Genişletilmiş doğrulama" ve "1.750.000 $" gibi uzun değerler
   900px'de tabloyu kaydırıyordu; kart düzeni eşiği 940px'e çekildi. */
@media (max-width:940px){
  .tablo-kaydir[data-kart]{overflow:visible; border:0; box-shadow:none; background:none}
  .tablo-kaydir[data-kart] .tablo{display:block; border:0; width:100%; min-width:0}
  .tablo-kaydir[data-kart] .tablo thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .tablo-kaydir[data-kart] .tablo tbody,
  .tablo-kaydir[data-kart] .tablo tr,
  .tablo-kaydir[data-kart] .tablo th,
  .tablo-kaydir[data-kart] .tablo td{display:block}
  .tablo-kaydir[data-kart] .tablo tr{
    border:1px solid var(--cizgi); border-radius:var(--r-orta);
    padding:16px 16px 14px; margin-bottom:12px; background:var(--kart);
  }
  .tablo-kaydir[data-kart] .tablo tr[data-one]{border-color:var(--azur); box-shadow:0 0 0 1px var(--azur)}
  .tablo-kaydir[data-kart] .tablo tr:last-child{margin-bottom:0}
  .tablo-kaydir[data-kart] .tablo th[scope="row"]{
    padding:0 0 10px; font-size:16.5px; letter-spacing:-.02em; border:0;
    display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  }
  .tablo-kaydir[data-kart] .tablo td{
    display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
    padding:7px 0; border:0; border-top:1px solid var(--cizgi-2); text-align:right;
  }
  .tablo-kaydir[data-kart] .tablo td::before{
    content:attr(data-etiket); font-size:12.5px; font-weight:700;
    color:var(--metin-2); text-align:left; flex:none; padding-top:1px;
  }
  .tablo-kaydir[data-kart] .tablo__deger{white-space:normal; text-align:right}
  .tablo-kaydir[data-kart] .tablo td.tablo__fiyat{font-size:19px; align-items:center}
  .tablo-kaydir[data-kart] .tablo td.tablo__islem{display:block; padding-top:13px; text-align:left}
  .tablo-kaydir[data-kart] .tablo td.tablo__islem::before{content:none}
  .tablo-kaydir[data-kart] .tablo td.tablo__islem .dugme{display:block; width:100%; text-align:center; justify-content:center}
}

/* =========================================================
   v22 — 404 sayfası
   ========================================================= */
.dortyuz{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center}
@media (max-width:940px){.dortyuz{grid-template-columns:1fr; gap:28px}}
.dortyuz__kod{
  font-size:clamp(52px,8vw,86px); font-weight:800; letter-spacing:-.06em; line-height:1;
  background:linear-gradient(135deg,#5CC2F5,#0E6BE8); -webkit-background-clip:text;
  background-clip:text; color:transparent; margin-bottom:-4px;
}
.dortyuz__sag{min-width:0}
.dortyuz__gorsel{display:block; width:100%; height:auto; border-radius:var(--r-buyuk)}
@media (max-width:940px){.dortyuz__sag{order:-1}}

/* 404'teki altılı hizmet ızgarası */
.hizli__izgara--alti{grid-template-columns:repeat(3,1fr)}
@media (max-width:940px){.hizli__izgara--alti{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.hizli__izgara--alti{grid-template-columns:1fr}}

/* =========================================================
   v23 — giriş sayfası (WiseCP giriş şablonuna oturacak kurgu)
   ========================================================= */
.kahraman--giris{padding:34px 0 60px}
.kahraman--giris .ic{grid-template-columns:1fr}
.giris{display:grid; grid-template-columns:1.02fr .98fr; gap:48px; align-items:center}
@media (max-width:940px){.giris{grid-template-columns:1fr; gap:30px}}
.giris__tanitim{display:flex; flex-direction:column; gap:18px; align-items:flex-start}
.giris__tanitim h1{font-size:clamp(29px,3.9vw,44px)}
.giris__gorsel-sar{width:100%; margin-top:4px}
.giris__gorsel{display:block; width:100%; height:auto; border-radius:var(--r-buyuk)}
@media (max-width:940px){.giris__gorsel-sar{display:none}}

.oturum{display:flex; flex-direction:column; gap:14px}
.oturum__kart{
  background:var(--kart); border:1px solid var(--cizgi); border-radius:var(--r-buyuk);
  padding:30px; box-shadow:var(--golge-2); color:var(--metin);
}
@media (max-width:600px){.oturum__kart{padding:22px 20px}}
.oturum__kart[hidden]{display:none}
.oturum__ust{margin-bottom:20px}
.oturum__ust h2{font-size:23px; letter-spacing:-.03em}
.oturum__ust p{font-size:14px; line-height:1.55; color:var(--metin-2); margin-top:6px}
.oturum .form{display:flex; flex-direction:column; gap:16px}
.oturum__secenek{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.onay{display:inline-flex; align-items:center; gap:9px; font-size:13.5px; color:var(--metin); cursor:pointer}
.onay input{width:17px; height:17px; accent-color:var(--azur); cursor:pointer}
.oturum__bag{
  background:none; border:0; padding:0; cursor:pointer; font-family:var(--yazi);
  font-size:13.5px; font-weight:700; color:var(--azur);
}
.oturum__bag:hover{color:var(--azur-koyu); text-decoration:underline}
.oturum__alt{margin-top:18px; font-size:13.5px; color:var(--metin-2); text-align:center}
.oturum__alt a{color:var(--azur); font-weight:700}
.oturum__alt a:hover{text-decoration:underline}
.oturum__guven{display:flex; flex-direction:column; gap:8px}
.oturum__guven span{
  display:inline-flex; align-items:flex-start; gap:9px;
  font-size:12px; line-height:1.45; color:var(--sonuk);
}
.oturum__guven svg{width:15px; height:15px; flex:none; color:var(--gok); margin-top:1px}