/* Planmany — Theme system
   3 seçilebilir tema: mavi-beyaz, siyah-sarı, mor-lacivert
   Tüm renkler CSS değişkeni; tema değişimi tek satır (data-theme) ile yapılır. */

:root{
  --radius: 20px;
  --font-heading: 'Sora', 'Inter', system-ui, sans-serif; /* Sora'da Kiril yok → Inter */
  --font-body: 'Inter', system-ui, sans-serif;
}

/* Tema 1 — Mavi & Beyaz (light) */
html[data-theme="blue-white"]{
  --bg:#F5F7FF; --fg:#101425; --primary:#2F6BFF; --primary-fg:#FFFFFF;
  --secondary:#E7EDFF; --secondary-fg:#1E2A55; --accent:#00B8A9; --accent-fg:#04211D;
  --muted:#EEF1FB; --muted-fg:#5B6480; --card:#FFFFFF; --card-fg:#101425;
  --border:#DCE3F7; --input:#FFFFFF; --destructive:#E5484D; --success:#1EA672;
}

/* Tema 2 — Siyah & Sarı (dark, high contrast) */
html[data-theme="black-yellow"]{
  --bg:#0B0B0C; --fg:#F5F5F0; --primary:#F5C518; --primary-fg:#171300;
  --secondary:#1C1C1E; --secondary-fg:#F0E7B8; --accent:#F5C518; --accent-fg:#171300;
  --muted:#161617; --muted-fg:#9B9B93; --card:#141415; --card-fg:#F5F5F0;
  --border:#2A2A2C; --input:#1A1A1B; --destructive:#FF6B6B; --success:#5FE38B;
}

/* Tema 3 — Mor & Lacivert (dark indigo, Firevibe tasarım tokenlarıyla eşleştirildi) */
html[data-theme="purple-navy"], html{
  --bg:#0D1220; --fg:#EDEFF7; --primary:#6C7CF7; --primary-fg:#FFFFFF;
  --secondary:#1F2A44; --secondary-fg:#C9D2ED; --accent:#F5A560; --accent-fg:#241202;
  --muted:#1A2136; --muted-fg:#8A93B3; --card:#161D2E; --card-fg:#EDEFF7;
  --border:#262F45; --input:#1B2337; --destructive:#F0637C; --success:#4ADE9B;
  --chart1:#6C7CF7; --chart2:#4ADE9B; --chart3:#F5A560; --chart4:#63C4F0; --chart5:#B98CF2;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--fg); font-family:var(--font-body); }
h1,h2,h3,h4,.heading{ font-family:var(--font-heading); }
button{ font-family:var(--font-body); cursor:pointer; }
a{ color:inherit; text-decoration:none; }

#app{
  max-width:480px; margin:0 auto; min-height:100vh; position:relative;
  padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px));
  background:var(--bg);
}
/* Tabletlerde/geniş ekranlarda tek sütun mobil yerleşim yerine biraz daha nefes alan bir genişlik. */
@media (min-width:700px){ #app{ max-width:560px; box-shadow:0 0 60px rgba(0,0,0,.15); } .tabbar{ max-width:560px; } }

.screen{ padding:20px 18px 12px; animation:fadeIn .18s ease; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(16px + env(safe-area-inset-top, 0px)) 18px 0;
}

/* Yatay (landscape) telefon modu: dikey alan kısıtlı olduğundan sabit üst/alt
   barların ve büyük kartların dikey boşluklarını sıkılaştırıyoruz. */
@media (orientation:landscape) and (max-height:500px){
  .topbar{ padding-top:calc(8px + env(safe-area-inset-top, 0px)); }
  .screen{ padding:10px 18px 8px; }
  .balance-hero{ padding:14px 22px; margin-bottom:10px; }
  .balance-hero .amount{ font-size:24px; margin:2px 0; }
  .tabbar{ padding:4px 4px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .tab-item iconify-icon{ font-size:18px; }
  #app{ padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px)); }
}
.lang-picker{ position:relative; }
.lang-btn{ display:flex; align-items:center; gap:6px; background:var(--card); border:1px solid var(--border); border-radius:999px; padding:6px 10px; font-size:13px; color:var(--card-fg); }
.lang-menu{ position:absolute; right:0; top:38px; background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.25); min-width:220px; z-index:40; overflow:hidden; display:none; grid-template-columns:repeat(4, 1fr); gap:6px; padding:8px; }
.lang-menu.open{ display:grid; }
.lang-item{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:8px 4px; border-radius:10px; font-size:14px; cursor:pointer; }
.lang-item:hover{ background:var(--muted); }

.card{ background:var(--card); color:var(--card-fg); border:1px solid var(--border); border-radius:var(--radius); padding:16px; }
.muted{ color:var(--muted-fg); }
.pill{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:var(--muted); color:var(--muted-fg); font-size:12px; font-weight:600; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; border-radius:12px; padding:13px 16px; font-weight:600; font-size:15px; width:100%; min-height:48px; }
.btn-primary{ background:var(--primary); color:var(--primary-fg); }
.btn-secondary{ background:var(--secondary); color:var(--secondary-fg); }
.btn-outline{ background:transparent; border:1px solid var(--border); color:var(--fg); }
.btn-ghost{ background:transparent; color:var(--muted-fg); }
.btn-sm{ padding:8px 12px; font-size:13px; min-height:36px; width:auto; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }

.balance-hero{ background:var(--card); color:var(--card-fg); border:1px solid var(--border); border-radius:20px; padding:22px; margin-bottom:16px; position:relative; overflow:hidden; }
.balance-hero::before{ content:''; position:absolute; top:-40px; right:-40px; width:160px; height:160px; border-radius:50%; background:var(--primary); opacity:.12; filter:blur(30px); }
.balance-hero .amount{ font-family:var(--font-heading); font-size:32px; font-weight:700; margin:4px 0; position:relative; }

.quick-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:14px 0; }
.quick-item{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 4px; border-radius:14px; background:var(--card); border:1px solid var(--border); font-size:11px; color:var(--card-fg); text-align:center; }
.quick-item-icon{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:14px; background:color-mix(in srgb, var(--primary) 15%, transparent); border:1px solid color-mix(in srgb, var(--primary) 30%, transparent); }
.quick-item-icon iconify-icon{ font-size:20px; color:var(--primary); }

