/* ==========================================================================
   Screens — cihaz içi arayüz kompozisyonları
   Tüm ölçüler cqw = cihaz genişliğinin %'si.
   ========================================================================== */

/* ---------- Wireframe (hero telefonu) ---------- */
.scr-wire { background: var(--c-white); padding: 0 6cqw; }
.scr-wire .scr__status { padding-inline: 2cqw; }
.wire__title { height: 4.6cqw; width: 52%; background: var(--c-ink); border-radius: 0.8cqw; margin: 6cqw 0 3cqw; }
.wire__sub { height: 2.6cqw; width: 74%; background: var(--c-paper-3); border-radius: 0.8cqw; margin-bottom: 7cqw; }
.wire__card {
  position: relative;
  height: 34cqw;
  border-radius: 3cqw;
  background: var(--c-paper-2);
  margin-bottom: 4cqw;
  padding: 5cqw;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2.4cqw;
}
.wire__card i { display: block; height: 2.6cqw; border-radius: 0.8cqw; background: var(--c-paper-3); }
.wire__card i:first-child { width: 40%; height: 3.6cqw; background: var(--c-ink-2); }
.wire__card i:last-child { width: 68%; }
.wire__card.is-selected { background: var(--c-white); box-shadow: 0 0 0 1px var(--c-line) inset; }
.wire__card.is-selected::after {
  content: "";
  position: absolute; inset: -1.6cqw;
  border: 1px solid var(--c-accent);
  border-radius: 0.6cqw;
}
.wire__handles i {
  position: absolute; z-index: 2;
  width: 2.6cqw; height: 2.6cqw;
  background: var(--c-white);
  border: 1px solid var(--c-accent);
}
.wire__handles i:nth-child(1) { top: -2.9cqw; left: -2.9cqw; }
.wire__handles i:nth-child(2) { top: -2.9cqw; right: -2.9cqw; }
.wire__handles i:nth-child(3) { bottom: -2.9cqw; left: -2.9cqw; }
.wire__handles i:nth-child(4) { bottom: -2.9cqw; right: -2.9cqw; }
.wire__badge {
  position: absolute; z-index: 3;
  top: -8.6cqw; left: -1.6cqw;
  padding: 0.8cqw 2cqw;
  background: var(--c-accent);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 2.8cqw;
  letter-spacing: 0.02em;
  border-radius: 0.6cqw;
}
.wire__row { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; margin-bottom: 4cqw; }
.wire__row span { height: 22cqw; border-radius: 3cqw; border: 1px dashed var(--c-line-strong); }
.wire__bar {
  margin-top: auto; margin-bottom: 6cqw;
  height: 11cqw; border-radius: 2.4cqw;
  background: var(--c-ink);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-paper); font-size: 3.6cqw; font-weight: 500;
}

