/* Online PDKS — tek stil dosyası (panel, personel mobil ekranı, kiosk) */
:root {
  --zemin: #f4f6f5;
  --kart: #ffffff;
  --metin: #18251f;
  --soluk: #5d6c66;
  --cizgi: #e1e7e4;
  --ana: #0f6e5a;
  --ana-koyu: #0a5444;
  --ana-acik: #e2f1ec;
  --yesil: #1c7f46; --yesil-z: #e3f4ea;
  --turuncu: #a8520a; --turuncu-z: #fdefd9;
  --kirmizi: #b42318; --kirmizi-z: #fde7e5;
  --mavi: #1d5fa8; --mavi-z: #e2edfa;
  --mor: #6a3f9e; --mor-z: #efe7f9;
  --gri: #5d6b68; --gri-z: #edf0ef;
  --golge: 0 1px 2px rgba(16, 40, 32, .06), 0 1px 3px rgba(16, 40, 32, .05);
  --yaricap: 12px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--metin);
  background: var(--zemin);
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-size: 15px; line-height: 1.5; }
a { color: var(--ana); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75em; }
small, .soluk { color: var(--soluk); }
code, .kod { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9em; background: var(--gri-z); padding: .1em .35em; border-radius: 5px; word-break: break-all; }
hr { border: 0; border-top: 1px solid var(--cizgi); margin: 1.25rem 0; }

