/* YAYLA Cari Defter — mobil oncelikli tasarim sistemi.
   Renk rolleri iki temada da ayni adla tanimlidir; bilesenler renk secmez, rol kullanir. */

:root {
  color-scheme: dark;
  --zemin:#0c0e12; --kart:#151a21; --kart2:#1b222c; --kart3:#232b37;
  --metin:#f2f4f7; --metin2:#a7b0be; --soluk:#6d7686;
  --cizgi:rgba(255,255,255,.085); --cizgi2:rgba(255,255,255,.16);
  --vurgu:#f0b23a; --vurgu-metin:#12151a;
  --iyi:#3fb27f; --uyari:#e8a33d; --kotu:#e2564a; --bilgi:#5aa9e6;
  --k1:#3fb27f; --k2:#86bd63; --k3:#d6c04c; --k4:#e8a33d; --k5:#df7440; --k6:#d64a3d;
  --golge:0 8px 28px rgba(0,0,0,.45);
  --r:16px; --r2:12px; --r3:9px;
  --ust-h:56px; --alt-h:calc(58px + env(safe-area-inset-bottom));
  --gecis:280ms cubic-bezier(.22,.61,.36,1);
}
:root[data-tema="acik"], html[data-tema="sistem"]:has(body) {}
@media (prefers-color-scheme: light) {
  :root[data-tema="sistem"] {
    color-scheme: light;
    --zemin:#f5f6f9; --kart:#ffffff; --kart2:#eef1f6; --kart3:#e4e9f0;
    --metin:#0f151d; --metin2:#4d5766; --soluk:#8590a0;
    --cizgi:rgba(10,16,26,.10); --cizgi2:rgba(10,16,26,.18);
    --vurgu:#b8790a; --vurgu-metin:#ffffff;
    --iyi:#1f8f5f; --uyari:#b8790a; --kotu:#c33c30; --bilgi:#2b7cc0;
    --k1:#2f9a6b; --k2:#6aa64c; --k3:#b8a026; --k4:#c9862a; --k5:#c2602f; --k6:#bb3a2e;
    --golge:0 8px 24px rgba(20,30,50,.12);
  }
}
:root[data-tema="acik"] {
  color-scheme: light;
  --zemin:#f5f6f9; --kart:#ffffff; --kart2:#eef1f6; --kart3:#e4e9f0;
  --metin:#0f151d; --metin2:#4d5766; --soluk:#8590a0;
  --cizgi:rgba(10,16,26,.10); --cizgi2:rgba(10,16,26,.18);
  --vurgu:#b8790a; --vurgu-metin:#ffffff;
  --iyi:#1f8f5f; --uyari:#b8790a; --kotu:#c33c30; --bilgi:#2b7cc0;
  --k1:#2f9a6b; --k2:#6aa64c; --k3:#b8a026; --k4:#c9862a; --k5:#c2602f; --k6:#bb3a2e;
  --golge:0 8px 24px rgba(20,30,50,.12);
}
:root[data-tema="koyu"] { color-scheme: dark; }

