/* ===== GetYourSSL — V2 global skin =====
   Kaynak: EN index.html (design reference).
   site.css EN SON yüklendiği için :root ve body kuralları
   tüm sayfalardaki inline <style> bloklarını override eder.
   ============================================================= */

/* --- V2 design tokens — EN index.html ile birebir aynı ------- */
:root{
  /* Trust / Blue palette */
  --trust:#0369A1;--trust-deep:#075985;--trust-ink:#0C4A6E;--sky:#0EA5E9;
  /* Secure / Green palette */
  --secure:#16A34A;--secure-deep:#15803D;
  /* Accent */
  --amber:#F59E0B;
  /* Typography */
  --ink:#0F172A;--body:#334155;--muted:#64748B;--ink-soft:#64748B;
  /* Surfaces */
  --line:#E2E8F0;--bg:#F0F9FF;--bg-2:#F8FAFC;--card:#FFFFFF;--soft:#F8FAFC;--navy:#0B1F33;
  /* Shape */
  --radius:16px;--radius-sm:10px;
  /* Shadow */
  --shadow-sm:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.08);
  --shadow:0 4px 6px rgba(15,23,42,.08),0 10px 25px rgba(2,32,71,.06);
  --shadow-lg:0 18px 40px rgba(2,32,71,.14);
  /* Aliases for old pages using --brand, --cta */
  --brand:#16A34A;--brand-dark:#15803D;--brand-soft:#DCFCE7;
  --cta:#16A34A;--cta-dark:#15803D;
  /* Misc */
  --ring:0 0 0 3px rgba(14,165,233,.45);
  --t:200ms cubic-bezier(.2,.7,.3,1);
  --maxw:1180px;
}

/* --- Reset & base — EN index.html ile birebir aynı ----------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Source Sans 3',system-ui,sans-serif;color:var(--body);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{font-family:'Lexend',sans-serif;color:var(--ink);line-height:1.2;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
img,svg{display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.sans{font-family:'Source Sans 3',system-ui,sans-serif}

/* --- Buttons — EN index.html ile aynı ------------------------ */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:'Lexend',sans-serif;font-weight:600;font-size:1rem;padding:.85rem 1.4rem;border-radius:12px;cursor:pointer;border:1px solid transparent;transition:transform var(--t),box-shadow var(--t),background var(--t),color var(--t);min-height:48px;line-height:1.1;text-align:center;text-decoration:none}
.btn-primary{background:linear-gradient(180deg,var(--secure) 0%,var(--secure-deep) 100%);color:#fff;box-shadow:0 6px 16px rgba(22,163,74,.32)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(22,163,74,.4)}
.btn-secondary{background:#fff;color:var(--trust-deep);border-color:var(--line);box-shadow:var(--shadow-sm)}
.btn-secondary:hover{transform:translateY(-2px);border-color:var(--sky);box-shadow:var(--shadow)}
.btn-ghost{background:transparent;color:var(--trust-deep);border-color:rgba(3,105,161,.25)}
.btn-ghost:hover{background:rgba(3,105,161,.06)}
.btn-block{width:100%;justify-content:center}

/* --- Eyebrow — EN index.html ile aynı ------------------------ */
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;background:rgba(3,105,161,.08);color:var(--trust-deep);font-family:'Lexend',sans-serif;font-weight:700;font-size:.82rem;padding:.4rem .8rem;border-radius:999px;border:1px solid rgba(3,105,161,.15);margin-bottom:16px;letter-spacing:.04em;text-transform:uppercase}

/* --- Section spacing — EN index.html ile aynı ---------------- */
section{position:relative}
.sec{padding:80px 0;border-top:1px solid var(--line)}
.sec-head{text-align:center;max-width:46rem;margin:0 auto 48px}
.sec-tag{font-family:'Lexend',sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sky);margin-bottom:12px}
.sec-head h2{font-size:clamp(1.8rem,3.4vw,2.5rem);font-weight:800;margin-bottom:12px}
.sec-head p{font-size:1.08rem;color:var(--body)}

