/* Gün Işığı Derneği — arayüz (logo renkleri: turuncu #F57C00, kırmızı #E30613, siyah yazı) */
:root {
  --zemin: #F4F3F2;
  --kart: #FFFFFF;
  --murekkep: #1C1917;
  --soluk: #6B625D;
  --cizgi: #E0DBD7;
  --cizgi-acik: #EEEAE7;
  --petrol: #1C1917;          /* ana düğmeler: logodaki siyah */
  --petrol-koyu: #000000;
  --petrol-acik: #FFF1E3;     /* seçim / odak zemini: açık turuncu */
  --gunes: #F57C00;           /* logodaki turuncu */
  --gunes-koyu: #9A4A00;
  --gunes-acik: #FFF0DF;
  --logo-kirmizi: #E30613;
  --baglanti: #B83C00;
  --serit: linear-gradient(90deg, #F57C00, #E30613);
  --yesil: #23744A; --yesil-acik: #E2F2E8;
  --kirmizi: #B3261E; --kirmizi-acik: #FBE7E5;
  --turuncu: #9A4D00; --turuncu-acik: #FDEBD7;
  --mor: #6A3D9A; --mor-acik: #EFE7F8;
  --mavi: #1D5A8C; --mavi-acik: #E3EEF8;
  --golge: 0 1px 2px rgba(28, 25, 23, .05), 0 6px 20px -10px rgba(28, 25, 23, .16);
  --r: 14px;
  --yazi: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  --yan-gen: 248px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--yazi); font-size: 16px; line-height: 1.5; color: var(--murekkep); background: var(--zemin); }
