/*
  PersonAll tanıtım sayfası.

  ⚠️ Ayrı dosya, satır içi <style> değil — /destek sayfalarıyla aynı
  gerekçe: helmet'in varsayılan CSP'si script-src 'self' uyguluyor ve
  aynı disiplini stilde de koruyoruz.

  Renkler uygulama simgesinden alındı (assets/ikon/uygulama.png):
  koyu yeşil #098d26, açık yeşil #54d972, zemin #daffe2. Site ve
  uygulama aynı kimliği taşısın diye elle seçilmedi, simgeden okundu.
*/

:root {
  color-scheme: light dark;

  --zemin: #ffffff;
  --zemin2: #f4faf5;
  --kart: #ffffff;
  --metin: #16201a;
  --soluk: #5d6b62;
  --cizgi: #dfe8e2;
  --vurgu: #098d26;
  --vurgu2: #067a20;
  --vurguYumusak: #daffe2;
  --vurguMetin: #ffffff;
  --golge: 0 1px 2px rgba(9, 45, 20, .05), 0 10px 28px rgba(9, 45, 20, .06);

  /* Site ve yönetim paneli AYNI genişlikte. Panelde de aynı adı
     taşıyan bir değişken var; ikisi ayrı dosyada ama aynı değer. */
  --enFazlaGenislik: 1300px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --zemin: #0f1411;
    --zemin2: #151b17;
    --kart: #19201b;
    --metin: #e7efe9;
    --soluk: #97a89d;
    --cizgi: #28322b;
    --vurgu: #54d972;
    --vurgu2: #6ee489;
    --vurguYumusak: #16281c;
    --vurguMetin: #08120b;
    --golge: none;
  }
}

* { box-sizing: border-box; }

/* Kanca bağlantıları (#basvuru gibi) yumuşak kaysın. */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ⚠️ Üst şerit yapışkan: kancaya atlarken bölüm başlığı şeridin
   ALTINA girip görünmez oluyordu. Bu boşluk onu telafi ediyor. */
section[id],
div[id] { scroll-margin-top: 84px; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.kapsayici {
  max-width: var(--enFazlaGenislik);
  margin: 0 auto;
  padding: 0 22px;
}

/* --- Üst şerit ----------------------------------------------------- */

.ustSerit {
  border-bottom: 1px solid var(--cizgi);
  padding: 14px 0;
  position: sticky;
  top: 0;
  background: var(--zemin);
  z-index: 10;
}

.ustSerit .kapsayici {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.marka {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--metin);
}

.marka img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: block;
}

.ustSerit nav {
  display: flex;
  align-items: center;
  gap: 4px;
  /* Dar ekranda menü yatay kayar; satır başına sarıp başlığı
     aşağı itmesindense kaydırmak daha öngörülebilir. */
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
}

.ustSerit nav::-webkit-scrollbar { display: none; }

/* Aktif menü belirteci: hap biçimi, marka renginde.
   Panelin sekme şeridiyle aynı dil — iki yüzeyde iki ayrı belirteç
   olmasın diye. */
