/* KİRA TAKİP — arayüz stili
   Kağıt-mürekkep teması: sıcak kırık beyaz zemin, ince sıcak çizgiler,
   başlıklarda serif. Renkler doygunluğu düşürülmüş dört ayrı tonda:
   lacivert (işlem), yeşil (ödendi), kiremit (gecikme), okra (uyarı). */
:root{
  /* zemin ve çizgi */
  --kagit:#f4f0e7;          /* gövde zemini — sıcak kırık beyaz */
  --kart:#fffdf8;           /* kutu/tablo zemini */
  --kart2:#faf6ee;          /* hafif vurgulu satır */
  --cizgi:#e0d8c8;          /* sıcak ince çizgi */
  --cizgi2:#cfc4ae;
  /* mürekkep */
  --murekkep:#2c2823;       /* ana metin */
  --soluk:#6f665a;          /* ikincil metin */
  /* yan menü */
  --yan:#2f2c27;
  --yan2:#3d3931;
  --yan-yazi:#ded6c6;
  /* dört anlam rengi */
  --lacivert:#3f5a78;  --lacivert-a:#e7edf4;   /* işlem / bağlantı */
  --yesil:#4a7a52;     --yesil-a:#e8f0e6;      /* ödendi */
  --kirmizi:#a8483a;   --kirmizi-a:#f6e7e3;    /* gecikme */
  --turuncu:#a87a2c;   --turuncu-a:#f6efdd;    /* uyarı */
  --gri:#6f665a;
  /* eski isimler geriye dönük uyumluluk için */
  --mavi:#3f5a78; --lacivert2:#3d3931; --acik:#f4f0e7;
  --yesil-a2:#e8f0e6;
  --r:5px;                  /* köşe yarıçapı — küçük, kağıt gibi */
}
*{box-sizing:border-box; margin:0; padding:0}

body{
  font-family:"Segoe UI", -apple-system, "Helvetica Neue", system-ui, sans-serif;
  background-color:var(--kagit);
  /* çok hafif kağıt dokusu */
  background-image:
    repeating-linear-gradient(0deg, rgba(120,100,70,.020) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(120,100,70,.014) 0 1px, transparent 1px 4px);
  color:var(--murekkep); display:flex; min-height:100vh; font-size:15px;
  -webkit-font-smoothing:antialiased;
}

/* --- ikonlar --------------------------------------------------------- */
.ikon{width:17px; height:17px; flex:none; stroke:currentColor; fill:none;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  vertical-align:-3px}
.ikon-b{width:20px; height:20px}
.ikon-k{width:14px; height:14px; vertical-align:-2px}
.nokta{display:inline-block; width:9px; height:9px; border-radius:50%;
  flex:none; vertical-align:1px}
.n-kirmizi{background:var(--kirmizi)} .n-yesil{background:var(--yesil)}
.n-mavi{background:var(--lacivert)} .n-turuncu{background:var(--turuncu)}

