/* OFİS-AI sitesi (ofis-ai.com) — "Akış": belge girer, kayıt çıkar, siz onaylarsınız. Mobil öncelikli; masaüstü mobilin genişletilmiş hali.
   Ana sayfa, destek ve 404 sayfaları bu tek dosyayı paylaşır. Tasarım ve kod: Claude (03.10.2026) */
:root {
  --kar: #F7F9FC; --buz: #EAF1FA; --beyaz: #FFFFFF; --grafit: #1C2430; --gri: #556173; --soluk: #667183; --cizgi: #E1E8F2; --ray-renk: #C9D5E4;
  --kobalt: #6C8CFF; --kobalt-k: #3651D4; --kobalt-a: #E9EEFF;
  --mint: #6FD6B3; --mint-k: #137556; --mint-a: #E1F6EE;
  --mercan: #FF9F87; --mercan-k: #B4452B; --mercan-a: #FFECE6;
  --kum: #F6EEE3; --kum-k: #85602F; --kum-a: #F7EEE1;
  --baslik: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --yazi: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --x: 20px; --ray: 22px; --hat-sol: 56px;
  --golge: 0 1px 0 rgba(28, 36, 48, .04), 0 22px 44px -26px rgba(28, 36, 48, .32);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* görünüm kuralları hidden özniteliğini ezmesin (form → teşekkür) */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; color: var(--grafit); font: 400 17px/1.6 var(--yazi); overflow-x: hidden; -webkit-font-smoothing: antialiased;
  background-color: var(--kar); background-image: radial-gradient(rgba(28, 36, 48, .08) 1px, transparent 1.4px); background-size: 24px 24px; }
main, footer { position: relative; z-index: 1; }
h1, h2, h3 { font-family: var(--baslik); margin: 0; letter-spacing: -.035em; }
h1 { font-size: clamp(2.45rem, 10.8vw, 5.4rem); line-height: 1.02; font-weight: 600; }
h2 { font-size: clamp(1.95rem, 8.2vw, 3.4rem); line-height: 1.06; font-weight: 600; }
h3 { font-size: 1.1rem; font-weight: 600; letter-spacing: -.015em; }
p { margin: 0; }
a { color: inherit; }
i, em { font-style: normal; } /* süs öğeleri eğik yazı tipini indirtmesin */
.vurgu { color: var(--kobalt-k); }
.soluk { color: var(--gri); }
:focus-visible { outline: 3px solid var(--kobalt); outline-offset: 3px; border-radius: 8px; }
/* SplitText satır maskeleri harf kuyruklarını kırpmasın */
h1 > div, h2 > div { padding: .14em 0 .3em; margin: -.14em 0 -.3em; }
.etiket { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 500 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--kobalt-k); }
.etiket::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--kobalt); box-shadow: 0 0 0 4px var(--kobalt-a); }

/* üst şerit */
.ust { position: fixed; inset: 0 0 auto; z-index: 30; display: flex; justify-content: space-between; align-items: center;
  padding: calc(10px + env(safe-area-inset-top, 0px)) var(--x) 10px; background: rgba(247, 249, 252, .9);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid rgba(28, 36, 48, .06); }
.marka { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font: 700 19px/1 var(--baslik); letter-spacing: -.02em; color: var(--grafit); }
.marka svg { width: 30px; height: 30px; fill: none; stroke: var(--kobalt-k); stroke-width: 2.6; stroke-linecap: round; }
.marka circle { fill: var(--kobalt-k); stroke: none; }
.marka .m2 { fill: var(--mint); stroke: var(--mint-k); stroke-width: 1.6; }
.ust-nav { display: flex; align-items: center; gap: 6px; }
.ust-link { padding: 8px 10px; border-radius: 10px; text-decoration: none; font: 600 14.5px var(--yazi); color: var(--gri); }
.ust-link:hover { color: var(--grafit); background: rgba(28, 36, 48, .05); }
.ust-cta { display: none; }