.ustSerit nav a {
  color: var(--soluk);
  text-decoration: none;
  font-size: 15px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.ustSerit nav a:hover {
  color: var(--metin);
  background: var(--zemin2);
}

.ustSerit nav a.aktif {
  background: var(--vurguYumusak);
  color: var(--vurgu);
  border-color: var(--vurgu);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .ustSerit nav a { transition: none; }
}

/* ⚠️ Dar ekran: marka ve menü alt alta. Yan yana zorlanırsa menü
   çok dar bir alana sıkışıp tek harfe iniyordu. */
@media (max-width: 640px) {
  .ustSerit .kapsayici {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .ustSerit nav {
    margin: 0 -22px;
    padding: 0 22px;
  }
}

/* --- Giriş bölümü --------------------------------------------------- */

.giris {
  padding: 68px 0 56px;
  border-bottom: 1px solid var(--cizgi);
}

.rozet {
  display: inline-block;
  background: var(--vurguYumusak);
  color: var(--vurgu);
  border-radius: 999px;
  padding: 6px 15px;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 20px;
}

.giris h1 {
  font-size: clamp(30px, 5vw, 45px);
  line-height: 1.14;
  letter-spacing: -0.028em;
  margin: 0 0 18px;
  max-width: 17ch;
  text-wrap: balance;
}

.giris p.alt {
  font-size: 18px;
  color: var(--soluk);
  max-width: 58ch;
  margin: 0 0 30px;
}

.dugmeler {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.dugme {
  display: inline-block;
  padding: 13px 24px;
  border-radius: 9px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
}

.dugme.birincil {
  background: var(--vurgu);
  color: var(--vurguMetin);
}

.dugme.birincil:hover { background: var(--vurgu2); }

.dugme.ikincil {
  border-color: var(--cizgi);
  color: var(--metin);
}

.dugme.ikincil:hover { border-color: var(--soluk); }

/* --- Bölümler ------------------------------------------------------- */

section { padding: 56px 0; }

section + section { border-top: 1px solid var(--cizgi); }

h2 {
  font-size: 27px;
  letter-spacing: -0.022em;
  margin: 0 0 8px;
}

.bolumAlt {
  color: var(--soluk);
  margin: 0 0 30px;
  max-width: 62ch;
}

.izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 18px;
}

.ozellik {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: 13px;
  padding: 22px;
  box-shadow: var(--golge);
}

.ozellik h3 {
  margin: 0 0 6px;
  font-size: 17px;
}

.ozellik p {
  margin: 0;
  color: var(--soluk);
  font-size: 15px;
}

.kimeUygun {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.kimeUygun li {
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 14px;
  color: var(--soluk);
}

/* --- Fiyat kartları -------------------------------------------------- */

.fiyatBolum { background: var(--zemin2); }

/* Üç kart konteyner genişliğine simetrik yayılıyor.
   auto-fit yerine SABİT 3 sütun: auto-fit ara genişliklerde 2+1
   bırakıp simetriyi bozuyordu. */
.fiyatlar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: none;
  align-items: stretch;
}

@media (max-width: 980px) {
  .fiyatlar { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
}

.plan {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: 14px;
  padding: 22px 20px;
  box-shadow: var(--golge);
  position: relative;
  display: flex;
  flex-direction: column;
}

.plan.onerilen { border-color: var(--vurgu); }

.plan .etiket {
  position: absolute;
  top: -11px;
  left: 24px;
  background: var(--vurgu);
  color: var(--vurguMetin);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
}

.plan h3 {
  margin: 0 0 4px;
  font-size: 16px;
  color: var(--soluk);
  font-weight: 600;
}

.fiyat {
  font-size: 31px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin: 6px 0 2px;
}

.fiyat span {
  font-size: 15px;
  font-weight: 500;
  color: var(--soluk);
  letter-spacing: 0;
}

.ustuCizili {
  color: var(--soluk);
  text-decoration: line-through;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.tasarruf {
  color: var(--vurgu);
  font-weight: 600;
  font-size: 14.5px;
  margin-top: 4px;
}

/* Kart içi özellik listesi — üç kartın da eşit dolulukta
   görünmesini sağlıyor. İçerik yoksa kartlar farklı yükseklikte kalıp
   satır düzensiz görünüyordu. */
.planListe {
  list-style: none;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--cizgi);
}

.planListe li {
  position: relative;
  padding-left: 23px;
  margin-bottom: 8px;
  font-size: 14.5px;
  color: var(--soluk);
}

.planListe li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--vurgu);
  font-weight: 700;
}

.planNot {
  color: var(--soluk);
  font-size: 14.5px;
  /* auto üst boşluğu: not her kartta EN ALTA yaslı duruyor, üzerindeki
     liste kaç satır olursa olsun üç kartta aynı hizada. */
  margin: auto 0 0;
  padding-top: 16px;
}

/* ⚠️ Deneme ve aylık kartlarda üstü çizili fiyat ile tasarruf satırı
   HTML'de &nbsp; ile boş bırakıldı. Satırlar tamamen kaldırılsaydı üç
   karttaki fiyat bloğu farklı yükseklikte olur, altındaki listeler
   hizadan kayardı. */

/* Nötr etiket: "Başlangıç" rozeti dikkat çekmemeli, önerilen plan
   yıllık olan. */
.plan .etiket.etiketNotr {
  background: var(--zemin2);
  color: var(--soluk);
  border: 1px solid var(--cizgi);
}

.fiyatAlt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--cizgi);
}

.fiyatAlt .dugme { flex: 0 0 auto; }

.fiyatKucuk {
  margin: 0;
  color: var(--soluk);
  font-size: 14.5px;
  max-width: 62ch;
}

@media (max-width: 640px) {
  /* Dar ekranda düğme tam genişlik: köşeye sıkışmış bir bağlantı
     dokunma hedefi olarak da küçük kalıyor. */
  .fiyatAlt { flex-direction: column; align-items: stretch; }
  .fiyatAlt .dugme { text-align: center; }
}

