/* ---------------------------------------------------------------------------
   Kot 92 anasayfa yuzeyi (CP32)
   -------------------------------------------------------------------------
   CP31'de Kot katmani yalnizca iki kisa kodun bulundugu sayfada yukleniyordu,
   bu yuzden anasayfada hicbir sey degismedi. Burasi eksik olan parca: tasarimin
   kendisini basan tam bir yuzey.

   altitude.css'in uzerine biner ve onun token'larini kullanir. Ayri dosya
   olmasinin sebebi, urun izgarasi olan bir sayfanin bu sayfaya ozel hero ve
   hesap makinesi kurallarini yuklemek zorunda kalmamasi.
--------------------------------------------------------------------------- */

.wm-kothome {
  --kot-void: #070a0d;
  --kot-steel: #10161b;
  --kot-steel-2: #171f26;
  --kot-raised: #1e2830;
  --kot-hairline: #2b3740;
  --kot-hairline-2: #3c4a55;
  --kot-ink: #dfe7ec;
  --kot-ink-dim: #8695a2;
  --kot-ink-faint: #5a6873;
  --kot-hivis: #e4ff3b;
  --kot-sky: #74aecb;
  --kot-alarm: #ff5b3d;
  --kot-amber: #ffa83a;
  --kot-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  --kot-ease: cubic-bezier(.16, 1.2, .3, 1);

  background: var(--kot-void);
  color: var(--kot-ink);
  position: relative;
  isolation: isolate;
  margin-block: 0;
}

.wm-kothome::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% 0%, rgb(116 174 203 / 9%), transparent 60%),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 1.4%) 0 1px, transparent 1px 3px);
}

.wm-kothome__inner {
  width: min(1120px, 100% - 3rem);
  margin-inline: auto;
}

/* --- Kot rayi ------------------------------------------------------------ */
/*
  Viewport'a sabitlenmiyor: WordPress yonetici cubugu ve tema basligi zaten
  ustte duruyor, fixed bir ray onlarin altina giriyor. Bunun yerine bolumun
  icinde sticky duruyor.
*/

.wm-kothome__rail {
  position: sticky;
  top: 6rem;
  float: left;
  width: 4.25rem;
  margin-inline-start: -5.5rem;
  border-inline-end: 1px solid var(--kot-hairline);
  padding-inline-end: 0.75rem;
  text-align: end;
}

.wm-kothome__m {
  display: block;
  font-family: var(--kot-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--kot-hivis);
  letter-spacing: -0.04em;
  line-height: 1;
}

.wm-kothome__unit {
  display: block;
  font-family: var(--kot-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kot-ink-faint);
  margin-top: 0.25rem;
}

@media (max-width: 60rem) {
  .wm-kothome__rail { display: none; }
}

/* --- Hero ---------------------------------------------------------------- */

.wm-kothero {
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 7vw, 5.5rem);
}

.wm-kothero__eyebrow {
  font-family: var(--kot-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--kot-sky);
  margin: 0 0 1.5rem;
}

.wm-kothero__title {
  font-size: clamp(2.75rem, 9vw, 7rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0;
  color: var(--kot-ink);
  text-wrap: balance;
}

.wm-kothero__title span {
  display: block;
  font-weight: 500;
  color: var(--kot-ink-dim);
  text-transform: none;
}

.wm-kothero__sub {
  margin: 1.75rem 0 0;
  max-width: 56ch;
  color: var(--kot-ink-dim);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
}

.wm-kothero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.wm-kotbtn {
  display: inline-block;
  padding: 0.8rem 1.35rem;
  border-radius: 2px;
  font-family: var(--kot-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--kot-hairline-2);
  color: var(--kot-ink);
  transition: background 180ms, color 180ms, border-color 180ms;
}

.wm-kotbtn:hover { background: var(--kot-raised); color: var(--kot-ink); }

/* Sayfadaki tek birincil eylem. Sarinin dort isinden biri. */
.wm-kotbtn--primary {
  background: var(--kot-hivis);
  border-color: var(--kot-hivis);
  color: var(--kot-void);
}

.wm-kotbtn--primary:hover { filter: brightness(1.08); background: var(--kot-hivis); color: var(--kot-void); }

/* --- Bolum basligi ------------------------------------------------------- */

.wm-kotsec { padding-block: clamp(3rem, 7vw, 5.5rem); border-top: 1px solid var(--kot-hairline); }

.wm-kotsec__tag {
  font-family: var(--kot-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kot-ink-faint);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.wm-kotsec__tag::before {
  content: "";
  width: 1.375rem;
  height: 1px;
  background: var(--kot-hairline-2);
}

.wm-kotsec__title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
  color: var(--kot-ink);
  text-wrap: balance;
}

.wm-kotsec__lede { max-width: 64ch; color: var(--kot-ink-dim); margin: 0; }

/* --- Dusus mesafesi hesabi ----------------------------------------------- */

.wm-clear {
  display: grid;
  grid-template-columns: 20rem 1fr;
  gap: 2rem;
  margin-top: 2rem;
}

@media (max-width: 56rem) { .wm-clear { grid-template-columns: 1fr; } }

.wm-panel {
  background: linear-gradient(180deg, var(--kot-steel-2), var(--kot-steel));
  border: 1px solid var(--kot-hairline);
  border-radius: 3px;
}

.wm-panel__head {
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--kot-hairline);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--kot-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kot-ink-faint);
}

