body, p, select, input { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; font-weight: var(--font-regular); line-height: 20px; }

 :root {
  /* Color */
  --primary-color: #463a6d;
  --secondary-color: #616161;
  --border-color: #ddd;
  --background-light: #fdfdfd;
  --cottgroup-color: #eb1d25;
  --text-color-dark: #333;
  --highlight-color: #f9f9f9;
  --beyaz-color: #fff;
  --siyah-color: #000;
  --hata-arka: #FFF1F2;
  
   /* Font Size */
   --font-xs: 12px;
   --font-sm: 14px;
   --font-base: 16px;
   --font-lg: 18px;
   --font-xl: 22px;
 
   /* Font Weight */
   --font-light: 300;
   --font-regular: 400;
   --font-medium: 500;
   --font-semibold: 600;
   --font-bold: 700;
}

.issizlik-hesapla-wrapper { display: flex; gap: 40px; max-width: 1280px; margin: 0 auto; padding: 20px 0px; box-sizing: border-box; }
.issizlik-hesapla-container { flex: 2; margin-top: 0;}
.ek-bilgilendirme-container { flex: 1; background-color: var(--background-light); padding: 40px 20px 20px; border-radius: 4px; border: 1px solid var(--border-color); height: fit-content; position: sticky; background-image: url(https://payroll.informasoft.com/files/maas-hesaplama-bg.svg); background-position: top right; background-repeat: no-repeat; justify-items: center; }
.ek-bilgilendirme-container p {font-size: var(--font-sm); color: var(--text-color-dark); font-weight: var(--font-semibold); line-height: 1.6; margin-bottom: 15px; }
.ek-bilgilendirme-baslik { font-size: var(--font-xl); font-weight: var(--font-semibold); color: var(--primary-color); margin-bottom: 40px; }
button#yenidenhesaplama { padding: 15px; margin: 10px 0 0; }
.issizlik-hesapla-container { position: relative; max-width: 700px; width: 100%; margin: 0 auto; }
.issizlik-hesapla { background-color: var(--background-light); border-radius: 4px; border: 1px solid var(--border-color); padding: 40px 20px;}
.issizlik-hesapla form#maasForm { display: flex; flex-direction: column; width: 100%; justify-self: center; }
.issizlik-hesapla label { color: var(--secondary-color); font-size: var(--font-base); font-weight: var(--font-regular); flex-grow: 0.7;}
.issizlik-hesapla select, .issizlik-hesapla input[type="text"] { padding: 10px; border: 1px solid var(--border-color); border-radius: 4px; width: 100%; }
.issizlik-hesapla button { padding: 10px; background-color: var(--primary-color); color: var(--beyaz-color); border: none; border-radius: 4px; cursor: pointer; font-size: var(--font-sm); width: 30%; display: inline-block; text-align: center; font-weight: var(--font-medium);}
.button-container { display: flex; justify-content: end; width: 100%; margin-top: 15px; gap: 30px; }
.issizlik-hesapla .sifirla { background-color: var(--highlight-color); color: var(--secondary-color); width: 15%; border: 0.1px solid var(--border-color); }
.issizlik-hesapla .sifirla:hover { background-color: var(--background-light); }
.issizlik-hesapla button:hover { background-color: var(--cottgroup-color); }
.issizlik-hesapla .sonuc .result-row { display: flex; justify-content: space-between; margin-bottom: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border-color); }
.issizlik-hesapla .sonuc .result-row.last { border-bottom: none; }
.issizlik-hesapla .sonuc .result-row .label { font-weight: var(--font-regular); color: var(--secondary-color); width: 100%; background: none; text-align: left; font-size: var(--font-base); max-width: 500px; white-space: normal; line-height: 1.6;}
.issizlik-hesapla .sonuc .result-row .value { color: var(--text-color-dark); width: 35%; text-align: right; font-size: var(--font-base); }
.issizlik-hesapla .brut-maas-issizlik-hesapla { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; }
.issizlik-hesapla .brut-maas-issizlik-hesapla input { flex-grow: 1; max-width: 360px; height: 20px; font-size: var(--font-sm); }
.issizlik-hesapla .brut-maas-issizlik-hesapla p { color: var(--secondary-color); font-size: var(--font-sm); margin: 0 0 15px 0px; }
.issizlik-hesapla .ornek-tutar { display: inline-block; padding: 5px 10px; background-color: var(--highlight-color); border: 0.1px solid var(--border-color); border-radius: 4px; font-size: var(--font-xs); color: var(--secondary-color);}
.issizlik-hesapla .hatamesaji { display: none; color: var(--cottgroup-color); text-align: center; background-color: var(--hata-arka); padding: 10px; border-radius: 4px; font-weight: var(--font-medium); justify-self: center; margin-top: 20px; font-size: var(--font-sm); }
.issizlik-hesapla .hesaplama-alani { display: flex; align-items: center; margin-bottom: 25px; }
.issizlik-hesapla .hesaplama-alani label { margin-right: 20px; width: 70%; color: var(--secondary-color); }
.issizlik-hesapla .hesaplama-alani select { flex-grow: 1; padding: 6px; border: 1px solid var(--border-color); border-radius: 4px; font-size: var(--font-sm); height: 40px; line-height: 25px;}
.issizlik-hesapla .hesaplama-alani .select-issizlik-hesapla { margin-right: 10px; }
.issizlik-hesapla .brut-label { padding: 10px; width: 100%; max-width: 400px; height: 40px; border: 1px solid var(--border-color); border-radius: 4px; font-size: var(--font-base); }
.issizlik-hesapla .brut-maas-issizlik-hesapla label { min-width: 140px; }
.issizlik-hesapla .brut-maas-issizlik-hesapla input {height: 40px !important; margin: 0px !important;}
.issizlik-hesapla #sonuc {z-index: 1 !important;}
.issizlik-hesap .uk-panel-box {background-color: #fff;}
.issizlik-hesap .bg-page {background-color: #fff;}
.issizlik-hesap article.uk-article {display: none;}
.issizlik-hesap .uk-banner-topc {margin-bottom: 100px;}
.issizlik-hesapla .page-header h1 {font-weight: 500;}
.issizlik-hesap .uyari-bilgilendirme ul {margin-bottom: 8px !important;}
.hesaplamasonucu-baslik, .ek-bilgi-baslik {margin-bottom: 20px; font-weight: var(--font-semibold); font-size: var(--font-base); color: var(--primary-color); padding: 10px; background-color: var(--highlight-color); border-radius: 4px; text-align: center; border: 1px solid var(--border-color);}
.ek-bilgi-baslik { margin-top: 20px; }
.brut-maas-baslik { display: flex; align-items: center; justify-content: center; color: var(--secondary-color); margin-bottom: 25px; position: relative; font-size: var(--font-base); font-weight: var(--font-regular); }
.uyari-bilgilendirme li { font-size: var(--font-sm); padding-bottom: 10px; line-height: 22px; color: var(--text-color-dark);}
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
.damga-oran { display: none; position: absolute; background-color: var(--highlight-color); padding: 2px 6px; border: 0.1px solid var(--border-color); font-size: var(--font-xs); white-space: nowrap; top: 6px; margin-left: 20px; z-index: 100; border-radius: 4px; }
.info-icon { cursor: pointer; display: inline-block; position: relative; font-family: 'FontAwesome';}
.info-icon-2 { display: inline-block; position: relative; font-family: 'FontAwesome';}
span.ek-yazi { padding: 0px 7px; border-radius: 20px; border: 0.11px solid var(--border-color); font-size: var(--font-sm); background-color: var(--highlight-color); color: var(--secondary-color); }
span.ek-yazi-2 { padding: 0px 7px; border-radius: 20px; border: 0.11px solid var(--border-color); background-color: #f3f0fd; color: #463a6d; display: inline-block; height: 35px; line-height: 0px; width: 35px; text-align-last: center; margin-right: 10px;}
li.bilgi-yil {display: inline-flex ; align-items: center; margin-top: 25px;}
li.bilgi-yil span {align-content: center;}
.ek-yazi:hover .damga-oran { display: inline-block; }
.result-row { position: relative; }
.uyari-bilgilendirme ul {padding-left: 0; list-style: disc; margin-left: 20px;}
.uyari-bilgilendirme-2 ul { list-style-type: none; padding-left: 0;}
.brut-input-wrapper { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 400px; gap: 8px; flex-wrap: wrap; box-sizing: border-box; }
span.tl-ikon { color: var(--secondary-color); font-size: var(--font-sm); flex-grow: 0.2; padding: 0px 10px;}
.ornek-tutar { background-color: var(--highlight-color); border: 0.1px solid var(--border-color); border-radius: 4px; padding: 4px 8px; font-size: var(--font-xs); color: var(--secondary-color); flex-shrink: 0;}
#sonuc { display: none; border-radius: 4px; width: 100%; box-sizing: border-box; position: absolute; top: 0px; z-index: 1000; justify-self: anchor-center;     background-color: var(--background-light); border: 1px solid var(--border-color); padding: 20px; min-height: -webkit-fill-available;}
.yenidenhesaplama { position: absolute; top: 10px; right: 10px; font-size: 24px; color: var(--cottgroup-color); cursor: pointer; z-index: 1100; }
.yenidenhesaplama:hover { color: var(--cottgroup-color); }

/* Mobil */
  @media (max-width: 768px) {
    .issizlik-hesapla-wrapper { flex-direction: column; gap: 60px; }
    .issizlik-hesapla-container, .ek-bilgilendirme-container { flex: none; margin: 0; }
    .issizlik-hesapla button, .issizlik-hesapla .sifirla { width: 100%; font-size: var(--font-base); }
    .brut-maas-issizlik-hesapla input { width: 100%; margin-bottom: 15px; }
    .brut-maas-issizlik-hesapla label { text-align: left; width: 100%; margin-bottom: 5px; }
    .brut-maas-issizlik-hesapla { display: flex; flex-wrap: wrap; justify-content: space-between; }
    .ek-bilgilendirme-container { padding: 20px 20px; border-radius: 0; }
    .ek-bilgilendirme-baslik { font-size: var(--font-lg); margin-bottom: 20px; }
    .button-container { flex-direction: column; gap: 10px; align-items: center; }
    .hatamesaji { width: 100%; text-align: center; }
    .brut-label, .tl-ikon, .ornek-tutar { display: flex; align-items: center; justify-content: center; }
    .ornek-tutar { font-weight: var(--font-semibold); margin-left: 0px !important; }
    .hesaplama-alani { flex-direction: column; align-items: flex-start; }
    .issizlik-hesapla .brut-maas-issizlik-hesapla label { text-align: left; width: 100%; margin-bottom: 5px;}
    .issizlik-hesapla .brut-maas-issizlik-hesapla input { width: 80%; max-width: 100%; margin-bottom: 0px; flex: 5;}
    .issizlik-hesapla .sonuc .result-row .label { width: 80%;}
    .issizlik-hesapla .brut-maas-issizlik-hesapla p { margin-bottom: 15px;}
    .button-container { flex-direction: column; align-items: center; gap: 10px;}
    .button-container-yeniden { flex-direction: column; align-items: center; gap: 10px;} 
    .issizlik-hesapla button, .issizlik-hesapla .sifirla { width: 100%; font-size: var(--font-base);}
    .brut-input-wrapper { width: 100%; max-width: 100%; gap: 10px; flex-wrap: wrap;}
    span.tl-ikon { font-size: var(--font-sm); flex: 0.5;}
    .brut-input-wrapper .ornek-tutar { font-size: var(--font-xs); padding: 4px 8px; background-color: var(--highlight-color); border: 0.1px solid var(--border-color); border-radius: 4px; margin-top: 5px; margin-left: 0; }
    .brut-maas-baslik::before, .brut-maas-baslik::after { display: none; }
    .issizlik-hesapla .hesaplama-alani label { width: 100%; margin-right: 0px; margin-bottom: 10px;
    }
  }

  @media (min-width: 1221px) {
  .brut-maas-baslik::before, .brut-maas-baslik::after { content: ''; position: absolute; height: 1px; background-color: var(--border-color); width: 15%; }
  .brut-maas-baslik::before { left: 0; }
  .brut-maas-baslik::after { right: 0; }
  }