/* ---------- Mira — finans uygulaması (telefon) ---------- */
.scr-mira { background: var(--c-white); }
.mira__body { padding: 0 7cqw; display: flex; flex-direction: column; flex: 1; }
.mira__head { display: flex; justify-content: space-between; align-items: center; margin: 5cqw 0 8cqw; }
.mira__hello { font-size: 4cqw; color: var(--c-ink-3); }
.mira__avatar {
  width: 9cqw; height: 9cqw; border-radius: 2.4cqw;
  background: var(--c-ink); color: var(--c-paper);
  display: grid; place-items: center;
  font-size: 3.8cqw; font-weight: 600;
}
.mira__label { font-family: var(--f-mono); font-size: 2.9cqw; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-ink-3); }
.mira__balance {
  font-family: var(--f-display); font-weight: 500;
  font-size: 12.5cqw; letter-spacing: -0.045em; line-height: 1.05;
  margin: 1.5cqw 0 1.5cqw;
}
.mira__balance span { color: var(--c-ink-3); font-size: 0.55em; letter-spacing: -0.02em; }
.mira__delta { font-family: var(--f-mono); font-size: 3.2cqw; color: var(--c-accent); }
.mira__chart {
  display: flex; align-items: flex-end; gap: 2.4cqw;
  height: 30cqw; margin-top: 9cqw;
  border-bottom: 1px solid var(--c-line);
}
.mira__chart i {
  flex: 1; display: block;
  height: var(--h);
  background: var(--c-paper-3);
  border-radius: 1cqw 1cqw 0 0;
  transform-origin: bottom;
  transition: transform 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.mira__chart i.is-on { background: var(--c-accent); }
.js .mira__chart i { transform: scaleY(0.05); }
.js .stage.is-in[data-active="mobile"] .mira__chart i { transform: scaleY(1); }
.mira__days { display: flex; gap: 2.4cqw; margin-top: 2cqw; }
.mira__days span { flex: 1; text-align: center; font-family: var(--f-mono); font-size: 2.7cqw; color: var(--c-ink-3); }
.mira__list { margin-top: 8cqw; display: grid; gap: 4.4cqw; }
.mira__list li { display: grid; grid-template-columns: auto 1fr auto; gap: 3.4cqw; align-items: center; }
.mira__ico { width: 9.5cqw; height: 9.5cqw; border-radius: 2.4cqw; background: var(--c-paper-2); position: relative; }
.mira__ico::after { content: ""; position: absolute; inset: 3.2cqw; border: 1px solid var(--c-ink-2); border-radius: 0.6cqw; }
.mira__list b { display: block; font-size: 3.7cqw; font-weight: 500; }
.mira__list small { display: block; font-size: 3cqw; color: var(--c-ink-3); }
.mira__amt { font-family: var(--f-mono); font-size: 3.4cqw; }
.mira__tabbar {
  margin-top: auto;
  display: flex; justify-content: space-around; align-items: center;
  height: 17cqw; padding-bottom: 4cqw;
  border-top: 1px solid var(--c-line);
}
.mira__tabbar i { width: 5cqw; height: 5cqw; border-radius: 1.2cqw; border: 1px solid var(--c-ink-3); }
.mira__tabbar i.on { background: var(--c-ink); border-color: var(--c-ink); }

/* ---------- Kıyı — marina web sitesi (tablet) ---------- */
.scr-kiyi { background: var(--c-white); }
.scr-kiyi > * { flex-shrink: 0; }
.kiyi__nav {
  display: flex; align-items: center; gap: 4cqw;
  padding: 4cqw 5cqw;
  font-size: 2.4cqw; color: var(--c-ink-2);
}
.kiyi__nav b { font-family: var(--f-display); font-size: 3.6cqw; letter-spacing: -0.04em; color: var(--c-ink); margin-right: auto; }
.kiyi__nav .kiyi__login { padding: 1.2cqw 2.6cqw; border: 1px solid var(--c-line-strong); border-radius: 0.8cqw; color: var(--c-ink); }
.kiyi__hero {
  position: relative;
  margin: 0 3.5cqw;
  height: 56cqw;
  border-radius: 1.6cqw;
  background-color: var(--c-graphite);
  background-image: repeating-linear-gradient(0deg, rgba(245,245,242,0.08) 0 1px, transparent 1px 2.2cqw);
  color: var(--c-on-dark);
  padding: 7cqw 5cqw;
  overflow: hidden;
}
.kiyi__hero::before { /* ufuk çizgisi */
  content: ""; position: absolute; left: 0; right: 0; top: 42%;
  height: 58%;
  background: var(--c-graphite-2);
  background-image: repeating-linear-gradient(0deg, rgba(245,245,242,0.12) 0 1px, transparent 1px 1.4cqw);
}
.kiyi__sun { position: absolute; right: 12cqw; top: 13cqw; width: 9cqw; height: 9cqw; background: var(--c-accent); }
.kiyi__eyebrow { position: relative; font-family: var(--f-mono); font-size: 2.1cqw; letter-spacing: 0.08em; color: var(--c-on-dark-2); text-transform: uppercase; }
.kiyi__title {
  position: relative;
  font-family: var(--f-display); font-weight: 500;
  font-size: 8.4cqw; line-height: 0.98; letter-spacing: -0.045em;
  margin-top: 2.4cqw;
}
.kiyi__search {
  position: absolute; left: 5cqw; right: 5cqw; bottom: 5cqw;
  display: grid; grid-template-columns: repeat(3, 1fr) auto;
  background: var(--c-white); color: var(--c-ink);
  border-radius: 1.2cqw; padding: 1.2cqw;
}
.kiyi__search span { padding: 1.2cqw 2.2cqw; font-size: 2.5cqw; font-weight: 500; border-right: 1px solid var(--c-line); }
.kiyi__search span:nth-child(3) { border-right: 0; }
.kiyi__search small { display: block; font-family: var(--f-mono); font-size: 1.8cqw; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-3); }
.kiyi__search em { font-style: normal; display: grid; place-items: center; padding: 0 4cqw; background: var(--c-ink); color: var(--c-paper); border-radius: 0.8cqw; font-size: 2.5cqw; }
.kiyi__section { display: flex; justify-content: space-between; align-items: baseline; padding: 6cqw 5cqw 3cqw; }
.kiyi__section h5 { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: 4cqw; letter-spacing: -0.03em; }
.kiyi__section span { font-family: var(--f-mono); font-size: 2cqw; color: var(--c-ink-3); }
.kiyi__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; padding: 0 3.5cqw; }
.kiyi__card { display: grid; gap: 1.4cqw; }
.kiyi__thumb { height: 18cqw; border-radius: 1.2cqw; background: var(--c-paper-2); position: relative; overflow: hidden; }
.kiyi__thumb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: var(--c-paper-3); }
.kiyi__card:nth-child(2) .kiyi__thumb::after { height: 62%; background: var(--c-graphite-4); }
.kiyi__card b { font-size: 2.6cqw; font-weight: 500; }
.kiyi__card small { font-family: var(--f-mono); font-size: 2cqw; color: var(--c-ink-3); }

