/* =========================================
   1. GENEL SONUÇ ALANLARI VE TABLOLAR
   ========================================= */
.result-box{
  margin-top:14px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(0,0,0,0.12);
  display:none;
  flex:1;
  min-height:0;
  overflow:auto;
}
.result-box.visible{ display:block; }

.result-actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  margin:6px 0 10px;
}

.mini-btn{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:#fff;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  font-size:13px;
}
.mini-btn:disabled{ opacity:.6; cursor:not-allowed; }

.table-wrap{
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(0,0,0,.18);
  max-height:clamp(420px, 56vh, 640px);
  overflow:auto;
}

table.payroll{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:1150px;
  font-size:13px;
}

table.payroll thead th{
  position:sticky; top:0; z-index:2;
  background:rgba(0,0,0,.55);
  color:rgba(255,255,255,.92);
  text-align:right;
  padding:10px;
  border-bottom:1px solid rgba(255,255,255,.12);
  white-space:nowrap;
}
table.payroll thead th:first-child{ text-align:left; left:0; z-index:3; }

table.payroll tbody td{
  padding:8px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.92);
  text-align:right;
  white-space:nowrap;
}
table.payroll tbody td:first-child{
  text-align:left;
  position:sticky; left:0;
  background:rgba(0,0,0,.38);
  z-index:1;
  font-weight:600;
}
table.payroll tbody tr:hover td{ background:rgba(255,255,255,.06); }

table.payroll tfoot td{
  padding:10px;
  border-top:2px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.50);
  font-weight:700;
  color:rgba(255,255,255,.96);
  text-align:right;
  white-space:nowrap;
}
table.payroll tfoot td:first-child{
  text-align:left;
  position:sticky; left:0; z-index:2;
}

