:root {
  --zemin: #eef3f7;
  --kart: #ffffff;
  --murekkep: #122033;
  --soluk: #5c6b7e;
  --cizgi: #e2eaf1;
  --gece: #0c1628;
  --gece-2: #16243a;
  --vurgu: #12a37c;
  --vurgu-koyu: #0c7d5f;
  --altin: #d7b15e;
  --tehlike: #c44747;
  --tehlike-zemin: #fdeeee;
  --olumlu-zemin: #e7f8f2;
  --golge: 0 16px 40px rgba(12, 28, 48, 0.08);
  --yazi: "Manrope", "Segoe UI", sans-serif;
  --marka: "Fraunces", Georgia, serif;
  --orman: var(--gece);
  --yaprak: var(--vurgu);
  --yaprak-koyu: var(--vurgu-koyu);
  --kagit: var(--zemin);
  --pirinc: var(--altin);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--yazi);
  color: var(--murekkep);
  background: var(--zemin);
  font-size: 16px;
  line-height: 1.55;
}
a { color: var(--vurgu-koyu); }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }

.kabuk { display: flex; min-height: 100vh; }
.yan {
  width: 268px;
  flex: none;
  background: linear-gradient(180deg, #101b2e 0%, #0c1628 100%);
  color: #e8eef6;
  display: flex;
  flex-direction: column;
  padding: 22px 14px 16px;
}
.marka {
  font-family: var(--marka);
  color: #fff;
  text-decoration: none;
  font-size: 1.45rem;
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 18px;
}
.rozet-marka {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #1ec99a, #0c7d5f);
  color: white;
  font-family: var(--yazi);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.yan nav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow: auto; }
.nav-bas { margin: 16px 12px 6px; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: #8ea0b8; }
.yan nav a {
  color: #d5deea;
  text-decoration: none;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.yan nav a:hover { background: rgba(255,255,255,0.06); color: white; }
.yan nav a.aktif {
  background: rgba(18, 163, 124, 0.16);
  color: white;
  border-color: rgba(18, 163, 124, 0.35);
}
.yan-alt { margin-top: auto; padding: 16px 10px 4px; border-top: 1px solid rgba(255,255,255,0.08); }
.firma { font-weight: 700; }
.kisi { color: #9aadc4; font-size: 0.9rem; margin: 2px 0 12px; }
.cikis {
  background: rgba(255,255,255,0.06);
  color: #f4f7fb;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
}
.cikis:hover { background: rgba(255,255,255,0.12); }

.icerik { flex: 1; min-width: 0; padding: 28px 32px 56px; }
.sayfa-bas { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
h1 { font-family: var(--marka); font-weight: 560; font-size: 2rem; letter-spacing: -0.03em; margin: 0; }
h2 { font-size: 1.05rem; margin: 0 0 12px; letter-spacing: -0.02em; }
.bildirim {
  background: var(--olumlu-zemin);
  border: 1px solid #b7ead8;
  padding: 12px 14px;
  border-radius: 14px;
  margin-bottom: 16px;
}
.hata-kutu {
  background: var(--tehlike-zemin);
  color: var(--tehlike);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.olculer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.olcu, .kart {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: 18px;
  box-shadow: var(--golge);
}
.olcu {
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  display: block;
  position: relative;
  overflow: hidden;
}
.olcu::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #1ec99a, #0c7d5f);
}
.olcu:hover { transform: translateY(-2px); }
.olcu span, .etiket { display: block; color: var(--soluk); font-size: 0.82rem; font-weight: 650; }
.olcu strong, .sayi { font-variant-numeric: tabular-nums; }
.olcu strong { display: block; font-size: 1.45rem; margin-top: 8px; letter-spacing: -0.03em; }
.arti { color: var(--vurgu-koyu); }
.eksi { color: var(--tehlike); }

.iki { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 14px; }
.kart { padding: 20px; }
.kart + .kart { margin-top: 14px; }

.tablo-cerceve { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 8px; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
th { color: var(--soluk); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; }
td.sayi, th.sayi { text-align: right; white-space: nowrap; }
tbody tr:hover td { background: #f7fafc; }
.bos { color: var(--soluk); padding: 12px 0; }

.dugme, button.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #14b88c, #0c8f6c);
  color: white;
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  cursor: pointer;
  font-weight: 750;
  box-shadow: 0 8px 18px rgba(12, 143, 108, 0.22);
}
.dugme:hover { filter: brightness(1.05); }
.dugme.ikincil, .dugme.hayalet {
  background: transparent;
  color: var(--murekkep);
  border: 1px solid var(--cizgi);
  box-shadow: none;
}
.serit .dugme.hayalet, .sahne .dugme.hayalet {
  color: white;
  border-color: rgba(255,255,255,0.28);
}
.dugme.tehlike { background: transparent; color: var(--tehlike); border: 1px solid #f0c9c9; box-shadow: none; }
.dugme.kucuk, button.kucuk { padding: 6px 10px; font-size: 0.82rem; border-radius: 9px; box-shadow: none; }
.satir-eylem { display: flex; gap: 8px; align-items: center; }
.satir-eylem form { margin: 0; }

.araclar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.araclar a { text-decoration: none; }

.alan { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.alan label { font-size: 0.86rem; color: var(--soluk); font-weight: 700; }
input, select, textarea {
  background: #fbfcfe;
  border: 1px solid #d5e0ea;
  border-radius: 12px;
  padding: 12px 13px;
  width: 100%;
}
input[type="checkbox"] { width: auto; accent-color: var(--vurgu); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--vurgu);
  box-shadow: 0 0 0 4px rgba(18, 163, 124, 0.15);
  background: white;
}
textarea { min-height: 90px; resize: vertical; }
.izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.tam { grid-column: 1 / -1; }
.form-eylem { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.not { color: var(--soluk); font-size: 0.92rem; }
.hatirla { flex-direction: row; align-items: center; gap: 8px; font-weight: 600; color: var(--murekkep); }
.validation-summary-errors, .field-validation-error { color: var(--tehlike); font-size: 0.9rem; }
.validation-summary-errors ul { margin: 0 0 12px; padding-left: 18px; }

.rozet { display: inline-block; border-radius: 999px; padding: 3px 9px; font-size: 0.78rem; font-weight: 700; background: #eef3f8; }
.r-1 { background: #fff4dc; color: #8a6420; }
.r-2 { background: var(--olumlu-zemin); color: var(--vurgu-koyu); }
.r-3 { background: var(--tehlike-zemin); color: var(--tehlike); }

.kagit { background: white; border: 1px solid var(--cizgi); border-radius: 18px; padding: 22px; box-shadow: var(--golge); }
.toplamlar { margin-left: auto; width: min(280px, 100%); }
.toplamlar div { display: flex; justify-content: space-between; padding: 4px 0; }
.toplamlar .genel { font-weight: 800; border-top: 1px solid var(--cizgi); margin-top: 4px; padding-top: 8px; }

.serit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 28px;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 5;
  border-bottom: 1px solid rgba(226, 234, 241, 0.9);
}
.serit .marka { color: var(--gece); padding: 0; }
.serit nav { display: flex; gap: 10px; align-items: center; }
.halka-icerik { max-width: 1120px; margin: 0 auto; padding: 8px 24px 72px; }

body.vitrin {
  --yazi: "Sora", "Segoe UI", sans-serif;
  --marka: "Instrument Serif", Georgia, serif;
  background: #f4f0e8;
  color: #1b1814;
  font-family: "Sora", "Segoe UI", sans-serif;
}
body.vitrin .serit {
  background: transparent;
  border-bottom: 1px solid rgba(27, 24, 20, 0.08);
}
body.vitrin .serit .marka,
body.vitrin h1,
body.vitrin h2 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; }
body.vitrin .serit .marka { color: #1b1814; font-size: 1.7rem; }
body.vitrin .halka-icerik { max-width: 1140px; padding: 8px 28px 88px; }
body.vitrin .sahne {
  background: transparent;
  color: #1b1814;
  padding: 54px 0 20px;
  gap: 56px;
  align-items: end;
}
body.vitrin .kas {
  color: #8d6b32;
  font-family: "Sora", sans-serif;
  font-weight: 600;
  letter-spacing: 0.16em;
}
body.vitrin .sahne h1 {
  color: #1b1814;
  font-size: clamp(3.1rem, 6.2vw, 5.5rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  max-width: 9.2ch;
}
body.vitrin .ozet { color: #5e574e; font-size: 1.05rem; max-width: 34rem; }
body.vitrin .dugme.hayalet,
body.vitrin .serit .dugme.ikincil {
  color: #1b1814;
  border-color: rgba(27, 24, 20, 0.18);
  background: transparent;
}
body.vitrin .vitrin-kart {
  background: #16130f;
  color: #f7f2ea;
  border: 0;
  border-radius: 28px;
  padding: 22px;
  box-shadow: 0 28px 50px rgba(28, 22, 14, 0.16);
}
body.vitrin .vitrin-ust { color: #d4be8d; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.72rem; }
body.vitrin .vitrin-satir { border-bottom-color: rgba(247, 242, 234, 0.1); padding: 14px 2px; }
body.vitrin .vitrin-net { background: #f4f0e8; color: #16130f; border-radius: 16px; }
body.vitrin .ozellikler {
  max-width: none;
  margin: 36px 0 0;
  padding: 0;
  gap: 0;
  border-top: 1px solid rgba(27, 24, 20, 0.12);
}
body.vitrin .ozellik {
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(27, 24, 20, 0.1);
  border-bottom: 1px solid rgba(27, 24, 20, 0.1);
  border-radius: 0;
  box-shadow: none;
  padding: 26px 22px 10px;
}
body.vitrin .ozellik:nth-child(3n) { border-right: 0; }
body.vitrin .ozellik h2 { font-size: 1.85rem; margin-bottom: 8px; }
body.vitrin .isaret { color: #8d6b32; font-family: "Sora", sans-serif; }
body.vitrin .alt { max-width: none; padding: 22px 4px 0; color: #6d665c; }
.kas { margin: 0 0 14px; color: #d7b15e; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.75rem; }
.sahne { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 36px; align-items: center; }
.sahne-dugmeler { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.vitrin-ust { display: flex; justify-content: space-between; margin-bottom: 8px; }
.vitrin-satir { display: flex; justify-content: space-between; gap: 12px; }
.vitrin-satir strong { font-variant-numeric: tabular-nums; }
.vitrin-net { margin-top: 14px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; font-weight: 650; }
.ozellikler { display: grid; grid-template-columns: repeat(3, 1fr); }
.isaret { display: inline-block; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; margin-bottom: 8px; }
.alt { margin: 28px auto 0; }

.kapi-kabuk { min-height: 100vh; display: grid; grid-template-columns: 0.9fr 1.1fr; }
.kapi-yan {
  background:
    radial-gradient(500px 280px at 20% 80%, rgba(215, 177, 94, 0.18), transparent 60%),
    linear-gradient(165deg, #12203a, #0c1628);
  color: white;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.kapi-yan .slogan { font-family: var(--marka); color: white; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.08; max-width: 11ch; margin: 0 0 12px; font-weight: 560; }
.kapi-yan p { color: #c9d5e4; max-width: 28rem; }
.kapi-form { display: grid; place-items: center; padding: 32px 20px; background: #f4f7fb; }
.kapi-kutu { width: min(460px, 100%); background: white; border: 1px solid var(--cizgi); border-radius: 24px; padding: 28px; box-shadow: var(--golge); }
.kapi-kutu h1 { font-size: 2rem; margin-bottom: 6px; }
.kapi-kutu .dugme { width: 100%; margin-top: 4px; }

.bakiye-serit { display: flex; justify-content: space-between; gap: 12px; align-items: end; margin-bottom: 16px; }
.baglanti-satir { display: flex; gap: 8px; }
.baglanti-satir input { flex: 1; }
.cubuk { height: 8px; background: #e7eef5; border-radius: 99px; overflow: hidden; }
.cubuk span { display: block; height: 100%; background: linear-gradient(90deg, #1ec99a, #0c7d5f); }
.cubuk.asti span { background: var(--tehlike); }
.pano { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pano article { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 18px; padding: 14px; min-height: 180px; box-shadow: var(--golge); }
.gorev { background: #f8fafc; border: 1px solid var(--cizgi); border-radius: 14px; padding: 12px; margin-bottom: 8px; }

@media (max-width: 900px) {
  .kabuk { display: block; }
  .yan { width: auto; position: sticky; top: 0; z-index: 6; padding: 10px; }
  .marka { padding-bottom: 8px; }
  .nav-bas, .yan-alt { display: none; }
  .yan nav { flex-direction: row; overflow: auto; flex: none; }
  .icerik { padding: 18px 14px 40px; }
  .olculer, .iki, .sahne, .ozellikler, .izgara, .kapi-kabuk, .pano { grid-template-columns: 1fr; }
  body.vitrin .halka-icerik { padding: 8px 16px 64px; }
  body.vitrin .sahne { padding-top: 28px; }
  body.vitrin .sahne h1 { max-width: none; font-size: 2.8rem; }
  body.vitrin .ozellik { border-right: 0; }
  .sayfa-bas { align-items: flex-start; flex-direction: column; }
  .kapi-yan { min-height: auto; padding: 24px 18px; }
  .kapi-yan .slogan { max-width: none; font-size: 2rem; }
}

@media print {
  .yan, .serit, .sayfa-bas, .araclar, .form-eylem, .sakla-yazdir, .bildirim, .kapi-yan { display: none !important; }
  .icerik, .halka-icerik, .kapi-form { padding: 0; }
  body, .kapi-form { background: white; }
  .kagit, .kart, .olcu { box-shadow: none; }
}