/* ==========================================================================
   VeltroX tanıtım sayfası — styles.css
   Plan: docs/TANITIM-TASARIM-PLANI.md (2. tur, 09.09 sabah: fiş gitti,
   bayi ağı ve logo açılışı geldi; iki kapı; akışkan "neden" kartları).
   Kural: her bölümün kendi ad alanı var (.acilis-*, .ust-*, .hero-*,
   .neden-*, .akis-*, .kapi*, .modul-*, .sektor-*, .guven-*, .kurulum-*,
   .demo-*, .giris-*, .alt-*). Ortak olan yalnız token, tipografi tabanı,
   .sutun ve .dugme. Bölüm dolgusu bölümün kendi sınıfında; ezme zinciri yok.
   ========================================================================== */

/* ---------- yazı tipleri (kendinden barındırılan) ---------- */
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap; src: url(/assets/fonts/source-serif-4-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: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap; src: url(/assets/fonts/source-serif-4-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: 400 900; font-display: swap; src: url(/assets/fonts/schibsted-grotesk-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: 400 900; font-display: swap; src: url(/assets/fonts/schibsted-grotesk-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; }

/* ---------- tokenlar ---------- */
:root {
  --murekkep: #0B1326;
  --murekkep-2: #131E38;
  --kirec: #F3F4F8;
  --beyaz: #FFFFFF;
  --metin: #141A2B;
  --gri: #5A6478;
  --gri-acik: #8A93A6;
  --cizgi: #DCE0EA;
  --cizgi-koyu: rgba(255, 255, 255, .14);
  --menekse: #6D5DFC;
  --menekse-koyu: #5546E8;
  --menekse-metin: #4C3AD0;
  --menekse-acik: #ECE9FF;
  --menekse-isik: #C9C0FF;
  --deniz: #0C7A72;
  --deniz-metin: #0A6660;
  --deniz-acik: #DCF1EE;
  --deniz-isik: #4FCDBF;
  --kehribar: #E3A93B;
  --kehribar-metin: #8A5A05;
  --kehribar-acik: #FBEFD6;
  --wa: #25D366;
  --wa-koyu: #1EBE5B;
  --wa-metin: #06301A;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 112px;
  --r-1: 6px; --r-2: 12px; --r-3: 20px;
  --sutun: 1200px;
  --kenar: clamp(20px, 5vw, 48px);
  --ust-h: 72px;

  --serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  color-scheme: light;
}

/* ---------- taban ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--ust-h) + var(--s-4)); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--beyaz); color: var(--metin); font-family: var(--sans); font-size: 17px; line-height: 1.6; font-optical-sizing: auto; overflow-x: clip; }
img, svg { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 500; line-height: 1.1; letter-spacing: -0.018em; }
p, dl, dd, dt, ul, ol, figure { margin: 0; }
ul, ol, dl { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: .18em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--menekse); outline-offset: 3px; border-radius: var(--r-1); }
.ust :focus-visible, .hero :focus-visible, .demo :focus-visible, .menu :focus-visible { outline-color: var(--menekse-isik); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atla { position: absolute; left: -999px; top: var(--s-2); z-index: 100; background: var(--menekse); color: #fff; padding: var(--s-2) var(--s-4); border-radius: var(--r-1); text-decoration: none; font-weight: 600; }
.atla:focus { left: var(--s-2); }
.sutun { width: 100%; max-width: var(--sutun); margin-inline: auto; padding-inline: var(--kenar); }

/* ---------- düğme (tek bileşen) ---------- */
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); border-radius: 999px; font-weight: 600; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
.dugme--orta { padding: 10px 18px; font-size: .95rem; min-height: 42px; }
.dugme--buyuk { padding: 14px 26px; font-size: 1.05rem; min-height: 52px; }
.dugme--wa { background: var(--wa); color: var(--wa-metin); }
.dugme--wa:hover { background: var(--wa-koyu); }
.dugme--kapi { background: var(--kapi-renk); color: #fff; }
.dugme--kapi:hover { background: var(--kapi-koyu); }
.wa-simge { width: 20px; height: 20px; fill: currentColor; flex: none; }

/* ---------- marka ---------- */
.marka { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; color: #fff; }
.marka--koyu { color: var(--metin); }
.marka-isaret { width: 28px; height: 28px; flex: none; }
.marka-ad { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; letter-spacing: -0.01em; line-height: 1; }

/* ---------- tek seferlik belirme (bölüm başlıkları ve "neden" kartları) ---------- */
[data-belir] { opacity: 0; transform: translateY(10px); transition: opacity .55s ease, transform .55s ease; transition-delay: calc(var(--gecikme, 0) * 90ms); }
[data-belir].belirdi { opacity: 1; transform: none; }

/* ==========================================================================
   AÇILIŞ — logo büyür, çubuk dolar, perde kalkar (oturum başına bir kez;
   `html.acilis-var` yoksa hiçbir şey görünmez, sayfa doğrudan açılır)
   ========================================================================== */
.acilis { display: none; }
.acilis-var .acilis { display: grid; place-items: center; position: fixed; inset: 0; z-index: 100; background: var(--murekkep); animation: acilis-kalk .7s cubic-bezier(.76, 0, .24, 1) 1.55s both; }
.acilis-var body { overflow: hidden; animation: acilis-govde 0s linear 2.25s both; }
.acilis-ic { display: grid; justify-items: center; gap: var(--s-4); }
.acilis-isaret { width: 88px; height: 88px; animation: acilis-buyu .7s cubic-bezier(.2, .8, .2, 1) .05s both; }
.acilis-ad { font-family: var(--serif); font-weight: 600; font-size: 1.6rem; color: #fff; letter-spacing: -0.01em; animation: acilis-belir .5s ease .45s both; }
.acilis-cubuk { display: block; width: 140px; height: 2px; margin-top: var(--s-2); background: rgba(255, 255, 255, .14); overflow: hidden; border-radius: 2px; }
.acilis-cubuk-dolu { display: block; height: 100%; width: 100%; background: var(--menekse-isik); transform-origin: left; animation: acilis-dol .95s cubic-bezier(.4, 0, .2, 1) .5s both; }
@keyframes acilis-buyu { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: scale(1); } }
@keyframes acilis-belir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes acilis-dol { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes acilis-kalk { from { transform: translateY(0); } to { transform: translateY(-100%); visibility: hidden; } }
@keyframes acilis-govde { from { overflow: hidden; } to { overflow: visible; } }
/* Hero, perde kalkarken sırayla belirir */
.acilis-var .hero-metin > * { animation: hero-belir .6s ease both; animation-delay: calc(1.85s + var(--sira, 0) * .1s); }
.acilis-var .hero-ag { animation: hero-belir .7s ease 1.95s both; }
@keyframes hero-belir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   ÜST ÇUBUK
   ========================================================================== */
.ust { position: sticky; top: 0; z-index: 50; background: var(--murekkep); color: #fff; border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.ust--kaydi { border-bottom-color: var(--cizgi-koyu); }
.ust-ic { display: flex; align-items: center; gap: var(--s-6); min-height: var(--ust-h); }
.ust-nav { display: flex; gap: var(--s-5); margin-inline: auto; }
.ust-nav a { text-decoration: none; color: rgba(255, 255, 255, .72); font-weight: 500; font-size: .98rem; padding: var(--s-2) 0; border-bottom: 1.5px solid transparent; transition: color .18s ease, border-color .18s ease; }
.ust-nav a:hover { color: #fff; }
.ust-nav a[aria-current="true"] { color: #fff; border-bottom-color: var(--menekse-isik); }
.ust-sag { display: flex; align-items: center; gap: var(--s-5); }
.ust-giris { display: inline-flex; align-items: center; gap: var(--s-2); text-decoration: none; color: rgba(255, 255, 255, .82); font-weight: 500; font-size: .95rem; padding: var(--s-2) 0; transition: color .18s ease; }
.ust-giris:hover { color: #fff; }
.ust-giris-nokta { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ust-giris--sirket .ust-giris-nokta { background: var(--menekse); box-shadow: 0 0 0 3px rgba(109, 93, 252, .22); }
.ust-giris--bayi .ust-giris-nokta { background: var(--deniz-isik); box-shadow: 0 0 0 3px rgba(79, 205, 191, .2); }
.ust-mobil { display: none; margin-left: auto; align-items: center; gap: var(--s-3); }
.ust-mobil-wa { width: 44px; height: 44px; border-radius: 50%; background: var(--wa); color: var(--wa-metin); display: grid; place-items: center; }
.ust-menu-dugme { width: 44px; height: 44px; border: 1.5px solid rgba(255, 255, 255, .28); border-radius: var(--r-2); background: transparent; display: grid; place-content: center; gap: 6px; cursor: pointer; }
.ust-menu-cizgi { display: block; width: 18px; height: 1.5px; background: #fff; transition: transform .2s ease; }
.ust-menu-dugme[aria-expanded="true"] .ust-menu-cizgi:first-child { transform: translateY(3.75px) rotate(45deg); }
.ust-menu-dugme[aria-expanded="true"] .ust-menu-cizgi:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* mobil menü (tam ekran katman) */
.menu { position: fixed; inset: var(--ust-h) 0 0 0; z-index: 49; background: var(--murekkep); color: #fff; overflow-y: auto; }
.menu[hidden] { display: none; }
.menu-ic { display: flex; flex-direction: column; padding-top: var(--s-5); padding-bottom: var(--s-8); }
.menu-baglanti { font-family: var(--serif); font-size: 1.75rem; text-decoration: none; color: #fff; padding: var(--s-4) 0; border-bottom: 1px solid var(--cizgi-koyu); }
.menu-girisler { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.menu-giris { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4); border: 1px solid var(--cizgi-koyu); border-radius: var(--r-2); text-decoration: none; color: #fff; }
.menu-giris-nokta { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.menu-giris--sirket .menu-giris-nokta { background: var(--menekse); box-shadow: 0 0 0 4px rgba(109, 93, 252, .22); }
.menu-giris--bayi .menu-giris-nokta { background: var(--deniz-isik); box-shadow: 0 0 0 4px rgba(79, 205, 191, .2); }
.menu-giris-metin { display: grid; gap: 2px; }
.menu-giris-metin small { color: rgba(255, 255, 255, .6); font-size: .88rem; }
.menu-wa { margin-top: var(--s-6); width: 100%; }
body.menu-acik { overflow: hidden; }

/* ==========================================================================
   HERO — solda söz, sağda bayi ağı
   ========================================================================== */
.hero { background: radial-gradient(56% 64% at 82% 40%, rgba(109, 93, 252, .30), transparent 72%), var(--murekkep); color: #fff; overflow: hidden; }
.hero-ic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(var(--s-6), 5vw, var(--s-8)); align-items: center; padding-top: var(--s-7); padding-bottom: var(--s-8); }
.hero-metin { max-width: 40rem; }
.hero-baslik { font-size: clamp(2.5rem, 5vw, 4.25rem); line-height: 1.04; letter-spacing: -0.022em; color: #fff; }
.hero-aciklama { margin-top: var(--s-5); font-size: 1.18rem; line-height: 1.6; color: rgba(255, 255, 255, .8); max-width: 36rem; }
.hero-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); margin-top: var(--s-6); }
.hero-ikincil { color: rgba(255, 255, 255, .85); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-decoration-thickness: 1.5px; padding: var(--s-2) 0; transition: text-decoration-color .18s ease; }
.hero-ikincil:hover { text-decoration-color: #fff; }
.hero-dip { margin-top: var(--s-6); font-size: .95rem; color: rgba(255, 255, 255, .6); }

/* ---------- imza: bayi ağı ---------- */
.hero-ag { justify-self: end; width: 100%; max-width: 580px; }
.hero-ag-svg { width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
.hero-ag-hat { stroke: rgba(255, 255, 255, .34); stroke-width: 1.6; stroke-dasharray: var(--uz); stroke-dashoffset: var(--uz); animation: hat-ciz 1.1s cubic-bezier(.4, 0, .2, 1) both; animation-delay: calc(.25s + var(--sira, 0) * .1s); }
.acilis-var .hero-ag-hat { animation-delay: calc(2.1s + var(--sira, 0) * .1s); }
@keyframes hat-ciz { to { stroke-dashoffset: 0; } }
.hero-ag-akan { fill: var(--menekse-isik); opacity: .95; filter: drop-shadow(0 0 4px rgba(201, 192, 255, .9)); }
.hero-ag-halka { fill: rgba(255, 255, 255, .07); stroke: rgba(255, 255, 255, .18); stroke-width: 1; }
.hero-ag-nokta { fill: var(--murekkep); stroke: var(--deniz-isik); stroke-width: 2.4; }
.hero-ag-etiket { fill: rgba(255, 255, 255, .82); font-size: 15px; font-weight: 500; }
.hero-ag-dugum { animation: dugum-belir .5s ease both; animation-delay: calc(.9s + var(--sira, 0) * .08s); }
.acilis-var .hero-ag-dugum { animation-delay: calc(2.7s + var(--sira, 0) * .08s); }
@keyframes dugum-belir { from { opacity: 0; } to { opacity: 1; } }
.hero-ag-merkez-isik { fill: rgba(109, 93, 252, .18); }
.hero-ag-merkez-govde { fill: var(--murekkep-2); stroke: var(--menekse); stroke-width: 2; }
.hero-ag-merkez-etiket { fill: #fff; font-size: 16px; font-weight: 600; }
.hero-ag-merkez-alt { fill: rgba(255, 255, 255, .6); font-size: 12.5px; }
.hero-ag-not rect { fill: rgba(255, 255, 255, .96); }
.hero-ag-not text { fill: var(--metin); font-size: 12.5px; font-weight: 600; }
.hero-ag-not { animation: dugum-belir .5s ease both; animation-delay: 1.6s; }
.hero-ag-not--2 { animation-delay: 2s; }
.acilis-var .hero-ag-not { animation-delay: 3.3s; }
.acilis-var .hero-ag-not--2 { animation-delay: 3.7s; }

/* ==========================================================================
   NEDEN VELTROX — akışkan kartlar
   ========================================================================== */
.neden { position: relative; background: radial-gradient(60% 50% at 12% 0%, rgba(109, 93, 252, .12), transparent 70%), radial-gradient(rgba(20, 26, 43, .085) 1px, transparent 1px) 0 0 / 22px 22px, var(--kirec); border-bottom: 1px solid var(--cizgi); }
.neden-ic { padding-top: var(--s-9); padding-bottom: var(--s-9); }
.neden-bas { max-width: 46rem; }
.neden-baslik { font-size: clamp(2rem, 3.6vw, 2.8rem); }
.neden-aciklama { margin-top: var(--s-4); font-size: 1.12rem; color: var(--gri); }
.neden-akis { margin-top: var(--s-7); }
.neden-etiketler { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); gap: var(--s-5); margin-bottom: var(--s-4); }
.neden-etiket { display: inline-flex; align-items: center; gap: var(--s-2); justify-self: start; padding: 6px 14px; border-radius: 999px; font-size: .9rem; font-weight: 600; }
.neden-etiket--bugun { background: var(--beyaz); border: 1px solid var(--cizgi); color: var(--gri); }
.neden-etiket--veltrox { grid-column: 3; background: var(--menekse); color: #fff; }
.neden-kartlar { display: grid; gap: var(--s-3); }
.neden-kart { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); gap: var(--s-5); align-items: center; padding: var(--s-5) var(--s-6); background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--r-3); box-shadow: 0 1px 0 rgba(20, 26, 43, .03); transition: border-color .2s ease, box-shadow .2s ease, opacity .55s ease, transform .55s ease; }
.neden-kart:hover { border-color: var(--menekse-isik); box-shadow: 0 14px 34px -22px rgba(76, 58, 208, .35); }
.neden-kart::after { content: ""; grid-column: 2; grid-row: 1; justify-self: center; width: 14px; height: 14px; border-right: 2px solid var(--menekse); border-bottom: 2px solid var(--menekse); transform: rotate(-45deg); opacity: .8; }
.neden-bugun, .neden-veltrox { display: flex; gap: var(--s-3); align-items: flex-start; line-height: 1.55; }
.neden-bugun { grid-column: 1; color: var(--gri); }
.neden-veltrox { grid-column: 3; color: var(--metin); font-weight: 500; }
.neden-eksi, .neden-tik { flex: none; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; position: relative; }
.neden-eksi { background: var(--kirec); border: 1px solid var(--cizgi); }
.neden-eksi::after { content: ""; position: absolute; left: 5px; top: 8.5px; width: 8px; height: 1.5px; background: var(--gri-acik); }
.neden-tik { background: var(--menekse-acik); }
.neden-tik::after { content: ""; position: absolute; left: 7px; top: 4px; width: 4px; height: 8px; border: solid var(--menekse-metin); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ==========================================================================
   SİPARİŞ AKIŞI — omurga kaydırmayla çizilir
   ========================================================================== */
.akis { background: var(--beyaz); }
.akis-ic { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--s-8); align-items: start; padding-top: var(--s-9); padding-bottom: var(--s-9); }
.akis-yan { position: sticky; top: calc(var(--ust-h) + var(--s-6)); }
.akis-baslik { font-size: clamp(2rem, 3.6vw, 2.8rem); }
.akis-aciklama { margin-top: var(--s-4); font-size: 1.12rem; color: var(--gri); max-width: 30rem; }
.akis-liste { position: relative; --ilerleme: 0; }
.akis-omurga { position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; background: var(--cizgi); }
.akis-omurga::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--ilerleme) * 100%); background: var(--menekse); }
.akis-adim { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-5); padding-bottom: var(--s-7); }
.akis-adim:last-child { padding-bottom: 0; }
.akis-no { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--beyaz); border: 1.5px solid var(--cizgi); color: var(--gri); font-family: var(--serif); font-size: 1.5rem; font-weight: 500; line-height: 1; transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.akis-adim--gecti .akis-no { background: var(--menekse); border-color: var(--menekse); color: #fff; }
.akis-govde { padding-top: var(--s-3); }
.akis-adim-baslik { font-size: 1.5rem; }
.akis-govde p { margin-top: var(--s-3); color: var(--gri); line-height: 1.6; }
.akis-kanit { display: inline-block; padding: var(--s-2) var(--s-3); background: var(--kirec); border: 1px solid var(--cizgi); border-radius: var(--r-1); font-size: .9rem; }
.akis-govde .akis-kanit { color: var(--metin); margin-top: var(--s-4); }

/* ==========================================================================
   İKİ KAPI
   ========================================================================== */
.kapilar { background: var(--kirec); border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); }
.kapilar-ic { padding-top: var(--s-9); padding-bottom: var(--s-9); }
.kapilar-bas { max-width: 46rem; }
.kapilar-baslik { font-size: clamp(2rem, 3.6vw, 2.8rem); }
.kapilar-aciklama { margin-top: var(--s-4); font-size: 1.12rem; color: var(--gri); }
.kapilar-dizi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-7); }
.kapi { --kapi-renk: var(--menekse); --kapi-koyu: var(--menekse-koyu); --kapi-metin-renk: var(--menekse-metin); --kapi-acik: var(--menekse-acik); position: relative; display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-7) var(--s-7) var(--s-7) calc(var(--s-7) + 8px); background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--r-3); overflow: hidden; }
.kapi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--kapi-renk); }
.kapi--bayi { --kapi-renk: var(--deniz); --kapi-koyu: var(--deniz-metin); --kapi-metin-renk: var(--deniz-metin); --kapi-acik: var(--deniz-acik); }
.kapi-bas { display: grid; gap: var(--s-2); }
.kapi-baslik { font-size: 1.9rem; }
.kapi-kim { color: var(--kapi-metin-renk); font-weight: 600; font-size: .98rem; }
.kapi-metin { color: var(--gri); line-height: 1.6; }
.kapi-liste { display: grid; gap: var(--s-2); padding: var(--s-4) 0; border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); font-size: .98rem; }
.kapi-liste li { position: relative; padding-left: var(--s-5); line-height: 1.5; }
.kapi-liste li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 10px; border-radius: 50%; background: var(--kapi-acik); box-shadow: inset 0 0 0 3px var(--kapi-renk); }
.kapi .dugme--kapi { align-self: flex-start; margin-top: var(--s-2); }

/* ==========================================================================
   MODÜLLER — tonlu paneller
   ========================================================================== */
.modul { background: var(--beyaz); }
.modul-ic { padding-top: var(--s-9); padding-bottom: var(--s-9); }
.modul-bas { max-width: 46rem; }
.modul-baslik { font-size: clamp(2rem, 3.6vw, 2.8rem); }
.modul-aciklama { margin-top: var(--s-4); font-size: 1.12rem; color: var(--gri); }
.modul-paneller { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-7); }
.modul-panel { --panel-renk: var(--menekse); --panel-zemin: var(--menekse-acik); --panel-metin: var(--menekse-metin); display: grid; grid-template-rows: auto 1fr; gap: var(--s-4); padding: var(--s-6); background: var(--panel-zemin); border-radius: var(--r-3); }
.modul-panel--stok { --panel-renk: var(--deniz); --panel-zemin: var(--deniz-acik); --panel-metin: var(--deniz-metin); }
.modul-panel--finans { --panel-renk: var(--kehribar); --panel-zemin: var(--kehribar-acik); --panel-metin: var(--kehribar-metin); }
.modul-panel--yonetim { --panel-renk: var(--murekkep); --panel-zemin: var(--kirec); --panel-metin: var(--metin); }
.modul-panel-bas { display: grid; gap: var(--s-2); padding-bottom: var(--s-4); border-bottom: 1px solid color-mix(in srgb, var(--panel-renk) 22%, transparent); }
.modul-panel-baslik { display: flex; align-items: center; gap: var(--s-3); font-size: 1.35rem; }
.modul-panel-baslik::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--panel-renk); }
.modul-panel-ozet { color: var(--panel-metin); font-size: .92rem; line-height: 1.5; }
.modul-panel-liste { display: grid; gap: var(--s-2); align-content: start; }
.modul-panel-liste li { position: relative; padding: 6px 0 6px var(--s-4); font-size: .95rem; line-height: 1.45; }
.modul-panel-liste li::before { content: ""; position: absolute; left: 0; top: 1em; width: 6px; height: 1.5px; background: var(--panel-renk); }
.modul-not { margin-top: var(--s-7); max-width: 46rem; font-size: .95rem; color: var(--gri); }

