/* 15 Eki akşam: levha sayfanın nesnesidir (eski maskot görselinin yeri); masaüstünde yedi sütun alır, başlık beş sütunda
   biraz küçülür (--text-paket-baslik). Levha beş sütunda kalınca bant "TL + K / DV" diye bölünüyordu (1440'ta ölçüldü). */
[data-paketler]:where(main) .paket-bas {
  padding-block: var(--space-11);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: var(--space-grid-genis);
  align-items: start;
}

/* Tur E (14 Eki): baş bloğunda dokuz öğe var (künye, h1, giriş, şerit, alıcı, kim, damga, çekince, soru kutusu).
   15 Eki akşam: maskot görseli kalktı, yerine fiyat listesi levhası geldi. Levha ve hemen ardındaki alıcı satırı ("İşletmelere ve işini kuranlara", 20 Eki) sağ sütunda ilk satırdan başlar; öteki öğeler sol sütunda. Masaüstünde altı fiyatın hepsi ilk ekrandadır. */
[data-paketler]:where(main) .paket-bas > :not(.tarife-sutun) {
  grid-column: 1;
}

[data-paketler]:where(main) .tarife-sutun {
  grid-column: 2;
  grid-row: 1 / span 12;
  min-width: var(--space-0);
}

/* 981 px altında tek sütun: levha başlığın hemen altında, tam genişlikte */
@media (max-width: 980px) {
  [data-paketler]:where(main) .paket-bas {
    display: block;
  }
}

@media (max-width: 768px) {
  /* 15 Eki (denetim P): telefonda üst boşluk 80 → 40 px; 390×700'de iki fiyat ilk ekrana girsin */
  [data-paketler]:where(main) .paket-bas {
    padding-block-start: var(--space-8);
  }
}

[data-paketler]:where(main) h1 {
  font-size: var(--text-paket-baslik);
  line-height: var(--leading-versal);
  text-transform: uppercase;
  hyphens: none;
}

[data-paketler]:where(main) .paket-bas > p:not(.section-kunye) {
  margin-block-start: var(--space-6);
}

[data-paketler]:where(main) .paket-grup {
  padding-block-end: var(--space-11);
}

[data-paketler]:where(main) h2 {
  padding-block: var(--space-4);
  border-block: var(--border-width) solid var(--cizgi);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-versal-kucuk);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}

[data-paketler]:where(main) .grup-not {
  margin-block-start: var(--space-6);
}

[data-paketler]:where(main) article[id] {
  scroll-margin-block-start: calc(var(--header-height) + var(--space-4));
}

[data-paketler]:where(main) .yaprak {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-grid);
  padding-block: var(--space-10);
  border-block-end: var(--border-width) solid var(--cizgi);
}

[data-paketler]:where(main) .yaprak-sol {
  grid-column: 1 / 5;
  min-width: 0;
}

[data-paketler]:where(main) .yaprak-alanlar,
[data-paketler]:where(main) .yaprak > .talep-blogu,
[data-paketler]:where(main) .yaprak > .button {
  grid-column: 6 / 13;
  min-width: 0;
}

[data-paketler]:where(main) h3,
[data-paketler]:where(main) h4 {
  font-size: var(--text-service);
  line-height: var(--leading-versal);
}

[data-paketler]:where(main) dt {
  color: var(--muted);
  font-family: var(--font-mono);
  font-stretch: condensed;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-versal-kucuk);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}

[data-paketler]:where(main) dd,
[data-paketler]:where(main) li,
[data-paketler]:where(main) p:not(.section-kunye) {
  max-width: var(--measure);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  overflow-wrap: anywhere;
}

[data-paketler]:where(main) dl,
[data-paketler]:where(main) dd {
  margin: 0;
}

[data-paketler]:where(main) .yaprak-kime {
  margin-block-start: var(--space-6);
}

[data-paketler]:where(main) .yaprak-kime dd {
  margin-block-start: var(--space-3);
}

[data-paketler]:where(main) .alan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: var(--space-3) var(--space-grid);
  padding-block-end: var(--space-6);
}

[data-paketler]:where(main) .alan dd {
  grid-column: 2;
  min-width: 0;
}