/* --- Başvuru formu -------------------------------------------------- */

/* ⚠️ Form eskiden 680px'de kalıyordu ve 1200px'lik kapsayıcının
   sağında geniş bir boşluk bırakıyordu. Formu 1200px'e yaymak çözüm
   değildi: girdi alanları gereksiz uzar, göz etiketten alana giderken
   yolunu kaybeder. Boşluk YANINA İÇERİK konarak dolduruldu. */
.basvuruIzgara {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 24px;
  align-items: start;
}

form {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: 14px;
  padding: 28px;
  box-shadow: var(--golge);
  max-width: none;
}

/* --- Başvuru yan paneli ------------------------------------------ */

.yanPanel {
  background: var(--zemin2);
  border: 1px solid var(--cizgi);
  border-radius: 14px;
  padding: 26px 24px;
  position: sticky;
  top: 84px;
}

.yanPanel h3 {
  margin: 0 0 18px;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.adimlar {
  list-style: none;
  counter-reset: adim;
  margin: 0 0 24px;
  padding: 0;
}

.adimlar li {
  counter-increment: adim;
  position: relative;
  padding-left: 38px;
  margin-bottom: 16px;
}

/* Numaralar gerçek bir SIRA anlatıyor: başvuru → hesap → personel →
   deneme. Süs değil, adımlar bu sırayla yaşanıyor. */
.adimlar li::before {
  content: counter(adim);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--vurguYumusak);
  color: var(--vurgu);
  border: 1px solid var(--vurgu);
  font-size: 13px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}

.adimlar strong {
  display: block;
  font-size: 15px;
  margin-bottom: 2px;
}

.adimlar span {
  color: var(--soluk);
  font-size: 14px;
  line-height: 1.5;
}

.guvence {
  list-style: none;
  margin: 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--cizgi);
}

.guvence li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 9px;
  color: var(--soluk);
  font-size: 14.5px;
}

.guvence li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--vurgu);
  font-weight: 700;
}

/* ⚠️ Dar ekranda tek sütun ve yan panel formun ALTINA geçiyor:
   üstüne alınsaydı telefonda forma ulaşmak için bir ekran kaydırmak
   gerekirdi. Sticky de kapanıyor; tek sütunda yapışkan panel
   kaydırmayı kilitliyor. */
@media (max-width: 860px) {
  .basvuruIzgara { grid-template-columns: 1fr; }
  .yanPanel { position: static; }
}

.formIzgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0 18px;
}

.alan { margin-bottom: 17px; }

.alan.tamGenislik { grid-column: 1 / -1; }

label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 6px;
}

label .zorunlu { color: var(--vurgu); }

input, textarea, select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--cizgi);
  border-radius: 9px;
  background: var(--zemin);
  color: var(--metin);
  font: inherit;
  font-size: 15px;
}

input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--vurgu);
  outline-offset: 1px;
  border-color: transparent;
}

input:invalid:not(:placeholder-shown) {
  border-color: #c0392b;
}

textarea { resize: vertical; min-height: 92px; }

/* KVKK onay kutusu — metin ve kutu aynı hizada, uzun metin sarmalı. */
.onayKutusu {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--soluk);
  margin: 4px 0 20px;
  cursor: pointer;
}

.onayKutusu input {
  width: auto;
  margin-top: 3px;
  flex: 0 0 auto;
  accent-color: var(--vurgu);
}

.onayKutusu a { color: var(--vurgu); }

button[type="submit"] {
  background: var(--vurgu);
  color: var(--vurguMetin);
  border: none;
  border-radius: 9px;
  padding: 14px 28px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}

button[type="submit"]:hover { background: var(--vurgu2); }

button[type="submit"]:disabled { opacity: .55; cursor: default; }

.sonuc {
  margin-top: 16px;
  padding: 13px 15px;
  border-radius: 9px;
  font-size: 15px;
}

.sonuc.basarili {
  background: var(--vurguYumusak);
  border: 1px solid var(--vurgu);
  color: var(--metin);
}

.sonuc.hata {
  background: rgba(192, 57, 43, .1);
  border: 1px solid #c0392b;
  color: #c0392b;
}

.gizli { display: none; }

.kucuk {
  font-size: 13px;
  color: var(--soluk);
  margin: 16px 0 0;
}

/* --- Alt bilgi ------------------------------------------------------ */

footer {
  border-top: 1px solid var(--cizgi);
  padding: 30px 0 48px;
  color: var(--soluk);
  font-size: 14px;
}

