/* Ölçüm tezgâhı · Site Düzeltme'nin çalışan örneği.
   Sitenin token'larını kullanır (/src/tokens.css); bu dosyada sabit renk ya da ölçü yok.
   Fiyat listesi levhasının kardeşi: levha basılı tarife, bu sayfa canlı basılan bir ölçüm fişi. */

/* Bu sayfanın yerel ölçüleri: bir kez adlandırılır, aşağıda yalnız adıyla kullanılır. */
[data-tezgah] {
  --tezgah-telefon: 24.375rem; /* 390 px: masaüstünde çerçevenin İÇ genişliği (ölçülen sayfa genişliği) */
  --tezgah-bezel: var(--space-3);
  --tezgah-cerceve-boy: clamp(32rem, calc(100svh - 12rem), 47.5rem);
  --tezgah-fis-azami: 44rem;
  --tezgah-liste-azami: 56rem;
  --tezgah-baslik-olcu: 16ch;
  /* Üç sütunda başlık sütuna sığar: 1440'ta ~56 px; en uzun sözcük "DÜZELTME." ~4,3 em = ~240 px */
  --tezgah-baslik-boy: clamp(2.75rem, calc(1.5rem + 2.2vw), 4.25rem);
  --tezgah-yirtik: 62%;
  --tezgah-yirtik-kenar: 64%;
  --tezgah-satir-sayisi: 9;
  /* Kod blokları: sitenin mono altkümesinde < > { } _ yok (cmap, 15 Eki); karışık yazı yerine sistem monosu */
  --tezgah-kod: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

[data-tezgah] h1 {
  font-size: var(--text-paket-baslik);
  line-height: var(--leading-versal);
  hyphens: none;
  margin: var(--space-0) var(--space-0) var(--space-6);
  max-width: var(--tezgah-baslik-olcu);
}

.tezgah-giris {
  font-size: var(--text-lede);
  line-height: var(--leading-body);
  max-width: var(--measure);
  margin: var(--space-0) var(--space-0) var(--space-5);
}

.tezgah-durust {
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-xs-okur);
  line-height: var(--leading-versal-kucuk);
  color: var(--muted);
  max-width: var(--measure-small);
  margin: var(--space-0);
  padding-inline-start: var(--space-4);
  border-inline-start: var(--tarife-cift-cizgi) solid var(--gold-koyu);
}

/* ---- Tezgâh: açıklama, telefon çerçevesi, ölçüm fişi. Masaüstünde üçü ilk ekranda yan yana.
   Telefonda fiş çerçevenin ÜSTÜNDE (denetim 15 Eki Y2: fişin ilk satırı 1.561 px'teydi, ilk ekranın iki katı aşağıda). ---- */
.tezgah {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "bas" "fis" "ekran";
  gap: var(--space-9);
  padding-block: var(--space-11) var(--space-section);
}

.tezgah-bas { grid-area: bas; }
.tezgah-ekran { grid-area: ekran; }
.fis { grid-area: fis; }

@media (max-width: 768px) {
  .tezgah {
    padding-block-start: var(--space-8);
  }
}

/* "Göster" sayfayı çerçeve bloğunun tepesine kaydırır; sürüm seçimi yapışkan başlığın altında kalmasın (denetim 15 Eki Y3). */
.tezgah-ekran {
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

/* Tek sütunda geniş ekranda çerçeve ortada ve tam telefon genişliğinde (denetim 15 Eki O9: 768'de 365 px kalıyordu). */
@media (min-width: 600px) and (max-width: 899px) {
  .tezgah-ekran {
    justify-self: center;
    width: calc(var(--tezgah-telefon) + var(--tezgah-bezel) * 2);
    max-width: var(--size-full);
  }
}

/* DOM sırası açıklama, fiş, çerçeve; görsel sıra da aynı (denetim 15 Eki Y5). */
@media (min-width: 900px) {
  .tezgah {
    grid-template-columns: minmax(0, 1fr) calc(var(--tezgah-telefon) + var(--tezgah-bezel) * 2);
    grid-template-areas: "bas bas" "fis ekran";
    column-gap: var(--space-grid-genis);
    align-items: start;
  }
}

@media (min-width: 1200px) {
  .tezgah {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) calc(var(--tezgah-telefon) + var(--tezgah-bezel) * 2);
    grid-template-areas: "bas fis ekran";
    padding-block-start: var(--space-9);
  }

  [data-tezgah] h1 {
    font-size: var(--tezgah-baslik-boy);
  }

  .tezgah-giris {
    font-size: var(--text-body);
  }
}

