/* ============================================================
   SSL sayfası (üçüncü sürüm): açık tanıtım + koyu sertifika listesi.

   Renkler değişkenlerde; widget'ların stil sekmesi bunları ezer.
   Bölümler ekranın tamamını kaplar (.ksp-tam), içerik kapsayıcıda.
   ============================================================ */

.ks3{
	--k3-turuncu:#F39C12;--k3-turuncu-koyu:#E07F0B;--k3-yesil:#1FA34A;
	--k3-acik:#F2F2F4;--k3-koyu:#171A21;--k3-satir:#fff;--k3-panel:#F1F2F4;
	--k3-yazi:#111318;--k3-sus:#5B6170;--k3-cizgi:#E3E5EA;--k3-radius:4px;
	--k3-sutun:150px minmax(0,1.25fr) 150px 115px 110px 290px;
	color:var(--k3-yazi);font-size:15px;line-height:1.6}
.ks3 *,.ks3 *::before,.ks3 *::after{box-sizing:border-box}
.ks3 h1,.ks3 h2,.ks3 p{margin:0}
.ks3-ic{max-width:1320px;margin:0 auto;padding:0 32px}

/* ═══════════════════════════════════════════════════════ tanıtım */
.ks3-hero{background-color:var(--k3-acik);padding:56px 0 64px;overflow:hidden}
.ks3-hero-ic{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:48px;align-items:center}
.ks3-h1{color:var(--k3-yazi);font-size:44px;font-weight:800;line-height:1.15;letter-spacing:-.02em}
.ks3-alt{margin-top:6px!important;color:var(--k3-yazi);font-size:26px;font-weight:700;line-height:1.3}
.ks3-ack{max-width:430px;margin-top:34px!important;color:#2A2E37;font-size:17px;line-height:1.55}
.ks3-hero .ks3-gorsel{display:block;width:100%;height:auto;border-radius:12px}

/* çizim */
.ks3-il{position:relative;height:300px;margin-left:auto;width:100%;max-width:490px}
.ks3-il-pencere{position:absolute;top:40px;right:40px;width:270px;height:226px;padding:44px 22px 20px;border-radius:14px;background:#fff;box-shadow:0 12px 40px rgba(17,19,24,.08)}
.ks3-il-noktalar{position:absolute;top:12px;right:16px;display:flex;gap:5px}
.ks3-il-noktalar i{width:7px;height:7px;border-radius:50%;background:#C9CCD3}
.ks3-il-adres{position:absolute;top:32px;left:6px;right:-8px;display:flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 42px;
	border:1px solid #EDEEF1;border-radius:10px;background:#fff;box-shadow:0 6px 18px rgba(17,19,24,.06);color:var(--k3-yesil);font-size:13.5px;white-space:nowrap}
.ks3-il-adres .ks3-il-kilit{color:var(--k3-yesil);font-size:12px}
.ks3-il-site{position:absolute;top:128px;left:0;right:0;color:#C3C6CE;font-size:15px;font-weight:700;letter-spacing:.02em;text-align:center}
.ks3-il-cizgiler{position:absolute;left:22px;right:22px;bottom:30px;display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.ks3-il-cizgiler i{display:block;height:4px;border-radius:2px;background:#E6E8EC}

/* açıklama çizgileri: nokta + etiket, köşeli çizgiyle kilide bağlanır */
.ks3-il-not{position:absolute;display:flex;align-items:center;gap:6px;color:#2A2E37;font-size:11px;font-weight:500;letter-spacing:.02em;white-space:nowrap}
.ks3-il-not::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--k3-yesil)}
.ks3-il-not::after{content:"";position:absolute;border:solid var(--k3-yesil);opacity:.8}
.ks3-il-not--kilit{top:-26px;left:62px}
.ks3-il-not--kilit::after{left:-16px;top:8px;width:16px;height:50px;border-width:1px 0 0 1px}
.ks3-il-not--sifre{top:94px;left:76px}
.ks3-il-not--sifre::after{left:-10px;bottom:6px;width:10px;height:38px;border-width:0 0 1px 1px}

/* fiyat rozeti */
.ks3-il-fiyat{position:absolute;top:84px;left:28px;z-index:2;min-width:176px;padding:62px 16px 20px;border-radius:6px;background:var(--k3-turuncu);
	color:#fff;text-align:center;box-shadow:0 14px 30px rgba(224,127,11,.25)}
.ks3-il-kurdele{position:absolute;top:0;left:22px;right:22px;padding:6px 4px 16px;background:var(--k3-turuncu-koyu);
	clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%);line-height:1.1}
.ks3-il-kurdele b{display:block;font-size:13px;font-weight:700;letter-spacing:.01em}
.ks3-il-kurdele small{display:block;margin-top:2px;font-size:8.5px;opacity:.9}
.ks3-il-tutar{display:block;font-size:34px;font-weight:800;line-height:1;letter-spacing:-.02em;white-space:nowrap}
.ks3-il-donem{display:block;margin-top:4px;font-size:13px}

/* yeşil kutular */
.ks3-il-rozet{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;width:58px;height:56px;border-radius:5px;background:var(--k3-yesil);
	color:#fff;box-shadow:0 10px 24px rgba(31,163,74,.25)}
.ks3-il-rozet--kilit{top:116px;right:10px;font-size:26px}
.ks3-il-rozet--g{top:182px;right:44px;font-size:30px;font-weight:800;font-family:Arial,Helvetica,sans-serif}

/* ═══════════════════════════════════════════════════ sertifika listesi */
.ks3-liste{background-color:var(--k3-koyu);padding:0 0 72px}

/* sekme şeridi: üst yarısı tanıtımın, alt yarısı listenin renginde */
.ks3-sekme-serit{background:linear-gradient(to bottom,var(--k3-acik) calc(100% - 24px),transparent calc(100% - 24px));padding-top:30px}
.ks3-sekmeler{display:flex;border-radius:var(--k3-radius);background:#fff;box-shadow:0 6px 20px rgba(17,19,24,.07)}
.ks3-sekme{position:relative;flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 12px;
	border:0;border-left:1px solid #EBECEF;border-radius:0;background:transparent;color:var(--k3-yazi);font-family:inherit;font-size:14px;line-height:1.2;
	white-space:nowrap;cursor:pointer;transition:background-color .15s}
.ks3-sekme:first-child{border-left:0}
.ks3-sekme:hover{background:#FAFAFB}
.ks3-sekme b{font-weight:700}
.ks3-sekme-not{color:#4B5160;font-weight:400}
.ks3-sekme-ikon{display:inline-flex;color:#3A3F4B;font-size:15px}
.ks3-sekme-ikon svg{width:15px;height:15px;fill:currentColor}
.ks3-sekme[aria-selected="true"]{margin-top:-6px;min-height:54px;border-left-color:transparent;border-radius:var(--k3-radius) var(--k3-radius) 0 0;
	box-shadow:inset 0 5px 0 var(--k3-turuncu);background:#fff;font-weight:600}
.ks3-sekme[aria-selected="true"] + .ks3-sekme{border-left-color:transparent}
.ks3-sekme-rozet{position:absolute;top:-26px;left:50%;transform:translateX(-50%);padding:3px 12px;border-radius:3px 3px 0 0;background:var(--k3-turuncu);
	color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em}

/* gruplar */
.ks3-grup{padding-top:44px}
.ks3-grup[hidden]{display:none}
.ks3-grup-baslik{color:#fff;font-size:22px;font-weight:700;line-height:1.3}
.ks3-grup-baslik span{font-size:15px;font-weight:400}
.ks3-grup-ack{margin-top:14px!important;color:#E9EAEE;font-size:15.5px;line-height:1.7}

.ks3-tablo{margin-top:28px}
.ks3-tablo-bas,.ks3-satir{display:grid;grid-template-columns:var(--k3-sutun);align-items:center}
/* satırın kenarlığı + iç boşluğu kadar (sol 14, sağ 8): sütunlar hizalı kalsın */
.ks3-tablo-bas{margin-bottom:14px;padding:0 8px 0 14px}
.ks3-tablo-bas span{padding:3px 8px;border-top:1px solid #DADCE1;border-bottom:1px solid #DADCE1;background:#fff;color:#2A2E37;font-size:12.5px;white-space:nowrap}
.ks3-tablo-bas span:nth-child(1){grid-column:3;border-left:1px solid #DADCE1}
.ks3-tablo-bas span:nth-child(3){border-right:1px solid #DADCE1}

.ks3-satir{position:relative;min-height:64px;margin-bottom:8px;padding:6px 6px 6px 12px;border:2px solid transparent;border-radius:var(--k3-radius);background:var(--k3-satir)}
.ks3-satir--one{border:3px solid var(--k3-turuncu);padding:5px 5px 5px 11px}
.ks3-satir-rozet{position:absolute;top:50%;left:-14px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:24px;height:58px;
	border-radius:4px;background:var(--k3-turuncu);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.02em;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg)}
.ks3-logo{display:flex;align-items:center;min-height:40px;padding-right:12px}
.ks3-logo img{display:block;max-width:118px;max-height:34px;width:auto;height:auto}
.ks3-logo-yazi{display:inline-flex;align-items:center;gap:7px;color:var(--k3-yazi);font-size:16px;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.ks3-logo-yazi i{color:var(--k3-yesil);font-size:18px}
.ks3-ad{padding-right:10px;color:var(--k3-yazi);font-size:14px;font-weight:700;line-height:1.35}
.ks3-h{padding:0 8px;color:#23262E;font-size:15px}
.ks3-h[data-etiket]::before{content:none}
.ks3-ekle{display:inline-flex;align-items:center;gap:6px;padding:9px 10px;border:1px solid var(--k3-yesil);border-radius:3px;background:#fff;
	color:var(--k3-yesil);font-size:12px;line-height:1.2;text-decoration:none;white-space:nowrap;transition:background-color .15s,color .15s}
.ks3-ekle:hover{background:var(--k3-yesil);color:#fff}
.ks3-ekle::before{content:"+";display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border:1px solid currentColor;border-radius:50%;font-size:12px;line-height:1}
.ks3-al{display:flex;align-items:center;justify-content:flex-end;gap:14px;align-self:stretch;margin:-6px -6px -6px 0;padding:6px 10px 6px 16px;border-radius:0 2px 2px 0;background:var(--k3-panel)}
.ks3-satir--one .ks3-al{margin:-5px -5px -5px 0}
.ks3-fiyat{display:flex;align-items:baseline;gap:4px;margin-right:auto;margin-left:auto;white-space:nowrap}
.ks3-tutar{color:var(--k3-yazi);font-size:17px;font-weight:700;letter-spacing:-.01em}
.ks3-donem{color:#3A3F4B;font-size:11px}
.ks3-sepet{display:inline-flex;align-items:center;justify-content:center;min-width:103px;padding:9px 14px;border-radius:3px;background:var(--k3-turuncu);
	color:#fff;font-size:13px;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;transition:filter .15s}
.ks3-sepet:hover{filter:brightness(1.07);color:#fff}
.ks3-dipnot{margin-top:22px!important;color:#AEB3BF;font-size:13px}

/* sekme yok ya da betik yüklenmedi: bütün gruplar alt alta */
.ks3-liste:not(.ks3-hazir) .ks3-grup[hidden]{display:block}

/* ═══════════════════════════════════════════ alt bölümler turuncu tema
   Karşılaştırma, adımlar ve SSS widget'larının (ksb-ssl2-*) Gelişmiş >
   CSS sınıfları alanına ks2-tema-turuncu yazılınca bu sayfanın
   renklerine uyar. */
.ks2-tema-turuncu .ks2{--k2-yesil:#F39C12;--k2-yesil-koyu:#C96F06;--k2-yesil-acik:#FDF1DF;--k2-cta:#F39C12;--k2-lacivert:#171A21;--k2-zemin:#F2F2F4}

/* ═══════════════════════════════════════════════════════ dar ekran */
@media (max-width:1199px){
	.ks3{--k3-sutun:130px minmax(0,1fr) 140px 100px 90px 260px}
	.ks3-sekme{font-size:13px;padding:10px 8px}
}
@media (max-width:991px){
	.ks3-hero-ic{grid-template-columns:1fr;gap:28px}
	.ks3-il{margin:0 auto;width:100%}
	.ks3-sekmeler{overflow-x:auto;scrollbar-width:none}
	.ks3-sekme{flex:0 0 auto;padding:10px 16px}
	.ks3-sekme[aria-selected="true"]{margin-top:0;min-height:48px}
	.ks3-sekme-rozet{display:none}
	.ks3-sekme-serit{padding-top:0}

	.ks3-tablo-bas{display:none}
	.ks3-satir{grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;padding:16px 16px 0}
	.ks3-satir--one{padding:15px 15px 0}
	.ks3-satir-rozet{top:-2px;left:16px;width:auto;height:auto;padding:2px 8px;writing-mode:horizontal-tb;transform:translateY(-50%)}
	.ks3-logo{grid-column:1;min-height:0}
	.ks3-ad{grid-column:1/-1;font-size:15px}
	.ks3-h{display:flex;justify-content:space-between;grid-column:1/-1;padding:6px 0 0;border-top:1px dashed var(--k3-cizgi);font-size:14px}
	.ks3-h[data-etiket]::before{content:attr(data-etiket);color:var(--k3-sus)}
	.ks3-al{grid-column:1/-1;margin:6px -16px 0;padding:12px 16px;border-radius:0 0 2px 2px}
	.ks3-satir--one .ks3-al{margin:6px -15px 0}
	.ks3-fiyat{margin-left:0}
}
@media (max-width:767px){
	.ks3-ic{padding:0 20px}
	.ks3-hero{padding:40px 0 36px}
	.ks3-h1{font-size:32px}
	.ks3-alt{font-size:20px}
	.ks3-ack{margin-top:18px!important;font-size:15.5px}
	.ks3-il{height:280px;transform:scale(.86);transform-origin:top center;margin-bottom:-40px}
	.ks3-il-pencere{right:8px}
	.ks3-il-fiyat{left:0}
	.ks3-il-rozet--kilit{right:-18px}
	.ks3-il-rozet--g{right:14px}
	.ks3-grup{padding-top:34px}
	.ks3-grup-baslik{font-size:19px}
}
@media (max-width:420px){
	.ks3-il{transform:scale(.7);margin-bottom:-90px;left:50%;width:480px;margin-left:-240px}
}