/* --- yan menü -------------------------------------------------------- */
.yan{width:224px; background:var(--yan); color:var(--yan-yazi);
  padding:20px 12px 16px; position:fixed; top:0; bottom:0;
  display:flex; flex-direction:column; border-right:1px solid #221f1b}
.logo{font-family:Georgia,"Times New Roman",serif; font-size:19px; font-weight:600;
  color:#f2ece0; padding:2px 10px 20px; letter-spacing:.3px;
  display:flex; align-items:center; gap:9px}
.logo .ikon{width:21px; height:21px; color:var(--turuncu)}
.yan nav{display:flex; flex-direction:column; gap:1px}
.yan nav a{color:var(--yan-yazi); text-decoration:none; padding:9px 11px;
  border-radius:var(--r); font-size:14.5px; display:flex; align-items:center;
  gap:10px; border-left:3px solid transparent}
.yan nav a:hover{background:var(--yan2); color:#fff}
.yan nav a.sec{background:var(--yan2); color:#fff; font-weight:600;
  border-left-color:var(--turuncu)}
.yan-alt{margin-top:auto; display:flex; flex-direction:column; gap:7px;
  padding-top:14px; border-top:1px solid #423d35}
.yan-kimlik{font-size:12.5px; color:#a49a89; padding:0 4px 8px; line-height:1.5}
.yan-kimlik b{color:#e6dfd1; font-weight:600}
.yan-kimlik a{color:#a49a89}

main{margin-left:224px; padding:26px 32px 60px; flex:1; max-width:1400px}

/* --- başlıklar ------------------------------------------------------- */
h1,h2,h3{font-family:Georgia,"Times New Roman",serif; font-weight:600;
  letter-spacing:.1px}
h1{font-size:23px; margin-bottom:16px; display:flex; align-items:center; gap:9px}
h2{font-size:17.5px; margin:22px 0 10px; display:flex; align-items:center; gap:8px}
h1 small, h2 small{color:var(--soluk); font-weight:400; font-size:.7em;
  font-family:inherit}

/* --- kutular ve tablolar --------------------------------------------- */
.kutu{background:var(--kart); border:1px solid var(--cizgi); border-radius:var(--r);
  padding:18px 20px; margin-bottom:18px; box-shadow:0 1px 0 rgba(90,75,50,.05)}
table{width:100%; border-collapse:collapse; background:var(--kart)}
th{font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--soluk);
  text-align:left; padding:9px 10px; border-bottom:1.5px solid var(--cizgi2);
  font-weight:700}
td{padding:9px 10px; border-bottom:1px solid var(--cizgi); vertical-align:middle}
tr:hover td{background:var(--kart2)}
td.num, th.num{text-align:right; font-variant-numeric:tabular-nums}

.etiket{display:inline-block; padding:2px 10px; border-radius:3px; font-size:12.5px;
  font-weight:600; white-space:nowrap; border:1px solid transparent}
.e-yesil{background:var(--yesil-a); color:var(--yesil); border-color:#cddfc9}
.e-kirmizi{background:var(--kirmizi-a); color:var(--kirmizi); border-color:#ebcdc6}
.e-turuncu{background:var(--turuncu-a); color:var(--turuncu); border-color:#e6d9b6}
.e-gri{background:#eee9dd; color:var(--gri); border-color:var(--cizgi)}
.e-mavi{background:var(--lacivert-a); color:var(--lacivert); border-color:#cfdae7}

/* --- düğmeler -------------------------------------------------------- */
.btn{display:inline-flex; align-items:center; gap:7px; background:var(--lacivert);
  color:#fff; border:1px solid rgba(0,0,0,.12); padding:8px 15px;
  border-radius:var(--r); font-size:14px; cursor:pointer; text-decoration:none;
  font-weight:600; font-family:inherit; line-height:1.35}
.btn:hover{filter:brightness(1.1)}
.btn:active{transform:translateY(1px)}
.btn-kucuk{padding:5px 10px; font-size:13px}
.btn-gri{background:#6b6355}
.btn-kirmizi{background:var(--kirmizi)}
.btn-yesil{background:var(--yesil)}
.btn-beyaz{background:var(--kart); color:var(--lacivert); border:1px solid var(--cizgi2)}
.btn-beyaz:hover{background:#fff}
.wa{background:#3c8f63} .mail{background:#4f6a8c} .sms{background:#7a6690}

/* --- form ------------------------------------------------------------ */
form.satir{display:flex; gap:10px; flex-wrap:wrap; align-items:end}
label{display:block; font-size:12px; color:var(--soluk); font-weight:700;
  margin-bottom:4px; text-transform:uppercase; letter-spacing:.4px}
input, select, textarea{border:1px solid var(--cizgi2); border-radius:var(--r);
  padding:8px 10px; font-size:14px; font-family:inherit; background:#fffefb;
  width:100%; color:var(--murekkep)}
input:focus, select:focus, textarea:focus{outline:2px solid #cfdae7;
  border-color:var(--lacivert)}
.alan{margin-bottom:12px}

.izgara{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px}
.izgara-2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.kart-sayi{background:var(--kart); border:1px solid var(--cizgi);
  border-radius:var(--r); padding:15px 17px}
.kart-sayi .deger{font-size:25px; font-weight:700; margin-top:4px;
  font-family:Georgia,serif; font-variant-numeric:tabular-nums}
.kart-sayi .alt{font-size:12.5px; color:var(--soluk); margin-top:2px}
.k-yesil{border-left:4px solid var(--yesil)}
.k-kirmizi{border-left:4px solid var(--kirmizi)}
.k-turuncu{border-left:4px solid var(--turuncu)}
.k-mavi{border-left:4px solid var(--lacivert)}

.uyari{padding:11px 15px; border-radius:var(--r); margin-bottom:14px;
  font-weight:600; border:1px solid transparent}
.uyari-ok{background:var(--yesil-a); color:var(--yesil); border-color:#cddfc9}
.uyari-hata{background:var(--kirmizi-a); color:var(--kirmizi); border-color:#ebcdc6}

.ust-satir{display:flex; justify-content:space-between; align-items:center;
  margin-bottom:16px; gap:12px; flex-wrap:wrap}
a.baglanti{color:var(--lacivert); text-decoration:none; font-weight:600}
a.baglanti:hover{text-decoration:underline}
.bos{color:var(--soluk); padding:14px 4px; font-style:italic}
.mini{font-size:12.5px; color:var(--soluk); line-height:1.6}

/* --- web sürümü giriş / sözleşme sayfaları ---------------------------- */
body.tek{display:block}
body.tek main{margin:0; max-width:none; padding:0}
.serit{background:var(--yan); color:#f2ece0; padding:13px 26px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap}
.serit .logo{padding:0; font-size:18px}
.serit a{color:#ded6c6; text-decoration:none; font-size:14px; margin-left:18px}
.serit a:hover{color:#fff; text-decoration:underline}
.orta{max-width:430px; margin:52px auto; padding:0 18px}
.genis{max-width:940px; margin:34px auto 70px; padding:0 20px}
.giris-kutu{background:var(--kart); border:1px solid var(--cizgi);
  border-radius:var(--r); padding:28px 30px; box-shadow:0 2px 0 rgba(90,75,50,.06)}
.giris-kutu h1{font-size:22px; margin-bottom:6px}
.alt-not{text-align:center; margin-top:18px; font-size:13.5px; color:var(--soluk)}
.dip{border-top:1px solid var(--cizgi); margin-top:44px; padding:22px 26px;
  color:var(--soluk); font-size:13px; text-align:center; line-height:1.9}
.dip a{color:var(--soluk)}
.ozellik{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:14px; margin:18px 0}
.ozellik div{background:var(--kart); border:1px solid var(--cizgi);
  border-radius:var(--r); padding:15px 17px}
.ozellik b{display:flex; align-items:center; gap:8px; margin-bottom:5px;
  font-family:Georgia,serif; font-size:15.5px}
.ozellik b .ikon{color:var(--lacivert)}
.hukuk{background:var(--kart); border:1px solid var(--cizgi);
  border-radius:var(--r); padding:24px 28px; margin-bottom:20px; line-height:1.75}
.hukuk h2{margin-top:0} .hukuk h3{font-size:15px; margin:18px 0 6px}
.hukuk p{margin-bottom:9px} .hukuk ol,.hukuk ul{margin:0 0 10px 22px}
.hukuk li{margin-bottom:5px}

@media print{.yan{display:none} main{margin:0} body{background:#fff}}
@media (max-width:820px){
  .yan{position:static; width:100%; height:auto; flex-direction:column}
  body{flex-direction:column}
  main{margin-left:0; padding:18px 14px 50px}
  .izgara-2{grid-template-columns:1fr}
}