* { box-sizing:border-box; margin:0; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
body {
  background:var(--zemin); color:var(--metin); overscroll-behavior-y:none;
  font:400 16px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing:antialiased;
}
button, input { font:inherit; color:inherit; }
button { background:none; border:0; cursor:pointer; }
:focus-visible { outline:2px solid var(--vurgu); outline-offset:2px; border-radius:6px; }

[hidden] { display:none !important; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ------------------------------------------------------------------ kilit */
.kilit {
  min-height:100dvh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:24px 20px calc(24px + env(safe-area-inset-bottom)); gap:18px;
  background:radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--vurgu) 13%, transparent), transparent 70%), var(--zemin);
}
.kilit-kart {
  width:100%; max-width:380px; background:var(--kart); border:1px solid var(--cizgi);
  border-radius:22px; padding:30px 24px 26px; text-align:center; box-shadow:var(--golge);
  animation:yukari 520ms cubic-bezier(.16,.84,.34,1) both;
}
@keyframes yukari { from{opacity:0; transform:translateY(16px) scale(.985)} to{opacity:1; transform:none} }
.marka { color:var(--vurgu); display:flex; justify-content:center; margin-bottom:14px; }
.kilit h1 { font-size:26px; font-weight:660; letter-spacing:-.02em; }
.kilit-alt { color:var(--metin2); font-size:13.5px; margin:7px 0 22px; line-height:1.4; }
.alan { position:relative; }
#sifre {
  width:100%; padding:15px 46px 15px 16px; background:var(--kart2); color:var(--metin);
  border:1px solid var(--cizgi2); border-radius:var(--r2); font-size:17px;
}
#sifre::placeholder { color:var(--soluk); }
.goz { position:absolute; right:6px; top:50%; transform:translateY(-50%); padding:10px; color:var(--soluk); }
.hatirla { display:flex; align-items:center; gap:9px; margin:14px 2px 18px;
  color:var(--metin2); font-size:14px; text-align:left; cursor:pointer; }
.hatirla input { width:19px; height:19px; accent-color:var(--vurgu); }
.birincil {
  width:100%; padding:15px; border-radius:var(--r2); background:var(--vurgu);
  color:var(--vurgu-metin); font-weight:640; font-size:16.5px; transition:transform 120ms, opacity 160ms;
}
.birincil:active { transform:scale(.985); }
.birincil[disabled] { opacity:.6; }
.hata { color:var(--kotu); font-size:13.5px; min-height:19px; margin-top:12px; }
.kilit-dip { color:var(--soluk); font-size:12px; text-align:center; }
.sarsil { animation:sarsil 420ms; }
@keyframes sarsil { 10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-7px)} 40%,60%{transform:translateX(7px)} }

