/* ==========================================================================
   sentroerp.com.tr — tanıtım sitesi
   Tasarım dili: .claude/skills/site-tasarim/SKILL.md — dokunmadan önce oku.

   Yön (20.09.2026, kullanıcı kararı): adisyo.com / logo.com.tr / kolaybi.com
   üçlüsünün ortak kalıbı — beyaz + açık gri dönüşümlü bölümler, TEK marka
   rengi (lacivert bantlar + mavi düğmeler), yuvarlak kartlar + yumuşak gölge,
   ikonlu 3'lü bloklar, sol metin / sağ ekran görüntüsü zigzagı, koyu bant,
   entegrasyon logoları, SSS, büyük footer. Sayfa DOLU olmalı; boşluk
   bırakılmaz, gerçek ekran görüntüsü kullanılır (assets/ekran/).

   Renkler programın kendi paletiyle aynı (lib/app_colors.dart): site ile
   ekran görüntüleri aynı dünyada dursun diye.

   Sayfada satır içi style="" YOK — index.html'deki CSP (style-src 'self')
   buna dayanır; satır içi stil hata vermeden uygulanmaz. Stil gerekiyorsa
   buraya sınıf olarak eklenir. Dosya değişince index.html'deki ?v= artırılır.
   ========================================================================== */

@font-face { font-family: 'Inter'; src: url('fonts/Inter-Regular.ttf') format('truetype');   font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-SemiBold.ttf') format('truetype');  font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-ExtraBold.ttf') format('truetype'); font-weight: 800 900; font-style: normal; font-display: swap; }

:root {
    --lacivert: #0F172A;      /* koyu bantlar, alt bilgi */
    --lacivert-2: #1E293B;    /* koyu bant içi kart */
    --mavi: #2563EB;          /* TEK marka rengi: düğme, bağlantı, ikon */
    --mavi-koyu: #1D4ED8;
    --mavi-acik: #EFF6FF;     /* ikon dairesi zemini, seçili durum */
    --mavi-kenar: #BFDBFE;
    --zemin: #F5F7FB;         /* dönüşümlü açık gri bölüm */
    --hover: #EEF2F7;
    --kenar: #E2E8F0;
    --kenar-koyu: #CBD5E1;
    --metin: #0F172A;
    --metin-2: #475569;
    --soluk: #94A3B8;
    --yesil: #10B981;  --yesil-acik: #ECFDF5;  --yesil-koyu: #047857;
    --turuncu: #F59E0B; --turuncu-acik: #FFFBEB; --turuncu-kenar: #FDE68A; --turuncu-koyu: #B45309;
    --kirmizi: #EF4444; --kirmizi-acik: #FEE2E2; --kirmizi-koyu: #B91C1C;
    --golge: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px rgba(15, 23, 42, .08);
    --golge-buyuk: 0 24px 64px rgba(15, 23, 42, .18), 0 4px 12px rgba(15, 23, 42, .06);
}

/* ── Temel ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
html:has(dialog[open]) { overflow: hidden; }
body {
    margin: 0;
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 16px; line-height: 1.6;
    color: var(--metin); background: #FFFFFF;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, dl, dd { margin: 0; }
svg { display: block; }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea { font: inherit; color: inherit; }
a { color: var(--mavi); text-decoration: none; }
a:hover { color: var(--mavi-koyu); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--mavi); outline-offset: 2px; }
main { overflow-x: clip; }

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

.atla { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #FFFFFF; color: var(--metin); padding: 8px 12px; border-radius: 8px; box-shadow: var(--golge); }
.atla:focus { left: 16px; }

.kap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 24px; }

/* ── Hareket ──────────────────────────────────────────────────────────────
   Ölçülü: giriş anı, kaydırma ve fare üstü. Sürekli dönen/kayan bir şey yok.
   Tümü prefers-reduced-motion'da kapanır (üstteki genel kural). */

