/* ---------------------------------------------------------------
   Yazı tipleri — self-host. CSP (style-src/font-src 'self') harici
   CDN'e izin vermiyor; ayrıca ziyaretçi IP'si üçüncü tarafa gitmesin.
   Dosyalar: wwwroot/fonts/ (latin + latin-ext altkümeleri).
   --------------------------------------------------------------- */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/public-sans-400-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: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/public-sans-400-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;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/public-sans-500-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: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/public-sans-500-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;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/public-sans-600-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: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/public-sans-600-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;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/public-sans-700-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: 'Public Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/public-sans-700-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;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/schibsted-grotesk-500-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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/schibsted-grotesk-500-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;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/schibsted-grotesk-700-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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/schibsted-grotesk-700-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;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/schibsted-grotesk-800-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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/schibsted-grotesk-800-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;
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/spline-sans-mono-500-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: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/spline-sans-mono-500-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;
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/spline-sans-mono-600-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: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/spline-sans-mono-600-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;
}

/* ============================================================
   PoliçeSoft — tanıtım sayfası
   Palet: ürünün Okyanus temasıyla akraba (teal + lacivert, açık zemin)
   ============================================================ */

:root{
  --lacivert:#0f2942;      /* başlık, koyu bantlar (üründeki sidebar rengi) */
  --lacivert-2:#0b3a46;
  --teal:#0ea5a5;          /* birincil */
  --teal-koyu:#0b8686;
  --parlak:#22d3d3;        /* vurgu */
  --zemin:#f6f9fc;
  --kart:#ffffff;
  --cizgi:#e3eaf3;
  --metin:#19212f;
  --metin-2:#47536b;
  --soluk:#7b8798;
  --uyari:#f59e0b;
  --r:14px;
  --r-buyuk:22px;
  --golge:0 1px 2px rgba(15,41,66,.05),0 12px 32px -16px rgba(15,41,66,.14);
  --gecis:220ms cubic-bezier(.4,0,.2,1);
  --f-baslik:"Schibsted Grotesk",system-ui,sans-serif;
  --f-govde:"Public Sans",system-ui,sans-serif;
  --f-mono:"Spline Sans Mono",ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  font-family:var(--f-govde);color:var(--metin);background:var(--zemin);
  line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
ul{list-style:none}
code{font-family:var(--f-mono)}
.kap{max-width:1120px;margin-inline:auto;padding-inline:24px}
.kap-dar{max-width:820px}

h1,h2,h3,h4{font-family:var(--f-baslik);line-height:1.15;color:var(--lacivert);letter-spacing:-.01em}

:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:6px}

/* ---------- düğmeler ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f-baslik);font-weight:700;font-size:15px;
  padding:11px 22px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;
  transition:transform var(--gecis),box-shadow var(--gecis),background var(--gecis);
}
.btn-birincil{
  background:linear-gradient(135deg,var(--teal),var(--teal-koyu));color:#fff;
  box-shadow:0 8px 20px -8px rgba(14,165,165,.55);
}
.btn-birincil:hover{transform:translateY(-2px);box-shadow:0 12px 26px -8px rgba(14,165,165,.6)}
.btn-sade{background:#fff;color:var(--lacivert);border:1.5px solid var(--cizgi)}
.btn-sade:hover{border-color:var(--teal);color:var(--teal-koyu)}
.btn-buyuk{padding:14px 30px;font-size:16px}

/* ---------- üst bar ---------- */
.ust{
  position:sticky;top:0;z-index:50;
  background:rgba(246,249,252,.85);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color var(--gecis),box-shadow var(--gecis);
}
.ust.kaydi{border-color:var(--cizgi);box-shadow:0 4px 20px -12px rgba(15,41,66,.18)}
.ust-ic{display:flex;align-items:center;gap:32px;height:68px}
.marka{display:flex;align-items:center;gap:10px;text-decoration:none}
.marka-isaret{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--parlak),var(--teal-koyu));
  box-shadow:0 4px 12px -4px rgba(14,165,165,.6);
}
.marka-isaret svg{width:20px;height:20px}
.marka-ad{font-family:var(--f-baslik);font-weight:500;font-size:20px;color:var(--lacivert)}
.marka-ad b{font-weight:800}
.ust-nav{display:flex;gap:26px;margin-left:auto}
.ust-nav a{
  text-decoration:none;font-weight:600;font-size:14.5px;color:var(--metin-2);
  transition:color var(--gecis);
}
.ust-nav a:hover{color:var(--teal-koyu)}
.ust-cta{flex:none}