[data-paketler]:where(main) .alan-kalan {
  border-block-start: var(--border-width) solid var(--text);
  padding-block: var(--space-4);
}

[data-paketler]:where(main) .alan-kalan dt {
  color: var(--text);
}

[data-paketler]:where(main) ol,
[data-paketler]:where(main) .serhler {
  margin: 0;
  padding-inline-start: var(--space-6);
}

[data-paketler]:where(main) li + li {
  margin-block-start: var(--space-4);
}

[data-paketler]:where(main) .talep-blogu {
  padding: var(--space-6);
  background: var(--surface);
  color: var(--text);
  scroll-margin-block-start: calc(var(--header-height) + var(--space-4));
}

[data-paketler]:where(main) .talep-blogu > * + *,
[data-paketler]:where(main) .talep-sonuc > * + * {
  margin-block-start: var(--space-6);
}

[data-paketler]:where(main) .field p {
  margin-block-start: var(--space-3);
}

[data-paketler]:where(main) .alan-hata {
  color: var(--status-error);
  font-weight: var(--weight-bold);
}

[data-paketler]:where(main) .talep-adres a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-min-height);
  max-width: var(--size-full);
  text-decoration: underline;
}

[data-paketler]:where(main) .button {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: var(--control-min-height);
  max-width: var(--size-full);
  padding: var(--space-3) var(--space-5);
  border: var(--border-width) solid var(--text);
  border-radius: var(--radius-none);
  background: var(--transparent);
  color: var(--text);
  font-family: var(--font-mono);
  font-stretch: condensed;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-nav);
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  transform: none;
  cursor: pointer;
}

[data-paketler]:where(main) .button-primary {
  background: var(--text);
  color: var(--surface);
}

/* 060 · N3: .button'daki all: unset, .talep-sonuc > * + * aralığını siliyordu; düğmeler kendi satırında, aralıklı */
[data-paketler]:where(main) .talep-sonuc > .button {
  display: flex;
  inline-size: fit-content;
  margin-block-start: var(--space-4);
}

[data-paketler]:where(main) .button:focus-visible {
  outline: var(--focus-width) solid var(--odak);
  outline-offset: var(--focus-offset);
}

/* T-kitre: yaprak ızgarası */
[data-paketler]:where(main) .kitre-kaydi {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6) var(--space-grid);
  padding-block: var(--space-10);
}

[data-paketler]:where(main) .kitre-kaydi > * {
  grid-column: 6 / 13;
  min-width: 0;
}

[data-paketler]:where(main) .kitre-kaydi > h3 {
  grid-column: 1 / 5;
}

[data-paketler]:where(main) .kitre-kaydi img {
  display: block;
  width: var(--size-full);
  height: auto;
}

[data-paketler]:where(main) .konsept-etiketi {
  position: static;
}

[data-paketler]:where(main) [hidden] {
  display: none;
}

/* 15 Eki akşam: FİYAT LİSTESİ LEVHASI (eski "Bir bakışta" şeridi). Sayfa kâğıdından bir ton açık, basılı bir yaprak:
   çift çerçeve, başlıkta çift çizgi, köşede P2 gönderisinin altın mührü. Her satır bir details/summary'dir; satır seçilince
   öne çıkar (açık kâğıt, altın kenar, numaranın çevresinde mürekkep halkası) ve üç alıntı satırı açılır.
   Bedel tek metin düğümüdür (S-kdv ve S-serit bandı etiketsiz okur), biçim düğümün kendisinde. */
[data-paketler]:where(main) .tarife {
  container: tarife / inline-size;
  position: relative;
  margin-block-start: var(--space-6);
  padding: var(--tarife-ic) var(--tarife-ic) var(--space-4);
  background: var(--tarife-kagit);
  box-shadow: var(--golge-levha);
}

@media (min-width: 981px) {
  [data-paketler]:where(main) .tarife {
    margin-block-start: var(--space-0);
  }
}

/* Telefonda dikey pay dar: 390×844'te üç, 390×700'de iki fiyat alttaki teklif şeridinin üstünde tam görünür (denetim P).
   İlk sürümde üçüncü bant şeridin 8 px altında kalıyordu; levha iç boşluğu, satır boşluğu ve bant aralığı daraldı. */