.surum-sec {
  display: inline-flex;
  margin: var(--space-0) var(--space-0) var(--space-4);
  padding: var(--space-0);
  border: var(--border-width) solid var(--text);
}

.surum-sec label {
  position: relative;
  display: block;
  cursor: pointer;
}

.surum-sec input {
  position: absolute;
  inset: var(--space-0);
  opacity: 0;
  margin: var(--space-0);
  cursor: pointer;
}

.surum-sec span {
  display: flex;
  align-items: center;
  min-height: var(--control-min-height);
  padding-inline: var(--space-6);
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-nav);
  line-height: var(--leading-versal);
  text-transform: uppercase;
  transition: background-color var(--sure-mikro) var(--egri-senet), color var(--sure-mikro) var(--egri-senet);
}

.surum-sec input:checked + span {
  background: var(--text);
  color: var(--surface);
}

.surum-sec input:focus-visible + span {
  outline: var(--focus-width) solid var(--register-odak);
  outline-offset: var(--focus-offset);
}

.cerceve-durum {
  margin: var(--space-0) var(--space-0) var(--space-3);
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-xs-okur);
  line-height: var(--leading-versal-kucuk);
  letter-spacing: var(--tracking-nav);
  color: var(--muted);
}

/* İç genişlik = ölçülen sayfa genişliği: masaüstünde 390 px (çerçeve kenarı dışarıda kalır). */
.cerceve {
  position: relative;
  box-sizing: content-box;
  width: min(calc(var(--size-full) - var(--tezgah-bezel) * 2), var(--tezgah-telefon));
  height: var(--tezgah-cerceve-boy);
  border: var(--tezgah-bezel) solid var(--arka-yuz);
  border-radius: var(--space-7);
  overflow: hidden;
  background: var(--arka-yuz);
  box-shadow: var(--golge-levha);
}

/* Telefonda çerçeve kenardan kenara: örnek site, ziyaretçinin kendi ekran genişliğinde açılır ve ölçülür. */
@media (max-width: 37.5rem) {
  .cerceve {
    box-sizing: border-box;
    width: calc(var(--size-full) + var(--space-gutter) * 2);
    margin-inline: calc(var(--space-gutter) * -1);
    border-inline-width: var(--space-0);
    border-block-width: var(--border-width);
    border-color: var(--text);
    border-radius: var(--radius-none);
    box-shadow: none;
  }
}

.cerceve iframe {
  position: absolute;
  inset: var(--space-0);
  width: var(--size-full);
  height: var(--size-full);
  border: var(--space-0);
  border-radius: var(--space-5);
  background: var(--tarife-kagit-secili);
}

@media (max-width: 37.5rem) {
  .cerceve iframe {
    border-radius: var(--radius-none);
  }
}

/* Dokunmatik ekranda örtü (betik ekler): parmak çerçevenin üstündeyken sayfa kayar; çerçeveyi gezmek bir dokunuşla
   açılır, "Gezmeyi bitir" ile kapanır. Denetim 15 Eki Y2: örtüsüz çerçeve dört kaydırmayı yutuyordu. */
.cerceve-ortu {
  position: absolute;
  inset: var(--space-0);
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space-5);
  border: var(--space-0);
  background: var(--transparent);
  cursor: pointer;
}

.cerceve-ortu span {
  padding: var(--space-3) var(--space-5);
  background: var(--arka-yuz);
  color: var(--arka-yuz-metin);
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-xs-okur);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-nav);
  text-transform: none;
  box-shadow: var(--golge-satir);
}

.cerceve[data-ortu="acik"] iframe {
  pointer-events: none;
}

.cerceve[data-ortu="kapali"] .cerceve-ortu {
  display: none;
}

.cerceve-bitir {
  margin-block-start: var(--space-3);
}

.cerceve-bitir[hidden] {
  display: none;
}