/* ==========================================================================
   SEKTÖRLER
   ========================================================================== */
.sektor { background: var(--kirec); border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); }
.sektor-ic { padding-top: var(--s-9); padding-bottom: var(--s-9); }
.sektor-bas { max-width: 46rem; }
.sektor-baslik { font-size: clamp(2rem, 3.6vw, 2.8rem); }
.sektor-aciklama { margin-top: var(--s-4); font-size: 1.12rem; color: var(--gri); }
.sektor-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s-7); margin-top: var(--s-7); }
.sektor-madde { padding: var(--s-5) 0; border-top: 1px solid var(--cizgi); }
.sektor-madde dt { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; }
.sektor-madde dd { margin-top: var(--s-2); color: var(--gri); line-height: 1.55; }

/* ==========================================================================
   GÜVENLİK
   ========================================================================== */
.guven { background: var(--beyaz); }
.guven-ic { padding-top: var(--s-9); padding-bottom: var(--s-9); }
.guven-bas { max-width: 46rem; }
.guven-baslik { font-size: clamp(2rem, 3.6vw, 2.8rem); }
.guven-aciklama { margin-top: var(--s-4); font-size: 1.12rem; color: var(--gri); }
.guven-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7) var(--s-6); margin-top: var(--s-7); }
.guven-madde { display: grid; gap: var(--s-2); padding-left: var(--s-4); border-left: 2px solid var(--metin); }
.guven-madde strong { font-size: 1.05rem; font-weight: 600; }
.guven-madde span { color: var(--gri); font-size: .98rem; line-height: 1.55; }