@media (max-width: 768px) {
  [data-paketler]:where(main) .tarife {
    --tarife-ic: var(--space-4);
    --tarife-satir-ic: var(--space-2);
    --tarife-bedel-ara: var(--tarife-bedel-ara-dar);
    padding-block-end: var(--space-3);
  }
}

/* Tek sütunda levha başlığın hemen altında; mühür levhanın üstüne taşar. 15 Eki denetimi (E1): 888–980 px'te 104 px'lik mühür
   39,5 px yukarı taşıyıp başlığın son satırına ("KALIR.") değiyordu, levhanın üst boşluğu 24 px'ti. Tek sütunun her
   genişliğinde taşma payı küçük, telefonun üstündeki tek sütunda boşluk büyük: taşma ≤ 0,28 × 108 = 30 px < 40 px. */
@media (max-width: 980px) {
  [data-paketler]:where(main) .tarife {
    --muhur-tasma-ust: var(--muhur-tasma-ust-dar);
  }
}

@media (min-width: 769px) and (max-width: 980px) {
  [data-paketler]:where(main) .tarife {
    margin-block-start: var(--space-8);
  }
}

/* Basılı levhanın iç çerçevesi: kenardan birkaç piksel içeride ince çizgi */
[data-paketler]:where(main) .tarife::before {
  content: "";
  position: absolute;
  inset: var(--tarife-cerceve);
  border: var(--border-width) solid var(--cizgi);
  pointer-events: none;
}

[data-paketler]:where(main) .tarife-bas {
  padding-inline-end: calc(var(--muhur-cap) * var(--muhur-ic-oran) - var(--tarife-ic) + var(--space-2));
  padding-block-end: var(--tarife-satir-ic);
  border-block-end: var(--tarife-cift-cizgi) double var(--text);
}

@container tarife (min-width: 30rem) {
  [data-paketler]:where(main) .tarife-bas {
    --muhur-cap: var(--muhur-cap-genis);
  }
}

[data-paketler]:where(main) .tarife h2 {
  padding: var(--space-0);
  border: 0;
  font-family: var(--font-body);
  font-size: var(--text-tarife-baslik);
  font-weight: var(--weight-heavy);
  line-height: var(--leading-versal-kucuk);
  letter-spacing: var(--tracking-tarife);
  text-transform: uppercase;
}

[data-paketler]:where(main) .tarife p.tarife-soru {
  margin-block-start: var(--space-hairline);
  max-width: none;
  color: var(--muted);
  font-size: var(--text-tarife-soru);
  line-height: var(--leading-heading);
}

/* Mühür: P2'deki altın mühürle aynı nesne; ibaresi GÖZ ÖNÜNDE (kopya kaydı, Tur F). Metni düğüm değil CSS içeriğidir
   (dal ayıklayıcı iç içe düğüm ayıklamaz) ve yalnız fiyat dalında görünür. Mürekkep rengi altın üstünde ≥ 6:1. */
[data-paketler]:where(main) .tarife-muhur {
  position: absolute;
  inset-block-start: calc(var(--muhur-cap) * var(--muhur-tasma-ust));
  inset-inline-end: calc(var(--muhur-cap) * var(--muhur-tasma-yan));
  display: grid;
  place-content: center;
  justify-items: center;
  z-index: 1;
  inline-size: var(--muhur-cap);
  aspect-ratio: var(--ratio-square);
  border-radius: 50%;
  /* Katmanlar üstten alta: parıltı · kazınmış iç halka · altın disk · tırtıllı kenar (madeni para kenarı, diskin dışında
     kalan halkada görünür). 15 Eki denetimi Y4: hazır "altın rozet" tarifi, hiyerarşisiz iki eşit satır. */
  background:
    radial-gradient(circle at 34% 28%, var(--muhur-parilti), transparent 42%),
    radial-gradient(circle closest-side, transparent var(--muhur-halka-ic), var(--muhur-kenar) var(--muhur-halka-ic) var(--muhur-halka-dis), transparent var(--muhur-halka-dis)),
    radial-gradient(circle closest-side, var(--muhur-isik), var(--gold) 55%, var(--muhur-kenar) var(--muhur-disk), transparent var(--muhur-disk)),
    repeating-conic-gradient(var(--muhur-kenar) 0deg var(--muhur-tirtil), var(--muhur-isik) var(--muhur-tirtil) calc(var(--muhur-tirtil) * 2));
  box-shadow: var(--golge-muhur);
  color: var(--muhur-murekkep);
  font-family: var(--font-body);
  font-weight: var(--weight-heavy);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display);
  transform: rotate(var(--visual-angle-a));
  pointer-events: none;
}