/* Sürüm seçimi JS'siz çalışır. :has desteklemeyen tarayıcıda iki çerçeve üst üste durur (sonra üstte). */
.tezgah-ekran:has(input[value="sonra"]:checked) #cerceve-once,
.tezgah-ekran:has(input[value="once"]:checked) #cerceve-sonra,
.tezgah-ekran:has(input[value="sonra"]:checked) .cd-once,
.tezgah-ekran:has(input[value="once"]:checked) .cd-sonra {
  visibility: hidden;
}

.cerceve-durum {
  display: grid;
}

.cerceve-durum > span {
  grid-area: 1 / 1;
}

.cerceve-not {
  margin: var(--space-4) var(--space-0) var(--space-0);
  font-size: var(--text-xs-okur);
  line-height: var(--leading-body);
  color: var(--muted);
  max-width: var(--tezgah-telefon);
}

.cerceve-not a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-min-height);
  padding-inline: var(--space-3);
  text-decoration: underline;
  text-underline-offset: var(--tarife-alti-cizgi);
}

/* Klavyeyle gelen, örnek sitenin içinden geçmeden fişe atlayabilir; odaklanınca görünür. */
.cerceve-atla {
  position: absolute;
  width: var(--space-hairline);
  height: var(--space-hairline);
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.cerceve-atla:focus-visible {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--control-min-height);
  margin-block-end: var(--space-3);
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-xs-okur);
  text-decoration: underline;
}

.fis h2:focus {
  outline: none;
}

.fis h2:focus-visible {
  outline: var(--focus-width) solid var(--register-odak);
  outline-offset: var(--focus-offset);
}

/* ---- Ölçüm fişi ---- */
/* Fiş kendi genişliğini sorgulatır: satır düzeni ekranın değil fişin genişliğine bağlıdır (denetim 15 Eki E8:
   1200–1366 px'te fiş telefondakinden dardı, satırlar üst üste biniyordu). */
.fis {
  position: relative;
  container: fis / inline-size;
  background: var(--tarife-kagit);
  box-shadow: var(--golge-levha);
  padding: var(--space-7) var(--tarife-ic) var(--space-9);
  max-width: var(--tezgah-fis-azami);
}

.fis-ust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin-block-end: var(--space-3);
}

/* Yırtılmış alt kenar: fiş kâğıttan koparılmış gibi. */
.fis::after {
  content: "";
  position: absolute;
  inset-inline: var(--space-0);
  inset-block-end: calc(var(--space-3) * -1);
  height: var(--space-3);
  background: radial-gradient(circle at 50% 0, var(--tarife-kagit) var(--tezgah-yirtik), var(--transparent) var(--tezgah-yirtik-kenar)) 0 0 / var(--space-5) var(--size-full) repeat-x;
}

.fis h2 {
  font-size: var(--text-kol);
  line-height: var(--leading-versal);
  margin: var(--space-0);
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

/* Fişin kendi bağlamı (hukuk kapısı 15 Eki, Ş3): ekran görüntüsünde de sayıların kime ait olduğu okunur. */
.fis-baglam {
  margin: var(--space-0) var(--space-0) var(--space-2);
  font-size: var(--text-xs-okur);
  line-height: var(--leading-body);
  color: var(--text);
}

.fis-durum {
  margin: var(--space-0) var(--space-0) var(--space-5);
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-xs-okur);
  line-height: var(--leading-versal-kucuk);
  letter-spacing: var(--tracking-nav);
  color: var(--gold-koyu);
}

.fis-satirlar {
  list-style: none;
  margin: var(--space-0);
  padding: var(--space-0);
  border-block-start: var(--tarife-cift-cizgi) double var(--text);
}

/* Ad sütunu en uzun sözcüğünden dar olamaz: sığmazsa yazı değerin altına girmez (E8). Sığmama hâli aşağıdaki
   kapsayıcı sorgusuyla iki satıra iner. */
.fis-satir {
  display: grid;
  grid-template-columns: minmax(min-content, 1fr) auto auto;
  column-gap: var(--space-4);
  row-gap: var(--space-hairline);
  align-items: baseline;
  padding-block: var(--space-3);
  border-block-end: var(--border-width) dashed var(--cizgi);
}