/* ------------------------------------------------------------------ kabuk */
.ust {
  position:fixed; inset:0 0 auto 0; height:calc(var(--ust-h) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 6px 0; display:flex; align-items:center; gap:4px; z-index:40;
  background:color-mix(in srgb, var(--zemin) 86%, transparent);
  backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--cizgi);
}
.ust-baslik { flex:1; min-width:0; padding:0 4px; }
.ust-baslik span { display:block; font-size:16px; font-weight:640; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ust-baslik small { display:block; color:var(--soluk); font-size:11.5px; margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ikon-dugme { width:42px; height:42px; display:grid; place-items:center; color:var(--metin2);
  border-radius:11px; flex:none; }
.ikon-dugme:active { background:var(--kart2); }

main { padding-top:calc(var(--ust-h) + env(safe-area-inset-top)); padding-bottom:var(--alt-h); }
.ekran { display:none; }
.ekran.etkin { display:block; animation:acil 220ms ease both; }
@keyframes acil { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.ekran-kart.etkin { animation:sagdan var(--gecis) both; }
@keyframes sagdan { from{opacity:.4; transform:translateX(26px)} to{opacity:1; transform:none} }

.alt {
  position:fixed; inset:auto 0 0 0; height:var(--alt-h);
  padding-bottom:env(safe-area-inset-bottom); display:grid; grid-template-columns:repeat(3,1fr);
  background:color-mix(in srgb, var(--zemin) 90%, transparent);
  backdrop-filter:saturate(180%) blur(14px); border-top:1px solid var(--cizgi); z-index:40;
}
.alt button { display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; color:var(--soluk); font-size:11px; font-weight:520; transition:color 160ms; }
.alt button.etkin { color:var(--vurgu); }
.alt button:active { transform:scale(.94); }

/* ------------------------------------------------------------------ liste */
.liste-ust { position:sticky; top:calc(var(--ust-h) + env(safe-area-inset-top)); z-index:30;
  background:var(--zemin); padding:10px 14px 8px; border-bottom:1px solid var(--cizgi); }
.ara { position:relative; display:flex; align-items:center; gap:8px; background:var(--kart2);
  border:1px solid var(--cizgi); border-radius:12px; padding:0 10px; color:var(--soluk); }
.ara input { flex:1; padding:11px 0; background:none; border:0; font-size:16px; color:var(--metin); }
.ara input::-webkit-search-cancel-button { display:none; }
.ara-sil { font-size:22px; line-height:1; color:var(--soluk); padding:6px 4px; }
.cipler { display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; padding:9px 0 1px; margin:0 -14px;
  padding-left:14px; padding-right:14px; }
.cipler::-webkit-scrollbar { display:none; }
.cip { flex:none; padding:7px 13px; border-radius:99px; background:var(--kart2);
  border:1px solid var(--cizgi); color:var(--metin2); font-size:13px; font-weight:520;
  white-space:nowrap; transition:background 160ms, color 160ms, border-color 160ms; }
.cip.etkin { background:var(--vurgu); border-color:var(--vurgu); color:var(--vurgu-metin); }
.cip:active { transform:scale(.96); }

.liste-ozet { display:flex; gap:14px; padding:11px 16px 4px; color:var(--metin2); font-size:12.5px;
  flex-wrap:wrap; }
.liste-ozet b { color:var(--metin); font-weight:620; }
.liste { padding:6px 12px 18px; display:flex; flex-direction:column; gap:8px; }
.satir {
  display:grid; grid-template-columns:1fr auto; gap:3px 12px; align-items:center;
  background:var(--kart); border:1px solid var(--cizgi); border-radius:var(--r); padding:12px 14px;
  text-align:left; width:100%; animation:gir 340ms cubic-bezier(.2,.7,.3,1) both;
  transition:transform 130ms, background 160ms;
}
.satir:active { transform:scale(.985); background:var(--kart2); }
@keyframes gir { from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none} }
.satir .ad { font-size:14.6px; font-weight:580; line-height:1.28; letter-spacing:-.01em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.satir .tut { font-size:17px; font-weight:660; letter-spacing:-.02em; text-align:right; white-space:nowrap; }
.satir .tut.sifir { color:var(--soluk); font-weight:520; }
.satir .alt2 { grid-column:1/2; display:flex; gap:8px; align-items:center; color:var(--soluk);
  font-size:11.5px; flex-wrap:wrap; }
.satir .spark { grid-column:2/3; width:74px; height:24px; opacity:.85; }
.satir .yasbar { grid-column:1/-1; margin-top:7px; }
.rozet { display:inline-flex; align-items:center; gap:4px; padding:2px 7px; border-radius:99px;
  font-size:10.5px; font-weight:600; background:var(--kart3); color:var(--metin2); }
.rozet.k { background:color-mix(in srgb, var(--kotu) 20%, transparent); color:var(--kotu); }
.rozet.u { background:color-mix(in srgb, var(--uyari) 20%, transparent); color:var(--uyari); }
.rozet.i { background:color-mix(in srgb, var(--iyi) 20%, transparent); color:var(--iyi); }
.rozet.b { background:color-mix(in srgb, var(--bilgi) 20%, transparent); color:var(--bilgi); }
.liste-sonu { text-align:center; color:var(--soluk); font-size:12.5px; padding:4px 0 26px; }
.bos { text-align:center; color:var(--soluk); padding:44px 20px; font-size:14px; }

/* ------------------------------------------------------------------ kart */
.kart-ust { padding:16px 16px 4px; }
.kart-ust h2 { font-size:21px; font-weight:670; letter-spacing:-.025em; line-height:1.22; }
.kart-ust .kod { color:var(--soluk); font-size:12.5px; margin-top:5px;
  font-family:ui-monospace,"SF Mono",Menlo,monospace; }
.hikaye {
  margin:14px 16px 0; padding:14px 15px; background:var(--kart); border:1px solid var(--cizgi);
  border-left:3px solid var(--vurgu); border-radius:var(--r2); font-size:14.5px; line-height:1.55;
  color:var(--metin);
}
.hikaye-dug { display:flex; gap:8px; margin:10px 16px 0; }
.hikaye-dug button { flex:1; padding:10px; border-radius:11px; background:var(--kart2);
  border:1px solid var(--cizgi); color:var(--metin2); font-size:13.5px; font-weight:560;
  display:flex; align-items:center; justify-content:center; gap:6px; }
.hikaye-dug button:active { transform:scale(.97); background:var(--kart3); }

.blok { margin:18px 12px 0; background:var(--kart); border:1px solid var(--cizgi);
  border-radius:var(--r); overflow:hidden; }
.blok > h3 { font-size:12px; font-weight:660; letter-spacing:.07em; text-transform:uppercase;
  color:var(--soluk); padding:14px 15px 0; }
.blok .ic { padding:12px 15px 15px; }
.blok .not { color:var(--soluk); font-size:12px; line-height:1.45; margin-top:9px; }

.dev { font-size:32px; font-weight:700; letter-spacing:-.035em; line-height:1.1; margin-top:8px; }
.dev.k { color:var(--kotu); } .dev.i { color:var(--iyi); }
.dev small { font-size:15px; font-weight:560; color:var(--metin2); letter-spacing:0; margin-left:3px; }
.alt-satir { display:flex; justify-content:space-between; gap:10px; padding:9px 0;
  border-top:1px solid var(--cizgi); font-size:13.5px; }
.alt-satir:first-of-type { border-top:0; }
.alt-satir span { color:var(--metin2); }
.alt-satir b { font-weight:620; text-align:right; }

.kutular { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:12px 12px 0; }
.kutu { background:var(--kart); border:1px solid var(--cizgi); border-radius:var(--r2); padding:11px 12px; }
.kutu .k { color:var(--soluk); font-size:11.5px; line-height:1.3; }
.kutu .v { font-size:17.5px; font-weight:660; letter-spacing:-.02em; margin-top:5px; }
.kutu .d { color:var(--soluk); font-size:11px; margin-top:2px; }

.aylar { display:flex; flex-direction:column; }
.ay-sat { display:grid; grid-template-columns:58px 1fr auto; gap:10px; align-items:center;
  padding:11px 15px; border-top:1px solid var(--cizgi); text-align:left; width:100%; }
.ay-sat:active { background:var(--kart2); }
.ay-sat .ay { font-size:12.5px; color:var(--metin2); font-weight:560; }
.ay-sat .cift { display:flex; gap:10px; font-size:12.5px; }
.ay-sat .cift i { font-style:normal; color:var(--soluk); }
.ay-sat .bak { font-size:14.5px; font-weight:640; white-space:nowrap; }
.ay-sat .ok { color:var(--soluk); }

.dokun { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 15px; border-top:1px solid var(--cizgi); width:100%; text-align:left; }
.dokun:active { background:var(--kart2); }
.dokun .sol { min-width:0; }
.dokun .b1 { font-size:14px; font-weight:560; line-height:1.3; }
.dokun .b2 { color:var(--soluk); font-size:11.5px; margin-top:3px; }
.dokun .sag { text-align:right; white-space:nowrap; }
.dokun .sag b { font-size:14.5px; font-weight:640; }
.dokun .sag em { display:block; font-style:normal; color:var(--soluk); font-size:11px; margin-top:2px; }

.katla { border-top:1px solid var(--cizgi); }
.katla > summary { list-style:none; padding:14px 15px; display:flex; justify-content:space-between;
  align-items:center; font-size:14px; font-weight:580; cursor:pointer; }
.katla > summary::-webkit-details-marker { display:none; }
.katla > summary .sy { color:var(--soluk); font-size:12px; font-weight:520; }
.katla[open] > summary { color:var(--vurgu); }
.katla .liste-ic { animation:acil 220ms ease both; }

/* ------------------------------------------------------------------ tabaka */
.perde { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:50;
  animation:soluklas 220ms ease both; backdrop-filter:blur(2px); }
@keyframes soluklas { from{opacity:0} to{opacity:1} }
.tabaka {
  position:fixed; inset:auto 0 0 0; z-index:60; max-height:88dvh; display:flex; flex-direction:column;
  background:var(--kart); border-radius:20px 20px 0 0; border-top:1px solid var(--cizgi2);
  box-shadow:0 -10px 40px rgba(0,0,0,.45); animation:asagidan 300ms cubic-bezier(.16,.84,.34,1) both;
  padding-bottom:env(safe-area-inset-bottom); touch-action:pan-y;
}
@keyframes asagidan { from{transform:translateY(102%)} to{transform:none} }
.tabaka.kapan { animation:inis 220ms ease both; }
@keyframes inis { to{transform:translateY(102%)} }
.tutamac { padding:9px 0 3px; display:flex; justify-content:center; flex:none; cursor:grab; }
.tutamac i { width:38px; height:4px; border-radius:99px; background:var(--cizgi2); display:block; }
.tabaka header { padding:6px 18px 12px; border-bottom:1px solid var(--cizgi); flex:none; }
.tabaka header h4 { font-size:17px; font-weight:660; letter-spacing:-.02em; line-height:1.25; }
.tabaka header p { color:var(--soluk); font-size:12.5px; margin-top:4px; }
.tabaka .govde { overflow-y:auto; -webkit-overflow-scrolling:touch; padding:4px 0 18px; }

.kv { display:flex; justify-content:space-between; gap:14px; padding:10px 18px;
  border-bottom:1px solid var(--cizgi); font-size:13.5px; }
.kv:last-child { border-bottom:0; }
.kv span { color:var(--metin2); flex:none; }
.kv b { font-weight:600; text-align:right; }
.bolum-bas { padding:15px 18px 6px; font-size:11.5px; font-weight:660; letter-spacing:.07em;
  text-transform:uppercase; color:var(--soluk); }
.uyari-kutu { margin:12px 18px; padding:11px 13px; border-radius:var(--r3); font-size:12.5px;
  line-height:1.5; background:color-mix(in srgb, var(--uyari) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--uyari) 34%, transparent); color:var(--metin); }
.uyari-kutu.b { background:color-mix(in srgb, var(--bilgi) 12%, transparent);
  border-color:color-mix(in srgb, var(--bilgi) 32%, transparent); }

.bildirim { position:fixed; left:50%; bottom:calc(var(--alt-h) + 14px); transform:translateX(-50%);
  background:var(--kart3); border:1px solid var(--cizgi2); color:var(--metin); padding:11px 17px;
  border-radius:99px; font-size:13.5px; z-index:80; box-shadow:var(--golge);
  animation:yukari 240ms cubic-bezier(.16,.84,.34,1) both; }

/* ------------------------------------------------------------------ grafik */
svg.g { display:block; width:100%; height:auto; overflow:visible; }
.aylik-bar rect { transition:opacity 160ms; }
.efsane { display:flex; gap:13px; flex-wrap:wrap; color:var(--soluk); font-size:11.5px; margin-top:9px; }
.efsane i { width:9px; height:9px; border-radius:3px; display:inline-block; margin-right:5px;
  vertical-align:-1px; }
.iskelet { background:linear-gradient(100deg, var(--kart) 30%, var(--kart2) 50%, var(--kart) 70%);
  background-size:220% 100%; animation:parilti 1.25s linear infinite; border-radius:var(--r); height:74px; }
@keyframes parilti { to { background-position:-120% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:1ms !important; animation-iteration-count:1 !important;
    transition-duration:1ms !important; }
}
@media (min-width: 720px) {
  main { max-width:680px; margin:0 auto; }
  .ust, .alt { max-width:680px; left:50%; transform:translateX(-50%); }
  .tabaka { max-width:680px; left:50%; transform:translateX(-50%); border-radius:20px 20px 0 0; }
  @keyframes asagidan { from{transform:translateX(-50%) translateY(102%)} to{transform:translateX(-50%)} }
  @keyframes inis { to{transform:translateX(-50%) translateY(102%)} }
  .kutular { grid-template-columns:repeat(4,1fr); }
}