/* ============================================================
   AFATECH Randevu — görsel kimlik
   Resmî marka paleti (afatech-logo kiti):
   Mürekkep Lacivert #122A46 · Mürekkep Koyu #0D2038
   Defter Mavisi #1B3B63 · Pirinç #C08A0B · Parlak Pirinç #E3A912
   İmza: "by Ali Furkan Ateş" — Segoe Script, A·F·A pirinç
   ============================================================ */
:root {
  --murekkep: #122A46;
  --murekkep-koyu: #0D2038;
  --defter: #1B3B63;
  --pirinc: #C08A0B;
  --pirinc-parlak: #E3A912;
  --zemin: #F4F6F9;
  --kart: #FFFFFF;
  --cizgi: #DFE5EE;
  --metin: #1E2B3E;
  --soluk: #5A6B80;
  --iyi: #1F8A4C;
  --iyi-zemin: #EAF7EF;
  --tehlike: #B42318;
  --tehlike-zemin: #FEF1F0;
  --uyari-zemin: #FBF3DF;
  --radius: 10px;
  --golge: 0 1px 2px rgba(13, 32, 56, .06), 0 4px 14px rgba(13, 32, 56, .05);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
h1, h2, h3 { line-height: 1.25; margin: 0 0 8px; }
a { color: var(--murekkep); }
:focus-visible { outline: 3px solid rgba(227, 169, 18, .55); outline-offset: 2px; border-radius: 4px; }

/* ---------- marka ---------- */
.marka { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.marka-blok { display: flex; flex-direction: column; line-height: 1.15; }
.marka-yazi { font-size: 16px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.marka-yazi b { color: var(--pirinc-parlak); font-weight: 650; }
/* Orijinal imza fontu: Windows'ta Segoe Script (sitedekiyle birebir),
   diğer cihazlarda sunucudan yüklenen Caveat (SIL OFL lisanslı) */
@font-face {
  font-family: "Caveat";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/caveat-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Caveat";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/caveat-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0;
}
.imza {
  font-family: "Segoe Script", "Caveat", "Bradley Hand", cursive;
  font-size: 12.5px; color: rgba(255, 255, 255, .75); white-space: nowrap;
}
.imza b { color: var(--pirinc-parlak); font-weight: inherit; }
.imza-buyuk { font-size: 16px; }
.imza-koyu { color: var(--murekkep); }
.imza-koyu b { color: var(--pirinc); }

/* ---------- kabuk: yan menü + içerik (muhasebe programı deseni) ---------- */
.kabuk { display: flex; min-height: 100vh; }
.icerik-sutun { flex: 1; min-width: 0; }
.yanbar {
  width: 236px; flex-shrink: 0;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: linear-gradient(180deg, var(--murekkep) 0%, var(--murekkep-koyu) 100%);
  color: #fff; display: flex; flex-direction: column;
  padding: 16px 12px 14px;
}
.yanbar-marka { margin: 0 6px 16px; }
.yanbar-menu { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.yanbar-menu .menu-grup {
  margin: 14px 10px 4px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .42);
}
.yanbar-menu a {
  display: flex; align-items: center; gap: 8px;
  color: rgba(255, 255, 255, .82); text-decoration: none; font-size: 14px;
  padding: 9px 12px; border-radius: 8px; border-left: 3px solid transparent;
}
.yanbar-menu a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.yanbar-menu a.secili {
  background: rgba(227, 169, 18, .13); color: #fff; font-weight: 600;
  border-left-color: var(--pirinc-parlak);
}
.menu-rozet {
  margin-left: auto; background: var(--pirinc-parlak); color: var(--murekkep-koyu);
  font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 99px;
}
.yanbar-alt { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 12px; margin-top: 12px; }
.yanbar-deneme {
  background: rgba(227, 169, 18, .14); border: 1px solid rgba(227, 169, 18, .4);
  color: var(--altin-acik, #E8CE7E); font-size: 12px; border-radius: 8px;
  padding: 6px 10px; margin-bottom: 10px; text-align: center; color: #E8CE7E;
}
.yanbar-kullanici { padding: 0 6px 10px; }
.yk-ad { font-weight: 700; font-size: 14px; }
.yk-unvan { font-size: 12px; color: rgba(255, 255, 255, .6); }
.yanbar-cikis {
  width: 100%; background: none; border: 1px solid rgba(255, 255, 255, .25);
  color: rgba(255, 255, 255, .85); font: inherit; font-size: 13px;
  padding: 7px 12px; border-radius: 8px; cursor: pointer;
}
.yanbar-cikis:hover { border-color: var(--pirinc-parlak); color: #fff; }

/* ---------- üst bar (yalnız mobil) ---------- */
.ustbar { background: var(--murekkep); color: #fff; display: none; }
.ustbar-ic {
  max-width: 1120px; margin: 0 auto; padding: 9px 16px;
  display: flex; align-items: center; gap: 20px;
}
.ust-nav { display: flex; gap: 2px; flex: 1; }
.ust-nav a {
  color: rgba(255, 255, 255, .78); text-decoration: none; font-size: 14px;
  padding: 8px 11px; border-radius: 8px; border-bottom: 2px solid transparent;
}
.ust-nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.ust-nav a.secili { color: #fff; border-bottom-color: var(--pirinc-parlak); font-weight: 600; }
.ust-sag { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ust-sag a, .ust-sag button {
  color: rgba(255, 255, 255, .85); background: none; border: 1px solid rgba(255, 255, 255, .25);
  font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 8px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.ust-sag a:hover, .ust-sag button:hover { border-color: var(--pirinc-parlak); color: #fff; }
.ust-sag a.secili { border-color: var(--pirinc-parlak); color: var(--pirinc-parlak); }

/* ---------- gövde ---------- */
.govde { max-width: 1340px; margin: 0 auto; padding: 24px 20px 96px; }
.kusak { max-width: 1340px; margin: 16px auto -8px; padding: 0 20px; }
.flas {
  background: var(--iyi-zemin); color: var(--iyi); border: 1px solid #B3DfC4;
  border-radius: var(--radius); padding: 11px 16px; font-size: 14px; font-weight: 500;
}
.sayfa-baslik-satir {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 4px 0 18px;
}
.sayfa-baslik-satir h1 { font-size: 24px; color: var(--murekkep); letter-spacing: -.01em; margin: 0; }
.sayfa-baslik-satir .tarih, .selam .tarih { color: var(--soluk); font-size: 14px; }
.selam { margin: 4px 0 18px; }
.selam h1 { font-size: 24px; color: var(--murekkep); letter-spacing: -.01em; }

/* ---------- kartlar ---------- */
.kart {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--radius); box-shadow: var(--golge);
  padding: 20px; margin-bottom: 16px;
}
.kart-baslik { font-size: 16px; font-weight: 700; margin-bottom: 14px; color: var(--murekkep); }
.kart-baslik::after {
  content: ""; display: block; width: 34px; height: 3px;
  background: var(--pirinc); border-radius: 2px; margin-top: 6px;
}
.abonelik-serit {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: linear-gradient(90deg, rgba(227, 169, 18, .13), rgba(227, 169, 18, .04));
  border: 1px solid rgba(192, 138, 11, .35); color: #8A6508;
  border-radius: var(--radius); padding: 10px 16px; font-size: 13.5px; margin-bottom: 16px;
}
/* KPI kartları — ekran-stil-recetesi: soluk zemin + 3px renkli ALT çizgi + renkli sayı */
.istatistikler {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.stat {
  border-radius: var(--radius); box-shadow: var(--golge);
  padding: 14px 16px; text-decoration: none; display: block;
  background: var(--kart); border: 1px solid var(--cizgi);
  border-bottom: 3px solid var(--defter);
}
.stat .deger {
  font-size: 26px; font-weight: 750; color: var(--defter);
  font-variant-numeric: tabular-nums; line-height: 1.1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stat .etiket {
  margin-top: 6px; font-size: 12px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--soluk);
}
.stat.bilgi   { background: #EDF3FB; border-bottom-color: var(--defter); }
.stat.bilgi .deger { color: var(--defter); }
.stat.basari  { background: var(--iyi-zemin); border-bottom-color: var(--iyi); }
.stat.basari .deger { color: var(--iyi); }
.stat.uyari   { background: var(--uyari-zemin); border-bottom-color: var(--pirinc); }
.stat.uyari .deger { color: #8A6508; }
.stat.tehlike { background: var(--tehlike-zemin); border-bottom-color: var(--tehlike); }
.stat.tehlike .deger { color: var(--tehlike); }

/* ---------- formlar ---------- */
.alan { margin-bottom: 14px; }
.alan label { display: block; font-size: 13px; font-weight: 600; color: var(--soluk); margin-bottom: 5px; }
.girdi, select.girdi {
  width: 100%; min-height: 44px; padding: 9px 12px; font: inherit; color: var(--metin);
  background: #fff; border: 1px solid var(--cizgi); border-radius: 8px;
}
.girdi:focus { border-color: var(--pirinc-parlak); outline: none; box-shadow: 0 0 0 3px rgba(227, 169, 18, .18); }
.hata { color: var(--tehlike); font-size: 13px; margin-top: 4px; }
.hata-kutu {
  background: var(--tehlike-zemin); border: 1px solid #F1B3AC; color: var(--tehlike);
  border-radius: 8px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 14px;
}
.ipucu { color: var(--soluk); font-size: 12.5px; margin-top: 4px; }
.onay-satir { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.onay-satir input { width: 18px; height: 18px; accent-color: var(--murekkep); }
.form-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 640px) { .form-izgara { grid-template-columns: 1fr; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px; font: inherit; font-weight: 600; font-size: 14.5px;
  background: var(--murekkep); color: #fff; border: none; border-radius: 8px; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--murekkep-koyu); }
.btn-altin { background: var(--pirinc-parlak); color: var(--murekkep-koyu); }
.btn-altin:hover { background: var(--pirinc); color: #fff; }
.btn-cizgili { background: none; border: 1px solid var(--cizgi); color: var(--metin); }
.btn-cizgili:hover { background: var(--zemin); border-color: var(--soluk); }
.btn-kucuk { min-height: 36px; padding: 6px 14px; font-size: 13.5px; }
.btn-sil { background: none; border: none; color: var(--tehlike); font: inherit; font-size: 13.5px; cursor: pointer; padding: 6px 10px; border-radius: 6px; }
.btn-sil:hover { background: var(--tehlike-zemin); }
.tam-genis { width: 100%; }
.arama-satir { display: flex; gap: 8px; margin-bottom: 14px; }
.arama-satir .girdi { max-width: 340px; }

/* ---------- tablolar ---------- */
.tablo-sar { overflow-x: auto; }
.tablo { border-collapse: collapse; width: 100%; font-size: 14px; }
.tablo th {
  text-align: left; padding: 8px 12px; border-bottom: 2px solid var(--cizgi);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--soluk);
  white-space: nowrap;
}
.tablo td { padding: 10px 12px; border-bottom: 1px solid var(--zemin); vertical-align: middle; }
.tablo tr:nth-child(even) td { background: #FAFBFD; } /* reçete: dönüşümlü satır zemini */
.tablo tr:hover td { background: #F2F5FA; }
.tablo .sag, .sag { text-align: right; font-variant-numeric: tabular-nums; }
.tablo a { font-weight: 600; text-decoration: none; }
.tablo a:hover { text-decoration: underline; }

/* ---------- çipler / durumlar ---------- */
.cip {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 99px; white-space: nowrap;
}
.cip-planlandi { background: #E8EFF9; color: var(--defter); }
.cip-tamamlandi { background: var(--iyi-zemin); color: var(--iyi); }
.cip-iptal { background: #EEF0F3; color: var(--soluk); text-decoration: line-through; }
.cip-odendi { background: var(--iyi-zemin); color: var(--iyi); }
.cip-kismi { background: var(--uyari-zemin); color: #8A6508; }
.cip-odenmedi { background: var(--tehlike-zemin); color: var(--tehlike); }
.cip-birebir { background: #E8EFF9; color: var(--defter); }
.cip-grup { background: var(--uyari-zemin); color: #8A6508; }
.cip-onay_bekliyor { background: var(--uyari-zemin); color: #8A6508; }
.para-borc { color: var(--tehlike); font-weight: 700; font-variant-numeric: tabular-nums; }
.para-temiz { color: var(--iyi); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- takvim ---------- */
.takvim-arac {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.takvim-arac .aralik { font-weight: 700; color: var(--murekkep); font-size: 16px; }
.takvim-sar { overflow-x: auto; background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--radius); box-shadow: var(--golge); }
.takvim { display: grid; grid-template-columns: 52px repeat(7, minmax(96px, 1fr)); min-width: 760px; }
.tk-bas {
  padding: 8px 6px 6px; text-align: center; border-bottom: 2px solid var(--cizgi);
  border-left: 1px solid var(--zemin); font-size: 12px; color: var(--soluk);
  position: sticky; top: 0; background: var(--kart); z-index: 2;
}
.tk-bas .gun-no { display: block; font-size: 17px; font-weight: 700; color: var(--murekkep); }
.tk-bas.bugun .gun-no { color: var(--pirinc); }
.tk-bas a.arti { display: inline-block; margin-top: 2px; font-size: 12px; text-decoration: none; color: var(--pirinc); font-weight: 700; }
.tk-saatler { border-bottom: 2px solid var(--cizgi); }
.tk-saat {
  height: 48px; font-size: 10.5px; color: var(--soluk); text-align: right;
  padding: 2px 6px 0 0; border-top: 1px solid var(--zemin);
  font-variant-numeric: tabular-nums;
}
.tk-kolon {
  position: relative; border-left: 1px solid var(--zemin);
  background: repeating-linear-gradient(to bottom, transparent 0 47px, var(--zemin) 47px 48px);
}
.tk-kolon.bugun { background-color: rgba(227, 169, 18, .05); }
.tk-blok {
  position: absolute; left: 3px; right: 3px; overflow: hidden;
  background: var(--defter); color: #fff; border-radius: 6px;
  padding: 3px 6px; font-size: 11.5px; line-height: 1.25;
  text-decoration: none; border-left: 3px solid var(--pirinc-parlak);
  box-shadow: 0 1px 3px rgba(13, 32, 56, .3); min-height: 18px;
}
.tk-blok:hover { background: var(--murekkep); z-index: 3; }
.tk-blok.grup { background: #6C550F; }
.tk-blok.grup:hover { background: #55430b; }
.tk-blok .saat-y { font-weight: 700; }
.tk-blok.iptal { background: #8b95a3; text-decoration: line-through; }
.tk-blok.bekleyen { background: var(--kart); color: var(--murekkep); border: 1.5px dashed var(--pirinc); border-left: 3px solid var(--pirinc); }

/* ---------- online rezervasyon (halka açık sayfa) ---------- */
.rz-govde { background: var(--zemin); }
.rz-ust { background: var(--murekkep); color: #fff; padding: 14px 0; }
.rz-ic { max-width: 640px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 12px; }
.rz-isletme { font-weight: 750; font-size: 17px; }
.rz-alt { font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.rz-orta { max-width: 640px; margin: 20px auto 0; padding: 0 16px 40px; }
.rz-secenekler { display: flex; flex-direction: column; gap: 8px; }
.rz-secenek {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border: 1.5px solid var(--cizgi); border-radius: 10px; padding: 12px 14px;
  text-decoration: none; color: var(--metin); font-size: 14.5px;
}
.rz-secenek:hover { border-color: var(--pirinc); }
.rz-secenek.secili { border-color: var(--pirinc); background: rgba(227, 169, 18, .07); box-shadow: 0 0 0 1px var(--pirinc); }
.rz-secenek span { color: var(--soluk); font-size: 13px; white-space: nowrap; }
.rz-gunler { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.rz-gun {
  min-width: 64px; text-align: center; border: 1.5px solid var(--cizgi); border-radius: 10px;
  padding: 8px 4px; text-decoration: none; color: var(--metin); flex-shrink: 0;
}
.rz-gun:hover { border-color: var(--pirinc); }
.rz-gun.secili { border-color: var(--pirinc); background: rgba(227, 169, 18, .07); box-shadow: 0 0 0 1px var(--pirinc); }
.rz-gun .g-adi { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--soluk); }
.rz-gun .g-no { display: block; font-size: 20px; font-weight: 750; color: var(--murekkep); line-height: 1.2; }
.rz-gun .g-ay { display: block; font-size: 11px; color: var(--soluk); }
.rz-saatler { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.rz-saat input { position: absolute; opacity: 0; }
.rz-saat span {
  display: block; text-align: center; border: 1.5px solid var(--cizgi); border-radius: 8px;
  padding: 9px 4px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
}
.rz-saat span:hover { border-color: var(--pirinc); }
.rz-saat input:checked + span { background: var(--murekkep); color: #fff; border-color: var(--murekkep); }
.rz-saat input:focus-visible + span { outline: 3px solid rgba(227, 169, 18, .55); }
.rz-dip { text-align: center; padding: 18px 0 30px; }
.rz-dip a { text-decoration: none; }
.rz-link-kutu {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 8px; padding: 10px 12px;
}
.rz-link-kutu code { font-size: 13.5px; color: var(--murekkep); font-weight: 600; word-break: break-all; }
.rz-saat-satir { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.rz-saat-satir .gun-adi { width: 86px; font-size: 13.5px; font-weight: 600; color: var(--metin); }
.rz-saat-satir input[type="time"] { width: 110px; min-height: 36px; padding: 4px 8px; }

/* ---------- detay / listeler ---------- */
.detay-izgara { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 860px) { .detay-izgara { grid-template-columns: 1fr; } }
.satir-bilgi { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--zemin); font-size: 14.5px; }
.satir-bilgi .b-etiket { color: var(--soluk); }
.satir-bilgi .b-deger { font-weight: 600; text-align: right; }
.mini-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mini-form .girdi { min-height: 36px; padding: 5px 8px; font-size: 13.5px; }
.g-dar { width: 96px; }
.g-orta { width: 130px; }
.bos-durum { text-align: center; padding: 42px 20px; }
.bos-durum .buyuk { font-size: 40px; color: var(--pirinc); font-family: Georgia, serif; font-style: italic; }
.bos-durum h1, .bos-durum h2 { font-size: 20px; color: var(--murekkep); margin-top: 8px; }
.bos-durum p { color: var(--soluk); max-width: 46ch; margin: 6px auto 18px; }
.geri-link { display: inline-block; margin-bottom: 12px; font-size: 13.5px; color: var(--soluk); text-decoration: none; }
.geri-link:hover { color: var(--murekkep); }

/* ---------- hizmet satırları ---------- */
.hizmet-baslik-satir, .hizmet-satir {
  display: grid; grid-template-columns: 1.6fr .9fr .7fr .9fr .6fr auto auto;
  gap: 8px; align-items: center;
}
.hizmet-baslik-satir {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--soluk); padding: 0 2px 6px; border-bottom: 1px solid var(--cizgi); margin-bottom: 8px;
}
.hizmet-satir { padding: 6px 0; border-bottom: 1px solid var(--zemin); }
.hizmet-satir form.icerik { display: contents; }
.hizmet-satir .girdi { min-height: 38px; padding: 6px 9px; font-size: 14px; }
.hizmet-ekle { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--cizgi); }
.hizmet-kaydirici { overflow-x: auto; }
.hizmet-kaydirici > div { min-width: 640px; }

/* ---------- misafir (giriş/kurulum) ---------- */
.misafir-govde {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 20px; padding: 32px 16px;
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(227, 169, 18, .15), transparent 60%),
    linear-gradient(160deg, var(--murekkep) 0%, var(--murekkep-koyu) 70%);
}
.misafir-marka { display: flex; align-items: center; gap: 12px; color: #fff; }
.misafir-marka .marka-yazi { font-size: 20px; }
.misafir-kart {
  width: 100%; max-width: 420px; background: var(--kart);
  border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  padding: 28px;
}
.misafir-kart.genis { max-width: 500px; }
.misafir-kart h1 { font-size: 21px; color: var(--murekkep); }
.misafir-kart .aciklama { color: var(--soluk); font-size: 14px; margin: 0 0 18px; }
.misafir-alt { color: rgba(255, 255, 255, .55); font-size: 12.5px; text-align: center; }

/* ---------- alt bar (mobil) ---------- */
.altbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: none; background: #fff; border-top: 1px solid var(--cizgi);
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
}
.altbar a {
  flex: 1; text-align: center; text-decoration: none; color: var(--soluk);
  font-size: 11.5px; font-weight: 600; padding: 8px 2px 6px; border-radius: 8px;
  border-top: 3px solid transparent;
}
.altbar a.secili { color: var(--murekkep); border-top-color: var(--pirinc); }

@media (max-width: 860px) {
  .yanbar { display: none; }
  .ustbar { display: block; }
  .altbar { display: flex; }
  .ustbar-ic { padding: 8px 12px; }
  .govde { padding: 18px 12px 96px; }
  .kart { padding: 16px; }
}
@media (min-width: 861px) {
  .govde { padding-bottom: 40px; }
}
.personel-nokta { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: baseline; margin-right: 4px; }
.ilerleme {
  height: 6px; background: var(--zemin); border-radius: 99px; overflow: hidden; margin-top: 8px;
  border: 1px solid var(--cizgi);
}
.ilerleme span { display: block; height: 100%; background: var(--pirinc); border-radius: 99px; }
.alt-serit { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--soluk); font-size: 13px; margin-top: 10px; }
@media (prefers-reduced-motion: no-preference) {
  .btn, .ust-nav a, .girdi, .tk-blok { transition: background-color .15s, border-color .15s, box-shadow .15s; }
}

/* ============================================================
   TANITIM SAYFASI (ana sayfa)
   ============================================================ */
.tn-govde { background: var(--zemin); }
.tn-hero {
  color: #fff; padding: 0 0 64px;
  background:
    radial-gradient(1000px 480px at 88% -12%, rgba(227, 169, 18, .18), transparent 60%),
    linear-gradient(160deg, var(--murekkep) 0%, var(--murekkep-koyu) 75%);
}
.tn-ic { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.tn-ustbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 0 0; }
.tn-hero-izgara {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px;
  align-items: center; padding-top: 56px;
}
.tn-hero h1 {
  font-size: clamp(30px, 4.6vw, 46px); font-weight: 800; letter-spacing: -.02em;
  line-height: 1.12; margin: 0 0 14px; text-wrap: balance;
}
.tn-hero h1 em { font-style: normal; color: var(--pirinc-parlak); }
.tn-hero .tn-alt { color: rgba(255, 255, 255, .82); font-size: 17px; max-width: 52ch; margin: 0 0 26px; }
.tn-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.tn-guven { display: flex; gap: 8px 22px; flex-wrap: wrap; margin-top: 26px; color: rgba(255, 255, 255, .6); font-size: 13px; }
.tn-guven b { color: rgba(255, 255, 255, .85); font-weight: 600; }

/* hero örnek kart (statik vitrin) */
.tn-vitrin {
  background: #fff; color: var(--metin); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .38); padding: 18px; font-size: 13.5px;
}
.tn-vitrin .v-baslik { font-weight: 700; color: var(--murekkep); margin-bottom: 10px; font-size: 14.5px; }
.tn-vitrin .v-satir {
  display: flex; gap: 10px; align-items: center; padding: 8px 10px;
  border-radius: 8px; border: 1px solid var(--cizgi); margin-bottom: 7px;
}
.tn-vitrin .v-saat { font-weight: 750; color: var(--murekkep); font-variant-numeric: tabular-nums; }
.tn-vitrin .v-ad { flex: 1; }
.tn-vitrin .v-satir.grup { border-left: 3px solid var(--pirinc-parlak); }
.tn-vitrin .v-satir.birebir { border-left: 3px solid var(--defter); }
.tn-vitrin .v-dip { color: var(--soluk); font-size: 12px; margin-top: 10px; }

.tn-bolum { max-width: 1080px; margin: 0 auto; padding: 56px 20px 8px; }
.tn-bolum > h2 { font-size: 26px; color: var(--murekkep); letter-spacing: -.01em; text-align: center; text-wrap: balance; }
.tn-bolum > .b-alt { text-align: center; color: var(--soluk); max-width: 60ch; margin: 6px auto 30px; }
.tn-ozellikler { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.tn-ozellik { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 12px; box-shadow: var(--golge); padding: 20px; }
.tn-ozellik h3 { font-size: 16px; color: var(--murekkep); margin: 0 0 6px; }
.tn-ozellik h3::after { content: ""; display: block; width: 28px; height: 3px; background: var(--pirinc); border-radius: 2px; margin-top: 7px; }
.tn-ozellik p { margin: 8px 0 0; color: var(--soluk); font-size: 14px; }

.tn-adimlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; counter-reset: adim; }
.tn-adim { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 12px; padding: 20px; position: relative; }
.tn-adim::before {
  counter-increment: adim; content: counter(adim);
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--murekkep); color: var(--pirinc-parlak); font-weight: 800; margin-bottom: 10px;
}
.tn-adim h3 { font-size: 15.5px; color: var(--murekkep); margin: 0 0 4px; }
.tn-adim p { margin: 0; color: var(--soluk); font-size: 13.5px; }

.tn-planlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; max-width: 720px; margin: 0 auto; }
.tn-plan { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; box-shadow: var(--golge); padding: 26px 24px; text-align: center; }
.tn-plan.one-cikan { border: 2px solid var(--pirinc); position: relative; }
.tn-plan .rozet-avantaj {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--pirinc-parlak); color: var(--murekkep-koyu);
  font-size: 11.5px; font-weight: 800; letter-spacing: .05em; padding: 3px 12px; border-radius: 99px;
}
.tn-plan h3 { font-size: 18px; color: var(--murekkep); margin: 0 0 4px; }
.tn-fiyat { font-size: 34px; font-weight: 800; color: var(--murekkep); margin: 6px 0 14px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tn-fiyat span { font-size: 13.5px; font-weight: 600; color: var(--soluk); letter-spacing: 0; }
.tn-yakinda { border-style: dashed; border-color: var(--pirinc); }
.tn-yakinda .cip { vertical-align: middle; margin-left: 6px; }
.tn-plan .p-alt { color: var(--soluk); font-size: 13.5px; margin: 0 0 14px; }
.tn-plan ul { list-style: none; margin: 0 0 18px; padding: 0; font-size: 14px; display: flex; flex-direction: column; gap: 7px; }
.tn-plan li::before { content: "✓  "; color: var(--iyi); font-weight: 800; }

.tn-iletisim-kart {
  background: var(--murekkep); color: #fff; border-radius: 16px;
  max-width: 860px; margin: 20px auto 0; padding: 30px 28px; text-align: center;
}
.tn-iletisim-kart h2 { font-size: 22px; margin: 0 0 6px; }
.tn-iletisim-kart p { color: rgba(255, 255, 255, .75); margin: 0 0 18px; }

.tn-dip { max-width: 1080px; margin: 40px auto 0; padding: 26px 20px 36px; border-top: 1px solid var(--cizgi); }
.tn-dip-izgara { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.tn-dip .kunye { color: var(--soluk); font-size: 13px; line-height: 1.7; }
.tn-dip .kunye b { color: var(--murekkep); }
.tn-dip a { color: var(--murekkep); font-weight: 600; text-decoration: none; }
.tn-dip a:hover { text-decoration: underline; }
.tn-telif { text-align: center; color: var(--soluk); font-size: 12px; margin-top: 22px; }

.tn-ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }
.tn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: var(--pirinc-parlak); color: #fff; }
.tn-nav-giris {
  background: none; border: none; padding: 6px 2px; font: inherit; font-size: 14px;
  color: rgba(255, 255, 255, .85); cursor: pointer; border-bottom: 2px solid transparent;
}
.tn-nav-giris:hover { color: #fff; border-bottom-color: var(--pirinc-parlak); }
.tn-mikro { margin-top: 12px; font-size: 13px; color: rgba(255, 255, 255, .78); }
.tn-lansman {
  background: var(--pirinc-parlak); color: var(--murekkep-koyu);
  font-size: 14px; padding: 10px 0; text-align: center;
}
.tn-lansman .tn-ic { padding: 0 20px; }
.tn-guven-satiri { text-align: center; color: var(--soluk); font-size: 13px; margin: -18px 0 24px; }
.tn-sss { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.tn-sss details {
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: 10px;
  box-shadow: var(--golge); padding: 0 18px;
}
.tn-sss summary {
  cursor: pointer; font-weight: 700; color: var(--murekkep); font-size: 15px;
  padding: 14px 0; list-style: none; position: relative;
}
.tn-sss summary::-webkit-details-marker { display: none; }
.tn-sss summary::after { content: "+"; position: absolute; right: 2px; color: var(--pirinc); font-size: 20px; font-weight: 800; }
.tn-sss details[open] summary::after { content: "–"; }
.tn-sss details p { margin: 0 0 14px; color: var(--soluk); font-size: 14px; }
.tn-final {
  margin-top: 56px; padding: 56px 20px;
  background:
    radial-gradient(700px 300px at 15% 110%, rgba(227, 169, 18, .16), transparent 60%),
    linear-gradient(160deg, var(--murekkep) 0%, var(--murekkep-koyu) 75%);
  color: #fff;
}
.tn-final h2 { font-size: clamp(24px, 3.6vw, 32px); margin: 0 0 6px; letter-spacing: -.01em; }
.tn-final p { color: rgba(255, 255, 255, .78); margin: 0 0 20px; }
.tn-final-iletisim { margin-top: 18px !important; font-size: 13.5px; }
.tn-final-iletisim a { color: var(--pirinc-parlak); font-weight: 600; text-decoration: none; }
.tn-final-iletisim a:hover { text-decoration: underline; }

.tn-sektorler { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 820px; margin: 0 auto; }
.cip-sektor {
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: 99px;
  padding: 8px 16px; font-size: 14px; font-weight: 600; color: var(--murekkep);
  box-shadow: var(--golge);
}

/* ---------- modal paneller (üye ol / üye girişi) ---------- */
dialog.modal {
  border: none; border-radius: 14px; padding: 26px;
  width: min(420px, calc(100vw - 32px));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
  background: var(--kart); color: var(--metin);
}
dialog.modal::backdrop { background: rgba(13, 32, 56, .65); backdrop-filter: blur(2px); }
.modal-baslik { font-size: 20px; color: var(--murekkep); margin: 0 0 4px; }
.modal-alt { color: var(--soluk); font-size: 13.5px; margin: 0 0 16px; }
.modal-kapat {
  position: absolute; top: 10px; right: 12px; background: none; border: none;
  font-size: 26px; line-height: 1; color: var(--soluk); cursor: pointer; padding: 4px 8px; border-radius: 8px;
}
.modal-kapat:hover { background: var(--zemin); color: var(--murekkep); }
.modal-gecis { margin: 14px 0 0; font-size: 13.5px; color: var(--soluk); text-align: center; }
.modal-gecis button {
  background: none; border: none; padding: 0; font: inherit; font-weight: 700;
  color: var(--pirinc); cursor: pointer; text-decoration: underline;
}

@media (max-width: 820px) {
  .tn-hero-izgara { grid-template-columns: 1fr; gap: 28px; padding-top: 36px; }
  .tn-vitrin { max-width: 420px; }
  .tn-hero { padding-bottom: 44px; }
}