.fis-ad {
  font-size: var(--text-base);
  line-height: var(--leading-heading);
}

.fis-deger {
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-base);
  line-height: var(--leading-heading);
  white-space: nowrap;
  text-align: end;
}

.fis-once {
  color: var(--muted);
}

.fis-ok {
  color: var(--gold-koyu);
  padding-inline: var(--space-2);
}

.fis-sonra {
  font-weight: var(--weight-bold);
}

.fis-not {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-xs-okur);
  line-height: var(--leading-versal-kucuk);
  color: var(--muted);
  overflow-wrap: anywhere;
}

.fis-makine {
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-xs-okur);
  color: var(--gold-koyu);
}

/* Satırdan çerçevedeki yerine (denetim 15 Eki Y3). */
.fis-goster {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  min-height: var(--control-min-height);
  padding: var(--space-0) var(--space-2);
  border: var(--space-0);
  background: var(--transparent);
  color: var(--gold-koyu);
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-xs-okur);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-nav);
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: var(--tarife-alti-cizgi);
  cursor: pointer;
}

.fis-kopru {
  margin: var(--space-4) var(--space-0) var(--space-0);
  padding-inline-start: var(--space-3);
  border-inline-start: var(--tarife-cift-cizgi) solid var(--gold-koyu);
  font-size: var(--text-xs-okur);
  line-height: var(--leading-body);
  color: var(--text);
}

/* Eşik fişin İÇ genişliğidir (dolgu hariç). Üç sütun en geniş satırda ad sözcüğü + değer + Göster + iki boşluk ister;
   ölçüldü 15 Eki gece: kartela satırı en geniş. Eşik bu toplamın üstünde tutulur. */
@container fis (max-width: 27rem) {
  .fis-satir {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .fis-goster {
    grid-column: 2;
  }

  .fis-deger {
    grid-column: 1 / -1;
    text-align: start;
    white-space: normal;
  }
}

.fis[data-durum="olculuyor"] .fis-deger {
  opacity: var(--opacity-muted);
}

.fis-dip {
  margin: var(--space-5) var(--space-0) var(--space-0);
  font-size: var(--text-xs-okur);
  line-height: var(--leading-body);
  color: var(--muted);
}

.fis-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-start: var(--space-5);
}

.fis-yeniden {
  cursor: pointer;
}

.fis-yeniden:disabled {
  opacity: var(--opacity-muted);
  cursor: progress;
}

/* Ölçüm bitince basılan mühür. JS yoksa ya da ölçüm bitmediyse görünmez. */
/* Mühür fişin tepesinde, başlığın sağında: ilk ekranda görünür (denetim 15 Eki O10: altta basılıyor, ekran dışında kalıyordu).
   Akışın içinde durur, mutlak konumda değil: dar fişte başlığın altına iner, bağlam satırına basmaz (Y6). Dikey payı,
   döndürülmüş kutunun köşeleri komşu satıra değmesin diye. */
.fis-muhur {
  margin-block: var(--space-2);
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border: var(--tarife-cift-cizgi) double var(--muhur-kenar);
  background: var(--muhur-isik);
  color: var(--muhur-murekkep);
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-nav);
  line-height: var(--leading-versal);
  text-transform: uppercase;
  transform: rotate(var(--visual-angle-a));
  box-shadow: var(--golge-muhur);
  opacity: 0;
}

.fis[data-durum="olculdu"] .fis-muhur {
  opacity: 1;
}

.fis-yontem {
  margin-block-start: var(--space-7);
  border-block-start: var(--border-width) solid var(--cizgi);
  padding-block-start: var(--space-4);
}

.fis-yontem summary {
  cursor: pointer;
  min-height: var(--control-min-height);
  display: flex;
  align-items: center;
  font-weight: var(--weight-bold);
}

.fis-yontem ol {
  margin: var(--space-3) var(--space-0) var(--space-0);
  padding-inline-start: var(--space-6);
  font-size: var(--text-xs-okur);
  line-height: var(--leading-body);
}

.fis-yontem li + li {
  margin-block-start: var(--space-2);
}