.kv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px; }
.kv{
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:10px 12px;
  background:rgba(0,0,0,.18);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.kv span{ color:rgba(255,255,255,.72); font-size:12px; }
.kv b{ color:rgba(255,255,255,.95); font-size:14px; text-align:right; }

.json-dump{
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:12px;
  overflow:auto;
  max-height:52vh;
  color:rgba(255,255,255,.92);
  font-size:12px;
  line-height:1.45;
  white-space:pre-wrap;
  word-break:break-word;
}

.kidem-row{ display:flex; justify-content:space-between; color:rgba(255,255,255,.75); font-size:13px; margin-bottom:2px; }
.kidem-total{
  display:flex; justify-content:space-between;
  color:#4ade80; font-weight:800; font-size:16px;
  margin-top:5px;
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:5px;
}
.calc-note{ font-size:11px; color:rgba(255,255,255,0.5); margin-top:4px; font-style:italic; }

#emekliResult ul{ list-style:none; padding:0; margin:5px 0 0 0; font-size:13px; color:rgba(255,255,255,0.85); }
#emekliResult li{ margin-bottom:4px; padding-left:14px; position:relative; }
#emekliResult li::before{ content:"•"; position:absolute; left:0; color:rgba(255,255,255,0.4); }

.res-ok{ color:#4ade80 !important; font-weight:700; }
.res-fail{ color:#f87171 !important; font-weight:700; }
.res-warn{ color:#facc15 !important; font-weight:700; }


/* =========================================
   2. YATAY TICKER (KUR ŞERİDİ)
   ========================================= */
.ticker-wrap{ max-width:1200px; margin:20px auto 0; padding:0 16px; position:relative; }
.ticker-viewport{ overflow:hidden; margin:0 12px 12px 12px; }
.ticker-track{ display:flex; width:max-content; will-change:transform; animation:ticker-scroll 40s linear infinite; }
.ticker-wrap:hover .ticker-track{ animation-play-state:paused; }
.ticker-grid{ display:flex !important; gap:12px; padding:10px 0; }

.ticker-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(255,255,255,.06);
  min-width:140px;
  flex-shrink:0;
}
.mw-ic{ width:20px; height:20px; opacity:.9; color:#4ade80; }
.mw-code{ font-size:11px; opacity:.75; text-transform:uppercase; }
.mw-val{ font-size:15px; font-weight:700; letter-spacing:.3px; }

@keyframes ticker-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}


/* =========================================
   3. SAYFA DÜZENİ VE KARTLAR
   ========================================= */
.calc-page{ padding:64px 20px; }
.calc-wrap{ max-width:1100px; margin:0 auto; }
.calc-head{ text-align:center; margin-bottom:44px; }
.calc-head h1{ font-size:36px; font-weight:700; margin-bottom:8px; }
.calc-head p{ font-size:15px; opacity:.88; }

.calc-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:34px; align-items:stretch; }

.calc-card{
  appearance:none; -webkit-appearance:none;
  border:1px solid rgba(255,255,255,0.16);
  border-radius:22px;
  background:rgba(255,255,255,0.14);
  backdrop-filter:blur(var(--panel-blur));
  -webkit-backdrop-filter:blur(var(--panel-blur));
  box-shadow:0 18px 40px rgba(0,0,0,0.22), 0 2px 0 rgba(255,255,255,0.05) inset;
  color:var(--text-light);
  width:100%;
  min-height:210px;
  padding:34px 28px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.calc-card:hover{
  transform:translateY(-8px);
  background:rgba(255,255,255,0.18);
  box-shadow:0 26px 60px rgba(0,0,0,0.28), 0 2px 0 rgba(255,255,255,0.06) inset;
}
.calc-card:active{ transform:translateY(-3px); }

.calc-ic{
  width:54px; height:54px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.14);
  margin-bottom:16px;
}
.calc-ic i{ width:24px; height:24px; }
.calc-card h2{ font-size:30px; font-weight:700; margin-bottom:10px; letter-spacing:.2px; }
.calc-card p{ font-size:14px; opacity:.90; line-height:1.55; max-width:320px; }


/* =========================================
   4. MODAL VE FORM YAPISI
   ========================================= */
.modal-wrapper{
  position:fixed; inset:0;
  background-color:rgba(0,0,0,0.55);
  display:flex; justify-content:center; align-items:center;
  z-index:10000;
  opacity:0; visibility:hidden;
  transition:opacity .2s ease, visibility .2s ease;
  padding:18px;
}
.modal-wrapper.visible{ opacity:1; visibility:visible; }

.modal-content{
  width:100%;
  max-width:720px;
  max-height:min(82vh, 720px);
  overflow:hidden;
  display:flex;
  flex-direction:column;

  background-color:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.16);
  padding:22px;
  border-radius:22px;
  box-shadow:0 26px 70px rgba(0,0,0,0.45);
  backdrop-filter:blur(var(--panel-blur));
  -webkit-backdrop-filter:blur(var(--panel-blur));
  position:relative;
  color:var(--text-light);
}

.modal-title{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.modal-title i{ width:22px; height:22px; }
.modal-sub{ font-size:14px; opacity:.88; margin-bottom:14px; }

.close-btn{
  position:absolute; top:12px; right:16px;
  font-size:30px; font-weight:300;
  color:rgba(255,255,255,0.75);
  cursor:pointer;
  transition:color .15s ease;
  line-height:1;
}
.close-btn:hover{ color:var(--error-red); }

.calc-form{ display:flex; flex-direction:column; min-height:0; }
.calc-form input, .calc-form select, .form-group{ margin-bottom:0; }

/* --- SON EKLENEN KALSIN: Label + grid sıkılaştırma (GENEL) --- */
.form-group label{
  font-size:11px !important;
  font-weight:600 !important;
  color:rgba(255,255,255,0.65) !important;
  margin-bottom:4px !important;
  letter-spacing:0.3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Genel Form Grid (2 kolon) */
.form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  row-gap:8px !important;
  column-gap:12px !important;
}

/* Gelir Vergisi Sekmeleri */
.gv-tabs{
  display:flex;
  gap:10px;
  margin-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,0.1);
  padding-bottom:10px;
}
.gv-tab{
  flex:1;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.6);
  padding:10px;
  border-radius:8px;
  cursor:pointer;
  font-size:13px;
  transition:all .2s;
}
.gv-tab.active{
  background:#4ade80;
  color:#000;
  font-weight:bold;
  border-color:#4ade80;
}
.gv-content{ display:none; animation:fadeIn .3s ease; }
.gv-content.active{ display:block; }
.gv-note{ font-size:11px; color:rgba(255,255,255,0.4); margin-top:5px; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(5px);} to{opacity:1; transform:translateY(0);} }