/* Kaydırınca belirme: JS .goruldu ekler. JS yoksa hep görünür. */
html.js .belir { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.2, .8, .2, 1), transform .6s cubic-bezier(.2, .8, .2, 1); }
html.js .belir.goruldu { opacity: 1; transform: none; }
/* Zigzag görselleri yandan gelir */
html.js .zigzag-gorsel.belir { transform: translateX(48px); }
html.js .zigzag.ters .zigzag-gorsel.belir { transform: translateX(-48px); }
html.js .koyu-gorsel.belir { transform: translateX(48px) scale(.98); }
/* Izgaralarda kademeli belirme: kardeşler 80 ms arayla */
.sektor-grid > .belir:nth-child(2), .ozellik-grid > .belir:nth-child(2), .ent-grid > .belir:nth-child(2), .donanim-grid > .belir:nth-child(2), .sss-liste > .belir:nth-child(2) { transition-delay: .08s; }
.sektor-grid > .belir:nth-child(3), .ozellik-grid > .belir:nth-child(3), .ent-grid > .belir:nth-child(3), .donanim-grid > .belir:nth-child(3), .sss-liste > .belir:nth-child(3) { transition-delay: .16s; }
.sektor-grid > .belir:nth-child(4), .ent-grid > .belir:nth-child(4), .donanim-grid > .belir:nth-child(4), .sss-liste > .belir:nth-child(4) { transition-delay: .24s; }
.sss-liste > .belir:nth-child(5) { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { html.js .belir { opacity: 1; transform: none; } }

/* Açılış: hero içeriği sırayla süzülür, görsel sağdan gelir */
@keyframes gir-yukari { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes gir-sag { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
.hero-metin > * { animation: gir-yukari .7s cubic-bezier(.2, .8, .2, 1) both; }
.hero-metin > :nth-child(2) { animation-delay: .08s; }
.hero-metin > :nth-child(3) { animation-delay: .16s; }
.hero-metin > :nth-child(4) { animation-delay: .24s; }
.hero-metin > :nth-child(5) { animation-delay: .32s; }
.hero-gorsel { animation: gir-sag .9s cubic-bezier(.2, .8, .2, 1) .2s both; }

/* Nabız: rozet noktası ve sabit WhatsApp */
@keyframes nabiz { 0%, 100% { box-shadow: 0 0 0 3px var(--yesil-acik); } 50% { box-shadow: 0 0 0 7px rgba(16, 185, 129, .18); } }
@keyframes nabiz-wa { 0%, 100% { box-shadow: 0 8px 24px rgba(37, 211, 102, .4), 0 0 0 0 rgba(37, 211, 102, .5); } 60% { box-shadow: 0 8px 24px rgba(37, 211, 102, .4), 0 0 0 14px rgba(37, 211, 102, 0); } }

/* Fare üstü eğim (tilt): site.js satır içi transform yazar */
.tilt { transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; will-change: transform; }
.tilt.canli { transition-duration: .1s; }

/* ── Düğmeler (hap biçimli, referans üçlüsünün ortak dili) ─────────────── */
.dugme {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 46px; padding: 0 22px;
    border: 1px solid transparent; border-radius: 999px;
    font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap;
    cursor: pointer; text-decoration: none;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
.dugme svg { width: 18px; height: 18px; flex-shrink: 0; }
.dugme-kucuk { height: 40px; padding: 0 18px; font-size: 14px; }
.dugme-buyuk { height: 54px; padding: 0 28px; font-size: 16px; }
.dugme-birincil { background: var(--mavi); color: #FFFFFF; box-shadow: 0 6px 16px rgba(37, 99, 235, .28); }
.dugme-birincil:hover { background: var(--mavi-koyu); color: #FFFFFF; transform: translateY(-1px); }
.dugme-cizgi { background: #FFFFFF; color: var(--metin); border-color: var(--kenar-koyu); }
.dugme-cizgi:hover { border-color: var(--metin); color: var(--metin); }
.dugme-koyu-cizgi { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, .35); }
.dugme-koyu-cizgi:hover { background: rgba(255, 255, 255, .1); color: #FFFFFF; }
.dugme-beyaz { background: #FFFFFF; color: var(--mavi-koyu); }
.dugme-beyaz:hover { background: var(--mavi-acik); color: var(--mavi-koyu); }
.dugme-hayalet { background: transparent; color: var(--metin-2); }
.dugme-hayalet:hover { background: var(--hover); color: var(--metin); }
.dugme[disabled] { opacity: .7; cursor: progress; }

.metin-baglanti {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0; border: 0; background: none; cursor: pointer;
    font-size: 15px; font-weight: 600; color: var(--mavi);
    transition: gap .15s, color .15s;
}
.metin-baglanti svg { width: 16px; height: 16px; }
.metin-baglanti:hover { gap: 9px; color: var(--mavi-koyu); }
.metin-baglanti.acik { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.metin-baglanti.acik:hover { color: #FFFFFF; }

/* ── Duyuru şeridi ─────────────────────────────────────────────────────── */
.duyuru { background: var(--lacivert); color: #CBD5E1; font-size: 13px; }
.duyuru-ic { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.duyuru-metin b { color: #FFFFFF; font-weight: 600; }
.duyuru-sag { display: flex; gap: 20px; flex-shrink: 0; }
.duyuru-sag a { color: #CBD5E1; font-weight: 500; }
.duyuru-sag a:hover { color: #FFFFFF; }
@media (max-width: 800px) { .duyuru-sag { display: none; } .duyuru-metin { padding-block: 8px; } }

/* ── Üst menü ──────────────────────────────────────────────────────────── */
.ust { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92); border-bottom: 1px solid var(--kenar); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: box-shadow .25s; }
.ust.kaydi { box-shadow: 0 8px 24px rgba(15, 23, 42, .08); } /* site.js: sayfa kayınca */
.ust-ic { position: relative; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--metin); font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.logo img { width: 36px; height: 36px; }
.logo b { font-weight: 800; color: var(--mavi); }
.logo-acik { color: #FFFFFF; }
.logo-acik b { color: #93C5FD; }
.ust-menu { display: flex; align-items: center; gap: 28px; }
.ust-menu a { font-size: 15px; font-weight: 500; color: var(--metin-2); }
.ust-menu a:hover { color: var(--metin); }
.ust-menu-destek { display: none; }
.ust-sag { display: flex; align-items: center; gap: 14px; }
.ust-link { font-size: 15px; font-weight: 500; color: var(--metin-2); }
.ust-link:hover { color: var(--metin); }
.menu-dugme {
    display: none; width: 44px; height: 44px; padding: 0;
    border: 0; border-radius: 10px; background: transparent; color: var(--metin);
    align-items: center; justify-content: center; cursor: pointer;
}
.menu-dugme svg { width: 22px; height: 22px; }

@media (max-width: 1100px) {
    .menu-dugme { display: inline-flex; }
    .ust-link { display: none; }
    .ust-menu {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        padding: 8px 16px 16px;
        background: #FFFFFF; border-top: 1px solid var(--kenar);
        box-shadow: 0 16px 32px rgba(15, 23, 42, .12);
    }
    .ust-menu.acik { display: flex; }
    .ust-menu a { padding: 14px 8px; border-bottom: 1px solid var(--kenar); }
    .ust-menu-destek { display: block; }
}
@media (max-width: 560px) {
    .kap { padding-inline: 16px; }
    .ust-ic { height: 64px; gap: 12px; }
    .logo span { display: none; }
    .ust-sag { gap: 4px; }
    .dugme-kucuk { height: 36px; padding: 0 14px; font-size: 13px; }
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero { position: relative; background: linear-gradient(180deg, #F3F7FF 0%, #FFFFFF 100%); overflow: hidden; }
.hero::before { content: ''; position: absolute; right: -10%; top: -30%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(37, 99, 235, .10), transparent 70%); pointer-events: none; }
.hero-ic { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); gap: 56px; align-items: center; padding-block: 72px 88px; }
.hero-metin { display: flex; flex-direction: column; gap: 22px; }
.rozet, .rozet-koyu {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 32px; padding: 6px 14px 6px 10px;
    background: #FFFFFF; border: 1px solid var(--mavi-kenar); border-radius: 999px;
    font-size: 13px; font-weight: 600; color: var(--mavi-koyu);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--yesil); flex-shrink: 0; box-shadow: 0 0 0 3px var(--yesil-acik); animation: nabiz 2.4s ease-in-out infinite; }
.hero h1 { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.1; font-weight: 800; letter-spacing: -.03em; text-wrap: balance; }
.hero h1 span { color: var(--mavi); }
.hero-alt { max-width: 56ch; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.65; color: var(--metin-2); text-wrap: pretty; }
.hero-butonlar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.hero-tikler { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; font-weight: 500; color: var(--metin-2); }
.hero-tikler li { display: flex; align-items: center; gap: 8px; }
.hero-tikler svg { width: 16px; height: 16px; color: var(--yesil); }

.hero-gorsel { position: relative; }
/* Fare paralaksı site.js'te: satır içi transform yazar, fare çıkınca siler.
   Geçiş burada — fare üstündeyken (.canli) kısa, ayrılınca uzun ve yumuşak. */
.hero-gorsel .cihaz { transform: perspective(1600px) rotateY(-6deg) rotateX(2deg); transition: transform .6s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.hero-gorsel .hero-kart { transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; will-change: transform; }
.hero-gorsel.canli .cihaz, .hero-gorsel.canli .hero-kart { transition-duration: .12s; }
.hero-gorsel.canli .hero-kart { box-shadow: 0 32px 72px rgba(15, 23, 42, .22), 0 4px 12px rgba(15, 23, 42, .06); }
.hero-kart {
    position: absolute; padding: 12px 16px 12px 12px;
    background: #FFFFFF; border: 1px solid var(--kenar); border-radius: 14px; box-shadow: var(--golge-buyuk);
    display: flex; align-items: center; gap: 12px;
}
.hero-kart-1 { left: -28px; bottom: 36px; }
.hero-kart-2 { right: -20px; top: 28px; }
.hero-kart-ikon { width: 38px; height: 38px; border-radius: 10px; background: var(--mavi-acik); color: var(--mavi); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hero-kart-ikon.yesil { background: var(--yesil-acik); color: var(--yesil-koyu); }
.hero-kart-ikon svg { width: 18px; height: 18px; }
.hero-kart b { display: block; font-size: 13.5px; font-weight: 600; }
.hero-kart small { display: block; margin-top: 1px; font-size: 12px; color: var(--metin-2); }

/* is-ortagi.html: görselsiz, ortalanmış kısa hero */
.hero-kisa .hero-metin { align-items: center; text-align: center; padding-block: 72px 80px; }
.hero-kisa .hero-alt { max-width: 640px; }
.hero-kisa .hero-butonlar { justify-content: center; }

@media (max-width: 1024px) {
    .hero-ic { grid-template-columns: 1fr; gap: 40px; padding-block: 48px 64px; }
    .hero-gorsel .cihaz { transform: none; }
    .hero-kart-1 { left: 8px; bottom: -18px; }
    .hero-kart-2 { right: 8px; top: -18px; }
}
@media (max-width: 560px) {
    .hero-ic { padding-block: 36px 56px; }
    .hero-butonlar { flex-direction: column; align-self: stretch; }
    .hero-butonlar .dugme { width: 100%; }
    .hero-kart { display: none; }
}

/* ── Cihaz çerçevesi (ekran görüntüleri) ───────────────────────────────── */
.cihaz-bilgisayar { position: relative; background: #FFFFFF; border: 1px solid var(--kenar); border-radius: 14px; box-shadow: var(--golge-buyuk); overflow: hidden; }
.cihaz-bilgisayar::before { content: ''; display: block; height: 28px; background: var(--zemin); border-bottom: 1px solid var(--kenar); background-image: radial-gradient(circle, var(--kenar-koyu) 4px, transparent 4.5px); background-size: 16px 28px; background-repeat: repeat-x; background-position: 8px 0; }
.cihaz-bilgisayar img { width: 100%; }
.koyu-cihaz { border-color: rgba(255, 255, 255, .12); box-shadow: 0 32px 80px rgba(0, 0, 0, .45); }
.koyu-cihaz::before { background-color: var(--lacivert-2); border-bottom-color: rgba(255, 255, 255, .08); }

/* ── Logo şeridi ───────────────────────────────────────────────────────── */
.logolar { padding-block: 36px; border-block: 1px solid var(--kenar); background: #FFFFFF; }
.logolar-ic { display: flex; align-items: center; gap: 40px; }
.logolar p { flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--soluk); max-width: 180px; line-height: 1.4; }
.logolar ul { flex: 1; list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-around; align-items: center; gap: 32px; flex-wrap: wrap; }
.logolar img { height: 34px; width: auto; filter: grayscale(1); opacity: .6; transition: filter .2s, opacity .2s; }
.logolar li:hover img { filter: none; opacity: 1; }
.logolar-metin { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--kenar-koyu); }
@media (max-width: 800px) {
    .logolar-ic { flex-direction: column; gap: 20px; }
    .logolar p { max-width: none; text-align: center; }
    .logolar img { height: 26px; }
}

/* ── Bölüm iskeleti ────────────────────────────────────────────────────── */
.bolum { padding-block: 96px; }
.bolum.zemin { background: var(--zemin); }
.bolum-bas { display: flex; flex-direction: column; gap: 12px; margin-bottom: 48px; }
.bolum-bas.orta { align-items: center; text-align: center; }
.bolum-bas.orta .baslik-2 { max-width: 720px; }
.bolum-bas.orta .bolum-alt { max-width: 640px; }
.ust-yazi { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mavi); }
.baslik-2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.15; font-weight: 800; letter-spacing: -.025em; text-wrap: balance; }
.bolum-alt, p.buyuk { font-size: 17px; line-height: 1.65; color: var(--metin-2); text-wrap: pretty; }
.bolum-bas.acik .ust-yazi { color: #93C5FD; }
.bolum-bas.acik .baslik-2 { color: #FFFFFF; }
.bolum-bas.acik .bolum-alt { color: #CBD5E1; }
.bolum-yigin { display: flex; flex-direction: column; gap: 48px; }

@media (max-width: 560px) { .bolum { padding-block: 60px; } .bolum-bas { margin-bottom: 32px; } }

/* ── Sektör seçici (koyu bant) ─────────────────────────────────────────── */
.sektorler { padding-block: 88px; background: var(--lacivert); background-image: radial-gradient(60% 80% at 80% 0%, rgba(37, 99, 235, .25), transparent 60%); color: #FFFFFF; }
.sektor-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sektor {
    padding: 26px 22px; text-align: left;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px;
    color: #FFFFFF; cursor: pointer;
    display: flex; flex-direction: column; gap: 6px;
    transition: background-color .15s, border-color .15s, transform .15s;
}
.sektor:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .28); transform: translateY(-3px); }
.sektor-ikon { width: 48px; height: 48px; margin-bottom: 10px; border-radius: 12px; background: var(--mavi); color: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.sektor-ikon svg { width: 24px; height: 24px; }
.sektor b { font-size: 17px; font-weight: 700; }
.sektor small { font-size: 13.5px; line-height: 1.5; color: #CBD5E1; }
.sektor-not { margin-top: 28px; text-align: center; font-size: 14.5px; color: #CBD5E1; }
@media (max-width: 1024px) { .sektor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sektorler { padding-block: 60px; } .sektor-grid { grid-template-columns: 1fr; } }

/* ── 3'lü ikonlu özellik ───────────────────────────────────────────────── */
.ozellik-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ozellik { padding: 32px 28px; background: #FFFFFF; border: 1px solid var(--kenar); border-radius: 18px; box-shadow: var(--golge); display: flex; flex-direction: column; gap: 12px; transition: transform .15s, box-shadow .15s; }
.ozellik:hover { transform: translateY(-4px); box-shadow: var(--golge-buyuk); }
.ozellik-ikon { width: 56px; height: 56px; margin-bottom: 6px; border-radius: 50%; background: var(--mavi-acik); color: var(--mavi); display: flex; align-items: center; justify-content: center; }
.ozellik-ikon svg { width: 26px; height: 26px; }
.ozellik h3 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.ozellik p { font-size: 15px; line-height: 1.65; color: var(--metin-2); }
@media (max-width: 900px) { .ozellik-grid { grid-template-columns: 1fr; } }

/* ── Zigzag: sol metin / sağ ekran ─────────────────────────────────────── */
.zigzag-ic { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.zigzag.ters .zigzag-metin { order: 2; }
.zigzag-metin { display: flex; flex-direction: column; gap: 18px; }
.zigzag-metin .bolum-bas { margin-bottom: 0; }
.tik-liste { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: 15.5px; line-height: 1.55; }
.tik-liste li { display: flex; align-items: flex-start; gap: 12px; }
.tik-liste svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; padding: 3px; border-radius: 50%; background: var(--yesil-acik); color: var(--yesil-koyu); }
.tik-liste b { font-weight: 600; }
.tik-liste span { color: var(--metin-2); }
.tik-liste span b { color: var(--metin); }
@media (max-width: 1024px) {
    .zigzag-ic { grid-template-columns: 1fr; gap: 36px; }
    .zigzag.ters .zigzag-metin { order: 0; }
}

/* ── Koyu bant: özet + rakamlar ────────────────────────────────────────── */
.koyu { padding-block: 104px; background: var(--lacivert); background-image: radial-gradient(50% 70% at 0% 100%, rgba(37, 99, 235, .28), transparent 60%); color: #FFFFFF; overflow: hidden; }
.koyu-ic { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.koyu-metin { display: flex; flex-direction: column; gap: 18px; }
.koyu .ust-yazi { color: #93C5FD; }
.koyu .bolum-alt { color: #CBD5E1; }
.rakamlar { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rakamlar div { padding: 18px 20px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .10); border-radius: 14px; }
.rakamlar dt { font-size: 28px; font-weight: 800; letter-spacing: -.03em; color: #FFFFFF; }
.rakamlar dd { margin-top: 4px; font-size: 13px; line-height: 1.5; color: #CBD5E1; }
.koyu-gorsel .cihaz { transform: perspective(1600px) rotateY(6deg); }
@media (max-width: 1024px) {
    .koyu { padding-block: 72px; }
    .koyu-ic { grid-template-columns: 1fr; gap: 40px; }
    .koyu-gorsel .cihaz { transform: none; }
}
@media (max-width: 560px) { .rakamlar { grid-template-columns: 1fr; } }

/* ── Entegrasyonlar ────────────────────────────────────────────────────── */
.ent-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ent { padding: 28px 24px; background: #FFFFFF; border: 1px solid var(--kenar); border-radius: 18px; box-shadow: var(--golge); display: flex; flex-direction: column; gap: 10px; transition: transform .15s, box-shadow .15s; }
.ent:hover { transform: translateY(-4px); box-shadow: var(--golge-buyuk); }
.ent-logo { height: 56px; margin-bottom: 8px; display: flex; align-items: center; }
.ent-logo img { max-height: 36px; width: auto; }
.ent-logo-metin { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: #7F54B3; }
.ent-logo-metin b { font-weight: 400; }
.ent h3 { font-size: 17px; font-weight: 700; }
.ent p { font-size: 14.5px; line-height: 1.6; color: var(--metin-2); }
@media (max-width: 1024px) { .ent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ent-grid { grid-template-columns: 1fr; } }

/* ── Donanım ───────────────────────────────────────────────────────────── */
.donanim-ic { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: center; }
.donanim-metin { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.donanim-metin .dugme { margin-top: 8px; }
.donanim-grid, .guven-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.guven-grid.uclu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kart { padding: 26px 24px; background: #FFFFFF; border: 1px solid var(--kenar); border-radius: 16px; box-shadow: var(--golge); display: flex; flex-direction: column; gap: 10px; transition: transform .15s, box-shadow .15s; }
.kart:hover { transform: translateY(-4px); box-shadow: var(--golge-buyuk); }
.sektor:hover .sektor-ikon { transform: translateY(-3px) rotate(-4deg); }
.sektor-ikon { transition: transform .2s; }
.kart h3 { font-size: 16.5px; font-weight: 700; }
.kart p { font-size: 14.5px; line-height: 1.6; color: var(--metin-2); }
.ikon-kutu { width: 46px; height: 46px; margin-bottom: 4px; border-radius: 12px; background: var(--mavi-acik); color: var(--mavi); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ikon-kutu svg { width: 22px; height: 22px; }
.ikon-kutu.yesil { background: var(--yesil-acik); color: var(--yesil-koyu); }
.ikon-kutu.turuncu { background: var(--turuncu-acik); color: var(--turuncu-koyu); }
@media (max-width: 1024px) {
    .donanim-ic { grid-template-columns: 1fr; gap: 36px; }
    .guven-grid.uclu { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .donanim-grid { grid-template-columns: 1fr; } }

/* ── Arkasındaki ekip ──────────────────────────────────────────────────── */
.ekip { padding-block: 0 96px; }
/* Kurumsal ton: birinci tekil şahıs ve kurucu imzası YOK (kullanıcı kararı,
   20.09.2026). Sol: şirket metni + kanallar; sağ: 2×2 güvence kartı. */
.ekip-kart { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; padding: 48px; background: #FFFFFF; border: 1px solid var(--kenar); border-radius: 24px; box-shadow: var(--golge); }
.ekip-metin { display: flex; flex-direction: column; gap: 16px; }
.guvenceler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.guvenceler div { padding: 20px 18px; background: var(--zemin); border: 1px solid var(--kenar); border-radius: 16px; }
.guvenceler .ikon-kutu { width: 40px; height: 40px; margin-bottom: 12px; border-radius: 10px; }
.guvenceler .ikon-kutu svg { width: 20px; height: 20px; }
.guvenceler dt { font-size: 15px; font-weight: 700; }
.guvenceler dd { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--metin-2); }
.kanallar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.kanal { padding: 16px; border: 1px solid var(--kenar); border-radius: 14px; background: var(--zemin); display: flex; flex-direction: column; gap: 4px; color: var(--metin); transition: border-color .15s, background-color .15s; }
.kanal:hover { border-color: var(--mavi-kenar); background: var(--mavi-acik); color: var(--metin); }
.kanal b { font-size: 14px; font-weight: 700; }
.kanal span { font-size: 13px; color: var(--metin-2); }
@media (max-width: 1024px) {
    .ekip-kart { grid-template-columns: 1fr; gap: 28px; padding: 32px; }
}
@media (max-width: 560px) {
    .ekip { padding-bottom: 60px; }
    .ekip-kart { padding: 22px; border-radius: 18px; }
    .kanallar, .guvenceler { grid-template-columns: 1fr; }
}

/* ── Sık sorulanlar ────────────────────────────────────────────────────── */
.sss-ic { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 72px; align-items: start; }
.sss-bas { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.sss-bas .dugme { margin-top: 8px; }
.sss-liste { display: flex; flex-direction: column; gap: 12px; }
.sss-madde { background: #FFFFFF; border: 1px solid var(--kenar); border-radius: 14px; box-shadow: var(--golge); }
.sss-madde summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 24px; font-size: 16.5px; font-weight: 600; cursor: pointer; }
.sss-madde summary::-webkit-details-marker { display: none; }
.sss-arti { width: 22px; height: 22px; flex-shrink: 0; padding: 3px; border-radius: 50%; background: var(--mavi-acik); color: var(--mavi); transition: transform .2s; }
.sss-madde[open] .sss-arti { transform: rotate(45deg); }
.sss-madde p { padding: 0 24px 22px; font-size: 15px; line-height: 1.65; color: var(--metin-2); }
@media (max-width: 1024px) { .sss-ic { grid-template-columns: 1fr; gap: 28px; } .sss-bas { position: static; } }

/* ── Kapanış (mavi bant) ───────────────────────────────────────────────── */
.kapanis { padding-block: 88px; background: var(--mavi); background-image: linear-gradient(135deg, #1D4ED8 0%, #2563EB 55%, #3B82F6 100%); color: #FFFFFF; }
.kapanis-ic { display: flex; justify-content: space-between; align-items: center; gap: 48px; }
.kapanis h2 { max-width: 20ch; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; font-weight: 800; letter-spacing: -.025em; }
.kapanis p { margin-top: 14px; max-width: 54ch; font-size: 17px; line-height: 1.6; color: #DBEAFE; }
.kapanis-dugmeler { display: flex; gap: 12px; flex-shrink: 0; }
@media (max-width: 1024px) { .kapanis-ic { flex-direction: column; align-items: flex-start; } }
@media (max-width: 560px) {
    .kapanis { padding-block: 56px; }
    .kapanis-dugmeler { flex-direction: column-reverse; align-self: stretch; }
    .kapanis-dugmeler .dugme { width: 100%; }
}

/* ── Alt bilgi ─────────────────────────────────────────────────────────── */
.alt { padding-block: 72px 36px; background: var(--lacivert); color: #CBD5E1; }
.alt-ust { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: 48px; }
.alt-marka { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.alt-marka p { max-width: 34ch; font-size: 14px; line-height: 1.65; color: var(--soluk); }
.alt-sutun { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 14px; }
.alt-sutun h2 { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #FFFFFF; }
.alt-sutun a, .alt-sutun button { padding: 0; border: 0; background: none; font-size: 14px; color: #CBD5E1; text-align: left; cursor: pointer; }
.alt-sutun a:hover, .alt-sutun button:hover { color: #FFFFFF; }
.alt-alt { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .10); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--soluk); }
.alt-yasal { display: flex; flex-wrap: wrap; gap: 24px; }
.alt-yasal a { color: var(--soluk); }
.alt-yasal a:hover { color: #FFFFFF; }
@media (max-width: 1024px) { .alt-ust { grid-template-columns: repeat(3, minmax(0, 1fr)); } .alt-marka { grid-column: 1 / -1; } }
@media (max-width: 560px) { .alt { padding-block: 48px 28px; } .alt-ust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } }

/* ── Sabit WhatsApp düğmesi ────────────────────────────────────────────── */
.wa-sabit { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #FFFFFF; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(37, 211, 102, .4); transition: transform .15s; animation: nabiz-wa 2.8s ease-out infinite; }
.wa-sabit:hover { transform: scale(1.06); color: #FFFFFF; }
.wa-sabit svg { width: 28px; height: 28px; }

/* ── is-ortagi.html'e özel ─────────────────────────────────────────────── */
.avantajlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.avantaj { padding: 28px; background: #FFFFFF; border: 1px solid var(--kenar); border-radius: 16px; box-shadow: var(--golge); display: flex; gap: 16px; }
.avantaj h3 { font-size: 17px; font-weight: 700; }
.avantaj p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--metin-2); }
.adimlar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.adim { display: flex; flex-direction: column; gap: 14px; }
.adim-ust { display: flex; align-items: center; gap: 16px; }
.adim-no { width: 44px; height: 44px; border-radius: 50%; background: var(--lacivert); color: #FFFFFF; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.adim-no.son { background: var(--mavi); }
.adim-cizgi { flex: 1; height: 1px; background: var(--kenar-koyu); }
.adim h3 { font-size: 19px; font-weight: 700; }
.adim p { font-size: 15px; line-height: 1.6; color: var(--metin-2); }
.basvuru { background: var(--zemin); border-top: 1px solid var(--kenar); }
.basvuru-ic { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.basvuru-ic > * { min-width: 0; }
.basvuru-metin { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 104px; }
.form-kart { background: #FFFFFF; border: 1px solid var(--kenar); border-radius: 18px; box-shadow: var(--golge); overflow: hidden; }
.form-kart-govde { padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.form-kart-alt { padding: 16px 28px; border-top: 1px solid var(--kenar); background: var(--zemin); display: flex; justify-content: flex-end; }
.form-kart-alt .dugme { height: 44px; }
@media (max-width: 1024px) {
    .avantajlar { grid-template-columns: 1fr; }
    .adimlar { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
    .adim:nth-child(2) .adim-cizgi { display: none; }
    .basvuru-ic { grid-template-columns: 1fr; gap: 32px; }
    .basvuru-metin { position: static; }
}
@media (max-width: 560px) {
    .adimlar { grid-template-columns: 1fr; row-gap: 28px; }
    .adim-cizgi { display: none; }
    .avantaj { padding: 20px; }
    .form-kart-govde { padding: 20px; }
    .form-kart-alt { padding: 16px 20px; }
    .form-kart-alt .dugme { width: 100%; }
}

/* ── Yasal metin sayfaları (kvkk-aydinlatma.html) ──────────────────────── */
.belge { padding-block: 64px 96px; }
.belge-ic { max-width: 760px; }
.belge h1 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; font-weight: 800; letter-spacing: -.025em; }
.belge-not { margin-top: 24px; padding: 16px 18px; background: var(--turuncu-acik); border: 1px solid var(--turuncu-kenar); border-radius: 12px; font-size: 15px; line-height: 1.6; color: var(--turuncu-koyu); }
.belge p { margin-top: 16px; font-size: 16px; line-height: 1.7; color: var(--metin-2); }
.belge h2 { margin-top: 36px; font-size: 20px; line-height: 1.3; font-weight: 700; }
.belge ul { margin: 12px 0 0; padding-left: 22px; color: var(--metin-2); line-height: 1.7; }
.belge li + li { margin-top: 6px; }

/* ── Çerez bilgilendirme bandı (site.js oluşturur) ─────────────────────────
   Yalnız zorunlu çerez kullanıldığı için onay paneli değil, bilgilendirme.
   Web paneli / destek portalındaki kopyası: web/js/cerez-bandi.js. */
.cerez-bandi {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 900;
    max-width: 720px; margin: 0 auto;
    display: flex; align-items: center; gap: 16px;
    padding: 14px 16px; border-radius: 10px;
    background: var(--lacivert); color: #E2E8F0;
    font-size: 14px; line-height: 1.5; box-shadow: var(--golge-buyuk);
}
.cerez-bandi p { flex: 1; }
.cerez-bandi a { color: #FFFFFF; text-decoration: underline; }
.cerez-bandi a:focus-visible, .cerez-bandi .dugme:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
@media (max-width: 560px) {
    .cerez-bandi { flex-direction: column; align-items: stretch; gap: 10px; }
}

/* ==========================================================================
   Demo talep penceresi (<dialog>)
   ========================================================================== */
.pencere { width: 100%; max-width: min(600px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; background: transparent; color: var(--metin); overflow: visible; }
.pencere::backdrop { background: rgba(15, 23, 42, .40); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.pencere-kart { max-height: calc(100dvh - 32px); background: #FFFFFF; border: 1px solid var(--kenar); border-radius: 16px; box-shadow: 0 24px 64px rgba(15, 23, 42, .22), 0 4px 16px rgba(15, 23, 42, .08); display: flex; flex-direction: column; overflow: hidden; }
.demo-form { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pencere-bas { padding: 24px 28px 20px; border-bottom: 1px solid var(--kenar); display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.pencere-bas h2 { font-size: 20px; font-weight: 700; }
.pencere-bas p { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--metin-2); }
.pencere-kapat { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: var(--zemin); color: var(--metin-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
.pencere-kapat:hover { background: var(--kenar); color: var(--metin); }
.pencere-kapat svg { width: 18px; height: 18px; }
.pencere-govde { min-height: 0; padding: 24px 28px; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; }

.alan-cift { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.alan { min-width: 0; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 6px; }
.alan label, .alan legend { padding: 0; font-size: 13px; font-weight: 500; color: var(--metin-2); }
.alan legend { margin-bottom: 8px; }
.alan label span, .alan legend span { font-weight: 400; color: var(--soluk); }
.alan input, .alan textarea { width: 100%; height: 42px; padding: 0 12px; background: #FFFFFF; border: 1px solid var(--kenar); border-radius: 10px; font-size: 14px; color: var(--metin); transition: border-color .15s, box-shadow .15s; }
.alan textarea { height: auto; min-height: 72px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.alan input::placeholder, .alan textarea::placeholder { color: var(--soluk); }
.alan input:focus, .alan textarea:focus { outline: none; border-color: var(--mavi); box-shadow: 0 0 0 1px var(--mavi), 0 0 0 4px var(--mavi-acik); }
.alan [aria-invalid="true"] { border-color: var(--kirmizi); }
.alan-hata { font-size: 12.5px; color: var(--kirmizi-koyu); }
.alan-hata:empty { display: none; }

.secenekler { display: flex; flex-wrap: wrap; gap: 8px; }
.secenekler-uclu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.secenek { position: relative; cursor: pointer; }
.secenek input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.secenek span { height: 36px; padding: 0 14px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--kenar); display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--metin-2); transition: background-color .15s, border-color .15s, color .15s; }
.secenekler-uclu .secenek span { height: 40px; border-radius: 10px; }
.secenek span svg { display: none; width: 14px; height: 14px; }
.secenek:hover span { border-color: var(--soluk); color: var(--metin); }
.secenek input:checked + span { background: var(--mavi-acik); border-color: var(--mavi); box-shadow: inset 0 0 0 .5px var(--mavi); color: var(--mavi-koyu); font-weight: 600; }
.secenek input:checked + span svg { display: block; }
.secenek input:focus-visible + span { outline: 2px solid var(--mavi); outline-offset: 2px; }

.tuzak { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.onay { display: flex; align-items: flex-start; gap: 10px; }
.onay input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--mavi); flex-shrink: 0; }
.onay label { font-size: 13px; line-height: 1.5; color: var(--metin-2); }
.onay a { font-weight: 500; }
.form-hata { padding: 10px 12px; background: var(--kirmizi-acik); border-radius: 10px; font-size: 13px; color: var(--kirmizi-koyu); }

.pencere-alt { padding: 16px 28px; border-top: 1px solid var(--kenar); background: var(--zemin); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.kbd-ipucu { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--soluk); }
.kbd-ipucu kbd { padding: 2px 6px; background: #FFFFFF; border: 1px solid var(--kenar-koyu); border-radius: 10px; font: 600 11px/1.4 inherit; color: var(--metin-2); }
.pencere-alt-dugmeler { display: flex; gap: 8px; }
.pencere-alt .dugme { height: 42px; font-size: 14px; border-radius: 10px; }

.gonderildi { padding: 40px 36px 28px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.gonderildi-ikon { width: 64px; height: 64px; border-radius: 50%; background: var(--yesil-acik); color: var(--yesil); display: flex; align-items: center; justify-content: center; }
.gonderildi-ikon svg { width: 30px; height: 30px; }
.gonderildi h2 { font-size: 22px; font-weight: 700; }
.gonderildi h2:focus { outline: none; }
.gonderildi p { max-width: 400px; font-size: 15px; line-height: 1.6; color: var(--metin-2); }
.gonderildi-numara { width: 100%; margin-top: 8px; padding: 14px 16px; background: var(--zemin); border: 1px solid var(--kenar); border-radius: 12px; display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.gonderildi-numara span { color: var(--metin-2); }
.gonderildi-numara strong { font-weight: 600; }
.gonderildi .dugme { width: 100%; margin-top: 8px; }

@media (max-width: 560px) {
    .pencere { width: 100vw; max-width: 100vw; max-height: 100dvh; margin: auto 0 0; }
    .pencere-kart { max-height: 92dvh; border-radius: 20px 20px 0 0; }
    .pencere-bas, .pencere-govde, .pencere-alt { padding-inline: 20px; }
    .alan-cift { grid-template-columns: 1fr; }
    .secenekler-uclu .secenek span { padding: 0 4px; font-size: 12.5px; }
    .alan input, .alan textarea { font-size: 16px; } /* iOS'ta odaklanınca yakınlaştırmayı önler */
    .kbd-ipucu { display: none; }
    .pencere-alt-dugmeler { flex: 1; }
    .pencere-alt-dugmeler .dugme-birincil { flex: 1; }
    .gonderildi { padding: 32px 20px 24px; }
}