@media (prefers-reduced-motion: no-preference) {
  .fis[data-durum="olculdu"] .fis-satir {
    animation: fis-bas var(--sure-reveal) var(--egri-senet) both;
    animation-delay: calc(var(--sira, 0) * var(--reveal-ritim));
  }

  .fis[data-durum="olculdu"] .fis-muhur {
    animation: fis-muhur var(--sure-muhur) var(--egri-muhur) both;
    animation-delay: calc(var(--tezgah-satir-sayisi) * var(--reveal-ritim) + var(--sure-reveal));
  }
}

@keyframes fis-bas {
  from {
    opacity: 0;
    transform: translateY(calc(var(--reveal-kayma) * -1));
  }
}

@keyframes fis-muhur {
  from {
    opacity: 0;
    transform: rotate(var(--visual-angle-a)) scale(var(--muhur-overshoot));
  }
}

/* ---- Ne değişti ---- */
.degisiklik,
.sinir,
.tezgah-cagri {
  padding-block-end: var(--space-section);
}

.degisiklik h2,
.sinir h2,
.tezgah-cagri h2 {
  font-size: var(--text-kol);
  line-height: var(--leading-versal);
  margin: var(--space-0) var(--space-0) var(--space-5);
}

/* Atlama bağlantısının hedefi yapışkan başlığın altında kalmasın (denetim 15 Eki O17). */
.degisiklik h2 {
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.degisiklik-giris,
.tezgah-cagri p {
  max-width: var(--measure);
  margin: var(--space-0) var(--space-0) var(--space-7);
}

.duzeltme-liste {
  list-style: none;
  margin: var(--space-0);
  padding: var(--space-0);
  border-block-start: var(--tarife-cift-cizgi) double var(--text);
  max-width: var(--tezgah-liste-azami);
}

.duzeltme-liste > li {
  border-block-end: var(--border-width) solid var(--cizgi);
}

.duzeltme-liste summary {
  display: grid;
  grid-template-columns: var(--tarife-no) minmax(0, 1fr) var(--tarife-no);
  column-gap: var(--space-4);
  row-gap: var(--space-hairline);
  align-items: baseline;
  padding-block: var(--space-4);
  min-height: var(--control-min-height);
  cursor: pointer;
  list-style: none;
}

.duzeltme-liste summary::-webkit-details-marker {
  display: none;
}

.duz-no {
  grid-row: span 2;
  font-family: var(--font-mono);
  font-stretch: 75%;
  color: var(--gold-koyu);
}

.duz-kapsam {
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-xs-okur);
  line-height: var(--leading-versal-kucuk);
  letter-spacing: var(--tracking-nav);
  color: var(--muted);
}

.duz-baslik {
  font-size: var(--text-lede);
  line-height: var(--leading-heading);
}

/* Açma işareti kendi sütununda: başlık satıra sığmayınca tek başına alt satıra düşmesin. */
.duz-isaret {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  color: var(--gold-koyu);
  font-size: var(--text-lede);
  line-height: var(--leading-heading);
}

.duz-isaret::before {
  content: "+";
}

details[open] > summary .duz-isaret::before {
  content: "−";
}

.duz-govde {
  padding: var(--space-0) var(--space-0) var(--space-6) calc(var(--tarife-no) + var(--space-4));
}

.duz-govde > p:first-child {
  max-width: var(--measure);
  margin: var(--space-0) var(--space-0) var(--space-5);
}

.duz-etiket {
  margin: var(--space-4) var(--space-0) var(--space-2);
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-xs-okur);
  letter-spacing: var(--tracking-nav);
  color: var(--muted);
}

.duz-govde pre {
  margin: var(--space-0);
  padding: var(--space-4);
  background: var(--arka-yuz);
  color: var(--arka-yuz-metin);
  font-family: var(--tezgah-kod);
  font-size: var(--text-nav);
  line-height: var(--leading-versal-kucuk);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.duz-yok {
  margin: var(--space-0);
  color: var(--muted);
}

@media (max-width: 30rem) {
  .duz-govde {
    padding-inline-start: var(--space-0);
  }
}

/* ---- Sınır ve çağrı ---- */
.sinir ul {
  max-width: var(--measure);
  margin: var(--space-0);
  padding-inline-start: var(--space-6);
}

.sinir li + li {
  margin-block-start: var(--space-3);
}

.cagri-dugmeler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}