/* hamburger (yalnızca dar ekranda görünür) */
.menu-dugme{
  display:none;width:42px;height:42px;flex:none;cursor:pointer;
  border:1.5px solid var(--cizgi);border-radius:11px;background:#fff;
  place-items:center;align-content:center;gap:5px;
  transition:border-color var(--gecis);
}
.menu-dugme:hover{border-color:var(--teal)}
.menu-dugme span{
  display:block;width:18px;height:2px;border-radius:2px;background:var(--lacivert);
  transition:transform var(--gecis),opacity var(--gecis);
}
.ust.menu-acik .menu-dugme span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ust.menu-acik .menu-dugme span:nth-child(2){opacity:0}
.ust.menu-acik .menu-dugme span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{padding:72px 0 64px;overflow:hidden}
.hero-izgara{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.gozkasi{
  font-family:var(--f-mono);font-weight:600;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-koyu);margin-bottom:14px;
}
.gozkasi-acik{color:var(--parlak)}
.hero h1{font-size:clamp(34px,4.6vw,54px);font-weight:800;margin-bottom:18px}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(120deg,var(--teal),var(--parlak));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-alt{font-size:17.5px;color:var(--metin-2);max-width:52ch;margin-bottom:28px}
.hero-ctalar{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.hero-rozetler{display:flex;gap:10px;flex-wrap:wrap}
.hero-rozetler li{
  font-size:12.5px;font-weight:600;color:var(--metin-2);
  background:#fff;border:1px solid var(--cizgi);border-radius:999px;padding:5px 12px;
}
.hero-rozetler li::before{content:"✓";color:var(--teal);margin-right:6px;font-weight:700}

/* --- imza sahnesi: belge → OCR → panel --- */
.hero-sahne{
  position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:4px;
}
.sahne-belge{
  position:relative;background:#fff;border:1px solid var(--cizgi);border-radius:var(--r);
  box-shadow:var(--golge);padding:16px;overflow:hidden;transform:rotate(-2deg);
}
.belge-ust{
  display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11.5px;
  color:var(--soluk);margin-bottom:14px;
}
.belge-nokta{width:8px;height:8px;border-radius:50%;background:var(--uyari);flex:none}
.belge-satirlar i{display:block;height:9px;border-radius:5px;background:#e8eef6;margin-bottom:10px}
.belge-qr{
  width:44px;height:44px;border-radius:8px;margin-top:6px;
  background:
    conic-gradient(var(--lacivert) 25%,transparent 0 50%,var(--lacivert) 0 75%,transparent 0) 0 0/22px 22px,
    #e8eef6;
  opacity:.8;
}
.tarama-cizgi{
  position:absolute;left:0;right:0;top:0;height:46px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(34,211,211,.28) 55%,var(--parlak) 98%,transparent);
  animation:tarama 3.2s ease-in-out infinite;
}
@keyframes tarama{
  0%{transform:translateY(-50px)}
  55%{transform:translateY(230px)}
  100%{transform:translateY(230px);opacity:0}
}
.sahne-ok{
  display:grid;justify-items:center;gap:2px;color:var(--teal);z-index:2;
}
.sahne-ok svg{width:44px;height:22px}
.sahne-ok span{font-family:var(--f-mono);font-weight:600;font-size:11px;letter-spacing:.12em;color:var(--teal-koyu)}
.sahne-panel{
  background:#fff;border:1px solid var(--cizgi);border-radius:var(--r);
  box-shadow:var(--golge);padding:16px;transform:rotate(1.5deg);
}
.panel-ust{
  font-family:var(--f-baslik);font-weight:700;font-size:14px;color:var(--lacivert);
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;
}
.panel-pill{
  font-family:var(--f-govde);font-weight:600;font-size:10.5px;color:var(--teal-koyu);
  background:rgba(14,165,165,.1);border:1px solid rgba(14,165,165,.25);
  border-radius:999px;padding:2px 9px;white-space:nowrap;
}
.panel-alan{
  border:1px solid var(--cizgi);border-radius:9px;padding:7px 10px;margin-bottom:8px;
  animation:alan-dol 3.2s ease-in-out infinite both;
}
.panel-alan label{display:block;font-size:10px;font-weight:600;color:var(--soluk);letter-spacing:.05em;text-transform:uppercase}
.panel-alan code,.panel-alan .mini-plaka{font-size:13px;font-weight:600;color:var(--metin)}
.panel-alan.a1{animation-delay:.5s}
.panel-alan.a2{animation-delay:.9s}
.panel-alan.a3{animation-delay:1.3s}
.panel-alan.a4{animation-delay:1.7s}
.panel-alan.a5{animation-delay:2.1s}
@keyframes alan-dol{
  0%{opacity:0;transform:translateY(6px)}
  14%,88%{opacity:1;transform:translateY(0)}
  97%,100%{opacity:0}
}
.mini-plaka{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);
  border:1.5px solid var(--lacivert);border-radius:5px;padding:1px 7px 1px 0;background:#fff;
}
.mini-plaka b{
  background:#1d4ed8;color:#fff;font-size:9px;padding:3px 4px;border-radius:3px 0 0 3px;
  align-self:stretch;display:flex;align-items:center;
}