/* ==========================================================================
   KURULUM
   ========================================================================== */
.kurulum { background: var(--kirec); border-top: 1px solid var(--cizgi); }
.kurulum-ic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; padding-top: var(--s-9); padding-bottom: var(--s-9); }
.kurulum-baslik { font-size: clamp(2rem, 3.6vw, 2.8rem); }
.kurulum-aciklama { margin-top: var(--s-4); font-size: 1.12rem; color: var(--gri); }
.kurulum-liste { display: grid; }
.kurulum-madde { display: grid; gap: var(--s-1); padding: var(--s-4) 0; border-top: 1px solid var(--cizgi); }
.kurulum-madde:last-child { border-bottom: 1px solid var(--cizgi); }
.kurulum-madde strong { font-weight: 600; }
.kurulum-madde span { color: var(--gri); line-height: 1.55; }

/* ==========================================================================
   SIK SORULAN SORULAR — çizgili liste, details/summary; kart kiti yok.
   Cevaplar kapalıyken de DOM'da (arama motoru ve yapay zekâ tarayıcı okur).
   ========================================================================== */
.sss { background: var(--beyaz); border-top: 1px solid var(--cizgi); }
.sss-ic { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; padding-top: var(--s-9); padding-bottom: var(--s-9); }
.sss-baslik { font-size: clamp(2rem, 3.6vw, 2.8rem); }
.sss-aciklama { margin-top: var(--s-4); font-size: 1.12rem; color: var(--gri); }
.sss-liste { display: grid; border-top: 1px solid var(--cizgi); }
.sss-madde { border-bottom: 1px solid var(--cizgi); }
.sss-soru { display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: var(--s-4); min-height: 44px; padding: var(--s-4) 0; cursor: pointer; list-style: none; }
.sss-soru::-webkit-details-marker { display: none; }
.sss-soru h3 { font-size: 1.25rem; font-weight: 500; line-height: 1.25; transition: color .18s ease; }
.sss-soru:hover h3 { color: var(--menekse-metin); }
.sss-isaret { position: relative; width: 24px; height: 24px; }
.sss-isaret::before, .sss-isaret::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--menekse-metin); transform: translate(-50%, -50%); transition: transform .18s ease; }
.sss-isaret::before { width: 14px; height: 1.5px; }
.sss-isaret::after { width: 1.5px; height: 14px; }
.sss-madde[open] .sss-isaret::after { transform: translate(-50%, -50%) rotate(90deg); }
.sss-cevap { padding: 0 var(--s-6) var(--s-5) 0; max-width: 62ch; color: var(--gri); line-height: 1.6; }