/* Hiyerarşi: üstte küçük ve aralıklı GÖZ, altta iri ÖNÜNDE */
[data-paketler]:where(main) .tarife-muhur::before {
  content: "GÖZ";
  padding-inline-start: var(--tracking-tarife);
  font-size: calc(var(--muhur-cap) * var(--muhur-ust-oran));
  letter-spacing: var(--tracking-tarife);
}

[data-paketler]:where(main) .tarife-muhur::after {
  content: "ÖNÜNDE";
  font-size: calc(var(--muhur-cap) * var(--muhur-yazi-oran));
}

/* Sözde öğe :is() içine giremez (geçersiz seçici kuralın tamamını düşürür); iki ayrı seçici */
:root:not([data-fiyat="site"]) [data-paketler]:where(main) .tarife-muhur,
:root:not([data-fiyat="site"]) [data-paketler]:where(main) .tarife-bas::after {
  display: none;
}

/* Basma izi: mühür indiği anda kâğıtta altın bir halka açılıp söner. Mührün yerinde, onun altında. */
[data-paketler]:where(main) .tarife-bas::after {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--muhur-cap) * var(--muhur-tasma-ust));
  inset-inline-end: calc(var(--muhur-cap) * var(--muhur-tasma-yan));
  inline-size: var(--muhur-cap);
  aspect-ratio: var(--ratio-square);
  border: var(--muhur-iz-kalinlik) solid var(--muhur-kenar);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

/* Basma anı: başlık okunduktan sonra mühür iner, hafif çöker, geri seker; iz yarı yolda açılır (ana sayfadaki senet
   mührünün hazırlık ve sekme ölçüleri). Yalnız transform ve opaklık. */
@media (prefers-reduced-motion: no-preference) {
  [data-paketler]:where(main) .tarife-muhur {
    animation: tarife-muhur-bas var(--sure-tarife-muhur) var(--egri-senet) var(--gecikme-muhur) both;
  }

  /* İz yalnız geri dolgu: bitince temel hâline (görünmez, ölçeksiz) döner; büyük hâlde kalırsa sayfayı taşırıyordu */
  [data-paketler]:where(main) .tarife-bas::after {
    animation: tarife-muhur-iz var(--sure-tarife-iz) var(--egri-murekkep) calc(var(--gecikme-muhur) + var(--sure-tarife-muhur) * 0.5) backwards;
  }
}

@keyframes tarife-muhur-bas {
  0% {
    opacity: 0;
    transform: translateY(var(--muhur-kalkis)) rotate(var(--visual-angle-a)) scale(var(--muhur-baski-olcek));
  }

  55% {
    opacity: 1;
    transform: rotate(var(--visual-angle-a)) scale(var(--muhur-anticipation));
  }

  78% {
    transform: rotate(var(--visual-angle-a)) scale(var(--muhur-overshoot));
  }

  100% {
    opacity: 1;
    transform: rotate(var(--visual-angle-a)) scale(1);
  }
}

@keyframes tarife-muhur-iz {
  0% {
    opacity: 0;
    transform: scale(1);
  }

  8% {
    opacity: var(--muhur-iz-opaklik);
  }

  100% {
    opacity: 0;
    transform: scale(var(--muhur-iz-olcek));
  }
}

[data-paketler]:where(main) .bakis-liste {
  margin: var(--space-0);
  padding: var(--space-0);
  list-style: none;
}

[data-paketler]:where(main) .bakis-liste li {
  max-width: none;
  margin: var(--space-0);
  border-block-end: var(--border-width) solid var(--cizgi);
}