/* ---------- Arkat — lojistik paneli (laptop) ---------- */
.scr-arkat { flex-direction: row; background: var(--c-white); font-size: 1.15cqw; }
.arkat__side {
  width: 17%;
  background: var(--c-graphite);
  color: var(--c-on-dark-2);
  padding: 2cqw 1.4cqw;
  display: flex; flex-direction: column; gap: 0.5cqw;
}
.arkat__logo { display: flex; align-items: center; gap: 0.8cqw; color: var(--c-on-dark); font-family: var(--f-display); font-weight: 600; font-size: 1.6cqw; letter-spacing: -0.03em; margin-bottom: 2cqw; }
.arkat__logo i { width: 1.4cqw; height: 1.4cqw; background: var(--c-accent); }
.arkat__nav { display: flex; align-items: center; gap: 0.9cqw; padding: 0.8cqw 0.9cqw; border-radius: 0.4cqw; }
.arkat__nav i { width: 1cqw; height: 1cqw; border: 1px solid currentColor; border-radius: 0.2cqw; }
.arkat__nav.is-on { background: var(--c-graphite-3); color: var(--c-on-dark); }
.arkat__main { flex: 1; padding: 2cqw 2.4cqw; display: flex; flex-direction: column; gap: 1.6cqw; min-width: 0; }
.arkat__top { display: flex; justify-content: space-between; align-items: center; }
.arkat__crumb { font-family: var(--f-mono); font-size: 0.95cqw; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-3); }
.arkat__h { font-family: var(--f-display); font-weight: 500; font-size: 2.2cqw; letter-spacing: -0.035em; margin-top: 0.3cqw; }
.arkat__search { width: 22%; height: 2.6cqw; border: 1px solid var(--c-line); border-radius: 0.4cqw; display: flex; align-items: center; padding: 0 0.9cqw; color: var(--c-ink-3); font-size: 1cqw; }
.arkat__kpis { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--c-line); border-radius: 0.5cqw; }
.arkat__kpi { padding: 1.2cqw 1.4cqw; border-left: 1px solid var(--c-line); }
.arkat__kpi:first-child { border-left: 0; }
.arkat__kpi small { display: block; font-family: var(--f-mono); font-size: 0.85cqw; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-3); }
.arkat__kpi b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 2.3cqw; letter-spacing: -0.04em; margin-top: 0.4cqw; }
.arkat__kpi em { font-style: normal; font-family: var(--f-mono); font-size: 0.9cqw; color: var(--c-accent); }
.arkat__chart { position: relative; flex: 1; min-height: 0; border: 1px solid var(--c-line); border-radius: 0.5cqw; padding: 1.2cqw 1.4cqw; display: flex; flex-direction: column; }
.arkat__chart-head { display: flex; justify-content: space-between; font-size: 1.05cqw; font-weight: 500; }
.arkat__chart-head span:last-child { font-family: var(--f-mono); font-weight: 400; font-size: 0.9cqw; color: var(--c-ink-3); }
.arkat__chart svg { flex: 1; width: 100%; height: auto; margin-top: 0.8cqw; overflow: visible; }
.arkat__table { display: grid; }
.arkat__row { display: grid; grid-template-columns: 1.1fr 2fr 1fr 0.8fr; gap: 1cqw; padding: 0.75cqw 0.4cqw; border-top: 1px solid var(--c-line); align-items: center; font-size: 1.05cqw; }
.arkat__row:first-child { border-top: 0; font-family: var(--f-mono); font-size: 0.85cqw; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-3); }
.arkat__row code { font-family: var(--f-mono); font-size: 0.95cqw; }
.arkat__pill { justify-self: start; padding: 0.2cqw 0.7cqw; border-radius: 0.3cqw; font-family: var(--f-mono); font-size: 0.8cqw; text-transform: uppercase; letter-spacing: 0.04em; border: 1px solid var(--c-line-strong); }
.arkat__pill.is-live { border-color: var(--c-accent); color: var(--c-accent); }

