:root{
    --bg:#0D1420; --surface:#141C2B; --surface-2:#1B2536; --hairline:#2A3448;
    --text:#EAEDF3; --muted:#8D96AC; --brass:#C6A15B; --brass-dim:#8A7440;
    --red:#E2544B; --amber:#E3A23C; --teal:#3FB68A;
    --coral:#FF6B4A; --magenta:#D6407A; --violet:#7C4DD9; --azure:#3E8FE0;
    --grad:linear-gradient(120deg, var(--coral), var(--magenta) 45%, var(--violet) 75%, var(--azure));
  }
  html.theme-light{ --bg:#F4F5F7; --surface:#FFFFFF; --surface-2:#EEF0F3; --hairline:#DCE0E6; --text:#1B2230; --muted:#5F6775; --brass:#9A7B3F; --brass-dim:#B8A06C; }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{background:var(--bg);}
  body{ background:radial-gradient(1200px 600px at 85% -10%, rgba(198,161,91,0.08), transparent 60%), radial-gradient(900px 500px at -10% 20%, rgba(79,163,196,0.06), transparent 60%), var(--bg); color:var(--text); font-family:'Inter',sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; padding-bottom:60px; }
  header.masthead{ max-width:1440px; margin:0 auto; padding:36px 24px 24px; display:flex; justify-content:space-between; align-items:flex-end; border-bottom:1px solid var(--hairline); flex-wrap:wrap; gap:16px; }
  header.masthead > div:first-child{ flex:1 1 0%; min-width:0; }
  @media (max-width:700px){
    header.masthead{ flex-direction:column; align-items:stretch; }
    header.masthead > div:first-child{ flex:1 1 auto; width:100%; }
    header.masthead .top-actions{ width:100%; }
  }
  h1.title{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(24px,4vw,36px); letter-spacing:-0.01em; margin:0;}
  /* 🔴 02.09.2026 — İNGİLİZCE KIRPILMASI: alt başlık masaüstünde tek satır +
     ellipsis; max-width 900px Türkçe metne göre ayarlanmıştı, İngilizce cümle
     915–1156px olduğu için "…" ile kesiliyordu. Tek satır kuralı korunuyor,
     yalnız sınır kapsayıcıya kadar açıldı. ⛔ 900px'e geri dönme. */
  .subtitle{color:var(--muted); font-size:14px; margin-top:6px; line-height:1.5; max-width:min(1180px,100%); white-space:normal;}
  @media (min-width:701px){ .subtitle{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } }
  .back-link{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text); font-weight:600; text-decoration:none; border:1px solid var(--hairline); padding:8px 14px; border-radius:6px; white-space:nowrap; background:var(--surface-2,#1B2536); box-shadow:0 6px 16px rgba(0,0,0,0.35); transition:border-color .15s ease, color .15s ease; }
  .back-link:hover{ color:var(--coral); border-color:var(--coral); }
  main{ max-width:1440px; margin:0 auto; padding:28px 24px 24px; }
  /* 🔑 KURAL 2e (2026-08-21): giriş paneli İÇERİĞİ KADAR yer kaplar; kalan genişlik
     veri paneline gider. Sabit geniş ölçü sağdaki tabloyu sıkıştırıyordu. */
  /* ⚠️ 2026-08-21: içerik güdümlü (max-content/fit-content) sol sütun bu düzeni
     BOZUYOR — içteki tablo width:100% isteyince sütun şişiyor. Ölçülü sütun. */
  .cols{ display:grid; grid-template-columns:minmax(340px,400px) minmax(0,1fr); gap:24px; align-items:start; }
  .cols > *{ min-width:0; }
  @media (max-width:940px){ .cols{ grid-template-columns:1fr; } }
  .panel{ background:var(--surface); border:1px solid var(--hairline); border-radius:14px; padding:22px; }
  .panel-title{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px; margin-bottom:4px; }
  .panel-desc{ color:var(--muted); font-size:12.5px; margin-bottom:18px; line-height:1.5; }
  .field{ margin-bottom:16px; }
  /* 🔴 2026-08-31 (kuyruk m.7): Tutar/Oran/Vade/BSMV tek satırda — panel genişliği
     KURAL 2e ile 340–400px'e SABİT (dokunulmadı), bu yüzden dört alan yalnızca bu
     kompakt varyantla sığar (etiket 2 satıra inebilir, kutu daha dar/kısa). Diğer
     .field'lar (Komisyon dahil) ESKİ boyutunu korur — yalnız bu satırın içindekiler
     kompakt. ⛔ .cols/.panel genişliğini büyütmeyi ÇÖZÜM sanma — KURAL 2e'yi bozar.
     📏 380px altı gerçek telefonlarda satır 2×2'ye döner. */
  /* 31.08 (KALICI TASARIM KURALI — TEK SATIR KESİKSİZ): min-height:2.2em + align-items:flex-end
     etiketin 2 satıra sarmasını KABUL ediyordu (panel sabit 340-400px, KURAL 2e — dokunulmadı) —
     bu artık yasak. Ölçüm (panel max=400px, iç genişlik 400-2×22pad=356px; 9px, uppercase,
     letter-spacing .04em ≈ char×5,01px; gap 6→4px'e indirilip 6px kazanıldı):
       "Çek Tutarı (Nominal)" 20 char→100px, "Yıllık İskonto Oranı" 20 char→100px,
       "Vadeye Kalan Gün" 16 char→80px, "BSMV Oranı" 10 char→50px (toplam 330px + 3×4 gap
       =342px < 356px avail). Sütunlar bu orana göre ağırlıklandırıldı (2:2:1.6:1) — eşit
       repeat(4,1fr) yerine en uzun 2 etikete (Tutar/Oran) daha geniş pay verildi. */
  .field-row4{ display:grid; grid-template-columns:2fr 2fr 1.6fr 1fr; gap:4px; margin-bottom:16px; }
  .field-row4 .field{ margin-bottom:0; min-width:0; }
  .field-row4 label{ font-size:9px; line-height:1.15; white-space:nowrap; margin-bottom:4px; }
  .field-row4 .input-wrap input{ height:40px; font-size:12px; font-weight:600; padding:0 20px 0 6px; border-radius:8px; }
  .field-row4 .input-suffix{ right:5px; font-size:9px; }
  @media (max-width:380px){ .field-row4{ grid-template-columns:repeat(2,1fr); gap:8px; } }
  .field label{ display:block; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; font-weight:600; }
  .input-wrap{ position:relative; display:flex; align-items:center; }
  .input-wrap input{ width:100%; height:46px; background:var(--bg); border:1px solid var(--hairline); border-radius:10px; padding:0 46px 0 14px; color:var(--text); font-family:'JetBrains Mono',monospace; font-weight:600; font-size:16px; outline:none; transition:border-color .15s ease, box-shadow .15s ease; }
  .input-wrap input:focus{ border-color:var(--brass); box-shadow:0 0 0 3px rgba(198,161,91,0.12); }
  .input-suffix{ position:absolute; right:14px; color:var(--muted); font-size:13px; font-weight:600; pointer-events:none; }
  .result-hero{ background:linear-gradient(135deg, rgba(63,182,138,0.12), rgba(62,143,224,0.08)); border:1px solid rgba(63,182,138,0.25); border-radius:14px; padding:22px; margin-bottom:16px; }
  .rh-label{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; }
  .rh-value{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(28px,5.5vw,40px); letter-spacing:-0.02em; margin-top:4px; color:var(--teal); }
  .rh-sub{ margin-top:8px; font-size:12px; color:var(--muted); }
  .breakdown{ background:var(--surface); border:1px solid var(--hairline); border-radius:14px; padding:6px 18px; }
  .bd-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--hairline); font-size:13.5px; }
  .bd-row:last-child{ border-bottom:none; }
  /* 🔴 2026-08-19 (kullanıcı: "sonucun TL'si / %'si alta inmesin"): değer asla kırılmaz. */
  .bd-row > b{ white-space:nowrap; flex-shrink:0; }
  .bd-row > span{ color:var(--muted); }
  .bd-row b{ font-family:'JetBrains Mono',monospace; font-weight:600; font-size:15px; color:var(--text); }
  .bd-row.total{ border-top:2px solid var(--hairline); }
  .bd-row.total > span{ color:var(--text); font-weight:700; font-family:'Space Grotesk',sans-serif; font-size:14px; }
  .bd-row.total b{ font-size:18px; color:var(--teal); }
  .flag{ margin-top:18px; background:var(--surface-2); border:1px solid var(--hairline); border-radius:10px; padding:14px 16px; color:var(--muted); font-size:12px; line-height:1.7; }
  .flag b{ color:var(--text); }
  /* 🔑 2026-08-16 üye dönüşüm paketi — mobilde BSMV/Komisyon "Gelişmiş seçenekler"e katlanır.
     Masaüstü DEĞİŞMEZ: ≥701px'te <details> display:contents ile şeffaflaşır, .field'lar
     panelin normal akışına aynen katılır (görsel fark yok). ⛔ Bu breakpoint'i değiştirme —
     sayfanın kendi mobil breakpoint'i (700px) ile aynı tutuldu. */
  .mmg-fold-sum{ cursor:pointer; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); font-weight:600; list-style:none; padding:2px 0; }
  .mmg-fold-sum::-webkit-details-marker{ display:none; }
  .mmg-fold-sum::before{ content:'▸ '; }
  .mmg-fold[open] > .mmg-fold-sum::before{ content:'▾ '; }
  @media (max-width:700px){
    .mmg-fold{ margin-bottom:16px; }
    .mmg-fold > .field{ margin-bottom:0; }
    .mmg-fold[open] > .mmg-fold-sum{ margin-bottom:12px; }
  }
  @media (min-width:701px){
    .mmg-fold{ display:contents; }
    .mmg-fold-sum{ display:none; }
  }
  footer{ max-width:1440px; margin:28px auto 0; padding:22px 24px 0; border-top:1px solid var(--hairline); }
  footer .credit{width:100%; text-align:right; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.04em; color:var(--muted); display:flex; align-items:center; justify-content:flex-end; gap:8px;}
  .signature-pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 12px 4px 5px; border-radius:999px; background:var(--surface-2); border:1px solid var(--hairline); }
  .credit-logo{height:18px; width:18px; border-radius:5px; object-fit:cover;}
  .credit-fallback{ display:none; width:18px; height:18px; border-radius:5px; align-items:center; justify-content:center; background:var(--grad); font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:9px; color:#fff; }
  footer .credit b{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:11.5px; font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  /* 🛑🛑 26.08 KALICI KURAL — GİRDİ ALANI ASLA `<details>` İÇİNE KONMAZ
     Kullanıcı: "böyle bir şeyin asla olmaması lazım."
     OLAN: Komisyon Oranı alanı `<details class="mmg-fold">` içindeydi ve masaüstünde
     `display:contents` ile gösteriliyordu. Chrome içeriği `::details-content` ile
     yönetmeye başlayınca bu numara ÇALIŞMAZ oldu → hesaplamanın girdisi EKRANDAN
     SESSİZCE SİLİNDİ. Kullanıcı komisyonu giremedi, hata mesajı da yoktu.
     KURAL: Bir hesaplamanın SONUCUNU etkileyen hiçbir alan katlama/açılır içine konmaz.
     Katlama yalnız AÇIKLAMA metni için kullanılabilir.
     Aşağıdaki kural, ileride yanlışlıkla eklenirse bile alanı GÖRÜNÜR TUTAR — güvenlik ağı.
     ⛔ Bu bloğu silme. */
  details.mmg-fold{ display:block !important; }
  details.mmg-fold > *{ display:revert; }
  details.mmg-fold::details-content{ display:block !important; content-visibility:visible !important; block-size:auto !important; }
  details.mmg-fold > summary.mmg-fold-sum{ display:none !important; }

  /* 📱 27.08 — 390px yatay taşma: ortak kod dikey çıktı takımı için kart'a inline
     `padding-right` yazıyor; mobilde takım zaten ızgaraya döndüğünden bu boşluk
     paneli 6px taşırıyordu. Mobilde sıfırlanır; `.cols{1fr}` → minmax(0,1fr). Masaüstü DEĞİŞMEZ. */
  @media (max-width:760px){
    .cols{ grid-template-columns:minmax(0,1fr); }
    .cols > *, .panel{ min-width:0; max-width:100%; box-sizing:border-box; }
    .panel > div:has(> .mmg-takim-dikey), div:has(> .mmg-takim-dikey){ padding-right:0 !important; }
  }

  /* ── md.139 (02.09.2026) nakit akış tablosu ──────────────────────────────
     📏 28.08 KALICI KURAL: tablo/sütun başlıkları HER ZAMAN ortalanır.
     Rakamlar sağa yaslı ve JetBrains Mono — basamaklar alt alta hizalansın.
     📱 Tablo kendi kabında (overflow-x:auto) kayar; sayfa gövdesi asla kaymaz. */
  /* Üç alanlı varyant (Açılış / Süre / Açık Maliyeti). ⛔ Bunu satır içi style ile
     yazma — ortak `@media (max-width:380px){ .field-row4{repeat(2,1fr)} }` kuralı
     satır içi stilden daha az özgül olduğu için dar telefonda EZİLİYORDU. */
  .field-row4.row3{ grid-template-columns:2fr 1.2fr 1.6fr; }
  @media (max-width:380px){ .field-row4.row3{ grid-template-columns:repeat(2,1fr); gap:8px; } }
  #akisTablo{ width:100%; border-collapse:collapse; font-size:13px; min-width:640px; }
  #akisTablo th{ text-align:center; font-family:'Space Grotesk',sans-serif; font-weight:600;
    font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
    padding:10px 12px; border-bottom:1px solid var(--hairline); white-space:nowrap; }
  #akisTablo td{ padding:9px 12px; border-bottom:1px solid var(--hairline);
    font-family:'JetBrains Mono',monospace; font-weight:600; text-align:right; white-space:nowrap; }
  #akisTablo td:first-child{ text-align:center; color:var(--muted); font-weight:600; }
  #akisTablo tbody tr:last-child td{ border-bottom:none; }
  #akisTablo tr.eksi td{ background:rgba(224,90,90,0.07); }
  #akisTablo tr.eksi td.kapanis{ color:var(--coral,#E05A5A); }
  #akisTablo td.fin{ color:var(--brass); }
  /* Kalem satırları — girdi, katlanmaz (26.08 kalıcı kuralı) */
  .kalem{ display:grid; grid-template-columns:1fr 100px 130px 26px; gap:5px;
    align-items:center; margin-bottom:7px; }
  .kalem input{ width:100%; height:36px; background:var(--bg); border:1px solid var(--hairline);
    border-radius:8px; padding:0 8px; color:var(--text); font-family:'JetBrains Mono',monospace;
    font-weight:600; font-size:12px; outline:none; min-width:0; }
  .kalem input.ad{ font-family:'Inter',sans-serif; font-weight:500; }
  .kalem input.tarih{ font-size:11.5px; padding:0 4px; }
  .kalem input:focus{ border-color:var(--brass); box-shadow:0 0 0 3px rgba(198,161,91,0.12); }
  .kalem .sil{ background:none; border:none; color:var(--muted); font-size:16px; cursor:pointer;
    line-height:1; padding:0; }
  .kalem .sil:hover{ color:var(--coral,#E05A5A); }
  .kalem.gider input.ad{ border-left:3px solid rgba(224,90,90,.55); }
  .kalem.gelir input.ad{ border-left:3px solid rgba(63,182,138,.55); }
  .kalem-baslik{ display:grid; grid-template-columns:1fr 100px 130px 26px; gap:5px;
    font-size:9px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
    font-weight:600; margin-bottom:5px; }
  .kalem-baslik span:nth-child(2){ text-align:right; }
  .kalem-baslik span:nth-child(3), .kalem-baslik span:nth-child(4){ text-align:center; }
  .mini-btn{ flex:1; height:36px; background:var(--surface-2); border:1px solid var(--hairline);
    border-radius:8px; color:var(--text); font-family:'IBM Plex Mono',monospace; font-size:11.5px;
    font-weight:600; cursor:pointer; transition:border-color .15s ease; }
  .mini-btn:hover{ border-color:var(--brass); }
  @media (max-width:420px){
    .kalem, .kalem-baslik{ grid-template-columns:1fr 88px 118px 24px; gap:4px; }
  }
  /* 🔴 02.09.2026 CANLI ÖLÇÜM (335px iframe → 320px viewport): kalem ADI kutusu
     26px'e iniyordu — kalem adı okunamaz hâldeydi. 380px altında satır İKİ SATIRA
     bölünür: üstte ad (tam genişlik), altta tutar / başlangıç / bitiş / sil.
     Başlık şeridi de aynı ızgarayı kullanır ki sütunlar hizalı kalsın.
     ⛔ Ad kutusunu tekrar tek satıra sıkıştırma; ölçüldü, sığmıyor. */
  @media (max-width:380px){
    .kalem, .kalem-baslik{ grid-template-columns:1fr 118px 24px; row-gap:4px; }
    .kalem input.ad, .kalem-baslik span:first-child{ grid-column:1 / -1; }
    .kalem{ padding-bottom:8px; border-bottom:1px dashed var(--hairline); margin-bottom:9px; }
    .kalem-baslik span:nth-child(2){ text-align:left; }
  }

  /* ══════════════════════════════════════════════════════════════════════════
     02.09.2026 — TASARIM REFERANSI: FirmaYonetimi.html
     Kullanıcı: "şu tasarımı firmalarımdakini referans alsana" (10. kez).
     Yeni hesap sayfaları çek/nakit iskeletinden klonlandığı için ESKİ görünümü
     taşıyordu. Firmalarım'ın ölçüleri buraya alındı. ⛔ Bu bloğu silme.

     🎨 EN ÖNEMLİSİ: açık temada PİRİNÇ (brass) KULLANILMAZ — kullanıcı beğenmiyor.
        FirmaYonetimi.html'deki karar: mavi #2F7FD1. mmg-sayfa-standart.js açık temada
        --brass'ı #6B5424'e çektiği için !important ŞART.
     ══════════════════════════════════════════════════════════════════════════ */
  html.theme-light{ --brass:#2F7FD1 !important; --brass-dim:#7FB0E3 !important; }

  /* Firmalarım genişliği ve iç boşluğu (1440 değil 1180) */
  main, header.masthead, footer, #seoIlgiliAraclar, #mmgSSS{ max-width:1180px !important; }
  main{ padding:24px 20px 40px !important; }
  header.masthead{ padding:24px 20px 18px !important; }
  h1.title{ font-size:24px !important; letter-spacing:-0.01em; }
  .subtitle{ font-size:13.5px !important; line-height:1.5; }

  /* .card ölçüleri: yarıçap 14 · dolgu 14 · yumuşak gölge */
  .panel{ border-radius:14px !important; padding:14px !important;
          box-shadow:0 10px 30px rgba(0,0,0,0.18); }
  .panel-title{ font-size:16px !important; margin-bottom:4px !important; }
  .panel-desc{ font-size:12.5px !important; margin-bottom:10px !important; line-height:1.45 !important; }

  /* Etiketler: Firmalarım'da 11,5px, NORMAL yazım — mikro büyük harf değil */
  .field label, .field-row4 label, .field-row4.row3 label{
    font-size:11.5px !important; text-transform:none !important; letter-spacing:0 !important;
    font-weight:600; color:var(--muted); margin-bottom:4px !important; white-space:normal !important;
    line-height:1.25; }

  /* 🔑 Firmalarım'ın .fy-row deseni: auto-fit + minmax → kırılma noktası ELLE YAZILMAZ.
     Bu, benim elle ayarladığım 380/420px kurallarının yerine geçer ve dar ekranda
     kendiliğinden alt alta iner. ⛔ Buraya sabit sütun ölçüsü geri yazma. */
  .field-row4, .field-row4.row3{
    grid-template-columns:repeat(auto-fit, minmax(150px,1fr)) !important; gap:10px !important; }
  .field-row4 .input-wrap input{ height:38px !important; font-size:13px !important;
    border-radius:10px !important; padding:0 34px 0 11px !important; }
  .field-row4 .input-suffix{ right:11px !important; font-size:11.5px !important; }
  .input-wrap input{ height:38px; font-size:13px; border-radius:10px; }

  /* Kalem satırları — Firmalarım'ın liste satırı gibi yumuşak zeminli */
  .kalem input{ height:34px; border-radius:10px; }
  .kalem-baslik{ font-size:10px; }

  /* Düğmeler: Firmalarım'da .btn.ghost — nötr metin, mavi kenar (pirinç kahvesi değil) */
  .mini-btn{ height:34px; border-radius:10px; font-family:'Inter',sans-serif;
    font-size:12.5px; font-weight:600; }
  html.theme-light .mini-btn{ color:#1B2230; }
  html.theme-light .mini-btn:hover{ color:#2F7FD1; border-color:#2F7FD1; }

  /* Sonuç kartı ve tablo: aynı yarıçap ailesi */
  .result-hero{ border-radius:14px !important; padding:16px !important; }
  .rh-value{ font-size:clamp(24px,4.5vw,32px) !important; }
  .breakdown{ border-radius:14px !important; }
  #akisTablo th{ font-size:10.5px; }
  .flag{ border-radius:10px; font-size:11.5px; }

  @media (max-width:480px){
    main{ padding:16px 12px 30px !important; }
    header.masthead{ padding:16px 12px 14px !important; }
    .panel{ padding:12px !important; }
  }