/* FullBudget — fullbudget.app
   Renkler ve tipografi uygulamanın kendi sisteminden alınmıştır; site ile uygulama
   aynı markayı konuşsun diye burada yeniden icat edilmedi. */
:root{
  --bg:#0B0D10; --surface:#171B21; --surface-2:#1C2128; --line:#262B33; --line-2:#333A45;
  --text:#F5F7FA; --muted:#9AA3AF; --dim:#727B85;
  --brand:#35D07F; --brand-dim:#1F7A4C; --coral:#E5644F; --amber:#E8A23D;
  --r:14px; --maxw:1080px;
}
/* Site TEK temaya bağlıdır: koyu. Marka bu; uygulamanın kendisi de koyu doğar ve
   landing sayfasının tipografisi/kontrastı bu zemine göre ayarlandı. İşletim sistemi
   açık temadaysa sayfa yine koyu kalır — aksi halde koyuya göre kurulmuş bir hiyerarşi
   açık zeminde sulanıyordu. Aşağıdaki blok isteğe bağlı bir açık tema olarak duruyor;
   şu an hiçbir şey tetiklemiyor, ileride bir tema düğmesi eklenirse hazır. */
:root[data-theme="light"]{
  --bg:#F6F7F9; --surface:#FFFFFF; --surface-2:#FBFBFC; --line:#E5E7EB; --line-2:#D3D8DF;
  --text:#12151A; --muted:#4E5762; --dim:#6B747F;
  --brand:#16A765; --brand-dim:#0E7145; --coral:#D14A38; --amber:#B8842E;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}}
body{margin:0; background:var(--bg); color:var(--text); line-height:1.65;
  font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; font-size:16.5px;
  -webkit-font-smoothing:antialiased;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px;}
h1,h2,h3{font-family:'Space Grotesk',Inter,system-ui,sans-serif; margin:0; text-wrap:balance; letter-spacing:-.02em;}
h1{font-size:clamp(34px,6vw,58px); line-height:1.08; font-weight:700;}
h2{font-size:clamp(23px,3.4vw,32px); font-weight:700; line-height:1.2;}
h3{font-size:18px; font-weight:600;}
p{margin:0 0 15px;}
a{color:var(--brand); text-decoration:none;}
a:hover{text-decoration:underline;}
a:focus-visible,button:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:4px;}

/* üst çubuk */
.top{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);}
.top .wrap{display:flex; align-items:center; gap:14px; height:64px;}
.brand{display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif;
  font-size:19px; font-weight:500; color:var(--text);}
.brand:hover{text-decoration:none;}
.brand b{font-weight:700;}
.brand svg{width:27px; height:27px; flex:none; fill:none; stroke:var(--brand); stroke-width:9;
  stroke-linecap:round; stroke-linejoin:round;}
.brand svg .head{fill:var(--brand); stroke:none;}
.top nav{margin-left:auto; display:flex; gap:22px; font-size:14.5px;}
.top nav a{color:var(--muted);}
.top nav a:hover{color:var(--text);}
@media (max-width:560px){.top nav{gap:15px; font-size:13.5px;}}

/* hero */
.hero{padding:74px 0 60px; border-bottom:1px solid var(--line);}
.hero .lede{font-size:clamp(17px,2.2vw,20px); color:var(--muted); max-width:56ch; margin-top:20px;}
.badge{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; letter-spacing:.06em;
  text-transform:uppercase; font-weight:600; color:var(--brand);
  background:color-mix(in srgb, var(--brand) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--brand) 34%, transparent);
  border-radius:99px; padding:5px 13px; margin-bottom:22px;}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; align-items:center;}
.btn{display:inline-flex; align-items:center; gap:9px; padding:13px 24px; border-radius:99px;
  font-weight:600; font-size:15.5px; border:1px solid transparent;}
.btn-primary{background:var(--brand); color:#06231C;}
.btn-primary:hover{text-decoration:none; filter:brightness(1.07);}
.btn-ghost{border-color:var(--line-2); color:var(--text);}
.btn-ghost:hover{text-decoration:none; border-color:var(--brand); color:var(--brand);}
.cta-note{font-size:13.5px; color:var(--dim);}

/* bölümler */
section{padding:62px 0; border-bottom:1px solid var(--line);}
.sec-head{max-width:60ch; margin-bottom:34px;}
.sec-head p{color:var(--muted); margin-top:12px; margin-bottom:0;}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:16px;}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px;}
.card h3{margin-bottom:8px;}
.card p{color:var(--muted); font-size:15px; margin:0;}
.card .ic{width:26px; height:26px; margin-bottom:13px; fill:none; stroke:var(--brand);
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; display:block;}