/* düğmeler */
.dugme { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border: 0; border-radius: 14px; cursor: pointer;
  text-decoration: none; font: 600 16px var(--yazi); color: var(--grafit); background: var(--beyaz); box-shadow: inset 0 0 0 1.5px var(--cizgi); }
.dugme.ana { background: var(--kobalt-k); color: #fff; box-shadow: 0 12px 26px -12px rgba(54, 81, 212, .75); }

/* açılış: kaynaklardan OFİS-AI'ya, onaydan Zirve'ye */
.hero { position: relative; padding: calc(100px + env(safe-area-inset-top, 0px)) var(--x) 0; }
.hero::before { content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 360px; height: 640px; pointer-events: none;
  background: radial-gradient(closest-side at 35% 45%, rgba(108, 140, 255, .14), transparent), radial-gradient(closest-side at 70% 60%, rgba(111, 214, 179, .16), transparent); }
.hero-alt { margin-top: 18px; color: var(--gri); font-size: 1.04rem; max-width: 34em; }
.hero-dugmeler { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.akis-sahne { margin-top: 30px; display: grid; place-items: center; }
.akis { display: block; width: 100%; max-width: 400px; height: auto; overflow: visible; }
.girisler path { fill: none; stroke: var(--kobalt); stroke-width: 2; stroke-linecap: round; opacity: .75; }
.gizli-yol { fill: none; stroke: none; }
.kaynak rect { fill: var(--beyaz); stroke: var(--cizgi); stroke-width: 1.5; }
.kaynak text { font: 600 11.5px var(--yazi); fill: var(--grafit); text-anchor: middle; }
.cikis { fill: none; stroke: var(--mint-k); stroke-width: 2.4; stroke-linecap: round; }
.halka-iz { fill: none; stroke: var(--kobalt-a); stroke-width: 6; }
.halka { fill: none; stroke: var(--kobalt); stroke-width: 6; stroke-linecap: round; }
.merkez { fill: var(--grafit); }
.merkez-ad { font: 700 16px var(--baslik); fill: #fff; text-anchor: middle; letter-spacing: -.02em; }
.durum-yazi text { font: 500 11.5px var(--mono); fill: #AFC0FF; text-anchor: middle; }
.durum-yazi .d1, .durum-yazi .d2 { opacity: 0; }
.jeton-belge rect { fill: var(--kobalt-k); }
.jeton-fis rect { fill: var(--mint-k); }
.jeton-belge path, .jeton-fis path { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.jeton-belge, .jeton-fis { opacity: 0; }
.onay-ad { font: 600 12px var(--yazi); fill: var(--grafit); text-anchor: end; }
.onay-not { font: 500 11px var(--yazi); fill: var(--soluk); }
.onay-ray { fill: var(--mint-k); }
.onay-dugme { fill: #fff; }
.zirve rect { fill: var(--beyaz); stroke: var(--grafit); stroke-width: 1.8; }
.zirve text { font: 700 16px var(--baslik); fill: var(--grafit); text-anchor: middle; letter-spacing: -.02em; }
.zirve-tamam circle { fill: var(--mint-k); }
.zirve-tamam path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.zirve-not { font: 600 12.5px var(--yazi); fill: var(--mint-k); text-anchor: middle; }

/* bir ayın akışı */
.yuk, .nasil { padding: 90px var(--x) 10px; }
.yuk > .soluk { margin-top: 12px; }
.olcer { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.olcer li { display: grid; gap: 2px; padding: 16px 14px 12px; border-radius: 18px; background: var(--beyaz); box-shadow: var(--golge); }
.olcer b { font: 600 2rem/1.05 var(--baslik); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.olcer span { font-size: 14px; color: var(--gri); }
.olcer svg { display: block; width: 100%; height: auto; margin-top: 8px; overflow: visible; }
.olcer path { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.o-kobalt path { stroke: var(--kobalt); } .o-mint path { stroke: var(--mint); } .o-kum path { stroke: #D9B27E; } .o-mercan path { stroke: var(--mercan); }
.yuk-not { margin-top: 20px; font: 600 1.08rem/1.45 var(--baslik); letter-spacing: -.01em; max-width: 30em; }

/* nasıl çalışır */
.adimlar { list-style: none; margin: 26px 0 0; padding: 0; display: grid; }
.adimlar li { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding-bottom: 26px; }
.adimlar .no { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font: 600 13px var(--mono); color: var(--kobalt-k); background: var(--beyaz); box-shadow: inset 0 0 0 1.5px var(--cizgi); }
.adimlar h3 { margin-top: 8px; }
.adimlar p { margin-top: 2px; color: var(--gri); font-size: 15px; }
.adimlar .bag { position: absolute; left: 19px; top: 46px; bottom: 6px; width: 2px; background: var(--ray-renk); transform-origin: top; }
.adimlar .vurgulu .no { background: var(--kobalt-k); color: #fff; box-shadow: 0 10px 20px -10px rgba(54, 81, 212, .8); }
.adimlar .vurgulu h3 { color: var(--kobalt-k); }

/* sayfa boyunca veri hattı */
.hat { position: relative; padding-top: 30px; }
.hat-svg { position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: 0; overflow: visible; pointer-events: none; }
.hat-olcu { fill: none; stroke: none; }
.hat-iz { fill: none; stroke: var(--ray-renk); stroke-width: 2; stroke-dasharray: 1 7; stroke-linecap: round; }
.hat-yol { fill: none; stroke: var(--kobalt-k); stroke-width: 2.6; stroke-linecap: round; }
/* telefonda hat düz: SVG yerine iki ince şerit (yalnız transform değişir, kaydırma akıcı kalır) */
.hat-cizgi, .hat-dolu { position: absolute; z-index: 0; left: 0; top: 0; height: 0; pointer-events: none; display: none; }
.hat-cizgi { width: 2px; margin-left: -1px; background: repeating-linear-gradient(to bottom, var(--ray-renk) 0 2px, transparent 2px 8px); }
.hat-dolu { width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--kobalt-k); transform-origin: top; transform: scaleY(0); will-change: transform; }
.hat.duz .hat-cizgi, .hat.duz .hat-dolu { display: block; }
.hat.duz .hat-svg { display: none; }
.jeton { position: absolute; z-index: 3; left: 0; top: 0; width: 20px; height: 24px; margin: -12px 0 0 -10px; border-radius: 6px; display: grid; place-items: center; pointer-events: none;
  background: var(--kobalt-k); box-shadow: 0 0 0 5px rgba(108, 140, 255, .2), 0 8px 18px -6px rgba(54, 81, 212, .7); opacity: 0; transition: opacity .25s; will-change: transform; }
.jeton svg { width: 14px; height: 16px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
.jeton.gorunur { opacity: 1; }

.durak { position: relative; z-index: 1; padding: 70px var(--x) 70px var(--hat-sol); }
.durak[data-renk="kobalt"], .bilgi { --renk: var(--kobalt); --renk-k: var(--kobalt-k); --renk-a: var(--kobalt-a); }
.durak[data-renk="mint"] { --renk: var(--mint); --renk-k: var(--mint-k); --renk-a: var(--mint-a); }
.durak[data-renk="kum"] { --renk: #E2C49B; --renk-k: var(--kum-k); --renk-a: var(--kum-a); }
.durak[data-renk="mercan"] { --renk: var(--mercan); --renk-k: var(--mercan-k); --renk-a: var(--mercan-a); }
.durak .etiket { color: var(--renk-k); }
.durak .etiket::before { background: var(--renk); box-shadow: 0 0 0 4px var(--renk-a); }
.durak-nokta { position: absolute; z-index: 2; left: var(--ray); margin-left: -15px; top: 62px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font: 600 11px/1 var(--mono); color: var(--gri); background: var(--beyaz); box-shadow: inset 0 0 0 1.5px var(--ray-renk); transition: background .3s, color .3s, box-shadow .3s; }
.durak-nokta.gecti { color: #fff; background: var(--renk-k); box-shadow: 0 0 0 5px var(--renk-a); }
.durak-nokta.kucuk { width: 16px; height: 16px; margin-left: -8px; top: 70px; }
.durak-nokta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ara-nokta { position: absolute; left: var(--ray); bottom: 0; width: 0; height: 0; }
.durak-ic { display: grid; gap: 24px; }
.durak-metin > p:not(.etiket) { margin-top: 12px; color: var(--gri); }
.kontrol-cipleri { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kontrol-cipleri li { padding: 6px 10px; border-radius: 9px; font: 500 12.5px/1.2 var(--mono); color: var(--mercan-k); background: var(--mercan-a); }

/* istasyonlardaki küçük ekranlar */
.ui { position: relative; z-index: 2; padding: 14px; border-radius: 20px; background: var(--beyaz); box-shadow: var(--golge), inset 0 0 0 1px rgba(28, 36, 48, .05); font-size: 14px; }
.ui-ust { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 2px 4px 12px; border-bottom: 1px solid var(--cizgi); }
.ui-ust b { font: 600 14.5px var(--baslik); letter-spacing: -.01em; }
.cip { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 8px; font: 500 12px/1.25 var(--mono); white-space: nowrap; background: var(--kobalt-a); color: var(--kobalt-k); }
.cip.gri { background: #EFF3F8; color: var(--gri); }
.cip.mint { background: var(--mint-a); color: var(--mint-k); }
.cip.mercan { background: var(--mercan-a); color: var(--mercan-k); }
.cip.kum { background: var(--kum-a); color: var(--kum-k); }
.durum-cip { display: grid; justify-items: end; }
.durum-cip > * { grid-area: 1 / 1; }
.durum-cip .c-eski { opacity: 0; }
.satir { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 4px; border-bottom: 1px solid var(--cizgi); }
.satir b { display: block; font-weight: 600; font-size: 14px; }
.satir small { display: block; font-size: 12.5px; color: var(--gri); }
.ui-alt { position: relative; display: flex; align-items: center; justify-content: center; min-height: 50px; margin-top: 12px; }
.tamam { display: inline-flex; align-items: center; padding: 9px 14px; border-radius: 12px; font: 600 14px var(--yazi); color: var(--mint-k); background: var(--mint-a); }

.mukerrer > div { position: relative; opacity: .5; }
.cizik { position: absolute; left: -2px; right: -4px; top: 50%; height: 1.5px; background: var(--mercan-k); transform-origin: left; }
.ui-dugme { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border-radius: 13px; background: var(--kobalt-a); color: var(--kobalt-k); font: 600 14.5px var(--yazi); opacity: 0; }
.ui-dugme .dolgu { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: var(--kobalt-k); }

.ui-banka .satir { justify-content: flex-start; }
.tutar { flex: none; min-width: 84px; font: 500 12.5px var(--mono); }
.tutar.arti { color: var(--mint-k); }
.ui-banka .bag { flex: 1; min-width: 14px; height: 0; border-top: 1.5px dashed var(--ray-renk); transform-origin: left; }
.ui-not { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 0 4px; font-size: 13px; color: var(--gri); }

.fis-satir { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--cizgi); font-size: 13.5px; }
.fis-satir b { font: 600 12.5px var(--mono); color: var(--kum-k); margin-right: 4px; }
.fis-satir .tutar { min-width: 0; text-align: right; }
.fis-satir em { font-style: normal; color: var(--soluk); margin-left: 2px; }
.uyari { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px; border-radius: 14px; background: var(--mercan-a); color: #6E2A18; }
.uyari b { display: block; font-size: 14px; }
.uyari small { display: block; font-size: 12.5px; line-height: 1.4; }
.zil { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--mercan-k); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 10%; }

.kdv-bas, .kdv-satir { display: grid; grid-template-columns: 44px 1fr 1fr 22px; gap: 8px; align-items: center; padding: 0 4px; }
.kdv-bas { padding-top: 12px; padding-bottom: 4px; font: 500 11px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--soluk); }
.kdv-satir { min-height: 44px; border-bottom: 1px solid var(--cizgi); font: 500 12.5px var(--mono); }
.kdv-satir span:first-child { color: var(--kobalt-k); font-weight: 600; }
.kdv-satir span:nth-child(n+2), .kdv-bas span:nth-child(n+2) { text-align: right; }
.tik { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-style: normal; font-size: 11px; color: #fff; background: var(--mint-k); }

.mz-satir { display: grid; grid-template-columns: 36px 1fr auto 46px; gap: 8px; align-items: center; min-height: 46px; padding: 0 4px; border-bottom: 1px solid var(--cizgi); font-size: 13px; }
.mz-satir .kod { font: 600 12.5px var(--mono); color: var(--mercan-k); }
.mz-satir .ad { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mz-satir .bakiye { font: 500 12.5px var(--mono); }
.bayrak { display: grid; justify-items: center; }
.bayrak > * { grid-area: 1 / 1; padding: 3px 7px; border-radius: 7px; font: 600 11.5px/1.2 var(--mono); }
.b-ters { color: var(--mercan-k); background: var(--mercan-a); opacity: 0; }
.b-tamam { color: var(--mint-k); background: var(--mint-a); }
.virman-bas { margin: 14px 4px 6px; font: 500 11px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--soluk); }
.virman { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; padding: 9px 12px; border-radius: 12px; background: var(--kum-a); font: 500 12.5px var(--mono); }
.virman span:first-child { color: var(--kum-k); font-weight: 600; }

.kontrol-kutu { position: relative; margin-top: 10px; }
.kontrol-ray, .kontrol-dolu { position: absolute; left: 15px; top: 16px; bottom: 16px; width: 2px; }
.kontrol-ray { background: var(--cizgi); }
.kontrol-dolu { background: var(--mint-k); transform-origin: top; }
.kontroller { list-style: none; margin: 0; padding: 0 0 0 5px; display: grid; }
.kontroller li { position: relative; display: flex; align-items: center; gap: 12px; height: 32px; font-size: 14px; color: var(--soluk); transition: color .25s; }
.kontroller i { position: relative; z-index: 1; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--beyaz); box-shadow: inset 0 0 0 2px var(--ray-renk); transition: background .25s, box-shadow .25s; }
.kontroller li.tamam-k { color: var(--grafit); }
.kontroller li.tamam-k i { background: var(--mint-k); box-shadow: none; }
.kontroller li.tamam-k i::after { content: ''; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.zip { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; border-radius: 14px; font: 600 15px var(--yazi); color: var(--soluk); background: #EEF2F7; transition: background .3s, color .3s, box-shadow .3s; }
.zip svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.zip .z-ac, .zip.acik .z-kilit { display: none; }
.zip.acik .z-ac { display: block; }
.zip.acik { color: #fff; background: var(--kobalt-k); box-shadow: 0 12px 24px -12px rgba(54, 81, 212, .75); }
.zip-not { margin-top: 8px; text-align: center; font-size: 12.5px; color: var(--soluk); }

.ui-asistan { display: grid; gap: 14px; padding: 16px; }
.sohbet { display: grid; gap: 10px; align-content: start; }
.sohbet-tarih { justify-self: center; padding: 3px 10px; border-radius: 999px; font: 500 11.5px var(--mono); color: var(--soluk); background: #EFF3F8; }
.mesaj { max-width: 90%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.45; }
.mesaj.soru { justify-self: end; color: #fff; background: var(--kobalt-k); border-bottom-right-radius: 5px; }
.mesaj.cevap { background: var(--buz); border-bottom-left-radius: 5px; }
.mesaj.cevap b { color: var(--mint-k); }
.mesaj.bildirim { color: #6E2A18; background: var(--mercan-a); border-bottom-left-radius: 5px; }
.mesaj.bildirim b { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; font-size: 12px; color: #fff; background: var(--mercan-k); }
.komut { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 7px 0 14px; border-radius: 14px; background: var(--beyaz); box-shadow: inset 0 0 0 1.5px var(--cizgi); font-size: 14.5px; }
.komut-alan { flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
.komut-yazi:empty::before { content: 'Bir şey sorun…'; color: var(--soluk); }
.imlec { flex: none; width: 2px; height: 18px; margin-left: 1px; background: var(--kobalt-k); }
.gonder { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--kobalt-k); }

/* güven ve hikâye */
.guven-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.guven-liste li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding: 16px; border-radius: 18px; background: var(--beyaz); box-shadow: var(--golge); }
.guven-liste svg { width: 30px; height: 30px; fill: none; stroke: var(--mint-k); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.guven-liste p { margin-top: 2px; font-size: 14.5px; color: var(--gri); }
.gunluk { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gunluk li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--beyaz); box-shadow: inset 0 0 0 1px var(--cizgi); font: 600 15px var(--yazi); }
.gunluk b { font: 600 12px var(--mono); color: var(--kobalt-k); }
.gunluk small { font: 500 12px var(--mono); color: var(--soluk); text-align: right; }

/* bilgi talebi: hat burada biter */
.bilgi { position: relative; z-index: 1; padding: 78px var(--x) 110px; }
.bilgi .durak-nokta.son { top: 22px; }
.bilgi-kart { padding: 26px 20px; border-radius: 26px; background: var(--beyaz); box-shadow: var(--golge), inset 0 0 0 1px rgba(28, 36, 48, .05); }
.bilgi-kart > .soluk { margin-top: 10px; }
.form { display: grid; gap: 14px; margin-top: 20px; }
.form label { display: block; font-size: 14px; font-weight: 600; color: var(--gri); }
.form label > input, .form label > select, .form label > textarea { display: block; margin-top: 6px; }
/* KVKK onay kutusu */
.form label.onay { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; line-height: 1.45; color: var(--gri); cursor: pointer; }
.form label.onay input { display: block; flex: none; width: 20px; height: 20px; min-height: 0; margin: 1px 0 0; padding: 0; border-radius: 6px; box-shadow: none; background: none; accent-color: var(--kobalt-k); cursor: pointer; }
.form label.onay a, .ic-alt a { color: var(--kobalt-k); font-weight: 600; }
.form input, .form select, .form textarea { width: 100%; min-height: 52px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--kar); box-shadow: inset 0 0 0 1.5px var(--cizgi); font: 400 16px var(--yazi); color: var(--grafit); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; background: var(--beyaz); box-shadow: inset 0 0 0 2px var(--kobalt-k); }
.iki { display: grid; gap: 14px; }
.form .dugme { width: 100%; }
.form textarea { min-height: 96px; padding: 12px 16px; line-height: 1.5; resize: vertical; }
.form textarea.uzun { min-height: 160px; }
.form label span { font-weight: 400; color: var(--soluk); }
.form button[disabled] { opacity: .65; cursor: wait; }
.form-not { font-size: 14px; color: var(--gri); text-align: center; }
.form-not:empty { display: none; }
.form-not.hata { color: var(--mercan-k); font-weight: 600; }
.form-bilgi { font-size: 12.5px; line-height: 1.5; color: var(--soluk); text-align: center; }
.bal { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.tesekkur { margin-top: 20px; padding: 24px 20px; border-radius: 18px; background: var(--mint-a); text-align: center; outline: none; }
.tesekkur-baslik { font: 600 1.5rem/1.2 var(--baslik); letter-spacing: -.02em; color: var(--mint-k); }
.tesekkur p + p { margin-top: 8px; }

.alt { padding: 36px var(--x) calc(110px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; font-size: 14px; color: var(--gri); }
.alt .marka { color: var(--grafit); }
.alt nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.alt nav a { font-weight: 600; color: var(--grafit); text-decoration: none; }
.alt nav a:hover { text-decoration: underline; }
.imza { color: var(--grafit); font-weight: 500; }

.alt-cta { position: fixed; z-index: 25; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 170%); min-height: 54px; padding: 0 32px;
  display: inline-flex; align-items: center; border-radius: 16px; background: var(--kobalt-k); color: #fff; text-decoration: none; font: 600 16px var(--yazi);
  box-shadow: 0 14px 30px -12px rgba(54, 81, 212, .75); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.alt-cta.gorunur { transform: translate(-50%, 0); }

/* iç sayfalar: destek talebi, 404 */
.ic { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: calc(100px + env(safe-area-inset-top, 0px)) var(--x) 40px; }
.ic h1 { font-size: clamp(2.2rem, 9.4vw, 3.6rem); line-height: 1.04; }
.ic-alt { margin-top: 14px; color: var(--gri); max-width: 34em; }
.ic .bilgi-kart { margin-top: 26px; }
.ic .bilgi-kart > .form, .ic .bilgi-kart > .tesekkur { margin-top: 0; }
.kurulum-bilgi { padding: 10px 14px; border-radius: 12px; background: var(--kobalt-a); color: var(--kobalt-k); font: 500 13px/1.45 var(--mono); }
.hata-kodu { font: 600 clamp(4.5rem, 24vw, 9rem)/1 var(--baslik); letter-spacing: -.05em; color: var(--kobalt-k); margin-bottom: 8px; }
.ic-linkler { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.guncelleme-tarih { margin-top: 12px; font: 500 12.5px var(--mono); color: var(--soluk); }
.metin { margin-top: 18px; }
.metin h2 { margin: 30px 0 10px; font-size: 1.3rem; line-height: 1.25; letter-spacing: -.02em; }
.metin p, .metin li { color: var(--gri); }
.metin strong { color: var(--grafit); font-weight: 600; }
.metin a { color: var(--kobalt-k); font-weight: 600; }
.metin ul, .metin ol { margin: 8px 0 0; padding-left: 22px; }
.metin li + li { margin-top: 6px; }
@counter-style turk-harf { system: alphabetic; symbols: a b c ç d e f g ğ; suffix: ") "; }
.metin .harfli { list-style: turk-harf; }

@media (min-width: 900px) {
  :root { --x: 56px; }
  .ust-cta { display: inline-flex; align-items: center; min-height: 42px; padding: 0 20px; border-radius: 12px; background: var(--kobalt-k); color: #fff; text-decoration: none; font: 600 14.5px var(--yazi); }
  .alt-cta { display: none; }
  .hero { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 56px; min-height: 100vh; max-width: 1280px; margin: 0 auto; padding-top: 96px; padding-bottom: 32px; }
  .hero h1 { font-size: clamp(3rem, 4.6vw, 4.1rem); }
  .hero::before { top: 8%; height: 84%; }
  .akis-sahne { margin: 0; }
  .akis { max-width: 500px; }
  .yuk, .nasil { max-width: 1180px; margin: 0 auto; padding-top: 150px; padding-bottom: 30px; }
  .olcer { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .olcer b { font-size: 2.6rem; }
  .adimlar { grid-template-columns: repeat(5, 1fr); gap: 18px; }
  .adimlar li { grid-template-columns: 1fr; gap: 12px; padding: 0; }
  .adimlar .bag { left: 52px; right: -6px; top: 19px; bottom: auto; width: auto; height: 2px; transform-origin: left; }
  .hat { max-width: 1292px; margin: 0 auto; padding: 60px var(--x) 0; }
  .durak { padding: 120px 0; }
  .durak-ic { grid-template-columns: 1fr 1fr; column-gap: 168px; align-items: center; }
  .durak.ters .durak-metin { order: 2; }
  /* hat ortada kıvrılarak iner: düz istasyonda biraz solda, ters istasyonda biraz sağda */
  .durak-nokta { left: calc(50% - 36px); top: 116px; }
  .durak-nokta.kucuk { top: 124px; }
  .durak.ters .durak-nokta, .durak.ters .ara-nokta { left: calc(50% + 36px); }
  .ara-nokta { left: calc(50% - 36px); }
  .bilgi { padding: 130px 0 150px; }
  .bilgi .durak-nokta.son { left: 50%; top: 56px; }
  .bilgi-kart { max-width: 760px; margin: 0 auto; padding: 48px; }
  .iki { grid-template-columns: 1fr 1fr; }
  .guven-liste { grid-template-columns: 1fr 1fr; }
  .guven-liste li { grid-template-columns: 1fr; gap: 10px; }
  .alt { max-width: 1292px; margin: 0 auto; padding-bottom: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
  .alt .imza { margin-left: auto; }
  .ic { padding-top: 150px; padding-bottom: 80px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .alt-cta, .jeton, .durak-nokta, .kontroller li, .kontroller i, .zip { transition: none; } }

/* müşteri paneli (04.10.2026): /hesap/ ve /hesap/davet/ — Akış kartları, sade tablolar */
.ic.hesap { max-width: 1040px; }
.hesap-izgara { display: grid; gap: 16px; margin-top: 26px; }
.hesap-kart { min-width: 0; padding: 22px 20px; border-radius: 22px; background: var(--beyaz); box-shadow: var(--golge), inset 0 0 0 1px rgba(28, 36, 48, .05); }
.hesap-satir { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cizgi); font-size: 15px; }
.hesap-satir:last-of-type { border-bottom: 0; }
.hesap-satir > span { color: var(--gri); }
.hesap-satir > b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.hesap-alt { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.hesap-alt .dugme { min-height: 46px; }
.form-bilgi.sol { text-align: left; margin-top: 8px; }
.notlar { margin: 2px 0 6px; padding-left: 20px; color: var(--gri); font-size: 14.5px; }
.notlar li + li { margin-top: 3px; }
.mono { font-family: var(--mono); font-size: .92em; }
.tablo-sar { overflow-x: auto; }
.hesap-tablo { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.hesap-tablo th { text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--cizgi); font: 500 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--soluk); white-space: nowrap; }
.hesap-tablo td { padding: 10px 8px; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
.hesap-tablo tr:last-child td { border-bottom: 0; }
.durum { display: inline-flex; padding: 3px 9px; border-radius: 8px; font: 600 12.5px var(--yazi); white-space: nowrap; background: var(--kobalt-a); color: var(--kobalt-k); }
.durum.inceleniyor { background: var(--kum-a); color: var(--kum-k); }
.durum.cozuldu { background: var(--mint-a); color: var(--mint-k); }
.duyuru + .duyuru { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cizgi); }
.duyuru small { display: block; font: 500 12px var(--mono); color: var(--soluk); }
.duyuru b { display: block; margin-top: 2px; font: 600 1.05rem/1.3 var(--baslik); letter-spacing: -.015em; }
.duyuru p { margin-top: 6px; color: var(--gri); white-space: pre-wrap; font-size: 15px; }
.hesap-ac { margin-top: 14px; border-top: 1px solid var(--cizgi); padding-top: 12px; }
.hesap-ac > summary { cursor: pointer; font-weight: 600; color: var(--kobalt-k); list-style: none; }
.hesap-ac > summary::-webkit-details-marker { display: none; }
.hesap-ac > summary::before { content: '+ '; }
.hesap-ac[open] > summary::before { content: '− '; }
.hesap-ac .form { margin-top: 14px; }
.ust-cikis { border: 0; background: none; cursor: pointer; }
#indir-durum:not([hidden]) { margin-top: 10px; text-align: left; color: var(--mint-k); font-weight: 600; }
@media (min-width: 900px) {
  .hesap-izgara { grid-template-columns: 1fr 1fr; }
  .hesap-kart.genis { grid-column: 1 / -1; }
  .hesap-kart { padding: 26px 26px; }
}
.bildirim:not([hidden]) { margin-top: 16px; padding: 11px 15px; border-radius: 14px; background: var(--mint-a); color: var(--mint-k); font-weight: 600; }