/* ==========================================================================
   Krowten — PAKET KARTLARI  (TEK KAYNAK)
   HTML ve davranis: dist/paket-karti.js. Baska hicbir stil dosyasinda paket
   kurali YOK; tasarim degisikligi yalnizca burada yapilir.
   Renkler tema degiskenlerinden gelir (koyu varsayilan, acik tema
   html[data-theme=light]); iki tema icin ayri kural gerekmez.
   ========================================================================== */

.pk {
  --pk-mavi: var(--accent);
  --pk-kart: var(--surface);
  --pk-zemin: var(--surface2);
  --pk-cizgi: var(--line);
  --pk-yazi: var(--text);
  --pk-soluk: var(--muted);
  --pk-yumusak: color-mix(in srgb, var(--accent) 13%, var(--surface));
  --pk-golge: 0 1px 2px rgb(0 0 0 / .25), 0 22px 44px -32px rgb(0 0 0 / .7);
  --pk-yaricap: 20px;
  display: grid;
  gap: 22px;
}
html[data-theme=light] .pk {
  --pk-yumusak: color-mix(in srgb, var(--accent) 9%, #fff);
  --pk-golge: 0 1px 2px rgb(11 22 32 / .04), 0 22px 44px -30px rgb(11 50 90 / .32);
}

/* Panel (panel.krowten.com.tr) ayni dosyayi yukler; orada degisken adlari
   farkli (--surface-2, --text-3). Ayri stil yok, yalnizca ad esleme. */
html.krw-app .pk {
  --pk-zemin: var(--surface-2);
  --pk-soluk: var(--text-3);
}

/* ---------------------------------------------------------- donem anahtari */
.pk-donem {
  justify-self: center;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--pk-cizgi);
  border-radius: 999px;
  background: var(--pk-kart);
  box-shadow: var(--pk-golge);
}
.pk-donem button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--pk-soluk);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.pk-donem button:hover { color: var(--pk-yazi); }
.pk-donem button[aria-pressed="true"] {
  background: var(--pk-mavi);
  color: #fff;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--pk-mavi) 80%, transparent);
}
.pk-donem em {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pk-mavi) 14%, transparent);
  color: var(--pk-mavi);
}
.pk-donem button[aria-pressed="true"] em { background: rgb(255 255 255 / .2); color: #fff; }
.pk-hediye { width: 16px; height: 16px; }
.pk-donem button:focus-visible,
.pk-dugme:focus-visible,
.pk-karsilastir summary:focus-visible { outline: 2px solid var(--pk-mavi); outline-offset: 2px; }

/* ---------------------------------------------------------------- izgara */
.pk-izgara {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
  padding-top: 14px; /* rozet kartin ustune tasiyor */
}
.pk-izgara[data-pk-sayi="1"] { grid-template-columns: minmax(0, 560px); justify-content: center; }
.pk-izgara[data-pk-sayi="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pk-izgara[data-pk-sayi="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ------------------------------------------------------------------- kart */
.pk-kart {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px;
  border: 1px solid var(--pk-cizgi);
  border-radius: var(--pk-yaricap);
  background: var(--pk-kart);
  box-shadow: var(--pk-golge);
  min-width: 0;
}
.pk-izgara[data-pk-sayi="4"] .pk-bas h3 { font-size: 20px; }

/* Kart satirlari (baslik, fiyat, liste, dugme) butun kartlarda ayni hizada:
   uzun bir paket adi iki satira kirilinca komsu kartlarin fiyati kaymasin. */
@supports (grid-template-rows: subgrid) {
  .pk-izgara { row-gap: 0; }
  .pk-kart {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 22px;
    margin-bottom: 22px;
  }
  .pk-kart > .pk-dugme { align-self: end; }
  .pk-bas { align-self: start; }
}

.pk-onerilen {
  border: 1.5px solid var(--pk-mavi);
  background: linear-gradient(180deg, var(--pk-yumusak), var(--pk-kart) 45%);
}
.pk-rozet {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--pk-mavi);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--pk-mavi) 90%, transparent);
}
.pk-yildiz { width: 14px; height: 14px; }