/* gizlilik vurgusu */
.privacy-panel{background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r);
  padding:30px; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:26px;}
.pp-item strong{display:block; font-family:'Space Grotesk',sans-serif; font-size:17px; margin-bottom:6px;}
.pp-item span{color:var(--muted); font-size:14.5px;}
.pp-item.warn strong{color:var(--amber);}

/* içerik sayfaları */
.doc{padding:52px 0 80px; max-width:74ch;}
.doc h1{font-size:clamp(28px,4.4vw,40px);}
.doc h2{font-size:21px; margin:38px 0 12px;}
.doc h3{font-size:17px; margin:26px 0 8px;}
.doc p,.doc li{color:var(--muted);}
.doc strong{color:var(--text);}
.doc ul{padding-left:20px;}
.doc li{margin-bottom:9px;}
.doc .updated{font-size:14px; color:var(--dim); margin-top:10px;}
.doc table{width:100%; border-collapse:collapse; margin:16px 0; font-size:14.5px;}
.doc th{text-align:left; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--dim); font-weight:600; padding:0 12px 8px 0; border-bottom:1px solid var(--line-2);}
.doc td{padding:11px 12px 11px 0; border-bottom:1px solid var(--line); vertical-align:top; color:var(--muted);}
.doc td:first-child{color:var(--text); font-weight:500; white-space:nowrap;}
.tblscroll{overflow-x:auto;}
.callout{background:var(--surface); border-left:3px solid var(--brand); border-radius:0 var(--r) var(--r) 0;
  padding:17px 21px; margin:22px 0;}
.callout p{margin:0; color:var(--muted);}
.callout p+p{margin-top:10px;}
.langswitch{display:inline-flex; gap:2px; background:var(--surface); border:1px solid var(--line);
  border-radius:99px; padding:3px; margin-bottom:26px; font-size:13.5px;}
.langswitch a{padding:5px 15px; border-radius:99px; color:var(--muted);}
.langswitch a.on{background:var(--brand); color:#06231C; font-weight:600;}
.langswitch a:hover{text-decoration:none;}

footer{padding:38px 0 54px; color:var(--dim); font-size:14px;}
footer .wrap{display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center;}
footer nav{display:flex; gap:20px; margin-left:auto; flex-wrap:wrap;}
footer a{color:var(--muted);}

/* ============================================================
   LANDING (index.html) — yalnızca ana sayfa
   Tasarım kuralı: aksan rengi sayfada azdır. Her bölümde en fazla bir
   yeşil vurgu var; geri kalan hiyerarşi tipografi ve boşlukla kuruluyor.
   ============================================================ */
.lp section{padding:clamp(72px,11vw,118px) 0;}
.lp .wrap{max-width:1160px;}
.eyebrow{display:block; font-family:'Space Grotesk',sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin:0 0 18px;}
/* Başlıkta bilinçli bir <br> var; text-wrap:balance onunla kavga edip kutuyu daraltıyor
   ve "Paranı takip etme." üç satıra bölünüyordu. Kırılımı <br> belirlesin. */
.lp h1{font-size:clamp(36px,5vw,58px); line-height:1.06; letter-spacing:-.035em; text-wrap:initial;}
.lp h2{font-size:clamp(26px,4.2vw,42px); line-height:1.1; letter-spacing:-.03em;}
.lead{font-size:clamp(16.5px,1.9vw,19.5px); color:var(--muted); max-width:54ch; line-height:1.6;}

/* --- hero --- */
.lp-hero{padding:clamp(56px,9vw,96px) 0 clamp(64px,9vw,104px); border-bottom:1px solid var(--line);}
.lp-hero .wrap{display:grid; gap:clamp(48px,7vw,72px); align-items:center;}
@media (min-width:940px){.lp-hero .wrap{grid-template-columns:1.18fr .82fr;}}
.hero-copy h1 em{font-style:normal; color:var(--brand);}
.store-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;}
.store-chip{display:inline-flex; align-items:center; gap:9px; padding:10px 16px; border-radius:12px;
  border:1px dashed var(--line-2); color:var(--dim); font-size:13.5px; font-weight:500;}
.store-chip svg{width:17px; height:17px; flex:none; fill:currentColor;}
.store-chip span{font-size:11.5px; letter-spacing:.07em; text-transform:uppercase;}