/* Brütten Nete / Netten Brüte kompakt grid */
#m_brutnet .form-grid,
#m_netbrut .form-grid{
  grid-template-columns:1.2fr 0.8fr 1.5fr;
  gap:10px;
  align-items:end;
}
#m_brutnet .form-group, #m_netbrut .form-group{ margin-bottom:0; }
#m_brutnet .form-group:nth-child(1), #m_netbrut .form-group:nth-child(1){ grid-column:1; }
#m_brutnet .form-group:nth-child(2), #m_netbrut .form-group:nth-child(2){ grid-column:2; }
#m_brutnet .form-group:nth-child(3), #m_netbrut .form-group:nth-child(3){ grid-column:3; }
#m_brutnet .form-group:nth-child(4), #m_netbrut .form-group:nth-child(4){
  grid-column:1 / -1;
  margin-top:2px;
}

/* Preview Kutusu (Sağ Üst) */
#m_brutnet .total-preview-box,
#m_netbrut .total-preview-box{
  position:absolute;
  top:20px;
  right:50px;
  background:rgba(0,0,0,0.25);
  padding:4px 12px;
  border-radius:8px;
  border:1px solid rgba(74,222,128,0.15);
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  width:auto !important;
  margin:0 !important;
  grid-column:auto !important;
  z-index:5;
}
#m_brutnet .total-preview-box label,
#m_netbrut .total-preview-box label{
  font-size:9px !important;
  margin-bottom:0 !important;
  text-align:right;
}
#m_brutnet .total-preview-box .preview-value,
#m_netbrut .total-preview-box .preview-value{
  font-size:15px;
  font-weight:bold;
  background:none;
  border:none;
  padding:0;
  text-align:right;
  color:#4ade80;
  margin-top:0;
}

/* Hesapla butonu */
.form-submit-button{
  margin-top:15px !important;
  padding:10px !important;
}

/* Yasal Bilgilendirme */
.legal-section{
  margin-top:30px;
  padding:24px 16px;
  border-top:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.22);
}
.legal-container{
  max-width:980px;
  margin:0 auto;
  font-size:12.5px;
  line-height:1.6;
  color:rgba(255,255,255,0.72);
}
.legal-container h3{ font-size:14px; margin-bottom:10px; color:rgba(255,255,255,0.9); }
.legal-container p{ margin-bottom:10px; }


/* =========================================
   5. GELİR VERGİSİ - ÜCRET SEKME FIX
   (2 input yan yana + label biraz daha iyi)
   ========================================= */
#tab_ucret .form-grid{
  grid-template-columns:1fr 1fr;
  gap:12px;
}
#tab_ucret .form-group{
  grid-column:auto !important; /* span 2 yazdıysan override eder */
}
#tab_ucret .form-group label{
  font-size:11px !important; /* genel label ile uyumlu */
  line-height:1.2;
  letter-spacing:.2px;
}
#tab_ucret .form-group input{
  padding:10px 12px;
}
#tab_ucret .gv-note{
  font-size:11px;
  line-height:1.3;
  opacity:.75;
}


/* =========================================
   6. RESPONSIVE (MOBİL)
   ========================================= */
@media (max-width:1024px){
  .calc-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width:680px){
  .calc-page{ padding:46px 14px; }
  .calc-grid{ grid-template-columns:1fr; gap:18px; }
  .calc-card{ min-height:190px; padding:28px 18px; }
  .calc-card h2{ font-size:26px; }

  .form-grid{ grid-template-columns:1fr; row-gap:8px !important; }

  .modal-wrapper{ align-items:flex-end; padding:0; }
  .modal-content{
    max-width:100%;
    max-height:88vh;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    border-top-left-radius:22px;
    border-top-right-radius:22px;
    padding-bottom:calc(22px + env(safe-area-inset-bottom));
  }
  .table-wrap{ max-height:55vh; }

  /* Mobilde kompakt 3 kolon bozulsun */
  #m_brutnet .form-grid, #m_netbrut .form-grid{ grid-template-columns:1fr 1fr; }
  #m_brutnet .form-group:nth-child(1), #m_netbrut .form-group:nth-child(1){ grid-column:1 / -1; }
  #m_brutnet .form-group:nth-child(2), #m_netbrut .form-group:nth-child(2){ grid-column:1; }
  #m_brutnet .form-group:nth-child(3), #m_netbrut .form-group:nth-child(3){ grid-column:2; }

  #m_brutnet .total-preview-box, #m_netbrut .total-preview-box{
    position:relative;
    top:auto; right:auto;
    grid-column:1 / -1 !important;
    align-items:center;
    margin-top:10px !important;
    width:100% !important;
    background:rgba(255,255,255,0.05);
  }
  #m_brutnet .total-preview-box .preview-value,
  #m_netbrut .total-preview-box .preview-value{ text-align:center; }
}