h1, h2, h3 { line-height: 1.2; margin: 0; letter-spacing: -.01em; }
h1 { font-size: 1.75rem; font-weight: 700; }
h2 { font-size: 1.2rem; font-weight: 700; }
h3 { font-size: 1rem; font-weight: 700; }
p { margin: 0 0 .75em; }
a { color: var(--baglanti); }
small, .kucuk { font-size: .875rem; }
.soluk { color: var(--soluk); }
.sayi, td.n, th.n { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
:focus-visible { outline: 3px solid var(--gunes); outline-offset: 2px; border-radius: 4px; }
.atla { position: absolute; left: -999px; top: 8px; background: var(--gunes); color: #000; padding: 8px 12px; z-index: 100; }
.atla:focus { left: 8px; }
.ikon { width: 22px; height: 22px; flex: none; }
[hidden] { display: none !important; }

/* ---------- Düğmeler ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 10px;
  border: 1px solid transparent; font: inherit; font-weight: 700; font-size: .95rem; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn .ikon { width: 19px; height: 19px; }
.btn.birincil { background: var(--petrol); color: #fff; }
.btn.birincil:hover { background: var(--petrol-koyu); }
.btn.ikincil { background: var(--kart); color: var(--murekkep); border-color: var(--cizgi); }
.btn.ikincil:hover { border-color: var(--gunes); background: var(--gunes-acik); }
.btn.tehlike { background: var(--kirmizi); color: #fff; }
.btn.metin { background: none; color: var(--baglanti); padding: 0 8px; }
.btn.gunes-btn { background: var(--gunes); color: #fff; text-shadow: 0 1px 0 rgba(120, 50, 0, .25); }
.btn.gunes-btn:hover { background: #E86F00; }
.btn.kucuk { min-height: 34px; padding: 0 12px; font-size: .875rem; }
.btn.tam { width: 100%; }
.btn:disabled { opacity: .55; cursor: wait; }
.btn.bekliyor { position: relative; color: transparent !important; }
.btn.bekliyor::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2.5px solid currentColor; border-color: #fff #fff transparent transparent; border-radius: 50%; animation: don .7s linear infinite; }
.btn.ikincil.bekliyor::after { border-color: var(--petrol) var(--petrol) transparent transparent; }
@keyframes don { to { transform: rotate(360deg); } }
.ikon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; border: 0; background: none; color: inherit; cursor: pointer; }
.ikon-btn:hover { background: rgba(0, 0, 0, .06); }

/* ---------- Yerleşim ---------- */
.yan { position: fixed; inset: 0 auto 0 0; width: var(--yan-gen); background: var(--kart); color: #3F3935; display: flex; flex-direction: column; z-index: 30;
  border-right: 1px solid var(--cizgi-acik); }
.yan::before { content: ""; height: 4px; background: var(--serit); flex: none; }
.marka { display: flex; align-items: center; gap: 12px; padding: 18px 18px 16px; font-weight: 700; font-size: 1.05rem; color: var(--murekkep); line-height: 1.2; }
.marka img { flex: none; object-fit: contain; }
.marka > span { display: flex; flex-direction: column; min-width: 0; }
.urun-adi { font-size: 1.12rem; letter-spacing: -.01em; }
.marka small { font-weight: 400; font-size: .8rem; color: var(--soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.giris-kart .marka small { color: var(--soluk); font-size: .9rem; }
.giris-kart .marka img { border-radius: 13px; }
.giris-kart .urun-adi { font-size: 1.35rem; }
.kullanici-kutu small { display: block; }
.kullanici-kutu small.surum { font-size: .72rem; opacity: .7; }
.gunes { width: 30px; height: 30px; border-radius: 50%; flex: none; background: radial-gradient(circle at 50% 50%, #FFD54A 0 46%, transparent 48%),
  repeating-conic-gradient(from 0deg, var(--gunes) 0 10deg, transparent 10deg 30deg); }
.yan nav { flex: 1; overflow-y: auto; padding: 6px 12px; }
.yan ul { list-style: none; margin: 0; padding: 0; }
.yan nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; margin: 2px 0; border-radius: 8px; color: inherit; text-decoration: none; font-weight: 700; font-size: .97rem; position: relative; }
.yan nav a .ikon { color: #8A817B; }
.yan nav a:hover { background: #F7F4F1; color: var(--murekkep); }
.yan nav a.aktif { background: var(--gunes-acik); color: var(--murekkep); }
.yan nav a.aktif .ikon { color: var(--gunes); }
.yan nav a.aktif::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, #F57C00, #E30613); }
.kullanici-kutu { display: flex; align-items: center; gap: 4px; padding: 14px 12px 14px 20px; border-top: 1px solid var(--cizgi-acik); }
.kullanici-kutu div { flex: 1; min-width: 0; }
.kullanici-kutu strong { display: block; color: var(--murekkep); font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kullanici-kutu small { color: var(--soluk); font-size: .8rem; }
.ana { margin-left: var(--yan-gen); min-height: 100vh; }
.ust { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 12px 32px; background: rgba(244, 243, 242, .9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--cizgi-acik); }
.menu-ac { display: none; }
.ust-bosluk { flex: 1; }
.hizli-ara { flex: 1; max-width: 640px; display: flex; align-items: center; gap: 10px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 10px; padding: 0 14px; height: 46px; }
.hizli-ara:focus-within { border-color: var(--gunes); box-shadow: 0 0 0 3px var(--gunes-acik); }
.hizli-ara .ikon { color: var(--soluk); }
.hizli-ara input { flex: 1; border: 0; outline: 0; font: inherit; background: none; min-width: 0; }
.ust .gunes-btn { margin-left: auto; }
main { padding: 28px 32px 64px; max-width: 1280px; outline: none; }
.alt-menu, .perde { display: none; }

/* ---------- Sayfa başlığı ---------- */
.sayfa-bas { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 22px; }
.sayfa-bas p { margin: 6px 0 0; color: var(--soluk); }
.sayfa-bas .eylemler { margin: 0; }
.geri-link { display: inline-flex; align-items: center; gap: 4px; color: var(--soluk); text-decoration: none; font-weight: 700; font-size: .9rem; margin-bottom: 8px; }
.geri-link .ikon { width: 18px; height: 18px; }
.sekmeler { display: flex; gap: 4px; border-bottom: 1px solid var(--cizgi); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.sekmeler a, .sekmeler button { padding: 10px 14px; border: 0; background: none; font: inherit; font-weight: 700; color: var(--soluk); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; }
.sekmeler .aktif { color: var(--murekkep); border-bottom-color: var(--gunes); }

/* ---------- Kartlar ve paneller ---------- */
.kart { background: var(--kart); border-radius: var(--r); box-shadow: var(--golge); padding: 20px; }
.kart + .kart { margin-top: 16px; }
.kart-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.kart-bas h2 { font-size: 1.05rem; }
.izgara { display: grid; gap: 16px; }
.izgara.iki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.izgara.uc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.izgara.panel-izgara { grid-template-columns: 1.4fr 1fr; align-items: start; }

/* Ana sayfa: günün özeti şeridi */
.gun-seridi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--kart); border-radius: var(--r); box-shadow: var(--golge); margin-bottom: 20px; overflow: hidden; }
.gun-seridi > div { padding: 18px 20px; border-left: 1px solid var(--cizgi-acik); }
.gun-seridi > div:first-child { border-left: 0; }
.gun-seridi b { display: block; font-size: 1.6rem; font-variant-numeric: tabular-nums; line-height: 1.15; }
.gun-seridi span { color: var(--soluk); font-size: .9rem; }
.gun-seridi a { color: inherit; text-decoration: none; display: block; }
.selam { margin-bottom: 18px; }
.selam h1 { font-size: 1.6rem; }
.ilerleme { height: 10px; background: var(--cizgi-acik); border-radius: 6px; overflow: hidden; margin: 10px 0 6px; }
.ilerleme > i { display: block; height: 100%; background: var(--gunes); border-radius: 6px; }

/* ---------- Listeler ve tablolar ---------- */
.tablo-kap { overflow-x: auto; background: var(--kart); border-radius: var(--r); box-shadow: var(--golge); }
table { width: 100%; border-collapse: collapse; font-size: .94rem; }
th { text-align: left; font-weight: 700; color: var(--soluk); font-size: .84rem; padding: 12px 14px; border-bottom: 1px solid var(--cizgi); white-space: nowrap; background: #FAF8F7; position: sticky; top: 0; }
td { padding: 11px 14px; border-bottom: 1px solid var(--cizgi-acik); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr.tik { cursor: pointer; }
tbody tr.tik:hover { background: #FFF8F1; }
tfoot td { font-weight: 700; background: #FAF8F7; border-top: 1px solid var(--cizgi); }
tr.iptal td { color: var(--soluk); text-decoration: line-through; }
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--cizgi-acik); }
.liste li:last-child { border-bottom: 0; }
.liste .buyu { flex: 1; min-width: 0; }
.liste .etiket, .liste .ikon { flex: none; }
.izgara > .kart + .kart, .izgara > .kart { margin-top: 0; }
.liste a { text-decoration: none; color: inherit; }
.liste .alt { display: block; color: var(--soluk); font-size: .86rem; }

.etiket { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .8rem; font-weight: 700; white-space: nowrap; background: var(--cizgi-acik); color: var(--soluk); }
.etiket.yesil { background: var(--yesil-acik); color: var(--yesil); }
.etiket.kirmizi { background: var(--kirmizi-acik); color: var(--kirmizi); }
.etiket.turuncu { background: var(--turuncu-acik); color: var(--turuncu); }
.etiket.sari { background: var(--gunes-acik); color: var(--gunes-koyu); }
.etiket.petrol { background: var(--petrol-acik); color: var(--petrol); }

.filtreler { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 16px; }
.filtreler .alan { margin: 0; min-width: 150px; }
.filtreler .alan.genis { flex: 1; min-width: 220px; }
.sayfalama { display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding: 12px 0; color: var(--soluk); }

.bos-durum { text-align: center; padding: 48px 20px; color: var(--soluk); }
.bos-durum p { max-width: 46ch; margin: 0 auto 14px; }

/* ---------- Formlar ---------- */
.alan { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; min-width: 0; }
.alan > span { font-weight: 700; font-size: .88rem; }
.alan > small { color: var(--soluk); }
input, select, textarea { font: inherit; color: inherit; border: 1px solid var(--cizgi); border-radius: 8px; padding: 9px 12px; background: #fff; min-height: 42px; width: 100%; }
textarea { resize: vertical; min-height: 70px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gunes); box-shadow: 0 0 0 3px var(--gunes-acik); }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; min-height: 0; accent-color: var(--gunes); }
.onay-kutu { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 14px; cursor: pointer; }
.form-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.form-izgara .tam { grid-column: 1 / -1; }
.form-izgara .iki-sutun { grid-column: span 2; }
fieldset { border: 0; padding: 0; margin: 0 0 22px; }
legend { font-weight: 700; font-size: 1.02rem; padding: 0; margin-bottom: 12px; }
.eylemler { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.eylemler.sol { justify-content: flex-start; }
.secim-grup { display: inline-flex; background: var(--cizgi-acik); border-radius: 10px; padding: 4px; gap: 4px; }
.secim-grup label { position: relative; }
.secim-grup input { position: absolute; opacity: 0; }
.secim-grup span { display: block; padding: 8px 18px; border-radius: 7px; font-weight: 700; cursor: pointer; color: var(--soluk); }
.secim-grup input:checked + span { background: var(--kart); color: var(--murekkep); box-shadow: var(--golge); }
.secim-grup input:focus-visible + span { outline: 3px solid var(--gunes); }

/* ---------- Aile kartı: dosya klasörü ---------- */
.dosya { position: relative; margin-top: 30px; }
.dosya-sekme { position: absolute; top: -30px; left: 0; height: 32px; padding: 0 18px; display: flex; align-items: center; gap: 8px;
  background: var(--gunes); color: #fff; font-weight: 700; border-radius: 10px 10px 0 0; font-variant-numeric: tabular-nums; }
.dosya-sekme::after { content: ""; position: absolute; right: -18px; bottom: 0; width: 18px; height: 22px; background: var(--gunes); clip-path: polygon(0 0, 0 100%, 100% 100%); }
.dosya-govde { background: var(--kart); border-radius: 0 var(--r) var(--r) var(--r); box-shadow: var(--golge); border-top: 4px solid var(--gunes); padding: 22px 24px; }
.dosya-ust { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: flex-start; justify-content: space-between; }
.dosya-ust h1 { font-size: 1.9rem; }
.dosya-ust .etiketler { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.bilgi-satir { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 12px; color: var(--soluk); }
.bilgi-satir span { display: inline-flex; align-items: center; gap: 6px; }
.bilgi-satir .ikon { width: 18px; height: 18px; }
.dosya-sayilar { display: flex; gap: 0; margin-top: 18px; border-top: 1px solid var(--cizgi-acik); padding-top: 14px; flex-wrap: wrap; }
.dosya-sayilar > div { padding-right: 28px; margin-right: 28px; border-right: 1px solid var(--cizgi-acik); }
.dosya-sayilar > div:last-child { border-right: 0; }
.dosya-sayilar b { display: block; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.dosya-sayilar span { color: var(--soluk); font-size: .86rem; }
.tanim-liste { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; }
.tanim-liste dt { color: var(--soluk); font-size: .9rem; }
.tanim-liste dd { margin: 0; font-weight: 700; }
.kisi-kart { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--cizgi-acik); }
.kisi-kart:last-child { border-bottom: 0; }
.kisi-rozet { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--petrol-acik); color: var(--petrol); font-size: .95rem; }
.kisi-rozet.cocuk { background: var(--gunes-acik); color: var(--gunes-koyu); }
.kisi-kart .alt { color: var(--soluk); font-size: .88rem; }
.zaman-cizelgesi { list-style: none; margin: 0; padding: 0; }
.zaman-cizelgesi li { position: relative; padding: 0 0 18px 26px; }
.zaman-cizelgesi li::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: -6px; width: 2px; background: var(--cizgi-acik); }
.zaman-cizelgesi li:last-child::before { display: none; }
.zaman-cizelgesi li::after { content: ""; position: absolute; left: 1px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--kart); border: 3px solid #8A817B; }
.zaman-cizelgesi li.yardim::after { border-color: var(--gunes); }
.zaman-cizelgesi li.iptal { opacity: .55; }
.limit-kutu { background: var(--gunes-acik); border-radius: 8px; padding: 12px 14px; }
.limit-kutu.asim { background: var(--kirmizi-acik); color: var(--kirmizi); }

/* ---------- İşlem ekranı ---------- */
.islem-izgara { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.islem-ozet { position: sticky; top: 90px; }
.toplam-buyuk { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.secili-aile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid var(--gunes); background: var(--gunes-acik); border-radius: 10px; }
.secili-aile .buyu { flex: 1; }
.oneri-kutu { position: relative; }
.oneriler { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--kart); border: 1px solid var(--cizgi); border-radius: 10px; box-shadow: var(--golge); z-index: 15; max-height: 320px; overflow-y: auto; list-style: none; margin: 0; padding: 4px; }
.oneriler li button { width: 100%; text-align: left; padding: 10px 12px; border: 0; background: none; border-radius: 6px; font: inherit; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.oneriler li button:hover, .oneriler li button:focus { background: var(--petrol-acik); outline: none; }
.oneriler small { color: var(--soluk); }
.kalem-tablo input { min-height: 38px; padding: 6px 8px; }
.kalem-tablo td { vertical-align: middle; }
.kalem-tablo .miktar { width: 90px; }
.kalem-tablo .fiyat { width: 110px; }
.stok-not { font-size: .8rem; color: var(--soluk); }
.stok-not.az { color: var(--kirmizi); font-weight: 700; }

/* ---------- Bildirim & pencere ---------- */
#bildirimler { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 200; max-width: min(420px, calc(100vw - 40px)); }
.bildirim { background: var(--murekkep); color: #fff; padding: 12px 16px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); font-weight: 700; border-left: 5px solid var(--gunes); transition: opacity .3s, transform .3s; }
.bildirim.hata { background: var(--kirmizi); border-left-color: #fff; }
.bildirim.cik { opacity: 0; transform: translateY(8px); }
dialog.pencere { border: 0; border-radius: 14px; padding: 0; width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 40px); box-shadow: 0 24px 60px rgba(0, 0, 0, .25); color: var(--murekkep); }
dialog.pencere.genis { width: min(860px, calc(100vw - 24px)); }
dialog::backdrop { background: rgba(28, 25, 23, .45); }
.pencere-ust { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 8px 22px; position: sticky; top: 0; background: #fff; z-index: 2; }
.pencere-govde { padding: 8px 22px 22px; }
.onay-metin { font-size: 1.05rem; }

/* ---------- Giriş ---------- */
.giris-sayfa { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: #FFF9F4; position: relative; overflow: hidden; }
.giris-isik { position: absolute; width: 820px; height: 820px; right: -300px; top: -380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 124, 0, .30) 0 20%, rgba(245, 124, 0, .10) 40%, transparent 66%); }
.giris-isik.iki { right: auto; top: auto; left: -320px; bottom: -420px; background: radial-gradient(circle, rgba(227, 6, 19, .18) 0 18%, rgba(227, 6, 19, .06) 40%, transparent 66%); }
.giris-kart { position: relative; width: min(400px, 100%); background: var(--kart); border-radius: 20px; padding: 30px 28px 24px; box-shadow: 0 30px 70px -28px rgba(120, 40, 0, .35), 0 0 0 1px rgba(28, 25, 23, .04);
 overflow: hidden; }
.giris-kart::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--serit); }
.giris-logo { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 0 22px; }
.giris-logo img { width: 150px; height: auto; }
.giris-logo span { font-weight: 700; font-size: .82rem; letter-spacing: .02em; color: var(--soluk); padding: 3px 12px; border-radius: 999px; background: var(--zemin); }
.giris-kart .marka { color: var(--murekkep); padding: 0 0 22px; font-size: 1.15rem; }
.giris-kart h1 { font-size: 1.4rem; margin-bottom: 6px; }
.giris-kart .btn { margin-top: 6px; }
.giris-kart p.kucuk { margin-top: 16px; }


/* ---------- Aile listesi: sütun başlığı filtreleri ---------- */
.th-btn { all: unset; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 700; color: var(--soluk); padding: 4px 6px; margin: -4px -6px; border-radius: 6px; }
.th-btn:hover { background: var(--cizgi-acik); color: var(--murekkep); }
.th-btn:focus-visible { outline: 3px solid var(--gunes); }
.th-btn.etkin { color: var(--petrol); background: var(--gunes-acik); }
.th-ok { font-size: .78rem; opacity: .75; }
.ipucu { margin: -6px 0 10px; }
.aile-tablo td[data-k="Telefon"], .aile-tablo td[data-k="Yılda"], .aile-tablo th { white-space: nowrap; }
.aile-tablo td.bas { min-width: 180px; }
#mobilFiltre { display: none; }
.cipler { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -4px 0 14px; }
.cip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; border-radius: 999px; border: 1px solid var(--gunes); background: var(--gunes-acik); font: inherit; font-size: .88rem; font-weight: 700; color: var(--murekkep); cursor: pointer; max-width: 100%; }
.cip .ikon { width: 16px; height: 16px; }
.cip:hover { background: #FFE2C4; }
.filtre-pop { position: absolute; z-index: 60; width: 320px; max-width: calc(100vw - 24px); background: var(--kart); border: 1px solid var(--cizgi); border-radius: 12px;
  box-shadow: 0 18px 40px -12px rgba(28, 25, 23, .3); padding: 14px; }
.filtre-pop.alt-sayfa { position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-width: none; border-radius: 16px 16px 0 0; max-height: 80vh; overflow-y: auto; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.pop-bas { font-weight: 700; font-size: 1rem; margin-bottom: 10px; }
.pop-sira { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--cizgi-acik); }
.pop-sira .soluk { width: 100%; }
.pop-sira .secili { border-color: var(--petrol); background: var(--petrol-acik); }
.pop-grup { margin: 10px 0 0; }
.pop-grup legend { font-weight: 700; font-size: .85rem; color: var(--soluk); margin-bottom: 6px; }
.pop-liste { max-height: 260px; overflow-y: auto; margin: 0 -6px; }
.pop-secenek { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 6px; cursor: pointer; }
.pop-secenek:hover { background: var(--zemin); }
.pop-secenek .buyu { flex: 1; min-width: 0; font-size: .92rem; }
.pop-ara { min-height: 36px; padding: 6px 10px; margin-bottom: 6px; }
.pop-eylem { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--cizgi-acik); }
.pop-menu { list-style: none; margin: 0; padding: 0; }
.pop-menu button { width: 100%; text-align: left; padding: 10px 8px; border: 0; background: none; font: inherit; border-radius: 6px; cursor: pointer; }
.pop-menu button:hover { background: var(--zemin); }
.nebim-gruplar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.nebim-gruplar div { background: var(--zemin); border-radius: 8px; padding: 8px 12px; }
.nebim-gruplar b { display: block; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.nebim-gruplar span { color: var(--soluk); font-size: .82rem; }
@media (max-width: 860px) {
  #mobilFiltre { display: inline-flex; }
  .ipucu { display: none; }
}


/* ---------- "Yılda kaç kez" özet kutuları ---------- */
.yilda-kutu { font: inherit; text-align: left; background: var(--zemin); border: 2px solid transparent; border-radius: 8px; padding: 8px 14px; cursor: pointer; color: inherit; }
.yilda-kutu:hover { border-color: var(--cizgi); }
.yilda-kutu.secili { border-color: var(--gunes); background: var(--gunes-acik); }
.yilda-kutu b { display: block; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.yilda-kutu span { color: var(--soluk); font-size: .85rem; }

/* ---------- Süzülmüş listeyi yazdırma / PDF ---------- */
#yazdirAlan { display: none; }
@media print {
  body.liste-yazdir > *:not(#yazdirAlan) { display: none !important; }
  body.liste-yazdir #yazdirAlan { display: block; font-size: 9pt; }
  #yazdirAlan h1 { font-size: 14pt; margin: 0 0 4px; }
  #yazdirAlan p { margin: 0 0 8px; color: #444; }
  #yazdirAlan table { width: 100%; border-collapse: collapse; }
  #yazdirAlan th, #yazdirAlan td { border: 1px solid #bbb; padding: 3px 5px; text-align: left; vertical-align: top; font-size: 8.5pt; position: static; }
  #yazdirAlan th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #yazdirAlan .n { text-align: right; }
  #yazdirAlan .tek-satir { white-space: nowrap; }
  #yazdirAlan thead { display: table-header-group; }
  body.liste-yazdir #yazdirAlan { page: yatay; }
}
@page yatay { size: A4 landscape; margin: 10mm; }

/* ---------- Yazdırma ---------- */
.yazdir-bas { display: none; }
@media print {
  body { background: #fff; font-size: 11pt; }
  .yan, .ust, .alt-menu, .filtreler, .eylemler, .sekmeler, .yazdirma, #bildirimler, .geri-link { display: none !important; }
  .ana { margin: 0; }
  main { padding: 0; max-width: none; }
  .tablo-kap, .kart, .dosya-govde { box-shadow: none; border-radius: 0; }
  th { position: static; background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  td, th { padding: 4px 6px; font-size: 9.5pt; }
  .yazdir-bas { display: block; margin-bottom: 10px; }
  tr { break-inside: avoid; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .izgara.panel-izgara, .islem-izgara { grid-template-columns: 1fr; }
  .islem-ozet { position: static; }
  .form-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Telefon ---------- */
@media (max-width: 860px) {
  .yan { transform: translateX(-100%); transition: transform .22s ease; width: min(300px, 84vw); }
  body.yan-acik .yan { transform: none; }
  body.yan-acik .perde { display: block; position: fixed; inset: 0; background: rgba(28, 25, 23, .45); z-index: 25; }
  .ana { margin-left: 0; padding-bottom: 72px; }
  .menu-ac { display: inline-grid; }
  .ust { padding: 10px 16px; gap: 8px; }
  .ust .gunes-btn span { display: none; }
  .ust .gunes-btn { padding: 0 12px; }
  .hizli-ara { height: 44px; }
  main { padding: 20px 16px 40px; }
  h1 { font-size: 1.45rem; }
  .gun-seridi { grid-template-columns: repeat(2, 1fr); }
  .gun-seridi > div:nth-child(3) { border-left: 0; }
  .gun-seridi > div:nth-child(n+3) { border-top: 1px solid var(--cizgi-acik); }
  .izgara.iki, .izgara.uc, .form-izgara { grid-template-columns: 1fr; }
  .form-izgara .iki-sutun { grid-column: auto; }
  .alt-menu { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 22; background: var(--kart); border-top: 1px solid var(--cizgi); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .alt-menu a, .alt-menu button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; font: inherit; font-size: .72rem; font-weight: 700; color: var(--soluk); text-decoration: none; background: none; border: 0; cursor: pointer; }
  .alt-menu .aktif { color: var(--murekkep); }
  .alt-menu .aktif .ikon { color: var(--gunes-koyu); background: var(--gunes-acik); border-radius: 999px; padding: 2px 12px; width: 46px; }
  #bildirimler { bottom: 84px; left: 16px; right: 16px; }
  .dosya-govde { padding: 18px 16px; }
  .dosya-ust h1 { font-size: 1.5rem; }
  .dosya-sayilar > div { padding-right: 16px; margin-right: 16px; }
  .sayfa-bas { align-items: flex-start; }
  .dosya-ust .eylemler { width: 100%; justify-content: flex-start; }
  .dosya-ust .eylemler .gunes-btn { flex: 1 1 100%; }
  .dosya-sayilar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 0; }
  .dosya-sayilar > div { border-right: 0; margin-right: 0; padding-right: 8px; }
  .sayfa-bas .eylemler { width: 100%; justify-content: flex-start; }
  /* Telefonda tablolar kart listesine dönüşür */
  table.duyarli thead { display: none; }
  table.duyarli, table.duyarli tbody, table.duyarli tr, table.duyarli td { display: block; width: 100%; }
  table.duyarli tr { padding: 12px 14px; border-bottom: 1px solid var(--cizgi-acik); }
  table.duyarli td { border: 0; padding: 2px 0; text-align: left; }
  table.duyarli td[data-k]::before { content: attr(data-k) ": "; color: var(--soluk); font-weight: 400; }
  table.duyarli td.bas { font-weight: 700; font-size: 1.02rem; }
  table.duyarli td.gizle-m { display: none; }
  table.duyarli tfoot td { display: block; }
  .kalem-tablo thead { display: none; }
  .kalem-tablo, .kalem-tablo tbody { display: block; }
  .kalem-tablo tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 0; border-bottom: 1px solid var(--cizgi-acik); }
  .kalem-tablo td { border: 0; padding: 0; }
  .kalem-tablo td:first-child { flex: 1 1 100%; }
  .kalem-tablo td:has(input) { flex: 1 1 70px; }
  .kalem-tablo input.miktar, .kalem-tablo input.fiyat { width: 100%; }
  .kalem-tablo td[data-k]::before { content: attr(data-k); display: block; font-size: .75rem; color: var(--soluk); text-align: left; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- Yardım hakkı (yılda kaç kez / 1 defa) ---------- */
tbody tr.hak-dolu, tbody tr.hak-dolu:hover { background: var(--kirmizi-acik); }
tbody tr.hak-dolu td:first-child { box-shadow: inset 4px 0 0 var(--kirmizi); }
tbody tr.hak-dolu td { color: #7A1A14; }
.hak-hucre { min-width: 120px; }
.hak-hucre small { display: block; color: var(--soluk); font-size: .78rem; white-space: normal; line-height: 1.3; }
tr.hak-dolu .hak-hucre small { color: var(--kirmizi); }
.hak-dolu-yazi { color: var(--kirmizi); font-weight: 700; }
.hak-uyari { display: flex; gap: 10px; align-items: flex-start; width: 100%; margin-top: 12px; padding: 10px 14px; border-radius: 8px; border: 1px solid #F0B8B2;
  background: var(--kirmizi-acik); color: var(--kirmizi); font: inherit; text-align: left; cursor: pointer; }
.hak-uyari .ikon { flex: 0 0 auto; margin-top: 2px; }
.hak-uyari.sabit { cursor: default; margin: 14px 0 0; }
button.hak-uyari:hover { border-color: var(--kirmizi); }
.dosya-sayilar .kirmizi-sayi b, .dosya-sayilar .kirmizi-sayi span { color: var(--kirmizi); }
.alan.tek-sefer-kutu { flex-direction: row; align-items: flex-start; gap: 10px; align-self: start; margin-top: 30px; }
.alan.tek-sefer-kutu input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; min-height: 0; padding: 0; }
.alan input:disabled { background: var(--zemin); color: var(--soluk); }
.aciklama-metin { margin: 14px 0 0; white-space: pre-line; }

/* ---------- Aile notları ---------- */
.not-form .eylemler { margin-top: -6px; }
.not-liste { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--cizgi-acik); }
.not-liste li { padding: 14px 0; border-bottom: 1px solid var(--cizgi-acik); }
.not-ust { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.not-eylem { margin-left: auto; display: flex; gap: 4px; }
.not-metin { margin: 6px 0 0; white-space: pre-line; max-width: 80ch; }
.not-duzelt { margin-top: 8px; }
.not-duzelt textarea { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--cizgi); border-radius: 8px; }
.not-duzelt .eylemler { margin-top: 8px; }

/* ---------- Dışa aktarma: başlık seçimi ---------- */
.kolon-eylem { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.kolon-eylem [data-sayac] { margin-left: auto; }
.kolon-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 18px; max-height: 52vh; overflow: auto;
  border: 1px solid var(--cizgi-acik); border-radius: 8px; padding: 12px 14px 0; margin-bottom: 14px; }
.kolon-liste .onay-kutu { font-weight: 400; margin-bottom: 12px; }
.kolon-uyari { color: var(--kirmizi); font-weight: 700; margin: -6px 0 12px; }
@media print {
  #yazdirAlan tr.kirmizi-satir td { background: #FAD4D0 !important; color: #7A1A14; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #yazdirAlan tfoot td { border-top: 2px solid #888; }
  tr.hak-dolu td { background: #FAD4D0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Sırası gelen aileler ---------- */
.yilda-kutu small { display: block; color: var(--soluk); font-size: .76rem; margin-top: 2px; }
.sira-kutu-gecikmis b { color: var(--kirmizi); }
tbody tr.sira-gecikmis td:first-child { box-shadow: inset 4px 0 0 var(--kirmizi); }
.sira-gecikme { color: var(--kirmizi); font-weight: 700; }
.sira-not { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--gunes-acik); }
.tablo-kap td.tek-satir { white-space: nowrap; }
.ay-sec { border: 0; padding: 0; margin: 0 0 14px; }
.ay-sec > span { font-weight: 700; font-size: .88rem; }
.ay-liste { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px 14px; margin-top: 8px; }
.ay-liste label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ay-liste input { width: 18px; height: 18px; min-height: 0; padding: 0; flex: 0 0 auto; }
@media (max-width: 600px) { .ay-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- v1.5: yetim / yabancı, plan listesi ---------- */
.etiket.mor { background: var(--mor-acik); color: var(--mor); }
.etiket.mavi { background: var(--mavi-acik); color: var(--mavi); }
.kucuk-etiket { font-size: .72rem; padding: 1px 7px; vertical-align: 1px; }
.adres-hucre { min-width: 220px; max-width: 340px; white-space: normal; line-height: 1.35; }
.sec-hucre { width: 40px; text-align: center; }
.sec-hucre input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--petrol); }
tr.secili-satir td { background: var(--petrol-acik); }
.toplu-cubuk { position: sticky; top: 76px; z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 10px 14px; border-radius: var(--r); background: var(--petrol); color: #fff; box-shadow: var(--golge); }
.toplu-cubuk .btn.metin { color: #fff; }
.toplu-cubuk [data-toplu-sil] { margin-left: auto; }
.ozel-durumlar { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .ozel-durumlar { grid-template-columns: 1fr; } }
.ozel-kutu { border: 1.5px solid var(--cizgi); border-radius: 12px; padding: 14px 16px; background: var(--kart); transition: border-color .15s, background .15s; }
.ozel-kutu.acik.yetim-kutu { border-color: #C9B2E4; background: #FBF8FE; }
.ozel-kutu.acik.yabanci-kutu { border-color: #A9C6E2; background: #F7FAFD; }
.ozel-anahtar { display: flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 700; }
.ozel-anahtar small { display: block; font-weight: 400; color: var(--soluk); }
.ozel-anahtar input { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 42px; height: 24px; border-radius: 12px; background: var(--cizgi); position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.ozel-anahtar input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.ozel-anahtar input:checked { background: var(--petrol); }
.yetim-kutu .ozel-anahtar input:checked { background: var(--mor); }
.yabanci-kutu .ozel-anahtar input:checked { background: var(--mavi); }
.ozel-anahtar input:checked::after { transform: translateX(18px); }
.ozel-anahtar input:focus-visible { outline: 3px solid var(--gunes); outline-offset: 2px; }
.ozel-alanlar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; margin-top: 14px; }
.ozel-alanlar .tam { grid-column: 1 / -1; }
.ozel-kutu:not(.acik) .ozel-alanlar { display: none; }
.ozel-bilgi { border-radius: 10px; padding: 12px 14px; margin-top: 14px; }
.ozel-bilgi.yetim { background: var(--mor-acik); }
.ozel-bilgi.yabanci { background: var(--mavi-acik); }
.ozel-bilgi h3 { font-size: .95rem; margin-bottom: 6px; }
.ozel-bilgi dl { margin: 0; }
@media print { .toplu-cubuk, .sec-hucre { display: none !important; } }

/* ---------- v1.6: marka ---------- */
.ust-logo { display: none; }
@media (max-width: 860px) { .ust-logo { display: block; width: 34px; height: 34px; object-fit: contain; margin-left: -4px; } }
.selam h1 { letter-spacing: -.02em; }
.gun-seridi { position: relative; }
.gun-seridi::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--serit); }
.etiket.petrol { background: #EFEBE8; color: var(--murekkep); }
.etiket.mavi-cizgi { background: #fff; color: var(--mavi); box-shadow: inset 0 0 0 1.5px #A9C6E2; }
.tc-ipucu { color: var(--mavi); font-weight: 700; }

/* ---------- Bağlantılar ve telefon ---------- */
.baglanti-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .baglanti-izgara { grid-template-columns: 1fr; } }
.baglanti-kart { margin: 0; position: relative; overflow: hidden; }
.baglanti-kart::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: #D6CFCA; }
.baglanti-kart.telefon::before { background: var(--serit); }
.baglanti-bas { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.baglanti-bas h2 { margin-bottom: 4px; }
.baglanti-bas p { margin: 0; }
.baglanti-ikon { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--zemin); color: var(--murekkep); }
.baglanti-ikon.turuncu { background: var(--gunes-acik); color: var(--gunes-koyu); }
.adres-listesi { display: grid; gap: 8px; margin: 4px 0 14px; }
.adres-satir { display: flex; align-items: center; gap: 10px; justify-content: space-between; background: var(--zemin); border-radius: 10px; padding: 8px 8px 8px 14px; margin-bottom: 8px; }
.adres-satir code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1rem; font-weight: 700; word-break: break-all; }
.adimlar { margin: 4px 0 16px; padding-left: 22px; display: grid; gap: 8px; }
.adimlar li::marker { color: var(--gunes); font-weight: 700; }
.ts-durum { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.qr-alan { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; margin-bottom: 16px; }
@media (max-width: 560px) { .qr-alan { grid-template-columns: 1fr; justify-items: start; } }
.qr-kutu { padding: 8px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--cizgi), 0 8px 20px -12px rgba(28, 25, 23, .3); line-height: 0; }
.kurulum-notu { background: var(--gunes-acik); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.kurulum-notu p { margin: 6px 0 0; }
.tel-kurulum { display: grid; justify-items: center; gap: 14px; }
.tel-kurulum .adimlar { justify-self: stretch; }
.secenek-kutu { border: 1.5px solid var(--cizgi); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.secenek-kutu.acik { border-color: #F2B27A; background: #FFFBF7; }
.secenek-bas { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-bottom: 4px; }
.secenek-kutu .qr-alan { margin: 10px 0; }
.sifre-uyari { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 32px 0; padding: 10px 12px 10px 16px; border-radius: 12px; background: var(--gunes-acik); border: 1px solid #F6C690; color: var(--gunes-koyu); }
.sifre-uyari span { flex: 1; min-width: 220px; color: var(--murekkep); }
.sifre-uyari .ikon { color: var(--gunes); }
@media (max-width: 860px) { .sifre-uyari { margin: 12px 16px 0; } }
@media print { .sifre-uyari { display: none !important; } }
/* ---------- Çoklu rol seçimi ---------- */
.rol-sec { border: 0; padding: 0; }
.rol-liste { display: grid; gap: 6px; margin-top: 4px; }
.rol-kutu { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border: 1.5px solid var(--cizgi); border-radius: 10px; cursor: pointer; font-weight: 400; }
.rol-kutu input { margin-top: 2px; flex: none; }
.rol-kutu span { display: flex; flex-direction: column; }
.rol-kutu small { color: var(--soluk); font-size: .82rem; }
.rol-kutu:has(input:checked) { border-color: var(--gunes); background: var(--gunes-acik); }
.rol-kutu.yonetici:has(input:checked) { border-color: var(--murekkep); background: #F3F1EF; }
.rol-kutu.kapsandi { opacity: .5; cursor: default; }
.rol-uyari { color: var(--kirmizi); font-weight: 700; }
.etiket.rol-etiket { margin: 0 4px 4px 0; }
.guncelleme-serit { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 210; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  width: min(680px, calc(100vw - 24px)); padding: 12px 14px 12px 18px; border-radius: 14px; background: var(--murekkep); color: #fff; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .45); }
.guncelleme-serit::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 14px 0 0 14px; background: var(--serit); }
.guncelleme-serit span { flex: 1; min-width: 220px; }
.guncelleme-serit .btn.birincil { background: var(--gunes); }
@media (max-width: 860px) { .guncelleme-serit { bottom: 84px; } }
@media print { .guncelleme-serit { display: none !important; } }