/* ---------- Nabız — klinik randevu (telefon) ---------- */
.scr-nabiz { background: var(--c-white); }
.nabiz__body { padding: 0 7cqw; display: flex; flex-direction: column; flex: 1; }
.nabiz__h { font-family: var(--f-display); font-weight: 500; font-size: 7.4cqw; letter-spacing: -0.04em; margin: 5cqw 0 5cqw; }
.nabiz__doc { display: grid; grid-template-columns: auto 1fr; gap: 3.4cqw; align-items: center; padding: 3.6cqw; border: 1px solid var(--c-line); border-radius: 3cqw; }
.nabiz__doc span { width: 11cqw; height: 11cqw; border-radius: 2.4cqw; background: var(--c-paper-3); }
.nabiz__doc b { display: block; font-size: 3.8cqw; font-weight: 500; }
.nabiz__doc small { display: block; font-size: 3cqw; color: var(--c-ink-3); }
.nabiz__month { display: flex; justify-content: space-between; margin: 7cqw 0 3cqw; font-size: 3.6cqw; font-weight: 500; }
.nabiz__month span { font-family: var(--f-mono); font-weight: 400; font-size: 3cqw; color: var(--c-ink-3); }
.nabiz__cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1.4cqw; }
.nabiz__cal i { font-style: normal; aspect-ratio: 1; display: grid; place-items: center; font-family: var(--f-mono); font-size: 2.9cqw; border-radius: 1.6cqw; color: var(--c-ink-2); }
.nabiz__cal i.off { color: var(--c-paper-3); }
.nabiz__cal i.on { background: var(--c-accent); color: #fff; }
.nabiz__slots { display: flex; gap: 2.4cqw; margin-top: 6cqw; }
.nabiz__slots span { flex: 1; text-align: center; padding: 2.4cqw 0; border: 1px solid var(--c-line); border-radius: 2cqw; font-family: var(--f-mono); font-size: 3cqw; }
.nabiz__slots span.on { border-color: var(--c-ink); background: var(--c-ink); color: var(--c-paper); }
.nabiz__cta { margin-top: auto; margin-bottom: 8cqw; height: 12cqw; border-radius: 2.6cqw; background: var(--c-ink); color: var(--c-paper); display: grid; place-items: center; font-size: 3.8cqw; font-weight: 500; }
.nabiz__done { display: grid; place-items: center; margin: 14cqw auto 6cqw; width: 20cqw; height: 20cqw; border: 1px solid var(--c-accent); border-radius: 50%; color: var(--c-accent); }
.nabiz__done svg { width: 8cqw; height: 8cqw; }
.nabiz__center { text-align: center; }
.nabiz__center .nabiz__h { margin: 0 0 2cqw; }
.nabiz__center p { font-size: 3.4cqw; color: var(--c-ink-3); }
.nabiz__details { margin-top: 9cqw; display: grid; }
.nabiz__details div { display: flex; justify-content: space-between; padding: 3.4cqw 0; border-top: 1px solid var(--c-line); font-size: 3.4cqw; }
.nabiz__details div:last-child { border-bottom: 1px solid var(--c-line); }
.nabiz__details dt { font-family: var(--f-mono); font-size: 2.9cqw; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-ink-3); }
.nabiz__cta--line { background: none; color: var(--c-ink); border: 1px solid var(--c-line-strong); }