/* ==========================================================================
   Emek Sofrası — Paket Servis / Yakında
   Kilitli tasarım: paket servis sayfası.jpeg — oranlar/konum birebir.
   - Manzara fotoğrafı yerleştirilir (yatayda sıkıştırılmaz); SOL KENARI DIŞA
     doğru hafif kavisli → fotoğrafın DIŞINDA kalan kısımlar ana yeşil.
   - Fotoğrafın SOL tarafı (kurye ↔ sol kenar arası) HAFİF BEYAZLATILMIŞ
     (yarı saydam krem katman, sağ kenarı dışa kavisli) → metin bunun üzerinde.
   - Metin koyu (krem üzerinde): koyu yeşil başlık + altın vurgu.
   Üst menü/logo/token'lar home.css'ten.

   VIEWPORT: 1. bölüm her ekran yüksekliğine sığar. Mobilde dikey akış,
   görsel en sonda bant.
   ========================================================================== */

:root {
  --pk-ink:   #163b2c;   /* krem üzerinde koyu yeşil metin */
  --pk-circ:  #1c4a37;   /* fayda daireleri */
  --pk-gold:  #b98a2c;   /* altın vurgu (açık zeminde okunur) */
  --pk-gold-2:#d9ab48;   /* buton altını */
  --pk-btn-b: #a9802b;
  --pk-btn-ink:#163b2c;
  --pk-scrim: rgba(252, 246, 233, 0.90);  /* HAFİF beyazlatılmış katman */
}

/* --- Header altı ince altın süs çizgisi --- */
.pk-topline {
  position: relative; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  background: var(--hero-green);
  color: var(--gold-warm);
  padding: 6px clamp(20px, 6vw, 90px) 9px;
}
.pk-topline span { height: 1.5px; width: min(30vw, 360px); background: currentColor; opacity: .8; }
.pk-topline svg { width: 128px; height: auto; flex-shrink: 0; }

/* Hero = ortada GÖRSEL bandı, iki yanda YEŞİL.
   Görsel doğal oranıyla (birebir tasarım) ortalanır; sağ/sol kalan yeşil. */
.pk-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  background: var(--hero-green);
}
.pk-hero__frame {
  position: relative;
  /* İLK EKRANA SIĞAR + GÖRSEL DOĞAL ORANINDA (yakınlaştırma/kırpma yok):
     yükseklik viewport'a sabit, genişlik görselin oranına göre. */
  height: calc(100svh - var(--header-h) - 34px);
  aspect-ratio: 3 / 2;   /* yeni arka plan görseli (1536×1024) doğal oranı */
  width: auto;
  max-width: 94vw;
  overflow: hidden;
  background: var(--pk-scrim);
}

/* --- Manzara fotoğrafı — frame'i DOĞAL oranıyla doldurur (kırpma/zoom yok) --- */
.pk-hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* --- Beyazlatma katmanı — yazıların olduğu SOL bölge (mockup) --- */
.pk-hero__scrim {
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(252, 246, 233, 0.90) 0%,
    rgba(252, 246, 233, 0.86) 30%,
    rgba(252, 246, 233, 0.52) 44%,
    rgba(252, 246, 233, 0.14) 56%,
    rgba(252, 246, 233, 0) 68%
  );
}

/* --- İçerik katmanı — frame'in SOL kısmı üzerinde --- */
.pk-hero__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding:
    clamp(16px, 3svh, 40px)
    clamp(24px, 5vw, 70px)
    clamp(16px, 3svh, 40px)
    clamp(22px, 3.2vw, 60px);
}