.wm-panel__body { padding: 1.25rem; }

.wm-ctl { display: block; margin-bottom: 1.35rem; }
.wm-ctl:last-child { margin-bottom: 0; }

.wm-ctl__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.wm-ctl__name { font-size: 0.8125rem; color: var(--kot-ink-dim); }

.wm-ctl__val {
  font-family: var(--kot-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
  color: var(--kot-ink);
}

.wm-kothome input[type="range"] {
  appearance: none;
  width: 100%;
  height: 1.6rem;
  background: transparent;
  margin: 0;
  display: block;
  cursor: ew-resize;
}

.wm-kothome input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  background: var(--kot-hairline-2);
  border-radius: 2px;
}

.wm-kothome input[type="range"]::-moz-range-track {
  height: 3px;
  background: var(--kot-hairline-2);
  border-radius: 2px;
}

.wm-kothome input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 0.95rem;
  height: 1.4rem;
  margin-top: -0.62rem;
  background: var(--kot-ink);
  border: 0;
  border-radius: 1px;
}

.wm-kothome input[type="range"]::-moz-range-thumb {
  width: 0.95rem;
  height: 1.4rem;
  background: var(--kot-ink);
  border: 0;
  border-radius: 1px;
}

.wm-seg { display: flex; border: 1px solid var(--kot-hairline-2); border-radius: 2px; overflow: hidden; }

.wm-seg button {
  flex: 1;
  padding: 0.6rem 0.35rem;
  background: transparent;
  border: 0;
  border-inline-end: 1px solid var(--kot-hairline-2);
  color: var(--kot-ink-dim);
  font-family: var(--kot-mono);
  font-size: 0.6875rem;
  cursor: pointer;
}

.wm-seg button:last-child { border-inline-end: 0; }
.wm-seg button:hover { background: var(--kot-raised); color: var(--kot-ink); }
.wm-seg button[aria-pressed="true"] { background: var(--kot-ink); color: var(--kot-void); font-weight: 600; }

.wm-diagram {
  position: relative;
  height: 26rem;
  background: linear-gradient(180deg, rgb(116 174 203 / 7%), transparent 55%), var(--kot-void);
  border: 1px solid var(--kot-hairline);
  border-radius: 3px;
  overflow: hidden;
}

.wm-diagram__ground {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2.125rem;
  background: repeating-linear-gradient(135deg, var(--kot-raised) 0 6px, var(--kot-steel) 6px 12px);
  border-top: 2px solid var(--kot-hairline-2);
}

.wm-diagram__stack {
  position: absolute;
  inset-inline-start: 1.6rem;
  width: 7.4rem;
  bottom: 2.125rem;
  display: flex;
  flex-direction: column-reverse;
}

.wm-band {
  position: relative;
  transition: height 500ms var(--kot-ease);
  border-top: 1px solid rgb(0 0 0 / 50%);
  min-height: 2px;
}

.wm-band span {
  position: absolute;
  inset-inline-start: 8.1rem;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--kot-mono);
  font-size: 0.6875rem;
  color: var(--kot-ink-dim);
}

.wm-band b { color: var(--kot-ink); font-weight: 500; }

.wm-band--free { background: rgb(255 91 61 / 42%); }
.wm-band--deploy { background: rgb(255 168 58 / 40%); }
.wm-band--stretch { background: rgb(116 174 203 / 34%); }
.wm-band--body { background: rgb(116 174 203 / 20%); }
.wm-band--margin { background: repeating-linear-gradient(45deg, rgb(228 255 59 / 24%) 0 5px, transparent 5px 10px); }

.wm-diagram__anchor {
  position: absolute;
  inset-inline-start: 0.9rem;
  width: 8.9rem;
  height: 2px;
  background: var(--kot-sky);
  transition: bottom 500ms var(--kot-ease);
}

.wm-verdict {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border-radius: 2px;
  border: 1px solid var(--kot-hairline-2);
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  flex-wrap: wrap;
  transition: border-color 300ms, background 300ms;
}

.wm-verdict__state { font-size: 1.625rem; font-weight: 900; letter-spacing: 0.02em; }
.wm-verdict__note { font-size: 0.875rem; color: var(--kot-ink-dim); }

.wm-verdict[data-state="ok"] { border-color: rgb(228 255 59 / 50%); background: rgb(228 255 59 / 5%); }
.wm-verdict[data-state="ok"] .wm-verdict__state { color: var(--kot-hivis); }
.wm-verdict[data-state="fail"] { border-color: rgb(255 91 61 / 60%); background: rgb(255 91 61 / 7%); }
.wm-verdict[data-state="fail"] .wm-verdict__state { color: var(--kot-alarm); }

.wm-caveat {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--kot-ink-faint);
  border-inline-start: 2px solid var(--kot-amber);
  padding-inline-start: 0.75rem;
  max-width: 64ch;
}

/* --- Odak ve hareket ----------------------------------------------------- */

.wm-kothome a:focus-visible,
.wm-kothome button:focus-visible,
.wm-kothome input:focus-visible {
  outline: 2px solid var(--kot-hivis);
  outline-offset: 3px;
}

@media (forced-colors: active) {
  .wm-panel,
  .wm-diagram,
  .wm-verdict,
  .wm-seg { border: 1px solid CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  .wm-band,
  .wm-diagram__anchor { transition: none; }
}