[data-paketler]:where(main) .tarife summary {
  position: relative;
  display: grid;
  grid-template-columns: var(--tarife-no) minmax(0, 1fr);
  grid-template-areas:
    ". durum"
    "no ad"
    ". bedel";
  column-gap: var(--space-3);
  align-items: baseline;
  padding: var(--tarife-satir-ic) var(--space-2);
  list-style: none;
  line-height: var(--leading-heading);
  cursor: pointer;
}

[data-paketler]:where(main) .tarife summary::-webkit-details-marker {
  display: none;
}

/* Satırın açılır olduğunu söyleyen ok: durum satırının sağ ucunda, açıkken ters döner */
[data-paketler]:where(main) .tarife summary::after {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--tarife-satir-ic) + var(--tarife-ok-ust));
  inset-inline-end: var(--space-3);
  inline-size: var(--tarife-ok);
  block-size: var(--tarife-ok);
  border-inline-end: var(--tarife-ok-cizgi) solid var(--muted);
  border-block-end: var(--tarife-ok-cizgi) solid var(--muted);
  transform: rotate(45deg);
  transition: transform var(--sure-mikro) var(--egri-senet);
}

[data-paketler]:where(main) .tarife details[open] > summary::after {
  transform: rotate(225deg);
}

/* Üzerine gelme yalnız fareli cihazda (15 Eki denetimi Y1: dokunmatikte dokunulan satır :hover'da kalıyor, ad bağlantı
   gibi altı çizili görünüyordu) */
@media (hover: hover) {
  [data-paketler]:where(main) .tarife summary:hover {
    background: var(--tarife-kagit-secili);
  }

  [data-paketler]:where(main) .tarife summary:hover .bakis-ad {
    text-decoration: underline;
    text-decoration-thickness: var(--border-width);
    text-underline-offset: var(--tarife-alti-cizgi);
  }
}

[data-paketler]:where(main) .tarife summary:focus-visible {
  outline: var(--focus-width) solid var(--odak);
  outline-offset: calc(var(--focus-width) * -1);
}

[data-paketler]:where(main) .tarife-no {
  position: relative;
  grid-area: no;
  justify-self: center;
  color: var(--gold-koyu);
  font-family: var(--font-body);
  font-size: var(--text-tarife-ad);
  font-weight: var(--weight-heavy);
  font-variant-numeric: lining-nums;
}

/* Mürekkep halkası: tarifede seçilen kalemin numarası kalemle daire içine alınır. Şekil maske, renk token. */
[data-paketler]:where(main) .tarife-no::before {
  content: "";
  position: absolute;
  inset: var(--halka-dikey) var(--halka-yatay);
  background: var(--gold-koyu);
  -webkit-mask: var(--halka-sekli) center / 100% 100% no-repeat;
  mask: var(--halka-sekli) center / 100% 100% no-repeat;
  opacity: 0;
  transform: rotate(var(--halka-aci)) scale(var(--muhur-baski-olcek));
  transition: opacity var(--sure-muhur) var(--egri-muhur), transform var(--sure-muhur) var(--egri-muhur);
}

[data-paketler]:where(main) .tarife details[open] .tarife-no::before {
  opacity: 1;
  transform: rotate(var(--halka-aci)) scale(1);
}

[data-paketler]:where(main) .tarife .bakis-durum {
  grid-area: durum;
  padding-inline-end: var(--space-6);
  color: var(--muted);
  font-family: var(--font-mono);
  font-stretch: condensed;
  font-size: var(--text-xs-okur);
  font-weight: var(--weight-medium);
  line-height: var(--leading-versal-kucuk);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}

[data-paketler]:where(main) .tarife .bakis-ad {
  grid-area: ad;
  margin-block-start: var(--space-hairline);
  font-family: var(--font-body);
  font-size: var(--text-tarife-ad);
  font-weight: var(--weight-bold);
}

/* Bedel satırın kahramanıdır. 15 Eki (denetim P): ana bant <b> iri ve tek satır, KDV dahil tutar <small> küçük ve soluk
   alt satırda. S-kdv ve S-serit bedeli öğenin etiketsiz metninden okur. overflow-wrap kalır: bölünmez grup sütuna
   sığmazsa taşmak yerine kırılsın (T-bant). */