/* Düğmeler */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  padding: .55em 1em; border-radius: 9px; border: 1px solid var(--ana);
  background: var(--ana); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: none !important; white-space: nowrap; transition: background .15s, box-shadow .15s;
}
.btn:hover { background: var(--ana-koyu); }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(15, 110, 90, .3); outline-offset: 1px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-ikincil { background: #fff; color: var(--metin); border-color: var(--cizgi); }
.btn-ikincil:hover { background: var(--gri-z); }
.btn-tehlike { background: #fff; color: var(--kirmizi); border-color: #f1c7c3; }
.btn-tehlike:hover { background: var(--kirmizi-z); }
.btn-kucuk { padding: .3em .65em; font-size: .85rem; border-radius: 7px; }
.btn-genis { width: 100%; }
.btn-satir { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.btn-bag { background: none; border: 0; color: var(--ana); padding: 0; font: inherit; cursor: pointer; }
.btn-bag:hover { text-decoration: underline; }

/* Formlar */
label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .3rem; }
input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=date], input[type=time], input[type=month], input[type=search], input[type=datetime-local], select, textarea {
  width: 100%; padding: .55em .7em; border: 1px solid #cfd8d4; border-radius: 9px; font: inherit; color: inherit; background: #fff;
}
textarea { min-height: 5.5em; resize: vertical; }
.alan { margin-bottom: 1rem; }
.alan .ipucu { font-size: .82rem; color: var(--soluk); margin-top: .3rem; font-weight: 400; }
.izgara { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.izgara-2 { display: grid; gap: 0 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.onay { display: flex; gap: .55rem; align-items: flex-start; font-weight: 500; margin-bottom: .7rem; cursor: pointer; }
.onay input { margin-top: .25rem; width: 1.05rem; height: 1.05rem; accent-color: var(--ana); flex: none; }
.onay span small { display: block; font-weight: 400; }
.gunler { display: flex; flex-wrap: wrap; gap: .35rem; }
.gunler label { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .6rem; border: 1px solid var(--cizgi); border-radius: 8px; font-weight: 500; cursor: pointer; margin: 0; }
.gunler input { accent-color: var(--ana); }
.hata-metin, .field-validation-error { color: var(--kirmizi); font-size: .85rem; }
.satir-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }
.satir-form .alan { margin: 0; }

/* Kartlar, kutular */
.kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yaricap); box-shadow: var(--golge); padding: 1.2rem 1.3rem; margin-bottom: 1.2rem; }
.kart > h2:first-child, .kart > h3:first-child { margin-bottom: .8rem; }
.kart-bas { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.kart-bas h2 { margin: 0; }
.kutu { border-radius: 10px; padding: .75rem 1rem; margin-bottom: 1rem; border: 1px solid transparent; }
.kutu.bilgi { background: var(--mavi-z); border-color: #c8dcf5; color: #123f70; }
.kutu.basari { background: var(--yesil-z); border-color: #c4e6d1; color: #125530; }
.kutu.hata { background: var(--kirmizi-z); border-color: #f4c8c3; color: #7d1810; }
.kutu.dikkat { background: var(--turuncu-z); border-color: #f4d9b0; color: #6b3606; }
.kutu :last-child { margin-bottom: 0; }

/* Rozetler */
.rozet { display: inline-flex; align-items: center; gap: .3em; padding: .12em .55em; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; background: var(--gri-z); color: var(--gri); }
.rozet.yesil { background: var(--yesil-z); color: var(--yesil); }
.rozet.turuncu { background: var(--turuncu-z); color: var(--turuncu); }
.rozet.kirmizi { background: var(--kirmizi-z); color: var(--kirmizi); }
.rozet.mavi { background: var(--mavi-z); color: var(--mavi); }
.rozet.mor { background: var(--mor-z); color: var(--mor); }
.rozet.acik { background: transparent; color: var(--soluk); border: 1px dashed var(--cizgi); }
.nokta { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }

/* Tablolar */
.tablo-kap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tablo { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tablo th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--soluk); font-weight: 700; padding: .55rem .6rem; border-bottom: 1px solid var(--cizgi); white-space: nowrap; }
.tablo td { padding: .6rem .6rem; border-bottom: 1px solid var(--cizgi); vertical-align: middle; }
.tablo tr:last-child td { border-bottom: 0; }
.tablo tbody tr:hover { background: #fafcfb; }
.tablo .sag { text-align: right; }
.tablo .orta { text-align: center; }
.tablo .dar { width: 1%; white-space: nowrap; }
.bos { text-align: center; color: var(--soluk); padding: 2rem 1rem !important; }

/* İstatistik kutuları */
.istatistikler { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.istatistik { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yaricap); padding: .85rem 1rem; box-shadow: var(--golge); }
.istatistik b { display: block; font-size: 1.7rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.istatistik span { font-size: .82rem; color: var(--soluk); font-weight: 600; }
.istatistik.yesil b { color: var(--yesil); } .istatistik.turuncu b { color: var(--turuncu); }
.istatistik.kirmizi b { color: var(--kirmizi); } .istatistik.mavi b { color: var(--mavi); }

/* Sekmeler */
.sekmeler { display: flex; gap: .3rem; border-bottom: 1px solid var(--cizgi); margin-bottom: 1.1rem; overflow-x: auto; }
.sekmeler a { padding: .55rem .9rem; color: var(--soluk); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none; }
.sekmeler a.etkin { color: var(--ana); border-bottom-color: var(--ana); }
.sekmeler .sayi { background: var(--turuncu-z); color: var(--turuncu); border-radius: 999px; padding: 0 .45em; font-size: .78rem; margin-left: .25rem; }

/* ===== Yönetim paneli düzeni ===== */
.panel { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.yan { background: #0d2c25; color: #cfe1db; padding: 1.1rem .8rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
.marka { display: flex; align-items: center; gap: .55rem; color: #fff; font-weight: 800; font-size: 1.08rem; padding: .2rem .55rem .9rem; text-decoration: none !important; }
.marka-isaret { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, #2bb38d, #0f6e5a); display: grid; place-items: center; color: #fff; font-size: .9rem; }
.yan .firma { font-size: .82rem; color: #8fb3a8; padding: 0 .55rem .9rem; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: .6rem; }
.yan nav a { display: flex; align-items: center; gap: .6rem; padding: .48rem .6rem; border-radius: 8px; color: #cfe1db; font-weight: 500; text-decoration: none; margin-bottom: 1px; }
.yan nav a:hover { background: rgba(255,255,255,.06); }
.yan nav a.etkin { background: rgba(43, 179, 141, .18); color: #fff; }
.yan nav .ayrac { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #6f958a; padding: .9rem .6rem .3rem; }
.yan nav .sayi { margin-left: auto; background: #f0a732; color: #2d1a00; border-radius: 999px; font-size: .72rem; font-weight: 700; padding: 0 .45em; }
.yan .alt { margin-top: auto; padding: .8rem .55rem 0; border-top: 1px solid rgba(255,255,255,.08); font-size: .85rem; }
.yan .alt a { color: #9fd3c2; }
.icerik { padding: 1.4rem 1.8rem 3rem; max-width: 1280px; width: 100%; }
.ust { display: flex; align-items: center; gap: 1rem; justify-content: space-between; margin-bottom: 1.2rem; flex-wrap: wrap; }
.ust h1 { margin: 0; }
.menu-ac { display: none; background: none; border: 1px solid var(--cizgi); border-radius: 8px; padding: .35rem .6rem; font-size: 1.1rem; cursor: pointer; }
@media (max-width: 900px) {
  .panel { grid-template-columns: minmax(0, 1fr); }
  .yan { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 50; transform: translateX(-100%); transition: transform .2s; }
  body.menu-acik .yan { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); }
  .menu-ac { display: inline-block; }
  .icerik { padding: 1rem 1rem 3rem; }
  .izgara-2 { grid-template-columns: 1fr; }
}

/* Puantaj ızgarası */
.puantaj { border-collapse: collapse; font-size: .8rem; }
.puantaj th, .puantaj td { border: 1px solid var(--cizgi); padding: .3rem .25rem; text-align: center; min-width: 1.9rem; }
.puantaj th { background: #f7f9f8; font-weight: 700; color: var(--soluk); }
.puantaj th.hs { background: #eef1f0; }
.puantaj td.ad { text-align: left; white-space: nowrap; padding: .3rem .6rem; position: sticky; left: 0; background: #fff; z-index: 1; min-width: 11rem; }
.puantaj td.k-X { color: var(--yesil); }
.puantaj td.k-G { background: var(--turuncu-z); color: var(--turuncu); font-weight: 700; }
.puantaj td.k-D { background: var(--kirmizi-z); color: var(--kirmizi); font-weight: 700; }
.puantaj td.k-E { background: var(--mor-z); color: var(--mor); font-weight: 700; }
.puantaj td.k-izin { background: var(--mavi-z); color: var(--mavi); font-weight: 700; }
.puantaj td.k-H, .puantaj td.k-T, .puantaj td.k-TX { background: #f1f3f2; color: #8a9692; }
.puantaj td.top { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Vardiya planı */
.plan td select { min-width: 8.5rem; padding: .3em .4em; font-size: .85rem; }
.plan td select.ozel { border-color: var(--ana); background: var(--ana-acik); }
.plan th.bugun, .plan td.bugun { background: #f2faf7; }

/* Doğrulama simgeleri */
.dg { display: inline-flex; gap: .2rem; }
.dg i { font-style: normal; font-size: .72rem; font-weight: 700; padding: .05rem .35rem; border-radius: 5px; background: var(--gri-z); color: #9aa5a2; }
.dg i.e { background: var(--yesil-z); color: var(--yesil); }
.dg i.h { background: var(--kirmizi-z); color: var(--kirmizi); }

/* Kopyalanabilir bağlantı */
.baglanti { display: flex; gap: .4rem; align-items: stretch; }
.baglanti input { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; background: #f9fbfa; }

/* ===== Giriş / kayıt / tanıtım ===== */
.orta-sayfa { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem; background: radial-gradient(1200px 600px at 10% -10%, #d9efe7, transparent), var(--zemin); }
.giris-kutu { width: 100%; max-width: 420px; }
.giris-kutu .marka { color: var(--metin); justify-content: center; padding-bottom: 1.2rem; font-size: 1.25rem; }
.giris-kutu .kart { padding: 1.6rem; }
.tanitim { max-width: 1080px; margin: 0 auto; padding: 1.5rem 1.2rem 4rem; }
.tanitim header { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0 2.5rem; }
.tanitim header .marka { color: var(--metin); padding: 0; }
.kahraman { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.5rem; align-items: center; margin-bottom: 3.5rem; }
.kahraman h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); letter-spacing: -.025em; margin-bottom: .6rem; }
.kahraman p.giris-metni { font-size: 1.12rem; color: var(--soluk); max-width: 34rem; }
.telefon-gorsel { background: #0d2c25; border-radius: 34px; padding: 14px; max-width: 300px; margin: 0 auto; box-shadow: 0 30px 60px -20px rgba(13, 44, 37, .45); }
.telefon-gorsel .ekran { background: var(--zemin); border-radius: 24px; padding: 1.3rem 1rem; text-align: center; }
.ozellikler { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.ozellik { background: #fff; border: 1px solid var(--cizgi); border-radius: var(--yaricap); padding: 1.1rem 1.2rem; }
.ozellik b { display: block; margin-bottom: .3rem; }
.ozellik p { color: var(--soluk); font-size: .92rem; margin: 0; }
@media (max-width: 800px) { .kahraman { grid-template-columns: 1fr; } }

/* ===== Personel (mobil) ===== */
.mobil { max-width: 520px; margin: 0 auto; min-height: 100vh; padding: 0 0 5.5rem; }
.mobil-ust { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.1rem .4rem; }
.mobil-ust .kim b { display: block; font-size: 1.05rem; }
.mobil-ust .kim small { font-size: .82rem; }
.mobil-icerik { padding: .5rem 1rem; }
.mobil-alt { position: fixed; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-top: 1px solid var(--cizgi); display: flex; justify-content: center; padding-bottom: env(safe-area-inset-bottom); z-index: 20; }
.mobil-alt a { flex: 1; max-width: 170px; text-align: center; padding: .6rem 0 .55rem; color: var(--soluk); font-size: .78rem; font-weight: 600; text-decoration: none; }
.mobil-alt a .simge { display: block; font-size: 1.25rem; line-height: 1.2; }
.mobil-alt a.etkin { color: var(--ana); }
.saat-buyuk { font-size: 3rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.durum-kart { text-align: center; padding: 1.4rem 1rem 1.2rem; }
.durum-kart .tarih { color: var(--soluk); font-weight: 600; margin: .35rem 0 1rem; }
.bas-dugme {
  width: 190px; height: 190px; border-radius: 50%; border: 0; margin: .4rem auto 1rem; display: grid; place-items: center; cursor: pointer;
  font: inherit; font-size: 1.35rem; font-weight: 800; color: #fff; background: radial-gradient(circle at 30% 25%, #2bb38d, #0f6e5a 70%);
  box-shadow: 0 14px 30px -10px rgba(15, 110, 90, .65), inset 0 -6px 0 rgba(0,0,0,.12); transition: transform .1s;
}
.bas-dugme.cikis { background: radial-gradient(circle at 30% 25%, #f08a5d, #c2410c 70%); box-shadow: 0 14px 30px -10px rgba(194, 65, 12, .6), inset 0 -6px 0 rgba(0,0,0,.12); }
.bas-dugme:active { transform: scale(.97); }
.bas-dugme:disabled { filter: grayscale(.5); opacity: .7; }
.bas-dugme small { display: block; font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.88); }
.kontroller { display: flex; justify-content: center; gap: .45rem; flex-wrap: wrap; margin-bottom: .6rem; }
.kontrol { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: 999px; font-size: .82rem; font-weight: 600; background: var(--gri-z); color: var(--gri); }
.kontrol.e { background: var(--yesil-z); color: var(--yesil); }
.kontrol.h { background: var(--kirmizi-z); color: var(--kirmizi); }
.kontrol.b { background: var(--turuncu-z); color: var(--turuncu); }
.sonuc { margin-top: .8rem; }
.hareket-listesi { list-style: none; margin: 0; padding: 0; }
.hareket-listesi li { display: flex; justify-content: space-between; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--cizgi); }
.hareket-listesi li:last-child { border-bottom: 0; }
.tarayici { position: fixed; inset: 0; background: #000; z-index: 100; display: none; flex-direction: column; }
.tarayici.acik { display: flex; }
.tarayici video { flex: 1; width: 100%; object-fit: cover; }
.tarayici .cerceve { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.tarayici .cerceve div { width: min(70vw, 300px); aspect-ratio: 1; border: 3px solid rgba(255,255,255,.9); border-radius: 22px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); }
.tarayici .alt-cubuk { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2rem; display: flex; justify-content: center; gap: .6rem; padding-bottom: calc(1.2rem + env(safe-area-inset-bottom)); }
.tarayici .ipucu-ust { position: absolute; top: 0; left: 0; right: 0; color: #fff; text-align: center; padding: 1.2rem 1rem; font-weight: 600; text-shadow: 0 1px 3px #000; }

/* ===== Kiosk ===== */
.kiosk { min-height: 100vh; background: #0b2620; color: #e8f3ef; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3vw; padding: 4vh 4vw; align-items: center; }
.kiosk .sol h1 { font-size: clamp(1.6rem, 3.4vw, 3rem); margin-bottom: .2em; }
.kiosk .sol .firma { color: #8fc2b2; font-size: clamp(1rem, 1.6vw, 1.4rem); font-weight: 600; }
.kiosk .saat { font-size: clamp(3.5rem, 9vw, 8rem); font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1; margin: 3vh 0 .5vh; }
.kiosk .tarih { color: #a7cfc2; font-size: clamp(1rem, 1.8vw, 1.5rem); }
.kiosk .yonerge { margin-top: 4vh; color: #cfe5de; font-size: clamp(.95rem, 1.4vw, 1.2rem); }
.kiosk .yonerge ol { padding-left: 1.2em; margin: .4em 0 0; }
.kiosk .qr-kap { background: #fff; border-radius: 28px; padding: 2.2vw; max-width: 72vh; width: 100%; justify-self: center; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); }
.kiosk .qr-kap img { width: 100%; display: block; image-rendering: pixelated; aspect-ratio: 1; }
.kiosk .geri-sayim { height: 6px; border-radius: 6px; background: #e3ece9; overflow: hidden; margin-top: 1vw; }
.kiosk .geri-sayim div { height: 100%; background: var(--ana); width: 100%; transition: width 1s linear; }
.kiosk .son { margin-top: 3vh; }
.kiosk .son li { list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: clamp(.9rem, 1.3vw, 1.15rem); }
.kiosk .son ul { padding: 0; margin: 0; }
.kiosk .durum-cubugu { position: fixed; right: 1rem; bottom: .7rem; font-size: .8rem; color: #6f9a8d; display: flex; gap: .8rem; align-items: center; }
.kiosk .durum-cubugu button { background: none; border: 1px solid #2a5248; color: #8fc2b2; border-radius: 7px; padding: .2rem .6rem; cursor: pointer; font: inherit; }
.kiosk .hata-kutu { color: #ffb4a8; }
@media (orientation: portrait) { .kiosk { grid-template-columns: 1fr; text-align: center; } .kiosk .yonerge ol { width: fit-content; margin: .4em auto 0; text-align: left; } }

.gizli { display: none !important; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; } .mt1 { margin-top: 1rem; }
.sag { text-align: right; }
.esnek { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.yayil { flex: 1; }

/* Bordro pusulası */
.pusula-bas { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.pusula-net { text-align: right; background: var(--ana-acik); border-radius: 10px; padding: .5rem .9rem; }
.pusula-net span { display: block; font-size: .78rem; color: var(--ana-koyu); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pusula-net b { font-size: 1.45rem; color: var(--ana-koyu); font-variant-numeric: tabular-nums; }
.pusula .tablo td.sag { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media print {
  .yan, .ust, .mobil-alt, .mobil-ust, .yazdirma-gizle, form { display: none !important; }
  .panel { display: block; } .icerik, .mobil { padding: 0; max-width: none; }
  .kart { box-shadow: none; border: 0; padding: 0; }
  body { background: #fff; }
}
.pusula .izgara-2 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }