/* ============================================================
   VDS sayfası.

   Renkler, köşe yuvarlaklığı ve paket sütunları değişkenlerde; widget'ların
   Stil sekmesindeki kontroller bu değişkenleri ezer. Bölümler ekranın
   tamamını kaplar (.ksp-tam). Başlık efektleri dosyanın sonunda.
   ============================================================ */

.kvds{
	--kv-gece:#061736;--kv-mavi:#1D5FD8;--kv-mavi-acik:#EAF1FE;--kv-vurgu-acik:#4DA3FF;
	--kv-turuncu:#F7931E;--kv-btn-yazi:#fff;
	--kv-baslik:#0B1B3F;--kv-metin:#1F2937;--kv-sus:#64748B;--kv-cizgi:#DCE4F0;--kv-zemin:#F3F6FB;
	--kv-kart:#fff;--kv-radius:14px;--kvx-isik:#7FB6FF;
	/* Paket satırı ile başlık şeridi aynı değişkeni kullanır; hiza bozulmaz. */
	--kvf-sutun:1.25fr .75fr .75fr 1fr 1fr 1.1fr .95fr;
	color:var(--kv-metin);font-size:15px;line-height:1.65}
.kvds h2{margin:0 0 12px;color:var(--kv-baslik);font-size:32px;font-weight:800;line-height:1.2;letter-spacing:-.015em}
.kvds h3{margin:0 0 6px;color:var(--kv-baslik);font-size:18px;font-weight:700}
.kvds p{margin:0 0 14px}

/* ── şerit ve iç kapsayıcı ─────────────────────────────────── */
.kvds-serit{padding:64px 0}
.kvds-serit--acik{background-color:var(--kv-zemin)}
.kvds-serit--beyaz{background-color:#fff}
.kvds-serit--koyu{background-color:var(--kv-gece);--kv-baslik:#fff;--kv-sus:#B7C7E0;--kv-metin:#DCE6F5;--kvx-isik:#fff}
.kvds-ic{max-width:1320px;margin:0 auto;padding:0 32px}

.kvds-ustyazi{margin:0 0 6px;color:var(--kv-mavi);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.kvds-giris{max-width:760px;margin-bottom:32px;color:var(--kv-sus);font-size:15.5px}
.kvds-ortala{text-align:center}
.kvds-ortala .kvds-giris{margin-left:auto;margin-right:auto}
.kvds-not{margin:28px 0 0;color:var(--kv-sus);font-size:13.5px}
.kvds-not a{color:var(--kv-mavi)}

/* kendi görseli seçildiğinde */
.kvds-gorsel{display:block;width:100%;height:auto;border-radius:calc(var(--kv-radius) + 2px)}
.kvds-gorsel--golge{box-shadow:0 30px 70px rgba(0,8,30,.3)}

/* ═══════════════════════════════════════════════ tanıtım (koyu) */
.kvh-serit{position:relative;overflow:hidden;padding:76px 0}
.kvds-serit--koyu.kvh-serit{background-image:radial-gradient(900px 480px at 80% 45%,#0E3D8C 0%,#082659 45%,#061736 100%)}
.kvh{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:64px;align-items:center}
.kvh-ust{margin:0 0 12px;color:#8DB8FF;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.kvh h1{margin:0 0 18px;color:var(--kv-baslik);font-size:48px;font-weight:800;line-height:1.14;letter-spacing:-.025em}
.kvh h1 .kvh-vurgu{display:block;color:var(--kv-vurgu-acik)}
.kvh-alt{max-width:540px;margin:0 0 26px;color:var(--kv-sus);font-size:16.5px;line-height:1.75}
.kvh-tik{margin:0 0 32px;padding:0;list-style:none}
.kvh-tik li{position:relative;margin-bottom:11px;padding-left:30px;color:var(--kv-metin);font-size:15px}
.kvh-tik li b{color:var(--kv-baslik);font-weight:700}
.kvh-tik li::before{content:"";position:absolute;top:3px;left:0;width:18px;height:18px;border-radius:50%;background:rgba(77,163,255,.18)}
.kvh-tik li::after{content:"";position:absolute;top:8px;left:5px;width:8px;height:4px;border:solid var(--kv-vurgu-acik);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.kvh-dugmeler{display:flex;flex-wrap:wrap;gap:12px}
.kvh-dgm{display:inline-block;padding:14px 30px;border:1px solid transparent;border-radius:10px;font-size:15px;font-weight:700;text-decoration:none;transition:filter .15s,border-color .15s}
.kvh-dgm--dolu{background:var(--kv-mavi);color:var(--kv-btn-yazi)}
.kvh-dgm--dolu:hover{filter:brightness(1.1);color:var(--kv-btn-yazi)}
.kvh-dgm--bos{border-color:rgba(141,184,255,.4);color:var(--kv-metin)}
.kvh-dgm--bos:hover{border-color:#8DB8FF;color:var(--kv-baslik)}

/* sağ: beyaz özellik kartı + soldan taşan rozetler */
.kvh-cizim{position:relative;padding-left:120px}
.kvh-isik{position:absolute;top:50%;left:55%;width:420px;height:420px;transform:translate(-50%,-50%);border-radius:50%;
	background:radial-gradient(circle,rgba(77,163,255,.35) 0%,rgba(77,163,255,0) 70%);pointer-events:none}
.kvh-kart{position:relative;border-radius:calc(var(--kv-radius) + 2px);background:var(--kv-kart);box-shadow:0 30px 70px rgba(0,8,30,.45);overflow:hidden}
.kvh-kart-ust{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #EEF2F8}
.kvh-kart-ust b{color:#0B1B3F;font-size:14px}
.kvh-durum{display:inline-flex;align-items:center;gap:6px;color:#15803D;font-size:12px;font-weight:700}
.kvh-durum::before{content:"";width:7px;height:7px;border-radius:50%;background:#22C55E}
.kvh-alanlar{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px 18px}
.kvh-alan span{display:block;margin-bottom:4px;color:#64748B;font-size:11.5px;font-weight:600}
.kvh-alan b{display:block;padding:9px 12px;border:1px solid #E3E9F3;border-radius:8px;background:#F7F9FD;color:#0B1B3F;font-size:13.5px;font-weight:600}
.kvh-konsol{margin:0 18px 18px;padding:12px 14px;border-radius:10px;background:#0A1A33;
	color:#86E0AE;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.7}
.kvh-konsol span{color:#7FB2FF}
.kvh-rozetler{position:absolute;top:50%;left:0;z-index:2;display:flex;flex-direction:column;gap:12px;transform:translateY(-50%)}
.kvh-rozet{width:150px;padding:12px 14px;border:2px solid #CFE0FF;border-radius:14px;background:#fff;
	box-shadow:0 14px 30px rgba(0,8,30,.35);text-align:center}
.kvh-rozet b{display:block;color:var(--kv-mavi);font-size:17px;font-weight:800;line-height:1.15}
.kvh-rozet span{display:block;color:#0B1B3F;font-size:13px;font-weight:600}
/* rozetler hafifçe süzülür; her biri farklı fazda */
.kvh-rozetler--suz .kvh-rozet{animation:kvh-suz 5.5s ease-in-out infinite}
.kvh-rozetler--suz .kvh-rozet:nth-child(2){animation-delay:-1.8s}
.kvh-rozetler--suz .kvh-rozet:nth-child(3){animation-delay:-3.6s}
@keyframes kvh-suz{0%,100%{transform:translate(0,0)}50%{transform:translate(4px,-9px)}}

/* ═══════════════════════════════════════════════ paket listesi */
.kvf-ust{display:grid;grid-template-columns:var(--kvf-sutun);gap:12px;align-items:center;margin-bottom:28px;
	/* 1px çerçeve + 25px = 26px: kutunun 2px çerçevesi + 8px iç boşluğu + satırın 16px'i */
	padding:8px 25px;border:1px solid var(--kv-cizgi);border-radius:12px;background:var(--kv-kart)}
.kvf-ust > span{color:var(--kv-sus);font-size:13px;font-weight:600;text-align:center}
.kvf-ust > .kvf-ust-fiyat{text-align:right}
.kvf-ust > .kvf-etiket{justify-self:start;margin-left:-17px;padding:9px 18px;border-radius:9px;
	background:linear-gradient(90deg,var(--kv-mavi),#3B82F6);color:#fff;font-size:13.5px;font-weight:800;letter-spacing:.04em;white-space:nowrap}

.kvf-grup{margin-bottom:34px}
.kvf-grup:last-of-type{margin-bottom:0}
.kvf-grup > h3{margin:0 0 14px;font-size:19px}
.kvf-kutu{padding:8px;border:2px solid #C9DAF6;border-radius:var(--kv-radius);background:var(--kv-kart)}
.kvf-grup--buyuk .kvf-kutu{border-color:var(--kv-mavi)}
.kvf-satir{position:relative;display:grid;grid-template-columns:var(--kvf-sutun);gap:12px;align-items:center;padding:16px;border-radius:9px}
.kvf-satir + .kvf-satir{margin-top:6px}
.kvf-satir:not(.kvf-satir--one) + .kvf-satir:not(.kvf-satir--one){box-shadow:inset 0 1px 0 #EEF2F8}
.kvf-satir--one{background:var(--kv-mavi-acik)}
.kvf-satir--one::before{content:"POPÜLER";position:absolute;top:4px;bottom:4px;left:-18px;width:22px;
	display:flex;align-items:center;justify-content:center;border-radius:6px;background:var(--kv-mavi);color:#fff;
	font-size:9px;font-weight:800;letter-spacing:.08em;writing-mode:vertical-rl;transform:rotate(180deg);
	box-shadow:0 4px 10px rgba(29,95,216,.3)}
.kvf-ad{color:var(--kv-baslik);font-size:15.5px;font-weight:700}
.kvf-deger{color:#334155;font-size:14px;text-align:center}
.kvf-fiyat{text-align:right}
.kvf-tutar{display:block;color:var(--kv-baslik);font-size:20px;font-weight:800;line-height:1.2}
.kvf-tutar span{color:var(--kv-sus);font-size:12.5px;font-weight:600}
.kvf-yillik{display:block;margin-top:2px;color:var(--kv-mavi);font-size:12px;font-weight:600}
.kvf-btn{display:block;padding:11px 14px;border-radius:8px;background:var(--kv-turuncu);color:var(--kv-btn-yazi);
	font-size:14.5px;font-weight:700;text-align:center;text-decoration:none;transition:filter .15s,transform .15s}
.kvf-btn:hover{filter:brightness(.94);transform:translateY(-1px);color:var(--kv-btn-yazi)}
.kvf-dip{margin:26px 0 0;color:var(--kv-sus);font-size:13px;text-align:center}
.kvf-dip span{display:block}

/* ═══════════════════════════════════════════════ vds nedir kartı */
.kvn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:56px;align-items:center;
	padding:48px 56px;border:1px solid #DCE7F8;border-radius:calc(var(--kv-radius) * 2);background-image:linear-gradient(135deg,#F6F9FF 0%,#EAF1FE 100%)}
.kvn-ust{margin:0 0 4px;color:var(--kv-sus);font-size:15px;font-weight:600}
.kvn h2{color:var(--kv-mavi);font-size:36px}
.kvn p{color:#334155;font-size:15.5px;line-height:1.8}
.kvn p:last-child{margin-bottom:0}
.kvn-cizim{padding:24px;border-radius:calc(var(--kv-radius) + 4px);background:var(--kv-kart);box-shadow:0 18px 44px rgba(29,95,216,.12)}
.kvn-cizim-baslik{display:flex;justify-content:space-between;margin:0 0 16px;color:#0B1B3F;font-size:14px;font-weight:700}
.kvn-cizim-baslik span{color:#64748B;font-weight:500}
.kvn-kaynak{margin-bottom:14px}
.kvn-kaynak:last-child{margin-bottom:0}
.kvn-kaynak-ust{display:flex;justify-content:space-between;margin-bottom:6px;font-size:13px}
.kvn-kaynak-ust span{color:#64748B;font-weight:600}
.kvn-kaynak-ust b{color:#0B1B3F}
.kvn-bar{height:10px;border-radius:5px;background:#EEF2F8;overflow:hidden}
.kvn-bar i{display:block;height:100%;border-radius:5px;background-image:linear-gradient(90deg,var(--kv-mavi),var(--kv-vurgu-acik))}

/* ═══════════════════════════════════════════════ altyapı */
.kva{display:grid;grid-template-columns:minmax(0,500px) minmax(0,1fr);gap:64px;align-items:center}
.kva h2{color:var(--kv-mavi)}
.kva-ozellik{display:flex;gap:18px;margin-bottom:26px}
.kva-ozellik:last-child{margin-bottom:0}
.kva-ikon{flex:0 0 48px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;
	border:2px solid #C9DAF6;border-radius:12px;background:var(--kv-kart);color:var(--kv-mavi);font-size:19px;transition:transform .25s}
.kva-ozellik:hover .kva-ikon{transform:rotate(-8deg) scale(1.06)}
.kva-ozellik h3{margin-bottom:4px;font-size:16.5px}
.kva-ozellik p{margin:0;color:var(--kv-sus);font-size:14.5px;line-height:1.65}

.kva-pano{position:relative;padding:18px;border:1px solid var(--kv-cizgi);border-radius:calc(var(--kv-radius) + 2px);background:var(--kv-kart);box-shadow:0 20px 48px rgba(11,27,63,.1)}
.kva-pano-ust{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid #EEF2F8}
.kva-pano-ust b{color:#0B1B3F;font-size:14px}
.kva-rozet{padding:3px 10px;border-radius:999px;background:#E7F7EE;color:#15803D;font-size:11.5px;font-weight:700}
.kva-kutular{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.kva-kutu{padding:12px;border:1px solid #E3E9F3;border-radius:10px;background:#F7F9FD}
.kva-kutu b{display:block;color:#0B1B3F;font-size:17px;font-weight:800;line-height:1.2}
.kva-kutu span{display:block;margin-top:2px;color:#64748B;font-size:11.5px}
.kva-grafik-baslik{display:flex;justify-content:space-between;margin-bottom:8px;color:#64748B;font-size:12px;font-weight:600}
.kva-grafik{display:flex;align-items:flex-end;gap:6px;height:90px;padding:10px 12px;border:1px solid #E3E9F3;border-radius:10px;background:#F7F9FD}
.kva-grafik i{flex:1;border-radius:3px 3px 0 0;background-image:linear-gradient(180deg,#7DB4FF,var(--kv-mavi))}
.kva-konsol{margin-top:12px;padding:12px 14px;border-radius:10px;background:#0A1A33;
	color:#86E0AE;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.7}
.kva-konsol span{color:#7FB2FF}

/* ═══════════════════════════════════════════════ yönetim */
.kvy{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
.kvy-sutun{padding:32px;border:1px solid var(--kv-cizgi);border-radius:calc(var(--kv-radius) + 4px);background:var(--kv-kart)}
.kvy-sutun--one{border-color:transparent;background:var(--kv-gece);color:#C9D6EA}
.kvy-sutun--one h3{color:#fff}
.kvy-etiket{display:inline-block;margin-bottom:12px;padding:4px 10px;border-radius:999px;background:var(--kv-mavi-acik);
	color:var(--kv-mavi);font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.kvy-sutun--one .kvy-etiket{background:rgba(77,163,255,.18);color:#8DB8FF}
.kvy-sutun h3{font-size:21px}
.kvy-sutun ul{margin:16px 0 0;padding:0;list-style:none}
.kvy-sutun li{position:relative;margin-bottom:10px;padding-left:26px;font-size:14.5px;line-height:1.55}
.kvy-sutun li::before{content:"";position:absolute;top:6px;left:2px;width:11px;height:6px;border:solid var(--kv-mavi);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.kvy-sutun--one li::before{border-color:var(--kv-vurgu-acik)}
.kvy-ek{margin:20px 0 0;padding-top:16px;border-top:1px solid #EEF2F8;color:var(--kv-baslik);font-size:17px;font-weight:800}
.kvy-sutun--one .kvy-ek{border-top-color:rgba(255,255,255,.12);color:#fff}

/* ═══════════════════════════════════════════════ karşılaştırma */
.kvk-sar{overflow-x:auto;border-radius:calc(var(--kv-radius) + 2px);box-shadow:0 0 0 1px var(--kv-cizgi)}
.kvk{width:100%;min-width:700px;border-collapse:collapse;background:var(--kv-kart);font-size:14.5px}
.kvk th,.kvk td{padding:15px 22px;text-align:left;border-bottom:1px solid #EEF2F8}
.kvk thead th{background:var(--kv-gece);color:#fff;font-size:13.5px;font-weight:700;white-space:nowrap}
.kvk thead th:nth-child(3){background:var(--kv-mavi)}
.kvk tbody th{color:var(--kv-metin);font-weight:500}
.kvk td{color:#0B1B3F;font-weight:600}
.kvk td:nth-child(3){background:#F6F9FF}
.kvk tr:last-child th,.kvk tr:last-child td{border-bottom:0}
.kvk-yok{color:#9AA9C2 !important;font-weight:400 !important}

/* ═══════════════════════════════════════════════ sss (açılır) */
.kvs{max-width:900px;margin:0 auto}
.kvs-soru{margin-bottom:10px;border:1px solid var(--kv-cizgi);border-radius:var(--kv-radius);background:var(--kv-kart);transition:border-color .2s}
.kvs-soru summary{position:relative;padding:18px 56px 18px 22px;color:var(--kv-baslik);font-size:16px;font-weight:700;cursor:pointer;list-style:none}
.kvs-soru summary::-webkit-details-marker{display:none}
.kvs-soru summary::after{content:"+";position:absolute;top:50%;right:20px;width:26px;height:26px;margin-top:-13px;
	border-radius:50%;background:var(--kv-mavi-acik);color:var(--kv-mavi);font-size:18px;font-weight:600;line-height:26px;text-align:center;transition:transform .25s}
.kvs-soru[open]{border-color:#B9CFF3}
.kvs-soru[open] summary::after{content:"−";transform:rotate(180deg)}
.kvs-soru p{margin:0;padding:0 22px 20px;color:var(--kv-sus);font-size:15px;line-height:1.7}

/* ═══════════════════════════════════════════════ başlık efektleri
   Metin her zaman HTML'de yazılı durur; betik yalnızca süsler. Betik
   çalışmazsa ya da görünürlük hiç bildirilmezse başlık olduğu gibi okunur. */

/* tarama çizgisi: bir ışık çizgisi soldan sağa geçerken başlığı açar */
.kvx-tarama{position:relative;width:fit-content}
.kvds-ortala .kvx-tarama{margin-left:auto;margin-right:auto}
.kvx-tarama.kvx-hazir{clip-path:inset(0 100% 0 0)}
.kvx-tarama.kvx-oynat{animation:kvx-tara-ac var(--kvx-sure,1.1s) cubic-bezier(.65,0,.35,1) both}
.kvx-tarama.kvx-oynat::after{content:"";position:absolute;top:-8%;bottom:-8%;left:0;width:3px;margin-left:-3px;border-radius:2px;
	background:var(--kv-vurgu-acik);box-shadow:0 0 16px 3px var(--kv-vurgu-acik);
	animation:kvx-tara-cizgi var(--kvx-sure,1.1s) cubic-bezier(.65,0,.35,1) both}
@keyframes kvx-tara-ac{from{clip-path:inset(0 100% 0 -12px)}to{clip-path:inset(0 -12px 0 -12px)}}
@keyframes kvx-tara-cizgi{0%{left:0;opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
.kvx-tarama.kvx-bitti{clip-path:none;animation:none}

/* karakter çözme: harfleri betik değiştirir; satır boyu sabit kalsın */
.kvx-cozme{font-variant-ligatures:none}

/* dönen kelime */
.kvx-dongu{display:inline-grid;vertical-align:top;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em;transition:width .45s cubic-bezier(.2,.8,.2,1)}
.kvx-kelime{grid-area:1/1;justify-self:start;white-space:nowrap;transform:translateY(110%);opacity:0;
	transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .45s ease}
.kvx-kelime.kvx-aktif{transform:none;opacity:1}
.kvx-kelime.kvx-cik{transform:translateY(-110%);opacity:0}

/* ışık süzmesi: başlığın üzerinde yavaşça gezen parıltı */
.kvx-parilti{--kvx-renk:var(--kv-baslik)}
.kvx-parilti .kvh-vurgu{--kvx-renk:var(--kv-vurgu-acik)}
.kvx-parilti:not(:has(.kvh-vurgu)),.kvx-parilti .kvh-vurgu{
	background-image:linear-gradient(110deg,var(--kvx-renk) 0%,var(--kvx-renk) 40%,var(--kvx-isik) 50%,var(--kvx-renk) 60%,var(--kvx-renk) 100%);
	background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;
	-webkit-text-fill-color:transparent;animation:kvx-parla var(--kvx-sure,3.4s) ease-in-out infinite}
@keyframes kvx-parla{0%{background-position:100% 0}55%,100%{background-position:0 0}}

@media (prefers-reduced-motion:reduce){
	.kvx-tarama.kvx-hazir{clip-path:none}
	.kvx-parilti:not(:has(.kvh-vurgu)),.kvx-parilti .kvh-vurgu,.kvh-rozetler--suz .kvh-rozet{animation:none}
}

/* ═══════════════════════════════════════════════════ dar ekran */
@media (max-width:1024px){
	.kvh{grid-template-columns:1fr;gap:44px}
	.kvh-cizim{max-width:600px}
	.kvn{grid-template-columns:1fr;gap:32px;padding:36px 32px}
	.kva{grid-template-columns:1fr;gap:40px}
	.kvf-ust > .kvf-etiket{margin-left:0}
}
@media (max-width:900px){
	.kvds-serit{padding:44px 0}
	.kvh-serit{padding:52px 0}
	.kvds-ic{padding:0 20px}
	.kvds h2{font-size:26px}
	.kvh h1{font-size:34px}
	.kvh-cizim{padding-left:0}
	.kvh-rozetler{position:static;flex-direction:row;flex-wrap:wrap;margin-bottom:16px;transform:none}
	.kvh-rozet{width:auto;flex:1;min-width:120px}
	.kvf-ust{display:none}
	.kvf-satir{grid-template-columns:1fr 1fr;gap:6px 14px;padding:18px 16px 18px 26px}
	.kvf-ad{grid-column:1/-1;margin-bottom:4px}
	.kvf-deger{text-align:left;font-size:13.5px}
	.kvf-fiyat{grid-column:1/-1;margin-top:8px;text-align:left}
	.kvf-btn{grid-column:1/-1;margin-top:8px}
	.kvf-satir--one::before{left:-4px}
	.kvn h2{font-size:28px}
}
@media (max-width:560px){
	.kvh h1{font-size:28px}
	.kvh-alanlar{grid-template-columns:1fr}
	.kva-kutular{grid-template-columns:1fr 1fr}
	.kvn{padding:28px 20px}
}