/* Fiyatlarım — ortak stil.
   Tema Ustam (Usta Rehberi) ile aynı aileden: sıcak kırık beyaz zemin, #111 metin,
   30'luk kart yarıçapı, ince konturlu yuvarlak düğmeler, cam dip ada.
   Ustam'da vurgu limon; bu uygulamada mavi. */

:root {
  --zemin: #F4F3F1;
  --kart: #FFFFFF;
  --kart2: #FAFAF8;
  --ayrac: #E9E8E4;
  --hat: rgba(17, 17, 17, .13);
  --yazi: #111111;
  --yazi2: rgba(17, 17, 17, .52);
  --yazi3: rgba(17, 17, 17, .30);
  --dolgu: rgba(17, 17, 17, .05);
  --dolgu2: rgba(17, 17, 17, .08);
  --mavi: #2F6BFF;
  --mavi-koyu: #1D4ED8;
  --vurgu: #A9D0FF;        /* Ustam'daki limonun karşılığı: seçili çip zemini, üstünde siyah yazı */
  --vurgu-acik: #E3F0FF;
  --yesil: #16A34A;
  --yesil-acik: #DCF5E4;
  --kirmizi: #F04E23;
  --kirmizi-acik: #FDE7E0;
  --turuncu: #F0A62B;
  --ease: cubic-bezier(.22, .9, .25, 1);
  --ease-yay: cubic-bezier(.2, 1.2, .35, 1);
  --golge: 0 1px 2px rgba(17,17,17,.04), 0 8px 28px rgba(17,17,17,.06);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --ust: env(safe-area-inset-top, 0px);
  --alt: env(safe-area-inset-bottom, 0px);
}

