:root { --border:#d8dde3; --bg:#f7f8fa; --accent:#2563eb; --hata:#dc2626; --gri:#6b7280; }
* { box-sizing:border-box; }
body { font-family:system-ui,-apple-system,"Segoe UI",sans-serif; margin:0;
       padding:20px 16px 40px; background:var(--bg); color:#1a1d21; line-height:1.6; }
main { max-width:820px; margin:0 auto; }

/* --- header --- */
.ustBar { display:flex; justify-content:space-between; align-items:center;
          gap:12px; margin-bottom:28px; flex-wrap:wrap; }
.solGrup { display:flex; align-items:center; gap:16px; }
.marka { font-size:1.1rem; font-weight:700; color:var(--accent); text-decoration:none; }
.sagGrup { display:flex; align-items:center; gap:10px; }

/* --- araçlar menüsü --- */
.menu { position:relative; }
.menuBtn { background:#fff; border:1px solid var(--border); border-radius:6px;
           padding:8px 14px; font-size:.9rem; cursor:pointer; color:#374151;
           font-weight:600; display:flex; align-items:center; gap:6px; }
.menuBtn:hover { border-color:var(--accent); color:var(--accent); }
.menuBtn .ok { font-size:.65rem; transition:transform .15s; }
.menu.acik .menuBtn .ok { transform:rotate(180deg); }
.menuListe { position:absolute; top:calc(100% + 6px); left:0; min-width:270px;
             background:#fff; border:1px solid var(--border); border-radius:8px;
             box-shadow:0 8px 24px rgba(0,0,0,.10); padding:6px; display:none; z-index:50; }
.menu.acik .menuListe { display:block; }
.menuListe a, .menuListe span.pasif {
  display:block; padding:9px 12px; border-radius:6px; text-decoration:none;
  color:#1a1d21; font-size:.9rem; }
.menuListe a:hover { background:#eff6ff; color:var(--accent); }
.menuListe span.pasif { color:#9ca3af; cursor:default; }

/* --- dil --- */
.dil { display:flex; border:1px solid var(--border); border-radius:6px;
       overflow:hidden; background:#fff; }
.dil button { background:none; border:none; padding:8px 13px; font-size:.85rem;
              cursor:pointer; color:var(--gri); font-weight:600; }
.dil button.aktif { background:var(--accent); color:#fff; }

/* --- ortak --- */
h1 { font-size:1.6rem; margin:0 0 10px; }
h2 { font-size:1.1rem; margin:0 0 14px; }
.altYazi { margin:0 0 30px; color:#4b5563; max-width:62ch; }
.kutu { background:#fff; border:1px solid var(--border); border-radius:8px; }

/* --- ana sayfa --- */
.izgara { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
          margin-bottom:36px; }
.kart { display:block; background:#fff; border:1px solid var(--border);
        border-radius:8px; padding:16px; text-decoration:none; color:inherit;
        transition:border-color .15s, transform .15s; }
.kart:hover { border-color:var(--accent); transform:translateY(-2px); }
.kart h3 { margin:0 0 6px; font-size:1rem; color:var(--accent); }
.kart p { margin:0; font-size:.85rem; color:var(--gri); line-height:1.45; }
.kart.yakinda { opacity:.55; pointer-events:none; }
.kart.yakinda h3 { color:var(--gri); }
.rozet { display:inline-block; font-size:.7rem; background:#eef1f5; color:var(--gri);
         padding:2px 7px; border-radius:4px; margin-left:6px; vertical-align:middle;
         font-weight:400; }

/* --- hesaplama tablosu --- */
.geriLink { display:inline-block; font-size:.85rem; color:var(--gri);
            text-decoration:none; margin-bottom:14px; }
.geriLink:hover { color:var(--accent); }
.baz { padding:12px 16px; margin-bottom:16px; display:flex; align-items:center;
       gap:10px; flex-wrap:wrap; font-size:.9rem; color:#4b5563; }
.baz strong { color:#1a1d21; font-size:1rem; }
table { width:100%; border-collapse:collapse; background:#fff;
        border:1px solid var(--border); border-radius:8px; overflow:hidden; }
th, td { padding:8px; text-align:left; border-bottom:1px solid var(--border); }
th { background:#eef1f5; font-size:.85rem; font-weight:600; }
td input { width:100%; padding:8px; border:1px solid var(--border);
           border-radius:6px; font-size:1rem; }
td input.hatali { border-color:var(--hata); background:#fef2f2; }
td:first-child, th:first-child { width:44px; text-align:center; color:var(--gri); }
td:last-child, th:last-child { width:44px; }
tr.bazSatir td { background:#eff6ff; }
.gun { color:var(--gri); font-size:.9rem; }
.sil { background:none; border:none; color:#9ca3af; font-size:1.2rem;
       cursor:pointer; padding:4px 8px; }
.sil:hover { color:var(--hata); }
.butonlar { margin:16px 0; display:flex; gap:8px; flex-wrap:wrap; }
button.ana { background:var(--accent); color:#fff; border:none; padding:10px 18px;
             border-radius:6px; font-size:.95rem; cursor:pointer; }
button.yan { background:#fff; border:1px solid var(--border); padding:10px 18px;
             border-radius:6px; font-size:.95rem; cursor:pointer; }
.sonuc { padding:16px 20px; }
.satir { display:flex; justify-content:space-between; padding:8px 0; gap:12px; }
.satir + .satir { border-top:1px solid var(--border); }
.satir strong { font-size:1.15rem; text-align:right; }
.vurgu strong { color:var(--accent); }
.ipucu { font-size:.8rem; color:var(--gri); margin-top:10px; }

/* --- yasal / footer --- */
.yasal { margin-top:32px; padding:16px 20px; font-size:.78rem; color:var(--gri);
         line-height:1.55; }
.yasal h2 { font-size:.85rem; color:#4b5563; margin:0 0 8px; }
.yasal p { margin:0 0 8px; }
.yasal .veri { color:#4b5563; }
.yasal .telif { margin:0; color:#9ca3af; }
.yasal a { color:var(--gri); }