.pk .pk-bas { display: flex; align-items: center; gap: 16px; min-width: 0; }
.pk-ikon {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--pk-yumusak);
  color: var(--pk-mavi);
}
.pk-ikon-svg { width: 26px; height: 26px; }
.pk .pk-bas h3 {
  margin: 0;
  font-family: var(--heading, inherit);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--pk-yazi);
}
.pk .pk-bas p { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--pk-soluk); }

.pk-fiyat { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 4px; }
.pk-tutar {
  font-family: var(--heading, inherit);
  font-size: clamp(36px, 3.4vw, 46px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--pk-yazi);
  font-variant-numeric: tabular-nums;
}
.pk-para { font-size: .8em; margin-left: 2px; }
.pk-yakinda { font-size: 28px; }
.pk-birim { font-size: 16px; color: var(--pk-soluk); }
.pk-not { flex-basis: 100%; font-size: 13px; color: var(--pk-soluk); }
.pk-donemler { flex-basis: 100%; font-size: 12px; line-height: 1.45; color: var(--pk-soluk); opacity: .8; }

.pk .pk-ozellik { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pk .pk-ozellik li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.5; color: var(--pk-yazi); }
.pk-tik {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 50%;
  background: var(--pk-yumusak);
  color: var(--pk-mavi);
  stroke-width: 2.2;
}

.pk-dugme {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 20px;
  border: 1px solid var(--pk-cizgi);
  border-radius: 14px;
  background: var(--pk-zemin);
  color: var(--pk-yazi);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.pk-dugme:hover { border-color: var(--pk-mavi); }
.pk-dugme-ana {
  border-color: transparent;
  background: var(--pk-mavi);
  color: #fff;
  box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--pk-mavi) 90%, transparent);
}
.pk-dugme-ana:hover { transform: translateY(-1px); border-color: transparent; }
.pk-ok { width: 20px; height: 20px; transition: transform .2s; }
.pk-dugme:hover .pk-ok { transform: translateX(3px); }

/* ---------------------------------------------------------- karsilastirma */
.pk-karsilastir {
  border: 1px solid var(--pk-cizgi);
  border-radius: 16px;
  background: var(--pk-kart);
  box-shadow: var(--pk-golge);
  overflow: hidden;
}
.pk-karsilastir summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  list-style: none;
  font-size: 16px;
  font-weight: 700;
  color: var(--pk-yazi);
  cursor: pointer;
}
.pk-karsilastir summary::-webkit-details-marker { display: none; }
.pk-izg { width: 24px; height: 24px; color: var(--pk-yazi); }
.pk-asagi { width: 20px; height: 20px; margin-left: auto; color: var(--pk-soluk); transition: transform .2s; }
.pk-karsilastir[open] .pk-asagi { transform: rotate(180deg); }

.pk-tablo-sar { overflow-x: auto; border-top: 1px solid var(--pk-cizgi); }
.pk-tablo { width: 100%; border-collapse: collapse; font-size: 14px; }
.pk-tablo th, .pk-tablo td { padding: 13px 24px; text-align: left; border-bottom: 1px solid var(--pk-cizgi); }
.pk-tablo tbody tr:last-child > * { border-bottom: 0; }
.pk-tablo thead th { font-size: 14px; font-weight: 700; color: var(--pk-yazi); background: var(--pk-zemin); }
.pk-tablo tbody th { font-weight: 500; color: var(--pk-soluk); min-width: 180px; }
.pk-tablo td { color: var(--pk-yazi); font-variant-numeric: tabular-nums; }
.pk-tablo td .pk-tik { width: 20px; height: 20px; }
.pk-gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ duyarli */
@media (max-width: 1150px) {
  .pk-izgara[data-pk-sayi="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .pk-izgara,
  .pk-izgara[data-pk-sayi="2"],
  .pk-izgara[data-pk-sayi="4"] { grid-template-columns: minmax(0, 1fr); column-gap: 22px; }
  .pk-kart { padding: 24px; margin-bottom: 30px; }
}
@media (max-width: 480px) {
  .pk-donem { display: flex; justify-self: stretch; }
  .pk-donem button { flex: 1 1 auto; justify-content: center; padding: 0 12px; }
  .pk-karsilastir summary { padding: 16px 18px; }
  .pk-tablo th, .pk-tablo td { padding: 12px 16px; }
  .pk-tablo tbody th { min-width: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .pk-donem button, .pk-dugme, .pk-ok, .pk-asagi { transition: none; }
}