/* ---------- öne çıkanlar şeridi ---------- */
.serit{padding:8px 0 26px}
.serit-izgara{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.deger{
  background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:22px 20px;box-shadow:var(--golge);
}
.deger-ikon{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px;
  background:rgba(14,165,165,.1);color:var(--teal-koyu);
}
.deger-ikon svg{width:22px;height:22px}
.deger h3{font-size:16.5px;margin-bottom:6px}
.deger p{font-size:14px;color:var(--metin-2)}

/* ---------- bölümler ---------- */
.bolum{padding:88px 0}
.bolum-dar{padding:72px 0}
.bolum-baslik{max-width:680px;margin-bottom:44px}
.bolum-baslik h2{font-size:clamp(26px,3.2vw,38px);font-weight:800;margin-bottom:12px}
.bolum-alt{color:var(--metin-2);font-size:16.5px}

/* ---------- modüller ---------- */
.grup{margin-bottom:44px}
.grup-ad{
  display:flex;align-items:center;gap:16px;font-size:13px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--metin-2);margin-bottom:18px;
}
.grup-ad::after{content:"";flex:1;height:1px;background:var(--cizgi)}
.grup-ad span{font-family:var(--f-baslik)}
.modul-izgara{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.modul{
  background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:24px;box-shadow:var(--golge);
  transition:transform var(--gecis),border-color var(--gecis);
}
.modul:hover{transform:translateY(-3px);border-color:rgba(14,165,165,.45)}
.modul-ikon{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:14px;
  background:rgba(15,41,66,.06);color:var(--lacivert);
}
.modul-ikon svg{width:21px;height:21px}
.modul h4{font-size:17px;margin-bottom:10px}
.modul ul{display:grid;gap:7px}
.modul li{
  font-size:14px;color:var(--metin-2);padding-left:18px;position:relative;
}
.modul li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:2px;background:var(--teal);opacity:.65}
.modul-vurgu{
  border-color:rgba(14,165,165,.5);
  background:linear-gradient(180deg,rgba(34,211,211,.07),var(--kart) 55%);
}
.modul-vurgu .modul-ikon{background:linear-gradient(135deg,var(--parlak),var(--teal-koyu));color:#fff}

/* ---------- portal bandı ---------- */
.portal-band{
  margin-top:14px;display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;
  background:linear-gradient(135deg,var(--lacivert),var(--lacivert-2));
  border-radius:var(--r-buyuk);padding:48px 52px;overflow:hidden;position:relative;
}
.portal-band::before{
  content:"";position:absolute;inset:auto -80px -120px auto;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,211,211,.22),transparent 65%);
}
.portal-band h3{color:#fff;font-size:clamp(22px,2.6vw,30px);margin-bottom:18px}
.onayli{display:grid;gap:10px}
.onayli li{color:rgba(255,255,255,.86);font-size:15px;padding-left:28px;position:relative}
.onayli li::before{
  content:"✓";position:absolute;left:0;top:0;width:19px;height:19px;border-radius:6px;
  background:rgba(34,211,211,.18);color:var(--parlak);font-weight:700;font-size:12px;
  display:grid;place-items:center;margin-top:3px;
}
.portal-tel{display:grid;justify-items:center}
.tel-govde{
  width:min(250px,100%);background:#f4f8f7;border-radius:26px;padding:14px;
  border:6px solid #0a1e31;box-shadow:0 24px 48px -20px rgba(0,0,0,.5);
}
.tel-ust{font-family:var(--f-baslik);font-weight:700;font-size:14px;color:#14251f;margin:2px 4px 12px}
.tel-kart{background:#fff;border:1px solid #e2ebe7;border-radius:12px;padding:12px;margin-bottom:10px}
.tel-kart-ust{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:700;color:#14251f;margin-bottom:8px}
.kalan{font-family:var(--f-mono);font-size:11px;font-weight:600;color:#059669;background:#ecfdf5;border-radius:999px;padding:2px 8px}
.kalan.k-az{color:#d97706;background:#fffbeb}
.tel-cizgi{height:7px;border-radius:4px;background:#e6efec;margin-bottom:4px}
.tel-cta{
  width:100%;margin-top:6px;border:0;border-radius:9px;padding:8px;cursor:default;
  font-family:var(--f-baslik);font-weight:700;font-size:12.5px;color:#fff;
  background:linear-gradient(135deg,#10b981,#059669);
}

/* ---------- ekranlar (koyu bant) ---------- */
.bolum-koyu{background:linear-gradient(180deg,var(--lacivert),#0c2237)}
.bolum-koyu h2{color:#fff}
.bolum-koyu .bolum-alt{color:rgba(255,255,255,.72)}
.ekran-izgara{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ekran figcaption{margin-top:14px;font-size:13.5px;color:rgba(255,255,255,.7)}
.pencere{
  background:#fff;border-radius:var(--r);overflow:hidden;
  box-shadow:0 24px 48px -20px rgba(0,0,0,.5);
  transition:transform var(--gecis);
}
.ekran:hover .pencere{transform:translateY(-4px)}
.pencere-ust{
  display:flex;align-items:center;gap:6px;background:#eef2f8;border-bottom:1px solid var(--cizgi);
  padding:9px 12px;font-family:var(--f-mono);font-size:10.5px;color:var(--soluk);
}
.pencere-ust i{width:9px;height:9px;border-radius:50%;background:#d3dbe6}
.pencere-ust i:first-child{background:#f43f5e99}
.pencere-ust i:nth-child(2){background:#f59e0b99}
.pencere-ust i:nth-child(3){background:#10b98199}
.pencere-ust span{margin-left:6px}
.pencere-ic{padding:16px;min-height:200px}

.mk-statlar{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.mk-stat{background:#f5f8fc;border:1px solid var(--cizgi);border-radius:10px;padding:9px}
.mk-stat b{display:block;font-family:var(--f-baslik);font-size:17px;color:var(--lacivert)}
.mk-stat span{font-size:9.5px;color:var(--soluk)}
.mk-stat-uyari b{color:#d97706}
.mk-grafikler{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:end}
.mk-donut{
  width:84px;height:84px;border-radius:50%;position:relative;
  background:conic-gradient(var(--teal) 0 42%,#6366f1 42% 68%,#f59e0b 68% 85%,#e3eaf3 85%);
}
.mk-donut i{position:absolute;inset:20px;background:#fff;border-radius:50%}
.mk-barlar{display:flex;align-items:end;gap:8px;height:84px}
.mk-barlar i{flex:1;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,var(--parlak),var(--teal-koyu))}

.mock-ocr{display:grid;grid-template-columns:1fr 1.15fr;gap:12px}
.mk-belge{background:#f5f8fc;border:1px dashed #c9d5e4;border-radius:10px;padding:12px;align-self:start}
.mk-belge i{display:block;height:7px;border-radius:4px;background:#dde6f1;margin-bottom:8px}
.mk-alanlar{display:grid;gap:8px;align-content:start}
.mk-alan{border:1px solid var(--cizgi);border-radius:9px;padding:6px 9px}
.mk-alan label{display:block;font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--soluk)}
.mk-alan code{font-size:12px;font-weight:600}
.mk-onay{
  margin-top:2px;text-align:center;border-radius:9px;padding:8px;
  font-family:var(--f-baslik);font-weight:700;font-size:12px;color:#fff;
  background:linear-gradient(135deg,var(--teal),var(--teal-koyu));
}

.mock-detay{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.mk-halka{
  width:96px;height:96px;border-radius:50%;position:relative;display:grid;place-items:center;align-content:center;
  background:conic-gradient(var(--uyari) 0 12%,var(--teal) 12% 100%);
}
.mk-halka::before{content:"";position:absolute;inset:9px;background:#fff;border-radius:50%}
.mk-halka b{position:relative;font-family:var(--f-baslik);font-size:22px;color:var(--lacivert);line-height:1}
.mk-halka span{position:relative;font-size:9.5px;color:var(--soluk)}
.mk-detay-satirlar{display:grid;gap:7px}
.mk-satir{
  display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--cizgi);
  padding-bottom:6px;font-size:12px;
}
.mk-satir span{color:var(--soluk)}
.mk-satir code{font-weight:600;font-size:12px}

/* ---------- neden ---------- */
.neden-izgara{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.neden-kart{
  background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:24px;box-shadow:var(--golge);border-top:3px solid var(--teal);
}
.neden-kart h4{font-size:16.5px;margin-bottom:8px}
.neden-kart p{font-size:14px;color:var(--metin-2)}

/* ---------- fiyat ---------- */
.bolum-fiyat{background:linear-gradient(180deg,var(--zemin),#eef4f9)}
.bolum-fiyat .bolum-baslik{text-align:center;margin-inline:auto}
.fiyat-kart{
  display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:center;
  background:var(--kart);border:1.5px solid rgba(14,165,165,.4);border-radius:var(--r-buyuk);
  padding:48px 52px;box-shadow:0 24px 56px -24px rgba(15,41,66,.25);
  max-width:920px;margin-inline:auto;position:relative;overflow:hidden;
}
.fiyat-kart::before{
  content:"";position:absolute;inset:0 auto auto 0;width:100%;height:5px;
  background:linear-gradient(90deg,var(--parlak),var(--teal-koyu));
}
.fiyat-etiket{font-family:var(--f-baslik);font-weight:700;color:var(--teal-koyu);font-size:15px;margin-bottom:8px}
.fiyat-tutar{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.fiyat-tutar b{font-family:var(--f-baslik);font-weight:800;font-size:clamp(38px,4.5vw,52px);color:var(--lacivert);letter-spacing:-.02em}
.fiyat-tutar span{font-size:18px;color:var(--metin-2);font-weight:600}
.fiyat-not{font-size:13px;color:var(--soluk);margin-bottom:24px}
.fiyat-liste li{color:var(--metin-2)}
.fiyat-liste li::before{background:rgba(14,165,165,.12);color:var(--teal-koyu)}

/* ---------- yorumlar ---------- */
.yorum-izgara{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.yorum{
  background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:26px;box-shadow:var(--golge);display:grid;gap:18px;align-content:space-between;
}
.yorum blockquote{font-size:15px;color:var(--metin);line-height:1.65}
.yorum blockquote::before{
  content:"“";display:block;font-family:var(--f-baslik);font-size:44px;line-height:.6;
  color:var(--parlak);margin-bottom:10px;
}
.yorum figcaption b{display:block;font-family:var(--f-baslik);font-size:14.5px;color:var(--lacivert)}
.yorum figcaption span{font-size:13px;color:var(--soluk)}

/* ---------- SSS ---------- */
.sss-liste{display:grid;gap:12px}
.sss-liste details{
  background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);
  box-shadow:var(--golge);overflow:hidden;
}
.sss-liste summary{
  cursor:pointer;list-style:none;padding:18px 52px 18px 22px;position:relative;
  font-family:var(--f-baslik);font-weight:700;font-size:16px;color:var(--lacivert);
}
.sss-liste summary::-webkit-details-marker{display:none}
.sss-liste summary::after{
  content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:rgba(14,165,165,.1);color:var(--teal-koyu);font-weight:600;font-size:17px;
  transition:transform var(--gecis);
}
.sss-liste details[open] summary::after{transform:rotate(45deg)}
.sss-liste details p{padding:0 22px 20px;color:var(--metin-2);font-size:15px;max-width:65ch}

/* ---------- demo ---------- */
.bolum-demo{background:linear-gradient(160deg,var(--lacivert),var(--lacivert-2))}
.bolum-demo h2{color:#fff}
.bolum-demo .bolum-alt{color:rgba(255,255,255,.75)}
.demo-form{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
  background:var(--kart);border-radius:var(--r-buyuk);padding:36px;
  box-shadow:0 24px 56px -24px rgba(0,0,0,.4);
}
.alan{display:grid;gap:7px}
.alan-genis{grid-column:1/-1}
.alan label{font-weight:600;font-size:14px;color:var(--lacivert)}
.opsiyonel{font-weight:500;color:var(--soluk);font-size:12.5px}
.alan input,.alan textarea{
  font:inherit;font-size:15px;color:var(--metin);
  border:1.5px solid var(--cizgi);border-radius:11px;padding:12px 14px;background:#fbfdff;
  transition:border-color var(--gecis),box-shadow var(--gecis);width:100%;resize:vertical;
}
.alan input:focus,.alan textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(14,165,165,.14);
}
.alan input.hatali{border-color:#f43f5e;box-shadow:0 0 0 4px rgba(244,63,94,.12)}
.form-hata{grid-column:1/-1;color:#e11d48;font-weight:600;font-size:14px}
.form-alt{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.form-ipucu{font-size:13px;color:var(--soluk);max-width:34ch}
.form-basari{
  grid-column:1/-1;background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;
  border-radius:11px;padding:14px 16px;font-weight:600;font-size:14.5px;
}

/* ---------- alt bilgi ---------- */
.alt{background:#0a1e31;color:rgba(255,255,255,.75)}
.alt-ic{display:flex;justify-content:space-between;align-items:center;gap:32px;padding-block:44px;flex-wrap:wrap}
.alt-marka{display:flex;gap:12px;align-items:center}
.alt-ad{font-family:var(--f-baslik);font-weight:500;font-size:19px;color:#fff}
.alt-ad b{font-weight:800}
.alt-slogan{font-size:13.5px;color:rgba(255,255,255,.55)}
.alt-nav{display:flex;gap:22px;flex-wrap:wrap}
.alt-nav a{text-decoration:none;font-size:14px;font-weight:600;color:rgba(255,255,255,.72);transition:color var(--gecis)}
.alt-nav a:hover{color:var(--parlak)}
.alt-telif{border-top:1px solid rgba(255,255,255,.1);padding-block:18px}
.alt-telif p{font-size:13px;color:rgba(255,255,255,.45)}

/* ---------- kaydırma-görünme ---------- */
.goster{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.goster.gorundu{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .goster{opacity:1;transform:none}
}

/* ---------- duyarlılık ---------- */
@media (max-width:1000px){
  .hero-izgara{grid-template-columns:1fr;gap:44px}
  .hero-sahne{max-width:640px}
  .serit-izgara{grid-template-columns:repeat(2,1fr)}
  .modul-izgara{grid-template-columns:repeat(2,1fr)}
  .neden-izgara{grid-template-columns:repeat(2,1fr)}
  .ekran-izgara{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .portal-band{grid-template-columns:1fr;padding:36px}
  .yorum-izgara{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .fiyat-kart{grid-template-columns:1fr;gap:28px;padding:36px}

  /* mobil menü paneli */
  .menu-dugme{display:grid}
  .ust-nav{
    display:none;position:absolute;left:16px;right:16px;top:calc(100% + 8px);
    margin-left:0;flex-direction:column;gap:2px;padding:10px;
    background:#fff;border:1px solid var(--cizgi);border-radius:var(--r);
    box-shadow:0 24px 48px -18px rgba(15,41,66,.3);
  }
  .ust.menu-acik .ust-nav{display:flex;animation:menu-gel .22s ease}
  .ust-nav a{padding:12px 14px;border-radius:10px;font-size:15px;color:var(--lacivert)}
  .ust-nav a:hover{background:rgba(14,165,165,.08);color:var(--teal-koyu)}
}
@keyframes menu-gel{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .bolum{padding:60px 0}
  .hero{padding:44px 0}
  .hero-ctalar .btn{width:100%}
  .serit-izgara{grid-template-columns:1fr}
  .modul-izgara{grid-template-columns:1fr}
  .neden-izgara{grid-template-columns:1fr}
  .demo-form{grid-template-columns:1fr;padding:24px}
  .hero-sahne{grid-template-columns:1fr;gap:14px;justify-items:center}
  .sahne-belge,.sahne-panel{width:100%;max-width:340px;transform:none}
  .sahne-ok svg{transform:rotate(90deg)}
  .ust-ic{gap:12px}
  .ust-cta{padding:9px 16px;font-size:14px}
}

/* ---------------------------------------------------------------
   Demo formu bal küpü — ekranda ve ekran okuyucuda görünmez, ama
   display:none DEĞİL: bazı botlar gizli alanları atlar, bu atlanmaz.
   --------------------------------------------------------------- */
.bal-kupu {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* Üst menüdeki panel girişleri: bölüm bağlantılarından ayrışsın. */
.ust-nav .nav-giris { font-weight: 600; }
.ust-nav .nav-giris::after { content: " ↗"; font-size: .85em; opacity: .6; }

/* Gönderim sırasında çift tıklamayı engelle. */
.demo-form button[disabled] { opacity: .6; cursor: progress; }