html, body { margin: 0; padding: 0; min-height: 100%; background: var(--zemin); color: var(--yazi); }
body {
  font-family: var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none; -webkit-text-size-adjust: 100%; font-size: 16px; line-height: 1.35;
}
#kok { min-height: 100vh; }
@supports (height: 100dvh) { #kok { min-height: 100dvh; } }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font-family: inherit; color: inherit; }
.rakam { font-variant-numeric: tabular-nums; }
.noscb { scrollbar-width: none; }
.noscb::-webkit-scrollbar { display: none; }
.gizli-okuyucu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------- basma geri bildirimi ---------------- */
.tap { transition: transform .22s var(--ease), opacity .18s ease, background-color .25s ease, box-shadow .25s ease, border-color .25s ease, color .2s ease; }
.tap:active { transform: scale(.96); opacity: .86; }
.tap-az:active { transform: scale(.985); }
.dugme { border: none; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0; }
.dugme:disabled { cursor: default; opacity: .4; }
.dugme:focus-visible, [role="button"]:focus-visible, a:focus-visible { outline: 2px solid rgba(17,17,17,.34); outline-offset: 3px; }

.btn { height: 52px; padding: 0 22px; border-radius: 999px; font-size: 16.5px; font-weight: 500; letter-spacing: -.1px; }
.btn-siyah { background: var(--yazi); color: #fff; }
.btn-mavi { background: var(--mavi); color: #fff; }
.btn-acik { background: var(--kart); color: var(--yazi); border: 1px solid var(--ayrac); }
.btn-hayalet { background: var(--dolgu); color: var(--yazi); }
.btn-kirmizi { background: var(--kirmizi-acik); color: #B42D0B; }
.btn-tam { width: 100%; }
.btn-kucuk { height: 38px; padding: 0 15px; font-size: 14.5px; }

.yuvarlak { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--hat); background: transparent; color: var(--yazi); flex-shrink: 0; }
.yuvarlak.dolu { background: var(--yazi); border-color: var(--yazi); color: #fff; }
.yuvarlak.cam { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.28); color: #fff;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.yuvarlak.kucuk { width: 36px; height: 36px; }

/* ---------------- sayfa iskeleti ---------------- */
.sayfa { padding: calc(var(--ust) + 10px) 0 calc(var(--alt) + 118px); min-height: 100vh; }
.kenar { padding-left: 18px; padding-right: 18px; }
.ust-cubuk { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; }
.ust-etiket { font-size: 15px; color: var(--yazi2); }
.buyuk-baslik { font-size: 31px; line-height: 1.08; font-weight: 700; letter-spacing: -1px; margin: 4px 0 0; }
.buyuk-baslik .soluk { color: var(--yazi3); font-weight: 600; display: block; }
.alt-baslik { font-size: 15px; color: var(--yazi2); margin: 6px 0 0; }

/* kaydırınca beliren ince üst çubuk (iOS büyük başlık davranışı) */
.kompakt { position: fixed; top: 0; left: 0; right: 0; z-index: 30; padding: calc(var(--ust) + 8px) 18px 10px;
  display: flex; align-items: center; justify-content: center; font-size: 16.5px; font-weight: 600;
  background: rgba(244,243,241,.78); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid rgba(17,17,17,.06);
  transform: translateY(-100%); opacity: 0; transition: transform .32s var(--ease), opacity .25s ease; pointer-events: none; }
.kompakt.gorunur { transform: none; opacity: 1; pointer-events: auto; }

.bolum-baslik { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 18px 10px; }
.bolum-baslik h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.4px; }
.bolum-baslik .rozet-sayi { margin-left: 7px; }
.bolum-baslik .eylem { font-size: 15px; color: var(--mavi); }

.kart { background: var(--kart); border-radius: 30px; border: 1px solid rgba(17,17,17,.04); box-shadow: var(--golge); }
.kart-ic { padding: 18px; }
.grup { background: var(--kart); border-radius: 24px; overflow: hidden; border: 1px solid rgba(17,17,17,.04); }
.grup-baslik { font-size: 13px; color: var(--yazi2); text-transform: uppercase; letter-spacing: .6px; margin: 22px 20px 8px; font-weight: 500; }
.grup-not { font-size: 13px; color: var(--yazi2); margin: 8px 20px 0; line-height: 1.45; }

.satir { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 18px; width: 100%; text-align: left; background: none; border: none; }
.satir + .satir::before { content: ""; position: absolute; top: 0; left: 18px; right: 0; height: 1px; background: var(--ayrac); }
.satir.ikonlu + .satir.ikonlu::before { left: 62px; }
button.satir { cursor: pointer; transition: background .2s ease; }
button.satir:active { background: #F0EFEB; }
.satir-ikon { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--dolgu); flex-shrink: 0; }
.satir-govde { flex: 1; min-width: 0; }
.satir-baslik { font-size: 16px; }
.satir-alt { font-size: 13.5px; color: var(--yazi2); margin-top: 1px; }
.satir-deger { font-size: 16px; color: var(--yazi2); text-align: right; flex-shrink: 0; }
.satir-deger.koyu { color: var(--yazi); }

/* ---------------- girdiler ---------------- */
.girdi-sar { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px; position: relative; transition: background .25s var(--ease); }
.girdi-sar:focus-within { background: rgba(47,107,255,.045); }
.girdi-sar + .girdi-sar::before, .satir + .girdi-sar::before, .girdi-sar + .satir::before { content: ""; position: absolute; top: 0; left: 18px; right: 0; height: 1px; background: var(--ayrac); }
.girdi-etiket { font-size: 16px; min-width: 104px; color: var(--yazi); flex-shrink: 0; }
.girdi { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: 16px; padding: 14px 0; text-align: right; }
.girdi.sol { text-align: left; }
.girdi::placeholder, .metin-alani::placeholder { color: var(--yazi3); }
.girdi-ek { color: var(--yazi2); font-size: 15px; flex-shrink: 0; }
.metin-alani { width: 100%; border: none; outline: none; background: none; resize: none; font-size: 16px; line-height: 1.45; padding: 14px 18px; min-height: 96px; display: block; }
input[type="date"].girdi { -webkit-appearance: none; appearance: none; min-height: 24px; }
input[type="date"]::-webkit-date-and-time-value { text-align: right; }
select.girdi { -webkit-appearance: none; appearance: none; cursor: pointer; }

.arama { position: relative; background: var(--kart); border-radius: 999px; border: 1px solid var(--ayrac); transition: box-shadow .3s var(--ease); }
.arama:focus-within { box-shadow: 0 0 0 4px rgba(47,107,255,.12); }
.arama input { width: 100%; border: none; outline: none; background: none; font-size: 16.5px; padding: 12px 40px 12px 42px; }
.arama input::-webkit-search-cancel-button { display: none; }
.arama .ara-ikon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--yazi2); }
.arama .temizle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; color: var(--yazi2); }

