/* ===================================================================
   Shaz Vision — shared sub-page styles
   Used by hakkimizda / surec / blog / iletisim / terms-privacy.
   The pages inherit the dark .bg-grid .patch-ai shell from the main
   site, so type here is light-on-dark.
   =================================================================== */

:root{
  --sv-purple:#8D7CDA;
  --sv-cyan:#52CAD8;
  --sv-green:#9FE870;
  --sv-coral:#FF9481;
  --sv-pink:#FF89C4;
  --sv-ink:#040404;
  --sv-text:#e8e8ea;
  --sv-muted:#9a9aa4;
  --sv-display:"Bricolage Grotesque","Plus Jakarta Sans",system-ui,sans-serif;
  --sv-ui:"Plus Jakarta Sans",system-ui,sans-serif;
  --sv-grad:linear-gradient(104deg,#8D7CDA,#52CAD8,#9FE870,#FF9481,#FF89C4);
  --sv-cta:linear-gradient(104deg,#FF89C4,#FF9481);
}

html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  background:var(--sv-ink);
  color:var(--sv-text);
  font-family:var(--sv-ui);
  margin:0;
}

/* --- top bar --- */
.sv-topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;gap:1.6rem;
  padding:1.4rem 5vw;
  background:rgba(4,4,4,.82);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(244,244,244,.10);
}
.sv-topbar .brand{
  font-family:var(--sv-display);
  font-weight:800;font-size:1.6rem;letter-spacing:.05em;
  text-decoration:none;
  background:var(--sv-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sv-topbar nav{display:flex;align-items:center;gap:2.2rem}
.sv-topbar nav a{
  font-family:var(--sv-ui);font-weight:600;font-size:1.4rem;
  color:var(--sv-muted);text-decoration:none;transition:color .2s ease;
}
.sv-topbar nav a:hover,.sv-topbar nav a[aria-current="page"]{color:#fff}
.sv-topbar .cta{
  font-family:var(--sv-ui);font-weight:700;font-size:1.35rem;letter-spacing:.02em;
  color:#fff;text-decoration:none;
  background:var(--sv-cta);
  padding:1rem 1.8rem;border-radius:.6rem;
  white-space:nowrap;
  transition:transform .2s ease,filter .2s ease;
}
.sv-topbar .cta:hover{transform:translateY(-1px);filter:brightness(1.06)}
@media (max-width:760px){
  .sv-topbar nav{display:none}
}

/* --- page shell --- */
.sv-page{
  min-height:70vh;
  padding:12rem 5vw 6rem;
  max-width:104rem;margin:0 auto;
  position:relative;z-index:1;
}
.sv-page a.back{
  display:inline-flex;align-items:center;gap:.6rem;
  margin-bottom:3rem;
  font-family:var(--sv-ui);font-weight:600;font-size:1.4rem;
  color:var(--sv-coral);text-decoration:none;
}
.sv-page a.back:hover{text-decoration:underline}
.sv-page h1{
  font-family:var(--sv-display);font-weight:800;
  font-size:clamp(3.4rem,7vw,6.8rem);
  line-height:.98;letter-spacing:-.03em;
  margin:0 0 1.6rem;
  background:var(--sv-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sv-page .lede{
  font-size:1.9rem;line-height:1.5;color:var(--sv-text);
  max-width:62rem;margin:0 0 3.2rem;
}
.sv-page h2{
  font-family:var(--sv-display);font-weight:800;
  font-size:clamp(2.2rem,3vw,2.8rem);letter-spacing:-.02em;
  margin:4rem 0 1.2rem;color:#fff;
}
.sv-page h3{
  font-family:var(--sv-display);font-weight:800;
  font-size:1.9rem;letter-spacing:-.01em;margin:0 0 .6rem;color:#fff;
}
.sv-page p,.sv-page li{
  font-family:var(--sv-ui);
  font-size:1.6rem;line-height:1.65;color:var(--sv-muted);
  margin:0 0 1.2rem;
}
.sv-page strong{color:var(--sv-text);font-weight:700}
.sv-page ul{padding-left:2rem;margin:0 0 2rem}
.sv-page li{margin-bottom:.6rem}
.sv-page a:not(.back):not(.cta):not(.sv-card){color:var(--sv-cyan)}

/* --- cards --- */
.sv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(28rem,1fr));gap:1.6rem}
.sv-card{
  display:block;
  border:1px solid rgba(141,124,218,.45);
  border-radius:1rem;
  padding:2.2rem;
  margin:0 0 1.6rem;
  background:rgba(255,255,255,.035);
  text-decoration:none;
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
a.sv-card:hover{
  border-color:var(--sv-cyan);
  background:rgba(255,255,255,.06);
  transform:translateY(-2px);
}
.sv-card .tag{
  display:inline-block;
  font-family:var(--sv-ui);
  font-size:1.15rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sv-cyan);margin-bottom:1rem;
}
.sv-card p{margin:0;font-size:1.5rem}
.sv-card .meta{font-size:1.25rem;color:#6f6f78;margin-top:1.2rem}

/* --- numbered steps --- */
.sv-step{display:flex;gap:1.8rem;align-items:flex-start;margin:0 0 2.4rem}
.sv-step .num{
  flex:0 0 4.8rem;height:4.8rem;border-radius:.9rem;
  background:var(--sv-grad);color:#fff;
  font-family:var(--sv-display);font-weight:800;font-size:1.7rem;
  display:flex;align-items:center;justify-content:center;
}
.sv-step h2{margin-top:0}

/* --- forms --- */
.sv-form{display:grid;gap:1.6rem;max-width:56rem;margin:0 0 2rem}
.sv-field{display:grid;gap:.6rem}
.sv-field label{
  font-family:var(--sv-ui);font-size:1.3rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--sv-muted);
}
.sv-field input,.sv-field textarea{
  font-family:var(--sv-ui);font-size:1.6rem;
  padding:1.3rem 1.5rem;
  border:1px solid rgba(141,124,218,.5);
  border-radius:.6rem;
  background:rgba(255,255,255,.04);
  color:#fff;
  transition:border-color .2s ease,background .2s ease;
  box-sizing:border-box;
  width:100%;
}
.sv-field textarea{min-height:14rem;resize:vertical}
.sv-field input::placeholder,.sv-field textarea::placeholder{color:#6f6f78}
.sv-field input:focus,.sv-field textarea:focus{
  outline:none;border-color:var(--sv-cyan);background:rgba(255,255,255,.07);
}
.sv-field input:-webkit-autofill,
.sv-field input:-webkit-autofill:hover,
.sv-field input:-webkit-autofill:focus,
.sv-field textarea:-webkit-autofill,
.sv-field textarea:-webkit-autofill:hover,
.sv-field textarea:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff!important;
  -webkit-box-shadow:0 0 0 1000px #0e0e14 inset!important;
  box-shadow:0 0 0 1000px #0e0e14 inset!important;
  transition:background-color 5000s ease-in-out 0s;
}
.sv-btn{
  justify-self:start;
  font-family:var(--sv-ui);font-weight:700;font-size:1.5rem;letter-spacing:.02em;
  color:#fff;background:var(--sv-cta);
  border:0;border-radius:.6rem;padding:1.4rem 2.6rem;cursor:pointer;
  transition:transform .2s ease,filter .2s ease;
}
.sv-btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.sv-formNote{font-size:1.35rem;color:var(--sv-muted);margin:0}

/* --- footer --- */
.sv-footer{
  padding:3rem 5vw 4rem;text-align:center;
  font-family:var(--sv-ui);font-size:1.3rem;color:#6f6f78;
  border-top:1px solid rgba(244,244,244,.08);
}
.sv-footer a{color:var(--sv-purple);margin:0 1rem;text-decoration:none}
.sv-footer a:hover{text-decoration:underline}

/* --- blog article styles --- */
.sv-article{
  max-width:86rem;margin:0 auto;padding:12rem 5vw 6rem;
  font-family:var(--sv-ui);position:relative;z-index:1;
}
.sv-article-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem;
  margin-bottom:2rem;font-size:1.35rem;color:var(--sv-muted);
}
.sv-article-meta .tag{
  background:rgba(82,202,216,.12);color:var(--sv-cyan);
  padding:.4rem 1rem;border-radius:.4rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;font-size:1.15rem;
}
.sv-article h1{
  font-family:var(--sv-display);font-weight:800;
  font-size:clamp(3rem,5vw,5rem);line-height:1.12;letter-spacing:-.03em;
  margin:0 0 2rem;
  background:var(--sv-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.sv-article-intro{
  font-size:2rem;line-height:1.6;color:var(--sv-text);
  margin-bottom:3.2rem;border-left:3px solid var(--sv-purple);
  padding-left:1.8rem;background:rgba(141,124,218,.05);
  padding-top:1rem;padding-bottom:1rem;border-radius:0 .6rem .6rem 0;
}
.sv-toc{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(141,124,218,.35);
  border-radius:1rem;padding:2rem 2.4rem;margin:3rem 0 4rem;
}
.sv-toc-title{
  font-family:var(--sv-display);font-weight:700;font-size:1.6rem;
  color:#fff;margin-bottom:1.2rem;display:flex;align-items:center;gap:.8rem;
}
.sv-toc ol{margin:0;padding-left:2.2rem}
.sv-toc li{margin-bottom:.7rem;font-size:1.45rem}
.sv-toc a{color:var(--sv-muted);text-decoration:none;transition:color .2s}
.sv-toc a:hover{color:var(--sv-cyan);text-decoration:underline}

.sv-content h2{
  font-family:var(--sv-display);font-weight:800;
  font-size:clamp(2.4rem,3.5vw,3.2rem);letter-spacing:-.02em;
  margin:4.5rem 0 1.6rem;color:#fff;
  padding-bottom:.8rem;border-bottom:1px solid rgba(255,255,255,.08);
}
.sv-content h3{
  font-family:var(--sv-display);font-weight:700;
  font-size:2.1rem;letter-spacing:-.01em;margin:3rem 0 1.2rem;color:var(--sv-cyan);
}
.sv-content p{
  font-size:1.65rem;line-height:1.78;color:var(--sv-muted);margin:0 0 1.8rem;
}
.sv-content strong{color:#fff;font-weight:700}
.sv-content ul,.sv-content ol{margin:0 0 2rem;padding-left:2.4rem}
.sv-content li{font-size:1.6rem;line-height:1.75;color:var(--sv-muted);margin-bottom:.8rem}
.sv-content a{color:var(--sv-cyan);text-decoration:underline;text-underline-offset:3px}
.sv-content a:hover{color:var(--sv-green)}

.sv-callout{
  border-radius:.8rem;padding:2rem 2.2rem;margin:2.8rem 0;
  background:rgba(255,255,255,.03);border:1px solid rgba(82,202,216,.35);
}
.sv-callout-title{
  font-weight:800;font-size:1.55rem;color:var(--sv-cyan);
  margin-bottom:.8rem;display:flex;align-items:center;gap:.6rem;
}
.sv-callout p:last-child{margin-bottom:0}

.sv-callout-alert{
  border-color:rgba(255,148,129,.4);
  background:rgba(255,148,129,.05);
}
.sv-callout-alert .sv-callout-title{color:var(--sv-coral)}

.sv-callout-success{
  border-color:rgba(159,232,112,.4);
  background:rgba(159,232,112,.05);
}
.sv-callout-success .sv-callout-title{color:var(--sv-green)}

.sv-code-block{
  background:#0d0d12;border:1px solid rgba(255,255,255,.12);
  border-radius:.8rem;padding:1.8rem 2rem;margin:2.4rem 0;
  overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:1.4rem;line-height:1.65;color:#c9d1d9;
}
.sv-code-block code{font-family:inherit}
.sv-code-badge{
  display:inline-block;font-size:1.15rem;font-weight:700;letter-spacing:.05em;
  color:#9a9aa4;margin-bottom:1rem;text-transform:uppercase;
}
.sv-inline-code{
  background:rgba(255,255,255,.08);padding:.2rem .6rem;
  border-radius:.4rem;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:1.4rem;color:#e8e8ea;
}

.sv-table-wrap{
  overflow-x:auto;margin:3rem 0;
  border:1px solid rgba(255,255,255,.1);border-radius:.8rem;
}
.sv-table{
  width:100%;border-collapse:collapse;text-align:left;font-size:1.45rem;
}
.sv-table th{
  background:rgba(255,255,255,.06);color:#fff;
  padding:1.4rem 1.6rem;font-weight:700;border-bottom:1px solid rgba(255,255,255,.12);
}
.sv-table td{
  padding:1.3rem 1.6rem;color:var(--sv-muted);
  border-bottom:1px solid rgba(255,255,255,.05);line-height:1.6;
}
.sv-table tr:hover td{background:rgba(255,255,255,.025)}
.sv-table tr:last-child td{border-bottom:none}

.sv-author-box{
  display:flex;align-items:center;gap:2rem;
  background:rgba(255,255,255,.03);border:1px solid rgba(141,124,218,.35);
  border-radius:1rem;padding:2.4rem;margin:5rem 0 3rem;
}
.sv-author-avatar{
  width:6.4rem;height:6.4rem;border-radius:50%;
  background:var(--sv-grad);display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:2.2rem;color:#fff;flex-shrink:0;
}
.sv-author-info h4{margin:0 0 .4rem;font-size:1.7rem;color:#fff}
.sv-author-info p{margin:0;font-size:1.4rem;color:var(--sv-muted);line-height:1.5}

.sv-faq-item{
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.08);
  border-radius:.8rem;padding:1.8rem 2.2rem;margin-bottom:1.4rem;
}
.sv-faq-item h3{margin:0 0 .8rem;font-size:1.75rem;color:#fff}
.sv-faq-item p{margin:0;font-size:1.55rem;color:var(--sv-muted);line-height:1.65}