/* RestoTrack sayfasına özel: telefon ekran görüntüleri ve kasadaki
   (/urunler/paket-servis/restotrack/) Yalnız bu sayfa yükler, pages.css'ten SONRA. Renkler token (dogrula K5), köşe sınırı 8px (K3).
   Kasa çiziminin renkleri tokens.css --kh-* (yalnız burada).
   kurye haritasının HTML/CSS çizimi.
   Ekranlar iPhone'dan alındı; çerçeve ve kamera boşluğu yok,
   yalnızca yuvarlak köşeli, gölgeli ekran. */

.telefon {
  position: relative;
  margin: 0;
  border-radius: 9% / 4%;
  overflow: hidden;
  background: var(--beyaz);
  box-shadow:
    0 0 0 1px rgba(29, 29, 27, .08),
    0 28px 48px -22px rgba(29, 29, 27, .45),
    0 8px 16px -8px rgba(29, 29, 27, .18);
}
.telefon img {
  display: block;
  width: 100%;
  height: auto;
}

/* İki ekran yan yana, ikincisi biraz aşağıda */
.telefon-cift {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 15rem));
  justify-content: center;
  align-items: start;
  gap: var(--b-5);
  margin: 0;
}
.telefon-cift .telefon:nth-child(2) { transform: translateY(var(--b-10)); }

/* Giriş görseli: üç ekran iç içe */
.telefon-dizi {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  margin: 0;
}
.telefon-dizi .telefon { flex: none; width: 36%; }
.telefon-dizi .telefon + .telefon { margin-left: -6%; }
.telefon-dizi .telefon:nth-child(1) { z-index: 1; }
.telefon-dizi .telefon:nth-child(2) { z-index: 3; transform: translateY(var(--b-10)); }
.telefon-dizi .telefon:nth-child(3) { z-index: 2; }
.telefon-dizi figcaption,
.telefon-cift figcaption {
  flex-basis: 100%;
  grid-column: 1 / -1;
  margin-top: var(--b-12);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--metin-soluk);
}

/* İki yoldan atama: ikon kartları */
.atama {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--b-5);
}
.atama .kart { position: relative; }
.atama__etiket {
  display: inline-block;
  margin-bottom: var(--b-3);
  padding: 2px 10px;
  border-radius: var(--r-lg);
  background: var(--red-50);
  color: var(--red-700);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* ---------- Kasadaki kurye haritası (HTML/CSS çizimi) ---------- */
.pencere {
  border: 1px solid var(--kenarlik);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--beyaz);
  box-shadow: var(--sh-lg);
  font-family: var(--font-govde);
  color: var(--n-900);
}
.pencere__ust {
  display: flex;
  align-items: center;
  gap: var(--b-3);
  padding: 10px var(--b-4);
  background: var(--n-100);
  border-bottom: 1px solid var(--kenarlik);
}
.pencere__nokta { display: flex; gap: 6px; }
.pencere__nokta i { width: 10px; height: 10px; border-radius: 50%; background: var(--n-300); }
.pencere__adres {
  flex: 1;
  max-width: 26rem;
  padding: 4px var(--b-3);
  border-radius: var(--r-lg);
  background: var(--beyaz);
  font-size: var(--fs-xs);
  color: var(--metin-soluk);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kh { font-size: 13px; line-height: 1.35; }
.kh svg { display: block; }

/* Üst menü */
.kh__menu {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--kh-cizgi);
  overflow: hidden;
}
.kh__logo {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-right: 8px;
  border-radius: 8px;
  background: var(--red-600);
  color: var(--beyaz);
}
.kh__logo svg { width: 20px; height: 20px; }
.kh__sekme {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 2px 10px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--kh-sekme);
}
.kh__sekme svg { width: 18px; height: 18px; }
.kh__sekme--aktif { color: var(--red-600); box-shadow: inset 0 -2px 0 var(--red-600); }

/* Durum süzgeçleri */
.kh__suzgec {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--kh-cizgi);
  overflow-x: auto;
  scrollbar-width: none;
}
.kh__suzgec::-webkit-scrollbar { display: none; }
.kh__baslik {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 6px;
  font-weight: 700;
  color: var(--n-900);
}
.kh__baslik svg { width: 16px; height: 16px; color: var(--red-600); }
.kh__cip {
  flex: none;
  padding: 4px 11px;
  border: 1px solid var(--kh-kenar);
  border-radius: var(--r-lg);
  font-size: 12px;
  font-weight: 600;
  color: var(--n-600);
  white-space: nowrap;
}
.kh__cip--acik { border-color: var(--n-900); background: var(--n-900); color: var(--beyaz); }