footer a { color: var(--vurgu); margin-right: 18px; }


/* ===================================================================
   İçerik sayfaları (destek, gizlilik, KVKK, künye, sözleşmeler)

   ⚠️ Bu sayfaların eskiden kendi stil.css'i vardı: ayrı palet, ayrı
   başlık, menü yok. Üç ayrı görünüm oluşmuştu. Artık hepsi bu tek
   dosyaya bağlı — /destek altından da MUTLAK yolla (/stil.css)
   çağrılıyor, kök statik mount aynı dosyayı sunuyor.
   =================================================================== */

.icerik {
  /* Diger tum sayfalarla ayni genislik: .kapsayici zaten
     --enFazlaGenislik uyguluyor, burada daraltma YAPILMIYOR.

     UYARI: uzun yasal metin 1300px genislikte satir basina ~200
     karaktere ulasiyor. Paragraf metni bu yuzden ayrica olculuyor
     (asagidaki .icerik p / li kurali); baslik, tablo ve kartlar tam
     genisligi kullaniyor. */
  padding-top: 48px;
  padding-bottom: 20px;
}

.icerik h1 {
  font-size: clamp(27px, 4vw, 34px);
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 0 0 10px;
  text-wrap: balance;
}

.icerik .ustbilgi {
  color: var(--soluk);
  margin: 0 0 34px;
  font-size: 15px;
}

.icerik h2 {
  font-size: 21px;
  margin: 38px 0 10px;
}

.icerik h3 {
  font-size: 16.5px;
  margin: 26px 0 7px;
}

/* Kapsayici 1300px ama DUZ METIN olculu kaliyor: 1300px genislikte
   satir basina ~200 karakter dusuyor ve goz satir sonundan bir sonraki
   satirin basina donerken yerini kaybediyor. Baslik, tablo, kart ve
   liste kutulari tam genisligi kullaniyor; sinirlanan yalnizca okunan
   paragraf. Tamamen yayilmasi istenirse bu iki max-width silinir. */
.icerik p,
.icerik li {
  color: var(--metin);
  max-width: 80ch;
}

.icerik .ustbilgi { max-width: 80ch; }

.icerik ul { padding-left: 22px; }
.icerik li { margin-bottom: 7px; }

.kart {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: 12px;
  padding: 20px 22px;
  margin: 22px 0;
  box-shadow: var(--golge);
}

.kart p:first-child { margin-top: 0; }
.kart p:last-child { margin-bottom: 0; }

.sarmalayici { overflow-x: auto; }

.icerik table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: 15px;
}

.icerik th,
.icerik td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--cizgi);
  vertical-align: top;
}

.icerik th {
  font-weight: 600;
  color: var(--soluk);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ===================================================================
   Alt bilgi — üç sütun
   =================================================================== */

.altIzgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 26px;
  margin-bottom: 28px;
}

.altSutun h4 {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--metin);
}

.altSutun a {
  display: block;
  margin: 0 0 7px;
  color: var(--soluk);
  text-decoration: none;
  font-size: 14.5px;
}

.altSutun a:hover { color: var(--vurgu); }

.altKapanis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 1px solid var(--cizgi);
  padding-top: 20px;
}

.altMarka {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--metin);
}

.altMarka img { width: 26px; height: 26px; border-radius: 6px; }

/* --- Alt bilgideki indirme düğmeleri --------------------------------
   İçerik site.js tarafından dolduruluyor (GET /app/indirmeler).
   Tanımlı platform yoksa kap boş kalıyor ve hiç yer kaplamıyor —
   :empty kuralı bunun için. */

.altIndirmeler {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.altIndirmeler:empty { display: none; }

.indirmeDugmesi {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--cizgi);
  border-radius: 8px;
  color: var(--metin);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  /* footer a kuralı her bağlantıya sağdan boşluk veriyor; burada
     aralığı flex gap yönetiyor. */
  margin-right: 0;
}

.indirmeDugmesi:hover {
  border-color: var(--vurgu);
  color: var(--vurgu);
}

.indirmeDugmesi svg { flex: none; }

.indirmeNot {
  color: var(--soluk);
  font-weight: 400;
  font-size: 12px;
}

/* Telefonda marka ve düğmeler alt alta; .altKapanis zaten sarıyor. */
@media (max-width: 560px) {
  .altIndirmeler { width: 100%; }
  .indirmeDugmesi { flex: 1 1 auto; justify-content: center; }
}