[data-paketler]:where(main) .bakis-bedel {
  grid-area: bedel;
  margin-block-start: var(--tarife-bedel-ara);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

[data-paketler]:where(main) .bakis-bedel b {
  display: block;
  font-size: var(--text-lede);
  font-weight: var(--weight-bold);
}

[data-paketler]:where(main) .bakis-bedel small {
  display: block;
  margin-block-start: var(--space-hairline);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
}

[data-paketler]:where(main) .bakis-bedel small + b,
[data-paketler]:where(main) .bakis-bedel small + em {
  margin-block-start: var(--space-2);
}

/* Bandın niteliği ("Bağlantı başına", "Aylık") küçük etiket: fiyatla aynı iri puntoda levhanın en dağınık satırını
   yapıyordu, "e-faturada" tireden bölünüyordu (15 Eki denetimi Y2). Etiket <em>: dal ayıklayıcı tek kat biçim okur. */
[data-paketler]:where(main) .bakis-bedel em {
  display: block;
  color: var(--muted);
  font-family: var(--font-mono);
  font-stretch: condensed;
  font-size: var(--text-xs-okur);
  font-style: normal;
  font-weight: var(--weight-medium);
  line-height: var(--leading-versal-kucuk);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Geniş levhada bedel sağda, adın hizasında: tarifedeki gibi kalem solda, fiyat sağda. Eşik 34rem: altında en uzun bant
   ("20.000–35.000 TL + KDV") ile en uzun ad yan yana sığmıyor; satır alt alta dizilir. */
@container tarife (min-width: 34rem) {
  [data-paketler]:where(main) .tarife summary {
    grid-template-columns: var(--tarife-no) minmax(0, 1fr) fit-content(58%);
    grid-template-areas:
      ". durum durum"
      "no ad bedel";
    column-gap: var(--space-4);
  }

  [data-paketler]:where(main) .bakis-bedel {
    margin-block-start: var(--space-0);
    text-align: end;
  }

  /* Tarife noktaları: kalem adından fiyata (P2'deki fiyat listesinin noktalı çizgisi). Ad iki satıra inerse noktalar
     ilk satırda kalır; fiyat da ilk satırın taban çizgisindedir. */
  [data-paketler]:where(main) .tarife .bakis-ad {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
  }

  [data-paketler]:where(main) .tarife .bakis-ad::after {
    content: "";
    flex: 1 0 var(--tarife-nokta-min);
    border-block-end: var(--tarife-nokta) dotted var(--muted);
  }
}

/* Seçilen satır öne çıkar: daha açık kâğıt, solda altın kenar, alttan gölge. Altın kenar özetin ve açılan bölümün kendi
   gölgesidir: details'e çizilince özetin zemini kenarı örtüyordu (15 Eki denetimi Y1). */
[data-paketler]:where(main) .tarife details[open] {
  position: relative;
  z-index: var(--layer-content);
  background: var(--tarife-kagit-secili);
  box-shadow: var(--golge-satir);
}

[data-paketler]:where(main) .tarife details[open] > summary,
[data-paketler]:where(main) .tarife details[open] > .tarife-acik {
  box-shadow: inset var(--tarife-secili-kenar) 0 0 var(--gold-koyu);
}

[data-paketler]:where(main) .tarife-acik {
  padding: var(--space-0) var(--space-3) var(--space-4) calc(var(--tarife-no) + var(--space-3) + var(--space-2));
}

@media (prefers-reduced-motion: no-preference) {
  [data-paketler]:where(main) .tarife details[open] > .tarife-acik {
    animation: tarife-ac var(--sure-reveal) var(--egri-senet) both;
  }
}

@keyframes tarife-ac {
  from {
    opacity: 0;
    transform: translateY(var(--reveal-kayma));
  }
}

[data-paketler]:where(main) .tarife-acik p {
  max-width: var(--measure);
  margin: var(--space-0);
  font-size: var(--text-tarife-acik);
  line-height: var(--leading-tarife-acik);
}

[data-paketler]:where(main) .tarife-acik p + p {
  margin-block-start: var(--space-3);
}

[data-paketler]:where(main) .tarife-etiket {
  display: block;
  color: var(--gold-koyu);
  font-family: var(--font-mono);
  font-stretch: condensed;
  font-size: var(--text-xs-okur);
  font-weight: var(--weight-medium);
  line-height: var(--leading-versal-kucuk);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}

@container tarife (min-width: 34rem) {
  [data-paketler]:where(main) .tarife-acik p {
    display: grid;
    grid-template-columns: var(--tarife-etiket-sutun) minmax(0, 1fr);
    column-gap: var(--space-4);
  }

  [data-paketler]:where(main) .tarife-etiket {
    padding-block-start: var(--tarife-etiket-ust);
  }
}

[data-paketler]:where(main) .tarife-git {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--control-min-height);
  margin-block-start: var(--space-2);
  color: var(--text);
  font-family: var(--font-mono);
  font-stretch: condensed;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-nav);
  text-decoration: underline;
  text-underline-offset: var(--tarife-alti-cizgi);
}