/* ==========================================================================
   DEMO — kapanış bandı
   ========================================================================== */
.demo { background: radial-gradient(48% 70% at 50% 100%, rgba(109, 93, 252, .28), transparent 72%), var(--murekkep); color: #fff; }
.demo-ic { display: grid; justify-items: center; text-align: center; padding-top: var(--s-9); padding-bottom: var(--s-9); }
.demo-baslik { font-size: clamp(2.1rem, 4.4vw, 3.5rem); max-width: 24ch; color: #fff; }
.demo-aciklama { margin-top: var(--s-5); max-width: 44rem; font-size: 1.12rem; color: rgba(255, 255, 255, .76); }
.demo-eylem { display: grid; justify-items: center; gap: var(--s-4); margin-top: var(--s-6); }
.demo-yok { color: rgba(255, 255, 255, .7); }

/* ==========================================================================
   GİRİŞ — iki kapı
   ========================================================================== */
.giris { background: var(--beyaz); }
.giris-ic { padding-top: var(--s-8); padding-bottom: var(--s-8); }
.giris-baslik { font-size: 1.9rem; }
.giris-kapilar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-5); }
.giris-kapi { --kapi-renk: var(--menekse); --kapi-acik: var(--menekse-acik); --kapi-halka: rgba(109, 93, 252, .2); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); padding: var(--s-5) var(--s-6); border: 1.5px solid var(--cizgi); border-radius: var(--r-3); text-decoration: none; color: var(--metin); transition: border-color .18s ease, background-color .18s ease; }
.giris-kapi--bayi { --kapi-renk: var(--deniz); --kapi-acik: var(--deniz-acik); --kapi-halka: rgba(12, 122, 114, .18); }
.giris-kapi:hover { border-color: var(--kapi-renk); background: var(--kapi-acik); }
.giris-kapi-nokta { width: 14px; height: 14px; border-radius: 50%; background: var(--kapi-renk); box-shadow: 0 0 0 5px var(--kapi-halka); }
.giris-kapi-metin { display: grid; gap: 2px; }
.giris-kapi-metin strong { font-size: 1.12rem; font-weight: 600; }
.giris-kapi-metin span { color: var(--gri); font-size: .95rem; }
.giris-kapi-ok { width: 20px; height: 20px; fill: none; stroke: var(--kapi-renk); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   ALT BİLGİ
   ========================================================================== */
.alt { background: var(--kirec); border-top: 1px solid var(--cizgi); }
.alt-ic { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-5) var(--s-8); align-items: start; padding-top: var(--s-7); padding-bottom: var(--s-7); }
.alt-marka { display: grid; gap: var(--s-3); }
.alt-tanim { color: var(--gri); font-size: .95rem; max-width: 30rem; }
.alt-nav { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: flex-end; }
.alt-nav a { text-decoration: none; color: var(--gri); font-weight: 500; font-size: .95rem; transition: color .18s ease; }
.alt-nav a:hover { color: var(--metin); }
.alt-telif { grid-column: 1 / -1; color: var(--gri-acik); font-size: .9rem; padding-top: var(--s-4); border-top: 1px solid var(--cizgi); }