/* --- Card defaults — EN index.html ile aynı ------------------ */
.card,.cert,.pcard,.tool-card,.blog-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.card:hover,.cert:hover,.pcard:hover,.tool-card:hover,.blog-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(14,165,233,.35)}

/* --- FAQ — tüm ürün sayfaları -------------------------------- */
section:has(.faq){padding-top:36px}
.faq{max-width:780px;margin:0 auto;display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);overflow:hidden;transition:border-color var(--t)}
.faq details[open]{border-color:rgba(14,165,233,.4)}
.faq summary{cursor:pointer;padding:16px 20px;font-family:'Lexend',sans-serif;font-weight:600;color:var(--ink);font-size:1rem;display:flex;justify-content:space-between;gap:1rem;align-items:center;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{flex:none;transition:transform var(--t);color:var(--sky)}
.faq summary .chev svg{width:20px;height:20px}
.faq details[open] summary .chev{transform:rotate(180deg)}
.faq .ans{padding:0 20px 18px;color:var(--body);font-size:.96rem}
.qa summary .chev{display:none}
.faq-section summary .chev{display:none}
.faq-section details{padding:18px 0;border-bottom:1px solid var(--line)}
.faq-section details summary{cursor:pointer;font-weight:600;font-size:16px;color:var(--ink);outline:none;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq-section details summary::-webkit-details-marker{display:none}
.faq-section details summary::after{content:"+";font-size:22px;color:var(--brand);font-weight:400}
.faq-section details[open] summary::after{content:"−"}
.faq-section details .ans{margin-top:12px;font-size:15px;color:#2d3748;line-height:1.65}

/* --- Breadcrumb ------------------------------------------------ */
.crumb{font-family:'Source Sans 3',sans-serif;font-size:.88rem;color:var(--muted);padding:14px 0}
.crumb a{color:var(--trust-deep)}
.crumb a:hover{color:var(--sky)}

/* --- Focus ring ------------------------------------------------ */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px}

/* --- Nav / Header — EN index.html ile aynı ------------------- */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:1rem;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.brand{display:flex;align-items:center;gap:.6rem;font-family:'Lexend',sans-serif;font-weight:800;font-size:1.25rem;color:var(--ink);letter-spacing:-.03em;text-decoration:none}
.brand .logo{width:38px;height:38px;display:grid;place-items:center;background:linear-gradient(145deg,var(--trust),var(--sky));border-radius:11px;box-shadow:0 6px 14px rgba(3,105,161,.3);flex:none}
.brand .logo svg{width:22px;height:22px}
.brand span b{color:var(--trust-deep)}
.nav-links{display:flex;align-items:center;gap:1.5rem;list-style:none;margin:0;padding:0}
.nav-links a{font-family:'Source Sans 3',system-ui,sans-serif;font-weight:600;color:var(--body);font-size:.96rem;padding:.3rem 0;position:relative;text-decoration:none}
.nav-links a:hover{color:var(--trust-deep)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--sky);transition:width var(--t)}
.nav-links a:hover::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:.75rem}
.lang{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;font-family:'Lexend',sans-serif;font-weight:600;font-size:.82rem}
.lang a{padding:.45rem .65rem;color:var(--muted);min-height:auto;text-decoration:none;line-height:1}
.lang a.active{background:var(--trust);color:#fff}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:10px;width:46px;height:46px;cursor:pointer;color:var(--ink);padding:0}
.burger svg{width:22px;height:22px;margin:auto;display:block}

/* CTA button in header — gradient, Lexend */
header .btn-primary,header a.btn-primary{display:inline-flex;align-items:center;gap:.4rem;font-family:'Lexend',sans-serif;font-weight:600;font-size:.95rem;padding:.75rem 1.25rem;border-radius:12px;cursor:pointer;border:none;background:linear-gradient(180deg,var(--secure) 0%,var(--secure-deep) 100%);color:#fff;box-shadow:0 6px 16px rgba(22,163,74,.32);text-decoration:none;line-height:1.1;white-space:nowrap;min-height:auto}
header .btn-primary:hover,header a.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(22,163,74,.4)}

/* --- Footer — EN index.html ile aynı ------------------------- */
footer{background:var(--navy);color:#9fb6cd;padding:54px 0 26px}
footer .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:32px;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.1)}
footer .brand{color:#fff;margin-bottom:14px}
footer .brand span b{color:var(--sky)}
.foot-about p{font-size:.92rem;max-width:24rem;color:#8aa4bd;line-height:1.6}
.foot-disc{font-size:.82rem;color:#7e98b1;margin-top:14px;max-width:26rem}
.foot-col h5{color:#fff;font-weight:600;font-size:.95rem;margin-bottom:14px;font-family:'Lexend',sans-serif}
.foot-col ul{list-style:none;display:grid;gap:9px;padding:0;margin:0}
.foot-col a{font-size:.92rem;color:#9fb6cd;text-decoration:none}
.foot-col a:hover{color:var(--sky)}
.foot-bottom{padding-top:22px;font-size:.85rem;color:#7e98b1;text-align:center}

/* --- Persona cards (WHO IS IT FOR) ---------------------------- */
.personas{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.persona{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;text-align:center;box-shadow:var(--shadow-sm);transition:transform var(--t),box-shadow var(--t)}
.persona:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.persona .pic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin:0 auto 12px;background:linear-gradient(145deg,rgba(3,105,161,.1),rgba(14,165,233,.12))}
.persona .pic svg{width:24px;height:24px;color:var(--trust)}
.persona h4{font-size:1rem;margin-bottom:4px}
.persona p{font-size:.88rem;color:var(--muted)}

/* --- Why-choose fgrid (V2 cert pages) ------------------------- */
.fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:8px}
.fitem{display:flex;gap:.6rem;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow-sm)}
.fitem svg{width:20px;height:20px;color:var(--secure);flex:none;margin-top:2px}
.fitem span{font-size:.95rem;color:var(--body)}

/* --- Business impact 3-col (V2 cert pages) ------------------- */
.impact{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:28px;max-width:820px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.impact .ii{display:flex;flex-direction:column;gap:8px}
.impact .ii .h{display:flex;align-items:center;gap:.5rem;font-family:'Lexend';font-weight:700;color:var(--ink)}
.impact .ii .h svg{width:22px;height:22px;color:var(--secure)}
.impact .ii p{font-size:.92rem;color:var(--body)}

/* --- CTA Band ------------------------------------------------- */
.cta-band{padding:64px 0}
.cta-inner{background:linear-gradient(135deg,var(--trust-ink) 0%,var(--trust) 55%,var(--sky) 130%);border-radius:26px;padding:50px 40px;text-align:center;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow-lg)}
.cta-inner::after{content:"";position:absolute;inset:0;background:radial-gradient(500px 280px at 80% 120%,rgba(22,163,74,.4),transparent 60%);pointer-events:none}
.cta-inner h2{color:#fff;font-size:clamp(1.6rem,3.2vw,2.3rem);margin-bottom:12px;position:relative}
.cta-inner p{color:#dbeefc;font-size:1.08rem;max-width:38rem;margin:0 auto 24px;position:relative}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}
.cta-inner .btn-secondary{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3)}
.cta-inner .btn-secondary:hover{background:rgba(255,255,255,.2)}
.cta-actions .btn{width:auto;padding:.85rem 1.75rem;font-size:1rem;border:1px solid transparent}
.cta-actions .btn-primary{background:linear-gradient(180deg,var(--secure) 0%,var(--secure-deep) 100%);color:#fff;box-shadow:0 6px 16px rgba(22,163,74,.32)}
.cta-actions .btn-secondary{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3)}

/* --- Cert hero visual card (affiliate-linked) ----------------- */
.chero{display:flex;flex-direction:column;text-decoration:none;margin-top:26px;border-radius:20px;overflow:hidden;box-shadow:0 12px 48px rgba(3,105,161,.28);transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s cubic-bezier(.2,.7,.3,1)}
.chero:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(3,105,161,.42)}
.chero-bar{background:#0f172a;padding:9px 14px;display:flex;align-items:center;gap:9px;flex-shrink:0}
.chero-dots{display:flex;gap:5px}
.chero-dots span{width:9px;height:9px;border-radius:50%}
.chero-dots .d1{background:#ef4444}.chero-dots .d2{background:#f59e0b}.chero-dots .d3{background:#22c55e}
.chero-addr{flex:1;background:#1e293b;border-radius:6px;padding:4px 10px;display:flex;align-items:center;gap:6px}
.chero-addr svg{width:12px;height:12px;color:#4ade80;flex:none}
.chero-addr span{font-family:monospace;font-size:.73rem;color:#94a3b8}
.chero-addr span b{color:#4ade80;font-style:normal;font-family:'Lexend',sans-serif}
.chero-body{flex:1;display:flex;flex-direction:column;background:linear-gradient(155deg,#071e38 0%,#0a3260 40%,#0d5fa0 75%,#0ea5e9 100%);padding:22px 22px 18px;gap:16px;position:relative;overflow:hidden}
.chero-body::before{content:"";position:absolute;top:-80px;right:-80px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(14,165,233,.18) 0%,transparent 70%);pointer-events:none}
.chero-body::after{content:"";position:absolute;bottom:-60px;left:-40px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(22,163,74,.12) 0%,transparent 70%);pointer-events:none}
.chero-top-row{display:flex;align-items:center;gap:16px;position:relative;z-index:1}
.chero-grade{display:flex;flex-direction:column;align-items:center;justify-content:center;width:64px;height:64px;border-radius:16px;background:linear-gradient(145deg,#16a34a,#15803d);box-shadow:0 4px 20px rgba(22,163,74,.5);flex-shrink:0}
.chero-grade .g-letter{font-family:'Lexend',sans-serif;font-weight:800;font-size:1.8rem;color:#fff;line-height:1}
.chero-grade .g-plus{font-family:'Lexend',sans-serif;font-weight:700;font-size:.8rem;color:rgba(255,255,255,.85);margin-top:-2px}
.chero-meta .cm-title{font-family:'Lexend',sans-serif;font-weight:700;font-size:1rem;color:#fff;line-height:1.2}
.chero-meta .cm-sub{font-size:.78rem;color:rgba(255,255,255,.6)}
.chero-lock{position:absolute;right:18px;top:18px;z-index:1;opacity:.18}
.chero-lock svg{width:72px;height:72px;color:#fff}
.chero-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:relative;z-index:1}
.chero-metric{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:10px 12px}
.chero-metric .m-lbl{font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45);font-family:'Lexend',sans-serif;font-weight:600;margin-bottom:4px}
.chero-metric .m-val{font-family:'Lexend',sans-serif;font-weight:700;font-size:.9rem;color:#fff}
.chero-metric .m-bar{height:4px;border-radius:2px;background:rgba(255,255,255,.15);margin-top:6px;overflow:hidden}
.chero-metric .m-bar span{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,#22c55e,#4ade80)}
.chero-trust{display:flex;align-items:center;gap:8px;flex-wrap:wrap;position:relative;z-index:1}
.chero-trust .ct{display:flex;align-items:center;gap:5px;font-size:.75rem;font-family:'Lexend',sans-serif;font-weight:600;color:rgba(255,255,255,.75)}
.chero-trust .ct svg{width:13px;height:13px;color:#4ade80;flex:none}
.chero-trust .ct-div{width:1px;height:12px;background:rgba(255,255,255,.2)}
.chero-cta{display:inline-flex;align-items:center;gap:.45rem;background:linear-gradient(135deg,rgba(22,163,74,.7),rgba(21,128,61,.8));color:#fff;font-family:'Lexend',sans-serif;font-weight:700;font-size:.82rem;padding:.55rem 1.2rem;border-radius:999px;border:1px solid rgba(255,255,255,.2);align-self:flex-start;position:relative;z-index:1;transition:background .15s,box-shadow .15s}
.chero:hover .chero-cta{background:linear-gradient(135deg,rgba(22,163,74,.9),rgba(21,128,61,1));box-shadow:0 4px 16px rgba(22,163,74,.4)}
.chero-cta svg{width:13px;height:13px;flex:none}
/* phero-grid stretch for balanced columns */
.phero-grid{align-items:stretch}
.phero-grid>.reveal:first-child{display:flex;flex-direction:column}
.phero-grid .chero{flex:1;display:flex;flex-direction:column}
.phero-grid .chero-body{flex:1}
/* hero-grid chero placement */
.hero-grid .chero{margin-top:20px}

/* --- Reveal animation ----------------------------------------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

/* --- Responsive ----------------------------------------------- */
@media(max-width:680px){
  .nav-links,.nav-cta .lang,.nav-cta .btn-primary,.nav-cta .btn{display:none}
  .burger{display:grid}
  .mobile-open .nav-links{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;background:#fff;padding:18px 24px;gap:1rem;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
}
@media(max-width:980px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.personas{grid-template-columns:repeat(2,1fr)}.impact{grid-template-columns:1fr}}
@media(max-width:680px){.foot-grid{grid-template-columns:1fr}.personas{grid-template-columns:1fr}.fgrid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ===== Blog / Article Detail Pages ===========================
   ALL blog pages load site.css last → these rules override
   the inline max-width:720px and plain-white hero.
   ============================================================ */

/* 1 — Wider reading column */
.article-wrap{max-width:900px}

/* 2 — Breadcrumb wrapper — same width as nav (1180px), not article (900px) */
.article-wrap:has(>.crumb){
  max-width:var(--maxw)
}
.crumb{
  font-family:'Source Sans 3',system-ui,sans-serif;
  font-size:.88rem;
  color:var(--muted);
  padding:16px 0 0
}
.crumb a{color:var(--trust-deep);text-decoration:none}
.crumb a:hover{color:var(--sky)}

/* 3a — Article header must NOT be sticky (site.css header{sticky} applies to all <header>s) */
article>header{position:static!important;z-index:auto!important;backdrop-filter:none!important}

/* 3 — Hero section: full-viewport-width gradient strip
   .article-header also has .article-wrap (max-width:900px from rule 1).
   We break it out to full width, then re-pad so content stays ~860px wide.
   calc(50vw − 450px) centres a 900px content block inside any viewport. */
article>header.article-header{
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:max(24px,calc(50vw - 450px))!important;
  padding-right:max(24px,calc(50vw - 450px))!important;
  padding-top:44px!important;
  padding-bottom:40px!important;
  background:linear-gradient(135deg,#EFF6FF 0%,#E0F2FE 60%,#F0F9FF 100%)!important;
  border-bottom:1px solid var(--line)!important;
}

/* 4 — Body text: Source Sans 3 (homepage match); headings: Lexend */
.article-body{font-family:'Source Sans 3',system-ui,sans-serif;font-size:1.05rem;line-height:1.75;color:var(--body)}
.article-body h2,.article-body h3,.article-body h4{font-family:'Lexend',sans-serif;color:var(--ink)}
h1.title{font-family:'Lexend',sans-serif;letter-spacing:-.03em;color:var(--ink)}
.excerpt{font-family:'Source Sans 3',system-ui,sans-serif;font-style:normal;color:var(--body)}

/* 5 — Nav height fix: old template had height:62px — site.css wins via higher specificity */
header .wrap.nav,header .wrap{height:72px}

/* 6 — Blog responsive: on small screens hero padding collapses naturally */
@media(max-width:640px){
  article>header.article-header{padding-left:20px!important;padding-right:20px!important;padding-top:32px!important}
  .article-wrap{padding:0 20px}
  h1.title{font-size:clamp(1.8rem,6vw,2.8rem)!important}
}