/* --- telefon maketi: uygulamanın gerçek ana ekranı --- */
.phone{width:min(330px,100%); margin:0 auto; border-radius:38px; padding:11px;
  background:linear-gradient(170deg,#252b34,#12161c); border:1px solid var(--line-2);
  box-shadow:0 32px 80px -28px rgba(0,0,0,.85);}
.phone-screen{background:#0B0D10; border-radius:28px; overflow:hidden; padding:20px 17px 0;
  font-size:13px; color:#F5F7FA;}
.ph-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.ph-day{font-family:'Space Grotesk',sans-serif; font-size:10.5px; font-weight:700;
  letter-spacing:.12em; color:#35D07F;}
.ph-moon{width:26px; height:26px; border-radius:50%; background:#1C2128; display:grid; place-items:center;}
.ph-moon svg{width:13px; height:13px; fill:none; stroke:#9AA3AF; stroke-width:2;}
.ph-title{font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:700;
  letter-spacing:-.02em; margin:0 0 3px;}
.ph-sub{font-size:11.5px; color:#9AA3AF; margin:0 0 15px;}
.ph-card{background:#141820; border:1px solid #222831; border-radius:18px; padding:16px 15px;}
.ph-label{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#9AA3AF; margin:0 0 4px;}
.ph-net{font-family:'Space Grotesk',sans-serif; font-size:31px; font-weight:700;
  letter-spacing:-.02em; margin:0 0 11px; font-variant-numeric:tabular-nums;}
.ph-alert{display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:600;
  color:#E8A23D; background:rgba(232,162,61,.1); border:1px solid rgba(232,162,61,.3);
  border-radius:99px; padding:3px 10px;}
.ph-alert i{width:5px; height:5px; border-radius:50%; background:#E8A23D;}
.ph-step{display:flex; gap:9px; margin:13px 0 0; padding:11px 12px; border-radius:11px;
  background:rgba(255,255,255,.028); border:1px solid #222831; border-left:3px solid #35D07F;}
.ph-step > svg{width:14px; height:14px; flex:none; margin-top:2px; fill:none; stroke:#35D07F;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
.ph-step-h{display:block; font-family:'Space Grotesk',sans-serif; font-size:9.5px; font-weight:700;
  letter-spacing:.12em; color:#9AA3AF; margin-bottom:3px;}
.ph-step b{display:block; font-size:12.5px; font-weight:600; line-height:1.35;}
.ph-step b i{font-style:normal; color:#35D07F; font-variant-numeric:tabular-nums;}
.ph-step p{margin:4px 0 0; font-size:10.5px; color:#9AA3AF; line-height:1.5;}
.ph-safe{margin:12px 0 0; font-size:12px; color:#9AA3AF;}
.ph-safe b{color:#F5F7FA; font-variant-numeric:tabular-nums;}
.ph-split{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px;
  padding-top:13px; border-top:1px solid #222831;}
.ph-split > div + div{padding-left:14px; border-left:1px solid #222831;}
.ph-split b{display:block; font-family:'Space Grotesk',sans-serif; font-size:16px; font-weight:700;
  margin-top:2px; font-variant-numeric:tabular-nums;}
.ph-split .up{color:#35D07F;} .ph-split .down{color:#E5644F;}
.ph-meta{display:flex; gap:16px; margin-top:13px; padding-top:11px; border-top:1px solid #222831;
  font-size:11px; color:#9AA3AF;}
.ph-meta b{font-family:'Space Grotesk',sans-serif; color:#F5F7FA; font-variant-numeric:tabular-nums;}
.ph-meta b.up{color:#35D07F;}
.ph-nav{display:flex; justify-content:space-between; margin:16px -17px 0; padding:11px 20px 15px;
  border-top:1px solid #222831; background:#0E1116;}
.ph-nav i{width:17px; height:17px; border-radius:4px; background:#232932; display:block;}
.ph-nav i.on{background:#35D07F;}
.ph-nav i.mic{width:30px; height:30px; border-radius:50%; margin-top:-7px;}
.phone-note{text-align:center; font-size:12px; color:var(--dim); margin:16px 0 0;}

/* --- problem --- */
.prob-list{display:grid; gap:0; margin-top:8px; border-top:1px solid var(--line);}
.prob-list > div{display:grid; gap:4px 22px; padding:22px 0; border-bottom:1px solid var(--line);}
@media (min-width:720px){.prob-list > div{grid-template-columns:170px 1fr; align-items:baseline;}}
.prob-list dt{font-family:'Space Grotesk',sans-serif; font-size:17px; font-weight:600; margin:0;}
.prob-list dd{margin:0; color:var(--muted); font-size:15.5px;}

/* --- çözüm: uygulamanın kendi özet ızgarası --- */
.solve-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;}
.solve-grid > div{background:var(--bg); padding:26px 22px;}
.solve-grid .k{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim);
  display:block; margin-bottom:9px;}
.solve-grid .v{font-family:'Space Grotesk',sans-serif; font-size:clamp(24px,3.2vw,31px);
  font-weight:700; letter-spacing:-.02em; display:block; font-variant-numeric:tabular-nums;}
.solve-grid .v.up{color:var(--brand);} .solve-grid .v.down{color:var(--coral);}
.solve-grid p{margin:9px 0 0; font-size:14px; color:var(--muted);}

/* --- farklı yapan: sonuç önce --- */
.feat{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:clamp(28px,4vw,44px);}
.feat article{display:grid; gap:9px; align-content:start;}
.feat .fname{font-family:'Space Grotesk',sans-serif; font-size:11.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--brand); margin:0;}
.feat h3{font-size:clamp(19px,2.3vw,23px); line-height:1.25; letter-spacing:-.02em; margin:0;}
.feat p{margin:0; color:var(--muted); font-size:15.5px;}

/* --- nasıl çalışır: gerçek bir sıra, o yüzden numaralı --- */
.steps{display:grid; gap:0; counter-reset:adim; border-top:1px solid var(--line);}
.steps > li{list-style:none; counter-increment:adim; display:grid; gap:6px 26px;
  padding:30px 0; border-bottom:1px solid var(--line); align-items:baseline;}
@media (min-width:760px){.steps > li{grid-template-columns:64px 300px 1fr;}}
.steps > li::before{content:counter(adim,decimal-leading-zero);
  font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:700; color:var(--brand);
  letter-spacing:.04em;}
.steps h3{font-size:clamp(19px,2.3vw,23px); letter-spacing:-.02em; margin:0;}
.steps p{margin:0; color:var(--muted); font-size:15.5px;}

/* --- güven --- */
.trust{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:clamp(24px,3.5vw,40px);}
.trust article{display:grid; gap:8px; align-content:start; padding-top:20px; border-top:2px solid var(--line-2);}
.trust h3{font-size:18px; letter-spacing:-.01em; margin:0;}
.trust p{margin:0; color:var(--muted); font-size:15px;}

/* --- founding 100: sayfadaki tek teklif, tek güçlü vurgu --- */
.founding{border:1px solid color-mix(in srgb, var(--brand) 34%, transparent);
  border-radius:20px; padding:clamp(30px,5vw,52px);
  background:color-mix(in srgb, var(--brand) 5%, var(--surface));}
.founding .eyebrow{color:var(--brand);}
.founding h2{max-width:20ch;}
.founding p{color:var(--muted); max-width:52ch; margin:16px 0 0; font-size:16.5px;}
.founding .rule{font-family:'Space Grotesk',sans-serif; font-size:clamp(17px,2.4vw,21px);
  font-weight:600; color:var(--text); margin-top:22px; letter-spacing:-.01em;}

/* --- son cta --- */
.final{text-align:center; border-bottom:0;}
.final h2{max-width:16ch; margin:0 auto;}
.final .lead{margin:18px auto 0;}
.final .cta-row{justify-content:center;}
.final .store-row{justify-content:center;}

/* Landing üst çubuğu 4 bağlantı taşıyor; 390px'te marka + 4 bağlantı sığmıyor ve sayfa
   yatay kayıyordu. Dar ekranda ikisini gizle — ikisi de alt bilgide ve sayfa içi
   düğmelerde zaten var, yani hiçbir yere erişim kaybolmuyor. */
@media (max-width:640px){
  .lp .top nav a[href="#nasil"], .lp .top nav a[href="destek.html"]{display:none;}
}
@media (max-width:380px){
  .lp .top nav a[href="#ozellikler"]{display:none;}
}

/* Yapışkan üst çubuk 64px; çapaya atlayınca bölüm başlığı onun altında kalıyordu. */
.lp section[id], .lp-hero{scroll-margin-top:78px;}

/* Founding kutusu masaüstünde sağ yarısı boş kalıyordu. Sayfadaki tek teklif olduğu için
   içeriği iki sütuna açıp sloganı kendi ağırlığında bir alıntıya çeviriyoruz. */
@media (min-width:860px){
  .founding{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(36px,5vw,64px); align-items:center;}
  .founding .eyebrow, .founding h2, .founding > p:not(.rule){grid-column:1;}
  .founding .eyebrow{margin-bottom:14px;}
  .founding .rule{grid-column:2; grid-row:1 / span 3; margin:0; align-self:center;
    font-size:clamp(22px,2.7vw,31px); line-height:1.25; letter-spacing:-.025em;
    padding-left:clamp(28px,3.5vw,44px);
    border-left:2px solid color-mix(in srgb, var(--brand) 45%, transparent);}
}