[data-paketler]:where(main) .tarife-git .ok {
  transition: transform var(--sure-mikro) var(--egri-senet);
}

[data-paketler]:where(main) .tarife-git:hover .ok {
  transform: translateX(var(--ok-kayma));
}

[data-paketler]:where(main) .tarife-git:focus-visible {
  outline: var(--focus-width) solid var(--odak);
  outline-offset: var(--focus-offset);
}

/* Çalışan örnek (kurucu 15 Eki: "Fiyatı gören, o kalemin çalışan hâlini tek tıkla görür"). Satırın içinde değil hemen altında:
   özet (summary) zaten tıklanabilir, içine bağlantı konmaz. Örneği olan satırda görünür; örneği olmayan satır boş kalır. */
[data-paketler]:where(main) .tarife-ornek {
  /* blok: ok metnin hemen ardında kalır (esnek kutuda iki satıra inen metin oku sağ kenara itiyordu); 44 px iç boşluktan */
  display: block;
  min-block-size: var(--control-min-height);
  padding-inline-start: calc(var(--tarife-no) + var(--space-3) + var(--space-2));
  padding-block: var(--tarife-ornek-ic);
  line-height: var(--leading-versal-kucuk);
  color: var(--gold-koyu);
  font-family: var(--font-mono);
  font-stretch: condensed;
  font-size: var(--text-xs-okur);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-nav);
  text-decoration: underline;
  text-underline-offset: var(--tarife-alti-cizgi);
  text-transform: uppercase;
}

/* Geniş levhada bağlantı satırın üst çizgisinde, durum etiketinin sağında, okun solunda durur: yükseklik eklemez. Altında
   kalınca 1440×900'de altıncı fiyat ilk ekrandan çıkıyordu (965 px; T-ilk). 40rem altında durum etiketiyle çakışır, orada alttadır. */
[data-paketler]:where(main) .bakis-liste li {
  position: relative;
}

@container tarife (min-width: 40rem) {
  [data-paketler]:where(main) .tarife-ornek {
    position: absolute;
    z-index: 2;
    inset-block-start: var(--space-0);
    inset-inline-end: var(--tarife-ornek-sag);
    min-block-size: auto;
    padding: var(--space-3) var(--space-2) var(--space-2);
  }
}

/* Dar levhada (40rem altı) çalışan örnek satırın altında değil, satır açılınca içeride, "Ayrıntılar ve teklif"in
   altında görünür. Site Düzeltme satırına örnek eklenince altta duran bağlantı 390×700'de ikinci fiyatı ilk ekrandan
   20 px dışarı itiyordu (T-ilk, 15 Eki akşam ölçüldü; payı 41 px, bağlantı 44–61 px). İki bağlantıdan her genişlikte
   yalnız biri görünür; öteki display:none ile ekran okuyucudan da düşer. */
[data-paketler]:where(main) .tarife-ornek-ic {
  display: none;
  min-block-size: var(--control-min-height);
  padding-block: var(--tarife-ornek-ic);
  line-height: var(--leading-versal-kucuk);
  color: var(--gold-koyu);
  font-family: var(--font-mono);
  font-stretch: condensed;
  font-size: var(--text-xs-okur);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-nav);
  text-decoration: underline;
  text-underline-offset: var(--tarife-alti-cizgi);
  text-transform: uppercase;
}