/* Gövde: harita + sipariş sütunu */
.kh__govde {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  min-height: 420px;
}
.kh__harita {
  position: relative;
  overflow: hidden;
  background: var(--kh-harita);
}
.kh__harita > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.kh__pin {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.kh__pin b {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--kh-yesil);
  color: var(--beyaz);
  font-size: 11px;
  white-space: nowrap;
}
.kh__pin i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--beyaz);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--kh-yesil);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.kh__pin i svg { width: 15px; height: 15px; color: var(--beyaz); transform: rotate(45deg); }
.kh__pin--mesgul b, .kh__pin--mesgul i { background: var(--kh-turuncu); }
/* Haritadaki iğnelerin yeri (kaynakta satır içi stildi) */
.kh__pin--k1 { left: 56%; top: 44%; }
.kh__pin--k2 { left: 30%; top: 30%; }
.kh__pin--adres { left: 76%; top: 62%; }
.kh__pin--adres b { background: var(--red-600); }
.kh__pin--adres i { background: var(--red-600); width: 24px; height: 24px; }
.kh__pin--adres i svg { width: 12px; height: 12px; }

.kh__kuryeler {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 230px;
  padding: 10px 12px;
  border-radius: var(--r-lg);
  background: rgba(29, 29, 27, .92);
  color: var(--beyaz);
}
.kh__kuryeler-bas { display: flex; align-items: baseline; gap: 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.kh__kuryeler-bas b { font-size: 14px; }
.kh__kuryeler-bas span { font-size: 11px; color: rgba(255, 255, 255, .7); }
.kh__kurye { display: grid; grid-template-columns: 10px 1fr; column-gap: 8px; align-items: center; padding-top: 7px; }
.kh__kurye i { width: 8px; height: 8px; border-radius: 50%; background: var(--kh-yesil-acik); }
.kh__kurye--mesgul i { background: var(--kh-turuncu-acik); }
.kh__kurye--kapali i { background: var(--kh-kirmizi); }
.kh__kurye small { grid-column: 2; font-size: 11px; color: rgba(255, 255, 255, .6); }

.kh__yan {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border-left: 1px solid var(--kh-cizgi);
  background: var(--n-100);
}
.kh__tur {
  display: flex;
  gap: 4px;
  padding: 6px;
  border-radius: 8px;
  background: var(--n-900);
}
.kh__tur span {
  flex: 1;
  padding: 5px 4px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--kh-soluk-ters);
  text-align: center;
  white-space: nowrap;
}
.kh__tur span:first-child { background: var(--red-600); color: var(--beyaz); }

.kh__siparis {
  padding: 10px;
  border: 2px solid var(--red-600);
  border-radius: var(--r-lg);
  background: var(--beyaz);
}
.kh__satir { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kh__satir + .kh__satir { margin-top: 8px; }
.kh__no { padding: 1px 8px; border-radius: 6px; background: var(--n-900); color: var(--beyaz); font-weight: 700; }
.kh__soluk { font-size: 11px; color: var(--n-500); }
.kh__etiketler { display: flex; gap: 4px; }
.kh__etiketler span { padding: 1px 6px; border: 1px solid var(--kh-kenar); border-radius: 4px; font-size: 11px; }
.kh__etiketler span:last-child { border-color: var(--red-600); background: var(--red-600); color: var(--beyaz); }
.kh__durum {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  margin-top: 8px;
}
.kh__kutu { padding: 6px 8px; border-radius: 8px; background: var(--n-100); }
.kh__kutu--tutar { background: var(--kh-yesil-zemin); text-align: right; }
.kh__kutu--tutar small { display: block; font-size: 11px; color: var(--kh-yesil-koyu); }
.kh__kutu--tutar b { font-size: 18px; color: var(--kh-yesil-koyu); }
.kh__kurye-ad { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--kh-yesil-koyu); }
.kh__kurye-ad svg { width: 12px; height: 12px; }
.kh__gecikme { color: var(--red-700); font-weight: 700; }
.kh__ikon { display: inline-flex; align-items: center; gap: 6px; }
.kh__ikon svg { width: 13px; height: 13px; color: var(--n-500); }
.kh__sure {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--beyaz);
  font-weight: 600;
}
.kh__sure svg { width: 15px; height: 15px; }
.kh-not {
  margin-top: var(--b-4);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--metin-soluk);
}
.kh-ozellik { margin-top: var(--b-8); }

@media (max-width: 900px) {
  .telefon-cift { grid-template-columns: repeat(2, minmax(0, 11rem)); gap: var(--b-3); }
  .telefon-cift .telefon:nth-child(2) { transform: translateY(var(--b-6)); }
  .atama { grid-template-columns: minmax(0, 1fr); }
  .kh__govde { grid-template-columns: minmax(0, 1fr); }
  .kh__harita { min-height: 340px; }
  /* Kurye listesi kutusu haritanın altını kaplar: adres işareti yukarı alınır */
  .kh__pin--adres { left: 80%; top: 24%; }
  .kh__yan { border-left: 0; border-top: 1px solid var(--kh-cizgi); }
  .kh__sekme:nth-child(n+5) { display: none; }
}
@media (max-width: 480px) {
  .kh__kuryeler { width: auto; right: 12px; }
}