/* ===================================================================
   Hareket

   ⚠️ Hepsi prefers-reduced-motion altında kapanıyor. Hareket
   duyarlılığı olan kullanıcı için bu bir tercih değil erişilebilirlik
   gereği; kapanış, İÇERİĞİ GÖRÜNÜR BIRAKARAK yapılıyor — yalnızca
   geçişi kaldırmak, belirme animasyonuna bağlı içeriği sonsuza kadar
   saydam bırakırdı.
   =================================================================== */

.ustSerit { transition: box-shadow .18s ease, border-color .18s ease; }

.ustSerit.kaydirildi {
  box-shadow: 0 1px 0 var(--cizgi), 0 6px 20px rgba(9, 45, 20, .07);
}

.belirir {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}

.belirir.gorundu {
  opacity: 1;
  transform: none;
}

.ozellik,
.plan,
.dugme,
.kimeUygun li {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.ozellik:hover,
.plan:hover {
  transform: translateY(-3px);
  border-color: var(--vurgu);
}

.dugme:hover { transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .ustSerit,
  .belirir,
  .ozellik,
  .plan,
  .dugme,
  .kimeUygun li {
    transition: none;
  }

  /* İçerik her koşulda görünür kalsın. */
  .belirir { opacity: 1; transform: none; }

  .ozellik:hover,
  .plan:hover,
  .dugme:hover { transform: none; }
}

/* =====================================================================
   Ücretlendirme tablosu
   =====================================================================
   ⚠️ TELEFONDA TABLO OKUNMUYOR. Altı sütunlu bir tablo 390 piksellik
   ekranda ya yatay kaydırma ister ya da okunamayacak kadar küçülür.
   Dar ekranda satırlar alt alta kartlara dönüşüyor; her hücre kendi
   başlığını data-baslik'ten alıyor, yani içerik ve sıra AYNI kalıyor
   (ekran okuyucu için de tek bir tablo).
   ===================================================================== */

.denemeSerit {
  margin: 0 auto 24px;
  max-width: 760px;
  padding: 12px 18px;
  border: 1px solid var(--vurgu);
  border-radius: 12px;
  background: var(--vurguYumusak);
  color: var(--metin);
  text-align: center;
  font-weight: 600;
}

.tabloSarici { overflow-x: auto; }

.fiyatTablo {
  width: 100%;
  border-collapse: collapse;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--golge);
}

.fiyatTablo th,
.fiyatTablo td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--cizgi);
}

.fiyatTablo thead th {
  background: var(--zemin2);
  font-size: .92rem;
  color: var(--soluk);
  white-space: nowrap;
}

.fiyatTablo tbody tr:last-child th,
.fiyatTablo tbody tr:last-child td { border-bottom: 0; }

.fiyatTablo tbody th {
  font-size: 1.05rem;
  white-space: nowrap;
}

/* Öne çıkan paket: satırın tamamı vurgulu, yalnızca rozetle değil. */
.fiyatTablo tr.oneCikan { background: var(--vurguYumusak); }

.satirRozet,
.tasarrufRozet {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}

.satirRozet {
  background: var(--vurgu);
  color: var(--vurguMetin);
}

.tasarrufRozet {
  background: var(--vurguYumusak);
  color: var(--vurgu2);
  border: 1px solid var(--vurgu);
}

.tabloListe {
  margin: 0;
  padding-left: 18px;
  color: var(--soluk);
  font-size: .94rem;
}

.tabloListe li { margin: 2px 0; }

/* Ekran okuyucuya açık, gözle görünmeyen başlık. */
.gizliMetin {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 860px) {
  .fiyatTablo,
  .fiyatTablo tbody,
  .fiyatTablo tr,
  .fiyatTablo th,
  .fiyatTablo td { display: block; width: 100%; }

  .fiyatTablo thead { display: none; }

  .fiyatTablo { border: 0; background: none; box-shadow: none; }

  .fiyatTablo tbody tr {
    margin-bottom: 16px;
    border: 1px solid var(--cizgi);
    border-radius: 14px;
    background: var(--kart);
    box-shadow: var(--golge);
    overflow: hidden;
  }

  .fiyatTablo tbody tr.oneCikan { border-color: var(--vurgu); }

  .fiyatTablo tbody th {
    background: var(--zemin2);
    font-size: 1.1rem;
  }

  /* Hücrenin başlığı solda, değeri sağda. */
  .fiyatTablo td[data-baslik]::before {
    content: attr(data-baslik);
    display: block;
    margin-bottom: 2px;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--soluk);
  }
}