/* PlanPeek tanitim sayfalari — krem duzen (19 Eki 2026, KARARLAR K-143; once K-060).
   Temel: /css/krem.css (renkler, yazi, ust/alt bilgi, bolumler, adimlar, sik sorulanlar).
   Bu dosya YALNIZCA:
     1) telefon cizimi (PlanPeek'in kendi koyu paleti — uygulamanin gorunumu, urun gorseli olarak kalir)
     2) krem.css'te olmayan birkac parca (acilis duzeni, magaza rozeti, uc "yok", listeler)
   krem degiskenleri (--zemin, --vurgu ...) burada YENIDEN TANIMLANMAZ; uygulamanin renkleri
   .telefon icinde --pp-* adiyla durur. Gizlilik sayfalari bu dosyayi yuklemez (krem.css .kr-belge).
   text-transform: uppercase KULLANILMAZ (K-005). */

/* ---------- acilis: metin solda, telefon sagda ---------- */
.pp-kahraman { padding-block: 4.5rem 4rem; }
.pp-kahraman-ic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 4.5rem; align-items: center; }
.pp-kahraman-metin { display: grid; gap: 1.5rem; justify-items: start; }
.pp-vurgu { color: var(--vurgu); }
.pp-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-top: 0.5rem; }

/* "Yakinda Google Play'de" — bilerek BAGLANTI DEGIL (uygulama henuz magazada yok, K-058) */
.pp-magaza {
  display: inline-flex; align-items: center; gap: 0.8rem;
  padding: 0.55rem 1.2rem 0.55rem 0.6rem;
  border: 1px solid var(--kenar); border-radius: 12px; background: var(--kart);
}
.pp-magaza img { width: 42px; height: 42px; padding: 6px; border-radius: 10px; background: #111318; }   /* uygulama simgesi koyu zemin icin cizildi */
.pp-magaza strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.25; }
.pp-magaza small { display: block; font-size: 14px; line-height: 1.3; color: var(--ikincil); }

/* ---------- telefon: uygulamanin goruntuleyici duzeninin CIZIMI ----------
   (ekran goruntusu degil, K-055). Duzen _PROTO_DWG/ZkcDwgMobil/MainPage.xaml'e gore: ust cubukta
   geri / dosya adi / Sigdir / Bilgi (gri hap dugmeler #242833), hemen altinda pafta sekmeleri
   (secili sari), sag altta yakinlastirma hapi. Uygulamada duzen degisirse burasi da degismeli. */
.telefon {
  --pp-ink: #111318; --pp-surface: #181B22; --pp-line: #272B35; --pp-text: #E7EAF0;
  --pp-muted: #8E96A6; --pp-accent: #F2C14E; --pp-cyan: #4FD1E8; --pp-red: #FF6B5E;
  --pp-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  justify-self: center; width: min(100%, 280px); aspect-ratio: 9 / 19;
  background: #0A0B0E; border: 1px solid #2E333E; border-radius: 34px; padding: 11px;
  box-shadow: 0 1px 2px rgba(43, 33, 24, 0.06), 0 32px 64px -28px rgba(43, 33, 24, 0.45);
  color: var(--pp-text);
}
.ekran { height: 100%; border-radius: 24px; background: var(--pp-ink); overflow: hidden; display: flex; flex-direction: column; }
.durum { display: flex; justify-content: space-between; padding: 9px 18px 5px; font: 500 0.64rem var(--pp-mono); color: var(--pp-muted); }
.cubuk {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  border-bottom: 1px solid var(--pp-line); font-size: 0.74rem; font-weight: 500;
}
.cubuk .ad { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--pp-mono); font-size: 0.68rem; }
.cubuk .dugme { padding: 3px 9px; border-radius: 999px; background: #242833; color: var(--pp-text); font-size: 0.64rem; }
.sekmeler { display: flex; gap: 4px; padding: 7px 8px; font: 500 0.64rem var(--pp-mono); }
.sekmeler span { padding: 5px 9px; border-radius: 5px; background: var(--pp-surface); color: var(--pp-muted); }
.sekmeler .secili { background: var(--pp-accent); color: var(--pp-ink); }
.cizim { flex: 1; display: grid; place-items: center; padding: 10px; position: relative; }
.cizim svg { width: 100%; height: auto; }
.yakin {
  position: absolute; right: 10px; bottom: 12px; padding: 4px 12px; border-radius: 999px;
  background: rgba(36, 40, 51, 0.9); border: 1px solid #3A4050; font: 500 0.64rem var(--pp-mono);
}
/* cizim katmanlari */
.k-duvar { stroke: var(--pp-text); }
.k-kapi { stroke: var(--pp-accent); }
.k-arm, .k-linye { stroke: var(--pp-cyan); }
.k-priz { stroke: var(--pp-red); }
.k-olcu { stroke: var(--pp-muted); }
.k-yazi text { font-family: var(--pp-mono); fill: #AEB5C2; font-size: 8.5px; font-weight: 500; }
.k-yazi .olcu { font-size: 9px; fill: var(--pp-muted); }

/* ---------- uc "yok" (reklam, hesap, internet izni) ----------
   Madde basi baslik DEGIL strong: serit h1 ile ilk h2 arasinda duruyor, baslik olsa seviye atlardi. */
.pp-serit { padding-bottom: 5rem; }
.pp-yoklar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--kenar); }
.pp-yoklar li { display: grid; gap: 0.35rem; align-content: start; min-width: 0; }
.pp-yoklar strong { font-size: 18px; font-weight: 600; }
.pp-yoklar p { color: var(--ikincil); }
.pp-yoklar svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- "neyi gosterir" listesi ---------- */
.pp-liste { max-width: 62rem; margin: 0 auto; columns: 2 22rem; column-gap: 3rem; }
.pp-liste li {
  break-inside: avoid; position: relative; padding: 0.9rem 0 0.9rem 1.6rem;
  border-bottom: 1px solid var(--kenar); font-size: 17px; line-height: 1.55;
}
.pp-liste li::before { content: ""; position: absolute; left: 0; top: 1.66rem; width: 0.8rem; height: 2px; background: var(--vurgu); }

/* ---------- gizlilik: madde kutusu (iki sutun krem.css .kr-iki-sutun) ---------- */
.pp .kr-bolum-bas-sol .kr-dugme { margin-top: 0.5rem; }
.pp-madde { padding: 0.4rem 1.6rem; border: 1px solid var(--kenar); border-radius: 14px; background: var(--zemin); }
.pp-madde li { padding: 1rem 0; line-height: 1.6; color: var(--ikincil); }
.pp-madde li + li { border-top: 1px solid var(--kenar); }
.pp-madde b { font-weight: 600; color: var(--metin); }

/* ---------- bilmenizde fayda var ---------- */
.pp-bilgi { max-width: 46rem; margin: 0 auto; display: grid; gap: 1rem; }
.pp-bilgi p { font-size: 18px; line-height: 1.7; color: var(--ikincil); }

@media (max-width: 900px) {
  .pp-kahraman-ic { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
}
@media (max-width: 640px) {
  .pp-kahraman { padding-block: 3rem; }
  .pp-serit { padding-bottom: 4rem; }
  .pp-yoklar { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .pp-madde { padding: 0.25rem 1.1rem; }
  .pp-liste li { font-size: 16px; }
  .pp-bilgi p { font-size: 17px; }
}