@container tarife (width < 40rem) {
  [data-paketler]:where(main) .tarife-ornek {
    display: none;
  }

  [data-paketler]:where(main) .tarife-ornek-ic {
    display: block;
  }
}

[data-paketler]:where(main) .tarife-ornek:hover .ok,
[data-paketler]:where(main) .tarife-ornek-ic:hover .ok {
  transform: translateX(var(--ok-kayma));
}

[data-paketler]:where(main) .tarife-ornek .ok,
[data-paketler]:where(main) .tarife-ornek-ic .ok {
  transition: transform var(--sure-mikro) var(--egri-senet);
}

[data-paketler]:where(main) .tarife-ornek:focus-visible,
[data-paketler]:where(main) .tarife-ornek-ic:focus-visible {
  outline: var(--focus-width) solid var(--odak);
  outline-offset: calc(var(--focus-width) * -1);
}

/* p.bakis-cekince: genel "p:not(.section-kunye)" kuralı (0,2,1) sınıf seçiciyi eziyordu; öğe adı eklenerek eşitlendi */
[data-paketler]:where(main) p.bakis-cekince {
  margin-block: var(--space-3) var(--space-0);
  color: var(--muted);
  font-size: var(--text-sm);
}

/* Hareket azaltma: mühür baskısı ve açılış kayması zaten yalnız no-preference'ta; halka ve ok anında değişir */
@media (prefers-reduced-motion: reduce) {
  [data-paketler]:where(main) .tarife-no::before,
  [data-paketler]:where(main) .tarife summary::after,
  [data-paketler]:where(main) .tarife-git .ok {
    transition: none;
  }
}

/* Alıcı satırı ("İşletmelere ve işini kuranlara") levhanın hemen ardında (Tur B, T-dahil); paket-bas'ın doğrudan çocuğu olmadığından aralığı burada */
[data-paketler]:where(main) .tarife-sutun > p {
  margin-block-start: var(--space-5);
}

/* Soru kutusu: üç soru, her yaprağın "Sizde kalan" satırına bağlanır */
[data-paketler]:where(main) .sorun {
  margin-block-start: var(--space-8);
  padding: var(--space-6);
  background: var(--surface);
  border-inline-start: var(--border-width) solid var(--text);
}

[data-paketler]:where(main) .sorun h2 {
  padding-block: var(--space-0) var(--space-3);
  border-block: 0;
}

[data-paketler]:where(main) .sorun ol {
  margin-block-start: var(--space-4);
}

/* Web uygulaması yaprağının kanıt satırı ve bağlantısı yaprak alanlarıyla aynı sütunda */
[data-paketler]:where(main) .yaprak > .yaprak-kanit,
[data-paketler]:where(main) .yaprak > .yaprak-kanit-bag {
  grid-column: 6 / 13;
  min-width: 0;
}

[data-paketler]:where(main) .yaprak-kanit-bag {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: var(--control-min-height);
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: var(--space-hairline);
}

/* Dar ekranda yaprak tek sütun: kanıt satırı 6/13'te kalırsa örtük sütun açılır ve düğme 42 px'e ezilir
   (14 Eki, T-a11y ve T-jsyok yakaladı; 8 Eki'deki "Tekli / f al" kusurunun aynısı). */
@media (max-width: 980px) {
  [data-paketler]:where(main) .yaprak > .yaprak-kanit,
  [data-paketler]:where(main) .yaprak > .yaprak-kanit-bag {
    grid-column: 1;
  }
}

@media (max-width: 980px) {
  [data-paketler]:where(main) .yaprak,
  [data-paketler]:where(main) .kitre-kaydi,
  [data-paketler]:where(main) .alan {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-paketler]:where(main) .yaprak > *,
  [data-paketler]:where(main) .yaprak > .talep-blogu,
  [data-paketler]:where(main) .yaprak > .button,
  [data-paketler]:where(main) .kitre-kaydi > *,
  [data-paketler]:where(main) .kitre-kaydi > h3,
  [data-paketler]:where(main) .alan dd {
    grid-column: 1;
  }

  [data-paketler]:where(main) article[id],
  [data-paketler]:where(main) .talep-blogu {
    scroll-margin-block-start: var(--space-4);
  }
}