.category-chip{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 6px; border-radius:14px; border:1px solid var(--border); font-size:12px; font-weight:600; }

.tx-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
.tx-icon{ width:40px; height:40px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.tx-row:last-child{ border-bottom:none; }

.field{ margin-bottom:14px; }
.field label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--muted-fg); }
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border);
  background:var(--input); color:var(--fg); font-size:15px; font-family:var(--font-body);
}
.field textarea{ resize:vertical; min-height:80px; }

.tabbar{ position:fixed; bottom:0; left:0; right:0; max-width:480px; margin:0 auto; background:var(--card); border-top:1px solid var(--border); display:flex; justify-content:space-around; padding:8px 4px calc(14px + env(safe-area-inset-bottom, 0px)); z-index:30; }
.tab-item{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size:11px; color:var(--muted-fg); padding:6px 10px; border-radius:10px; flex:1; }
.tab-item.active{ color:var(--primary); }
.tab-item iconify-icon{ font-size:22px; }

.theme-swatch{ width:100%; height:56px; border-radius:12px; border:2px solid transparent; display:flex; overflow:hidden; }
.theme-swatch.selected{ border-color:var(--primary); }
.theme-swatch span{ flex:1; }

.faq-item{ border-bottom:1px solid var(--border); padding:12px 0; }
.faq-q{ display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:14px; }
.faq-a{ font-size:13px; color:var(--muted-fg); margin-top:8px; display:none; }
.faq-item.open .faq-a{ display:block; }

.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:flex-end; justify-content:center; z-index:100; }
.modal-sheet{ background:var(--bg); color:var(--fg); width:100%; max-width:480px; max-height:88vh; overflow-y:auto; border-radius:20px 20px 0 0; padding:22px 18px 30px; }

.badge-income{ background:rgba(74,222,155,.15); color:var(--success); }
.badge-expense{ background:rgba(240,99,124,.15); color:var(--destructive); }

.segmented{ display:flex; background:var(--muted); border-radius:12px; padding:4px; }
.segmented button{ flex:1; padding:10px; border-radius:10px; background:transparent; border:none; font-weight:600; font-size:13px; color:var(--muted-fg); }
.segmented button.active{ background:var(--card); color:var(--fg); }

.ad-slot{ border:1px dashed var(--border); border-radius:14px; padding:16px; text-align:center; font-size:12px; color:var(--muted-fg); margin:16px 0; }

/* Kayan (+) buton: position:fixed viewport'a göre konumlanır, #app'e göre değil —
   bu yüzden right değerini #app'in gerçek genişliğine göre hesaplıyoruz (aksi halde
   geniş ekranlarda buton uygulama kartının dışına kayardı). */
.fab-add{
  position:fixed; bottom:calc(90px + env(safe-area-inset-bottom, 0px));
  right:calc(max(0px, (100vw - 480px) / 2) + 20px);
  width:56px; height:56px; border-radius:50%; padding:0; max-width:56px;
  box-shadow:0 8px 20px rgba(0,0,0,.3); z-index:20;
}
@media (min-width:700px){ .fab-add{ right:calc(max(0px, (100vw - 560px) / 2) + 20px); } }
@media (orientation:landscape) and (max-height:500px){ .fab-add{ bottom:calc(68px + env(safe-area-inset-bottom, 0px)); } }

::-webkit-scrollbar{ width:0; height:0; }