/* ---------------- çipler ve segment ---------------- */
.cipler { display: flex; gap: 8px; overflow-x: auto; padding: 2px 18px 4px; scroll-snap-type: x proximity; }
.cip { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--hat); font-size: 14.5px; white-space: nowrap; flex-shrink: 0; background: transparent; scroll-snap-align: start; }
.cip.secili { background: var(--vurgu); border-color: var(--vurgu); }
.cip .sayi { font-size: 12px; color: var(--yazi2); margin-left: 2px; }
.cip.secili .sayi { color: rgba(17,17,17,.6); }
.rozet-sayi { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--yazi); color: #fff; font-size: 11.5px; font-weight: 600; }

.segment { position: relative; display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; background: rgba(17,17,17,.06); border-radius: 999px; padding: 3px; }
.segment-kay { position: absolute; top: 3px; bottom: 3px; left: 3px; border-radius: 999px; background: #fff; box-shadow: 0 3px 10px rgba(17,17,17,.10), 0 1px 2px rgba(17,17,17,.06); transition: transform .38s var(--ease-yay), width .3s var(--ease); }
.segment button { position: relative; z-index: 1; height: 34px; border: none; background: none; font-size: 14.5px; cursor: pointer; border-radius: 999px; color: var(--yazi2); transition: color .25s ease; display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.segment button[aria-pressed="true"] { color: var(--yazi); font-weight: 600; }

/* ---------------- anahtar (iOS) ---------------- */
.anahtar { position: relative; width: 51px; height: 31px; border-radius: 999px; background: rgba(120,120,128,.18); border: none; cursor: pointer; transition: background .3s ease; flex-shrink: 0; padding: 0; }
.anahtar::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 999px; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.08); transition: transform .34s var(--ease-yay); }
.anahtar[aria-checked="true"] { background: var(--mavi); }
.anahtar[aria-checked="true"]::after { transform: translateX(20px); }

/* ---------------- adımlayıcı ---------------- */
.adim { display: flex; align-items: center; gap: 6px; }
.adim .dugme { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--hat); }
.adim input { width: 64px; text-align: center; border: none; background: var(--dolgu); border-radius: 12px; height: 36px; font-size: 16.5px; outline: none; font-weight: 500; }
.adim input:focus { background: var(--vurgu-acik); }