/* Geri Dön — fotoğraf/krem katman üzerinde koyu metin */
.pk-back {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: clamp(12px, 2.4svh, 26px);
  padding: 8px 18px;
  border: 1.5px solid var(--pk-gold);
  border-radius: 999px;
  color: var(--pk-ink);
  text-decoration: none;
  font-family: var(--font-body); font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
.pk-back:hover { background: var(--pk-gold); color: #fff; }
.pk-back:focus-visible { outline: 3px solid var(--pk-gold); outline-offset: 2px; }

.pk-copy {
  width: min(540px, 45vw);
  color: var(--pk-ink);
  margin-left: clamp(14px, 1.8vw, 36px);   /* mockup: metin sola yakın başlar, büyük başlıkla kuryeye ulaşır */
}

/* "Yakında" — el yazısı, eğik + altın fırça flikleri */
.pk-copy__pre {
  position: relative;
  display: inline-block; margin: 0 0 2px clamp(6px, 1vw, 16px);
  font-family: "Dancing Script", var(--font-display), cursive;
  font-weight: 700;
  font-size: clamp(2.3rem, 2.4vw + 1.5svh, 4.1rem);
  line-height: 1;
  color: var(--pk-ink);
  transform: rotate(-4deg);
  transform-origin: left center;
}
.pk-flicks {
  position: absolute; top: 50%;
  width: clamp(26px, 3vw, 40px); height: clamp(26px, 3vw, 40px);
  transform: translateY(-58%);
  color: var(--pk-gold);
  pointer-events: none;
}
.pk-flicks--l { left: -0.9em; }
.pk-flicks--r { right: -0.9em; }

/* Başlık — çok büyük, cesur, fotoğrafa doğru taşar */
.pk-copy__title {
  margin: clamp(6px, 1.7svh, 20px) 0 clamp(8px, 1.6svh, 16px);
  font-family: var(--font-body); font-weight: 900;
  line-height: 0.92; letter-spacing: -0.015em;
  text-transform: uppercase;
}
.pk-copy__line {
  display: block;
  font-size: clamp(3rem, 3.3vw + 1.1svh, 5.5rem);
  color: var(--pk-ink);
  white-space: nowrap;
}
.pk-copy__accent {
  display: block;
  margin-top: 0.04em;
  margin-left: clamp(24px, 4.4vw, 78px);   /* mockup: "Başlıyor!" kademeli sağa kayık */
  font-size: clamp(3.1rem, 3.5vw + 1.15svh, 5.8rem);
  color: var(--pk-gold);
  transform: rotate(-1.2deg);
  transform-origin: left center;
  white-space: nowrap;
}

.pk-orn {
  display: block; color: var(--pk-gold);
  margin: clamp(6px, 1.4svh, 14px) 0 clamp(10px, 2svh, 18px);
}
.pk-orn svg { width: clamp(150px, 15vw, 220px); height: auto; display: block; }

.pk-copy__lead {
  margin: 0;
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(1.05rem, 1vw + .5svh, 1.5rem);
  line-height: 1.32;
  color: var(--pk-ink);
}
.pk-copy__follow {
  position: relative;
  display: inline-block;
  margin: clamp(6px, 1.4svh, 14px) 0 0;
  padding-bottom: 12px;
  font-family: "Dancing Script", var(--font-display), cursive;
  font-weight: 700;
  font-size: clamp(1.4rem, 1.5vw + .5svh, 2.1rem);
  line-height: 1.05;
  color: var(--pk-ink);
}
.pk-swoosh {
  position: absolute; left: 0;
  bottom: 0; width: 100%; height: 12px;
  color: var(--pk-gold);
}

/* Sipariş Ver — geniş altın PILL, ortalı yazı, sol scooter ikon; PASİF */
.pk-order {
  position: relative;
  margin-top: clamp(10px, 2.2svh, 18px);
  align-self: flex-start;
  display: flex; flex-direction: column; align-items: center;
  min-width: min(280px, 72%);
  padding: clamp(10px, 1.7svh, 15px) clamp(18px, 2.2vw, 30px) clamp(11px, 1.8svh, 16px);
  padding-left: clamp(48px, 5.6vw, 64px);
  border: 1.5px solid var(--pk-btn-b);
  border-radius: 999px;
  background: var(--pk-gold-2);
  color: var(--pk-btn-ink);
  cursor: not-allowed;
  line-height: 1.02;
}
.pk-order__ico {
  position: absolute; left: clamp(16px, 2vw, 26px); top: 50%;
  transform: translateY(-50%);
  width: clamp(28px, 3vw, 38px); height: clamp(28px, 3vw, 38px);
  color: var(--pk-btn-ink);
}
.pk-order__ico svg { width: 100%; height: 100%; display: block; }
.pk-order__title {
  font-family: var(--font-body); font-weight: 900;
  font-size: clamp(1.15rem, 1.1vw + .35svh, 1.65rem);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.pk-order__status {
  margin-top: 3px;
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(0.72rem, 0.4vw + .2svh, 0.88rem);
  opacity: 0.82;
}

/* Fayda satırları — koyu yeşil daire + altın ikon, koyu yeşil metin */
.pk-benefits {
  list-style: none; margin: clamp(10px, 2.2svh, 18px) 0 0; padding: 0;
  display: grid; gap: clamp(8px, 1.7svh, 16px);
}
.pk-benefits li { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 18px); }
.pk-benefits__ico {
  flex-shrink: 0;
  width: clamp(42px, 3.6vw + 1svh, 56px); height: clamp(42px, 3.6vw + 1svh, 56px);
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pk-circ);
  color: var(--pk-gold-2);
}
.pk-benefits__ico svg { width: 56%; height: 56%; }
.pk-benefits li span:last-child {
  font-family: var(--font-body); line-height: 1.32;
  color: #2c4a3c;
  font-size: clamp(0.88rem, 0.5vw + .3svh, 1.02rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.pk-benefits li strong {
  display: block;
  color: var(--pk-ink); font-size: clamp(0.98rem, 0.6vw + .3svh, 1.14rem);
  font-weight: 900; letter-spacing: 0.03em; text-transform: uppercase;
}

/* ==========================================================================
   DUYARLI — YÜKSEKLİK MERDİVENİ
   ========================================================================== */
@media (min-width: 901px) and (max-height: 960px) {
  .pk-copy__pre { font-size: clamp(2rem, 2.2vw + 1.3svh, 3.5rem); }
  .pk-copy__line { font-size: clamp(2.5rem, 3vw + 1.6svh, 4.8rem); }
  .pk-copy__accent { font-size: clamp(2.6rem, 3.2vw + 1.7svh, 5.1rem); }
}
@media (min-width: 901px) and (max-height: 860px) {
  :root { --header-h: 74px; --logo-w: clamp(100px, 10.5vw, 150px); }
  .pk-copy__title { margin-bottom: clamp(6px, 1.2svh, 12px); }
  .pk-copy__line { font-size: clamp(2.2rem, 2.6vw + 1.3svh, 3.9rem); }
  .pk-copy__accent { font-size: clamp(2.3rem, 2.8vw + 1.4svh, 4.2rem); }
  .pk-copy__lead { font-size: clamp(1rem, .9vw + .4svh, 1.28rem); line-height: 1.28; }
  .pk-copy__follow { font-size: clamp(1.3rem, 1.3vw + .4svh, 1.8rem); }
  .pk-benefits { margin-top: clamp(10px, 1.8svh, 18px); gap: clamp(8px, 1.5svh, 14px); }
  .pk-benefits__ico { width: 46px; height: 46px; }
  .pk-orn svg { width: clamp(56px, 6vw, 78px); }
}
@media (min-width: 901px) and (max-height: 770px) {
  :root { --header-h: 66px; --logo-w: clamp(86px, 9vw, 118px); }
  .pk-topline { padding: 4px 0 6px; }
  .pk-copy__pre { font-size: clamp(1.7rem, 1.9vw + 1svh, 2.6rem); }
  .pk-copy__line { font-size: clamp(1.95rem, 2.2vw + 1svh, 3.1rem); }
  .pk-copy__accent { font-size: clamp(2.05rem, 2.4vw + 1svh, 3.3rem); }
  .pk-orn { display: none; }
  .pk-benefits__ico { width: 42px; height: 42px; }
  .pk-order__title { font-size: 1.12rem; }
}
@media (min-width: 901px) and (max-height: 670px) {
  .pk-hero__frame, .pk-hero__content { min-height: 0; }
  .pk-hero__content { justify-content: flex-start; padding-top: clamp(10px, 2svh, 20px); }
  .pk-copy__lead br { display: none; }
  .pk-benefits { gap: clamp(6px, 1.2svh, 11px); }
}

/* Laptop / dar masaüstü */
@media (min-width: 901px) and (max-width: 1120px) {
  .pk-hero__content { justify-content: flex-start; padding-top: clamp(18px, 4svh, 38px); }
  .pk-hero__scrim {
    background: linear-gradient(
      100deg,
      rgba(252, 246, 233, 0.90) 0%,
      rgba(252, 246, 233, 0.86) 40%,
      rgba(252, 246, 233, 0.52) 54%,
      rgba(252, 246, 233, 0.14) 66%,
      rgba(252, 246, 233, 0) 78%
    );
  }
  .pk-copy { width: min(450px, 50vw); }
  .pk-copy__line { font-size: clamp(2.5rem, 5.8vw, 3.9rem); }
  .pk-copy__accent { font-size: clamp(2.6rem, 6vw, 4.1rem); }
}

/* ==========================================================================
   MOBİL / DİKEY TABLET (≤900) — dikey yığın, GÖRSEL EN SONDA
   ========================================================================== */
@media (max-width: 900px) {
  .pk-topline { padding: 5px 0 7px; }
  .pk-topline span { width: 24vw; }

  /* Mobil: fotoğraf tüm hero'nun arkasında full-bleed, yazılar üstünde.
     Dikey beyazlatma katmanı: üstte fotoğraf hissedilir, aşağı indikçe
     krem zemin belirginleşir (buton + fayda satırları neredeyse düz krem). */
  .pk-hero {
    display: block;
    min-height: 0;
    background: var(--pk-scrim);
    overflow: hidden;
  }
  /* mobilde yeşil yan bantlar YOK — frame tam genişlik, fotoğraf full-bleed,
     yükseklik içeriğe göre (aspect-ratio kısıtı ve clip yok) */
  .pk-hero__frame {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    overflow: visible;
  }
  .pk-hero__content { height: auto; }
  .pk-hero__bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 56% 74%;   /* kuryeci + çantadaki logo görünür */
    z-index: 0;
    clip-path: none;
  }
  .pk-hero__scrim {
    display: block;
    position: absolute; inset: 0;
    z-index: 1;
    background: linear-gradient(
      180deg,
      rgba(252, 246, 233, 0.58) 0%,
      rgba(252, 246, 233, 0.62) 32%,
      rgba(252, 246, 233, 0.60) 52%,
      rgba(252, 246, 233, 0.82) 74%,
      rgba(252, 246, 233, 0.92) 100%
    );
  }

  /* Üst metin bloğu fotoğraf üzerinde — tonları koyulaştır + krem hâle ile
     okunurluğu artır (arka plan hâlâ hafif görünür) */
  .pk-copy__pre,
  .pk-copy__line,
  .pk-copy__lead,
  .pk-copy__follow { color: #0e2c1d; }
  .pk-copy__accent,
  .pk-orn { color: #8a5c15; }
  .pk-copy__pre,
  .pk-copy__line,
  .pk-copy__accent,
  .pk-copy__lead,
  .pk-copy__follow {
    text-shadow: 0 1px 3px rgba(252, 246, 233, 0.95),
                 0 0 16px rgba(252, 246, 233, 0.75);
  }

  .pk-hero__content {
    position: relative;
    z-index: 2;
    min-height: 0;
    display: block;
    max-width: 640px;
    margin-inline: auto;
    padding: clamp(18px, 5svh, 36px) clamp(18px, 5vw, 28px) clamp(24px, 5svh, 40px);
  }
  .pk-copy { width: 100%; margin-left: 0; }
  .pk-copy__line { font-size: clamp(2.5rem, 10.5vw, 3.9rem); white-space: normal; }
  .pk-copy__accent { font-size: clamp(2.6rem, 11vw, 4.1rem); margin-left: 0; white-space: normal; }
  .pk-copy__pre { font-size: clamp(2rem, 8.6vw, 2.9rem); margin-left: 0; }
  .pk-order { min-width: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pk-back { transition: none; }
}