/* ==========================================================================
   DUYARLI
   ========================================================================== */
@media (max-width: 1080px) {
  .hero-ic { grid-template-columns: 1fr; gap: var(--s-6); padding-top: var(--s-5); padding-bottom: var(--s-8); }
  .hero-metin { max-width: 44rem; }
  /* Telefonda ve tablette ağ ÖNDE durur (Arda 09.09): önce görsel, sonra söz. */
  .hero-ag { order: -1; justify-self: center; max-width: 560px; }
  .akis-ic { grid-template-columns: 1fr; gap: var(--s-7); }
  .akis-yan { position: static; }
  .kapilar-dizi { grid-template-columns: 1fr; }
  .modul-paneller { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sektor-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guven-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kurulum-ic { grid-template-columns: 1fr; gap: var(--s-6); }
  .sss-ic { grid-template-columns: 1fr; gap: var(--s-6); }
  .giris-kapilar { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  :root { --ust-h: 64px; }
  .ust-nav, .ust-sag { display: none; }
  .ust-mobil { display: flex; }
  .neden-ic, .akis-ic, .kapilar-ic, .modul-ic, .sektor-ic, .guven-ic, .demo-ic { padding-top: var(--s-8); padding-bottom: var(--s-8); }
  .kurulum-ic, .sss-ic { padding-top: var(--s-8); padding-bottom: var(--s-8); }
  .neden-etiketler { grid-template-columns: 1fr 1fr; }
  .neden-etiket--veltrox { grid-column: 2; }
  .neden-kart { grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-5); }
  .neden-kart::after { grid-column: 1; grid-row: 2; justify-self: start; margin-left: 3px; transform: rotate(45deg); width: 12px; height: 12px; }
  .neden-bugun { grid-column: 1; grid-row: 1; }
  .neden-veltrox { grid-column: 1; grid-row: 3; }
  .kapi { padding: var(--s-6) var(--s-6) var(--s-6) calc(var(--s-6) + 8px); }
  .alt-ic { grid-template-columns: 1fr; }
  .alt-nav { justify-content: flex-start; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero-ic { padding-top: var(--s-4); }
  .hero-ag { margin-inline: calc(var(--kenar) * -.35); width: auto; }
  .hero-ag-etiket { font-size: 16px; }
  .hero-ag-merkez-etiket { font-size: 17px; }
  .hero-ag-merkez-alt { font-size: 14px; }
  .hero-ag-not text { font-size: 14px; }
  .hero-aciklama { font-size: 1.06rem; }
  .hero-eylem .dugme { width: 100%; }
  .hero-eylem { gap: var(--s-4); }
  .akis-adim { grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-4); }
  .akis-no { width: 44px; height: 44px; font-size: 1.2rem; }
  .akis-omurga { left: 21px; top: 22px; bottom: 22px; }
  .akis-govde { padding-top: var(--s-2); }
  .akis-adim-baslik { font-size: 1.3rem; }
  .kapi { padding: var(--s-5) var(--s-5) var(--s-5) calc(var(--s-5) + 8px); }
  .kapi-baslik { font-size: 1.6rem; }
  .kapi .dugme--kapi { width: 100%; }
  .modul-paneller { grid-template-columns: 1fr; gap: var(--s-4); }
  .modul-panel { padding: var(--s-5); }
  .sektor-liste { grid-template-columns: 1fr; }
  .guven-liste { grid-template-columns: 1fr; gap: var(--s-5); }
  .sss-soru h3 { font-size: 1.12rem; }
  .sss-cevap { padding-right: 0; }
  .demo-eylem .dugme { width: 100%; }
  .giris-kapi { padding: var(--s-4) var(--s-5); }
}

/* ---------- hareket azaltma: açılış yok, akan nokta yok, son durum çizili ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-belir] { opacity: 1; transform: none; transition: none; }
  .hero-ag-hat, .hero-ag-dugum, .hero-ag-not, .hero-metin > *, .hero-ag { animation: none; stroke-dashoffset: 0; opacity: 1; }
  .hero-ag-akan { display: none; }
  .akis-no, .dugme, .ust-nav a, .ust-giris, .hero-ikincil, .giris-kapi, .neden-kart, .alt-nav a, .ust-menu-cizgi, .sss-soru h3, .sss-isaret::before, .sss-isaret::after { transition: none; }
}