/* ---------------- seçenek kartları ---------------- */
.secenekler { display: grid; gap: 8px; }
.secenek { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 20px; background: var(--kart); border: 1.5px solid transparent; text-align: left; width: 100%; cursor: pointer; box-shadow: 0 1px 0 rgba(17,17,17,.03); }
.secenek.secili { border-color: var(--yazi); background: #fff; }
.secenek .isaret { width: 22px; height: 22px; border-radius: 999px; border: 1.5px solid var(--hat); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .25s var(--ease); }
.secenek.secili .isaret { background: var(--yazi); border-color: var(--yazi); color: #fff; }
.secenek .katsayi { margin-left: auto; font-size: 14px; padding: 4px 10px; border-radius: 999px; background: var(--dolgu); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.secenek.secili .katsayi { background: var(--vurgu); }

.tip-seridi { display: flex; gap: 10px; overflow-x: auto; padding: 2px 18px 8px; scroll-snap-type: x mandatory; }
.tip-karti { flex: 0 0 132px; scroll-snap-align: start; border-radius: 24px; padding: 14px; background: var(--kart); border: 1.5px solid transparent; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 14px; min-height: 128px; }
.tip-karti.secili { border-color: var(--yazi); }
.tip-karti .tip-ikon { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--hat); display: flex; align-items: center; justify-content: center; transition: all .3s var(--ease); }
.tip-karti.secili .tip-ikon { background: var(--yazi); color: #fff; border-color: var(--yazi); }
.tip-karti .tip-ad { font-size: 14.5px; font-weight: 500; line-height: 1.2; }
.tip-karti .tip-fiyat { font-size: 12.5px; color: var(--yazi2); margin-top: 3px; }

/* ---------------- kahraman kart (mavi degrade cam) ---------------- */
.kahraman { position: relative; overflow: hidden; border-radius: 34px; color: #fff; padding: 22px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(169,208,255,.75) 0%, rgba(169,208,255,0) 55%),
    radial-gradient(80% 70% at 0% 100%, rgba(56,189,248,.35) 0%, rgba(56,189,248,0) 60%),
    linear-gradient(155deg, #0B1633 0%, #16307A 38%, #2F6BFF 78%, #7DB7FF 115%);
  box-shadow: 0 22px 50px -18px rgba(29,78,216,.55), inset 0 1px 0 rgba(255,255,255,.25); }
.kahraman::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background-image: radial-gradient(rgba(255,255,255,.22) 1px, transparent 1.2px); background-size: 9px 9px;
  -webkit-mask-image: linear-gradient(200deg, transparent 45%, #000 100%); mask-image: linear-gradient(200deg, transparent 45%, #000 100%); opacity: .55; }
.kahraman > * { position: relative; z-index: 1; }
.kahraman .k-etiket { font-size: 14px; color: rgba(255,255,255,.72); }
.kahraman .k-buyuk { font-size: 44px; font-weight: 300; letter-spacing: -2px; line-height: 1; margin-top: 6px; font-variant-numeric: tabular-nums; }
.kahraman .k-buyuk .tl { font-size: 24px; letter-spacing: 0; margin-right: 3px; opacity: .8; font-weight: 400; vertical-align: 14px; }
.kahraman .k-ikon { width: 46px; height: 46px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.55); display: flex; align-items: center; justify-content: center; }
.kahraman .k-cam { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); border-radius: 18px; padding: 10px 12px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* proje kartları (yatay şerit) */
.proje-seridi { display: flex; gap: 12px; overflow-x: auto; padding: 4px 18px 18px; scroll-snap-type: x mandatory; scroll-padding: 18px; }
.proje-karti { flex: 0 0 min(78vw, 300px); scroll-snap-align: start; border-radius: 32px; padding: 18px; color: #fff; text-align: left; cursor: pointer; border: none; position: relative; overflow: hidden; min-height: 196px; display: flex; flex-direction: column; }
.proje-karti.t0 { background: radial-gradient(90% 80% at 100% 0%, rgba(160,205,255,.8), transparent 60%), linear-gradient(160deg, #0F1E47, #2A5BE0 80%, #6FA8FF); }
.proje-karti.t1 { background: radial-gradient(90% 80% at 100% 0%, rgba(125,211,252,.75), transparent 60%), linear-gradient(160deg, #0C2B3F, #0E7490 70%, #38BDF8); }
.proje-karti.t2 { background: radial-gradient(90% 80% at 100% 0%, rgba(196,181,253,.7), transparent 60%), linear-gradient(160deg, #1E1B4B, #4338CA 75%, #818CF8); }
.proje-karti.t3 { background: radial-gradient(90% 80% at 100% 0%, rgba(147,197,253,.7), transparent 60%), linear-gradient(160deg, #111827, #334155 60%, #64748B); }
.proje-karti::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.25) 1px, transparent 1.2px); background-size: 8px 8px; -webkit-mask-image: linear-gradient(180deg, transparent 55%, #000); mask-image: linear-gradient(180deg, transparent 55%, #000); opacity: .5; pointer-events: none; }
.proje-karti > * { position: relative; z-index: 1; }

/* liste satırı kartı */
.teklif-satiri { display: flex; gap: 13px; align-items: center; padding: 14px 16px; border-radius: 26px; background: var(--kart); border: 1px solid rgba(17,17,17,.04); width: 100%; text-align: left; cursor: pointer; box-shadow: 0 1px 0 rgba(17,17,17,.02); }
.teklif-satiri + .teklif-satiri { margin-top: 8px; }
.teklif-ikon { width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--hat); display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; }
.durum-nokta { position: absolute; right: -1px; top: -1px; width: 13px; height: 13px; border-radius: 999px; border: 2.5px solid #fff; }
.durum-hap { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.durum-hap i { width: 7px; height: 7px; border-radius: 999px; display: block; }

/* ilerleme noktaları (ödeme aşamaları) */
.noktalar { display: flex; gap: 5px; align-items: center; }
.noktalar i { width: 8px; height: 8px; border-radius: 999px; border: 1.3px solid currentColor; opacity: .55; display: block; }
.noktalar i.dolu { background: currentColor; opacity: 1; }

/* yığılmış oran çubuğu */
.oran-cubugu { display: flex; height: 10px; border-radius: 999px; overflow: hidden; gap: 2px; background: var(--dolgu); }
.oran-cubugu span { display: block; height: 100%; transition: flex-grow .6s var(--ease); }

/* ---------------- dip ada ---------------- */
.ada-sar { position: fixed; left: 0; right: 0; z-index: 40; display: flex; justify-content: center; bottom: calc(12px + var(--alt)); pointer-events: none; }
.ada { pointer-events: auto; display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.62);
  backdrop-filter: blur(28px) saturate(190%); -webkit-backdrop-filter: blur(28px) saturate(190%); border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 14px 40px rgba(17,17,17,.15), 0 3px 10px rgba(17,17,17,.07), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(17,17,17,.04);
  animation: satirGir .5s var(--ease) both; }
.ada-oge { width: 50px; height: 46px; border-radius: 999px; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; background: transparent; color: rgba(17,17,17,.45); transition: color .25s ease, background .3s var(--ease); position: relative; }
.ada-oge[aria-current="page"] { color: var(--yazi); background: #fff; box-shadow: 0 3px 12px rgba(17,17,17,.10); }
.ada-oge .ada-rozet { position: absolute; top: 6px; right: 9px; width: 8px; height: 8px; border-radius: 999px; background: var(--kirmizi); border: 1.5px solid #fff; }
.ada-arti { width: 66px; height: 50px; border: none; cursor: pointer; margin: 0 2px; background: none; display: flex; align-items: center; justify-content: center; position: relative; padding: 0; filter: drop-shadow(0 5px 10px rgba(29,78,216,.28)); }
.ada-arti img { height: 54px; width: 54px; display: block; transform: rotate(0deg); transition: transform .5s var(--ease-yay); }
.ada-arti:active img { transform: rotate(-12deg) scale(.94); }
.ada-arti .arti-rozet { position: absolute; right: 2px; bottom: 0; width: 21px; height: 21px; border-radius: 999px; background: var(--yazi); color: #fff; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255,255,255,.92); box-shadow: 0 2px 6px rgba(17,17,17,.28); }

/* ---------------- alt sayfa ---------------- */
@keyframes fonGir { from { opacity: 0 } to { opacity: 1 } }
@keyframes fonCik { from { opacity: 1 } to { opacity: 0 } }
@keyframes sayfaGir { from { transform: translateY(100%) } to { transform: translateY(0) } }
@keyframes sayfaCik { from { transform: translateY(0) } to { transform: translateY(105%) } }
.perde { position: fixed; inset: 0; z-index: 60; background: rgba(17,17,17,.28); animation: fonGir .3s ease both; }
.perde.cikiyor { animation: fonCik .28s ease both; }
.alt-sayfa { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; background: var(--zemin); border-radius: 28px 28px 0 0; max-height: calc(100vh - var(--ust) - 10px);
  display: flex; flex-direction: column; box-shadow: 0 -10px 40px rgba(17,17,17,.12); animation: sayfaGir .46s cubic-bezier(.24,.9,.2,1) both; margin: 0 auto; max-width: 720px; will-change: transform; }
@supports (height: 100dvh) { .alt-sayfa { max-height: calc(100dvh - var(--ust) - 10px); } }
.alt-sayfa.tam { height: calc(100vh - var(--ust) - 10px); }
@supports (height: 100dvh) { .alt-sayfa.tam { height: calc(100dvh - var(--ust) - 10px); } }
.alt-sayfa.cikiyor { animation: sayfaCik .32s cubic-bezier(.4,0,.8,.4) both; }
.alt-sayfa .tutamak { width: 38px; height: 5px; border-radius: 999px; background: rgba(17,17,17,.16); margin: 8px auto 0; flex-shrink: 0; }
.alt-sayfa .as-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 8px; flex-shrink: 0; touch-action: none; }
.alt-sayfa .as-baslik { font-size: 17px; font-weight: 600; text-align: center; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alt-sayfa .as-govde { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; flex: 1; padding-bottom: calc(var(--alt) + 24px); }
.alt-sayfa .as-dip { flex-shrink: 0; padding: 10px 16px calc(var(--alt) + 12px); background: rgba(244,243,241,.86); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid rgba(17,17,17,.06); }
.metin-dugme { border: none; background: none; font-size: 16.5px; color: var(--mavi); padding: 8px 8px; cursor: pointer; min-width: 64px; }
.metin-dugme.kalin { font-weight: 600; }
.metin-dugme:disabled { color: var(--yazi3); }

/* eylem sayfası (iOS action sheet) */
.eylem-sar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; padding: 0 10px calc(var(--alt) + 10px); animation: sayfaGir .4s cubic-bezier(.24,.9,.2,1) both; max-width: 540px; margin: 0 auto; }
.eylem-sar.cikiyor { animation: sayfaCik .3s ease both; }
.eylem-grup { background: rgba(255,255,255,.92); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border-radius: 22px; overflow: hidden; }
.eylem-grup + .eylem-grup { margin-top: 8px; }
.eylem-baslik { padding: 14px 18px 12px; text-align: center; font-size: 13.5px; color: var(--yazi2); line-height: 1.4; }
.eylem-baslik b { display: block; color: var(--yazi); font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.eylem { width: 100%; min-height: 56px; border: none; background: none; font-size: 18px; color: var(--mavi); cursor: pointer; border-top: 1px solid rgba(17,17,17,.08); display: flex; align-items: center; justify-content: center; gap: 8px; }
.eylem.tehlike { color: #E0301E; }
.eylem.kalin { font-weight: 600; }
.eylem:active { background: rgba(17,17,17,.05); }
.perde.ust { z-index: 70; }

/* bildirim */
@keyframes bildirimGir { from { opacity: 0; transform: translate(-50%, -16px) scale(.96) } to { opacity: 1; transform: translate(-50%, 0) } }
.bildirim { position: fixed; top: calc(var(--ust) + 10px); left: 50%; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 9px;
  padding: 11px 18px 11px 14px; border-radius: 999px; background: rgba(17,17,17,.9); color: #fff; font-size: 15px; max-width: calc(100vw - 28px);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 12px 30px rgba(17,17,17,.25); animation: bildirimGir .4s var(--ease-yay) both; }
.bildirim.hata { background: rgba(180,45,11,.95); }

/* ---------------- giriş animasyonları ---------------- */
@keyframes satirGir { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
.gir { animation: satirGir .5s var(--ease) backwards; }
.gir-1 { animation-delay: .04s } .gir-2 { animation-delay: .08s } .gir-3 { animation-delay: .12s } .gir-4 { animation-delay: .16s } .gir-5 { animation-delay: .2s }
@keyframes olcekGir { from { opacity: 0; transform: scale(.94) } to { opacity: 1; transform: none } }
.olcek-gir { animation: olcekGir .45s var(--ease-yay) backwards; }
@keyframes titre { 0%,100% { transform: translateX(0) } 20% { transform: translateX(-9px) } 40% { transform: translateX(8px) } 60% { transform: translateX(-5px) } 80% { transform: translateX(3px) } }
.titre { animation: titre .45s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes yumusakAc { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }
.yumusak-ac { animation: yumusakAc .3s var(--ease) both; }
@keyframes donus { to { transform: rotate(360deg) } }
.donen { animation: donus .9s linear infinite; }
@keyframes nabiz { 0%,100% { opacity: 1 } 50% { opacity: .45 } }
.nabiz { animation: nabiz 1.4s ease-in-out infinite; }

/* görünüm geçişi (sekme değişimi) */
@keyframes sekmeGir { from { opacity: 0; transform: translateY(8px) scale(.995) } to { opacity: 1; transform: none } }
.sekme-gir { animation: sekmeGir .38s var(--ease) backwards; }

/* gizli analiz bulanıklığı */
.bulanik { filter: blur(9px); transition: filter .45s var(--ease); user-select: none; }
.net { filter: none; transition: filter .45s var(--ease); }

/* halka ilerleme */
.halka circle { transition: stroke-dashoffset .9s var(--ease); }

/* dip toplam çubuğu */
.toplam-cubugu { display: flex; align-items: center; gap: 12px; }
.toplam-cubugu .t-deger { font-size: 25px; font-weight: 600; letter-spacing: -.8px; font-variant-numeric: tabular-nums; line-height: 1.05; }
.toplam-cubugu .t-alt { font-size: 12.5px; color: var(--yazi2); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* kilit ekranı */
.kilit { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: calc(var(--ust) + 72px) 22px calc(var(--alt) + 30px); }
@supports (height: 100dvh) { .kilit { min-height: 100dvh; } }
.kilit-simge { width: 88px; height: 88px; border-radius: 22px; box-shadow: 0 18px 40px -12px rgba(17,17,17,.45); }
.kilit h1 { font-size: 30px; font-weight: 700; letter-spacing: -.8px; margin: 22px 0 6px; }
.kilit p.alt { color: var(--yazi2); margin: 0 0 26px; font-size: 15.5px; text-align: center; }
.parola-kutu { width: 100%; max-width: 420px; position: relative; border-radius: 999px; background: #fff; border: 1px solid var(--ayrac); box-shadow: 0 0 0 5px rgba(17,17,17,.035); transition: box-shadow .3s var(--ease); }
.parola-kutu:focus-within { box-shadow: 0 0 0 5px rgba(47,107,255,.14); }
.parola-kutu input { width: 100%; height: 56px; border: none; background: none; outline: none; padding: 0 56px 0 22px; font-size: 17px; border-radius: 999px; }
.parola-kutu .goz { position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; color: var(--yazi2); }
.guc { display: flex; gap: 5px; width: 100%; max-width: 420px; padding: 10px 14px 0; }
.guc i { flex: 1; height: 4px; border-radius: 999px; background: rgba(17,17,17,.1); transition: background .3s ease; }

/* ekran dışı bilgi kutusu */
.uyari-kutu { display: flex; gap: 11px; align-items: flex-start; padding: 13px 15px; border-radius: 20px; background: #FFF6E5; color: #7A4B00; font-size: 14px; line-height: 1.45; }
.uyari-kutu.mavi { background: var(--vurgu-acik); color: #173A8A; }
.uyari-kutu.kirmizi { background: var(--kirmizi-acik); color: #8A2A0E; }
.uyari-kutu svg { flex-shrink: 0; margin-top: 1px; }

#acilis { position: fixed; inset: 0; display: flex; flex-direction: column; gap: 16px; align-items: center; justify-content: center; background: var(--zemin); z-index: 999; text-align: center; padding: 26px; color: rgba(17,17,17,.5); }
#acilis img { width: 76px; height: 76px; border-radius: 19px; box-shadow: 0 14px 34px -12px rgba(17,17,17,.5); animation: olcekGir .6s var(--ease-yay) both; }
#acilis p { margin: 0; font-size: 14px; line-height: 1.45; max-width: 300px; }
#surum { position: absolute; bottom: calc(18px + var(--alt)); font-size: 12px; color: rgba(17,17,17,.30); }

@media (min-width: 760px) {
  .sayfa { max-width: 720px; margin: 0 auto; }
  .proje-karti { flex-basis: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; }
  .tap:active { transform: none !important; }
}

.alan-girdi { border: none; outline: none; background: none; font-size: 44px; font-weight: 300; letter-spacing: -1.8px; min-width: 1.2em; max-width: 230px; padding: 0; line-height: 1.05; }
.alan-girdi:focus { color: var(--mavi); }