/*
  TR: Karşılama sayfasının stilleri.

      RENKLER TASARIM BELİRTEÇLERİNDEN geliyor (`/shared/tokens.css`), sabit değer yazılmıyor.
      Sebebi yalnızca tutarlılık değil: kurumun vurgu rengi çalışma anında `--accent-primary`
      değişkenine yazılıyor (bkz. `shared/branding.js`). Sabit bir renk yazsaydık kurumun rengi
      sayfaya hiç geçmezdi.

  EN: The landing page's styles.

      THE COLOURS COME FROM THE DESIGN TOKENS (`/shared/tokens.css`); no fixed values are written.
      The reason is not only consistency: an organisation's accent colour is written into the
      `--accent-primary` variable at runtime (see `shared/branding.js`). With a fixed colour the
      organisation's own would never reach the page.
*/

/*
  TR: İÇERİK GENİŞLİĞİ TEK YERDE. Üst çubuk ile gövde AYNI değeri kullanmak zorunda: ikisi ayrı
      yazıldığında kurumun logosu içerikle hizasını kaybeder ve bu, ancak geniş ekranda görülen
      sessiz bir kayma üretir. Değişken, ikisinin ayrışmasını imkânsız kılıyor.

      760px'ten 1080px'e çıkarıldı: dar sütun okuma için iyi bir ölçüydü ama geniş ekranda sayfanın
      iki yanı boş kalıyordu ve sayfa terk edilmiş görünüyordu.
  EN: THE CONTENT WIDTH LIVES IN ONE PLACE. The top bar and the body must use the SAME value: written
      separately, the organisation's logo drifts out of line with the content — a silent shift
      visible only on a wide screen. The variable makes divergence impossible.

      Raised from 760px to 1080px: the narrow column was a good reading measure, but on a wide
      display it left both sides empty and the page looked abandoned.
*/
:root {
  --landing-width: 1080px;
}

body {
  margin: 0;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: var(--font-family);
  line-height: 1.6;
}

/* --- üst çubuk / top bar --- */

.landing-bar {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
}

.landing-bar-inner {
  max-width: var(--landing-width);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.landing-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  font-weight: 700;
  font-size: 15px;
  min-width: 0;
}

/*
  TR: Logo yüksekliği sınırlı, genişliği serbest. Kurumların logoları çok farklı oranlarda geliyor;
      kareye zorlamak yatay logoları eziyor.
  EN: The logo's height is bounded and its width free. Organisations' logos arrive in very different
      proportions, and forcing a square squashes the wide ones.
*/
.landing-brand img {
  height: 28px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}

.landing-brand span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-controls { display: flex; gap: 8px; }

.landing-control {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: 6px 12px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  min-width: 40px;
  transition: all var(--transition-speed) var(--transition-curve);
}

.landing-control:hover { color: var(--text-primary); }

/* --- gövde / body --- */

.landing {
  max-width: var(--landing-width);
  margin: 0 auto;
  padding: 28px 20px 48px;
}

.landing-hero h1 {
  font-size: 26px;
  line-height: 1.3;
  margin: 0 0 10px;
  color: var(--text-primary);
}

.landing-hero p {
  margin: 0 0 26px;
  color: var(--text-secondary);
  font-size: 15px;
}


.landing-hero p { max-width: 70ch; }

/*
  TR: `hidden` ÖZNİTELİĞİ HER ZAMAN KAZANIR. Tarayıcının `[hidden] { display: none }` kuralı yalnız
      bir kullanıcı-ajanı kuralıdır; `display: flex` yazan herhangi bir sınıf onu sessizce ezer. Bu
      projede iki kez yaşandı: rıza kutusu, iletişim bilgisi BOŞKEN görünüyordu — "boş bırakırsan
      adsız kalır" vaadiyle çelişen, verilmemiş bir veri için onay isteyen bir kutu. Tek tek kurallar
      yerine genel bir kural: JS'in gizlediği şey gizli kalır.
  EN: THE `hidden` ATTRIBUTE ALWAYS WINS. The browser's `[hidden] { display: none }` is a user-agent
      rule only, silently beaten by any class that sets `display: flex`. It happened twice here: the
      consent box showed while the contact field was EMPTY — contradicting the "leave it empty and you
      stay anonymous" promise and asking consent for data never given. One general rule rather than
      one per class: what the script hides stays hidden.
*/
[hidden] { display: none !important; }

/* ===========================================================================
   TR: Form ve iletişim kartı — iki sayfada ortak (`shared/feedback-form.js`, `shared/contact-card.js`).
       Tasarım: docs/05_UI/LandingFeedbackDemo.html (onaylı).
   EN: The form and the contact card — shared by both pages. Design: the approved demo.
   =========================================================================== */

/*
  TR: KURUM RENGİNİN YUMUŞAK TONLARI. Kurumun rengi çalışma anında `--accent-primary`'ye yazılıyor;
      buradaki tonlar ondan TÜRETİLDİĞİ için her kurumda kendiliğinden doğru renkte.
  EN: SOFT TONES OF THE ORGANISATION'S COLOUR. Its colour is written into `--accent-primary` at runtime;
      these tones are DERIVED from it, so they are right for every organisation automatically.
*/
:root {
  --lp-accent-soft: color-mix(in srgb, var(--accent-primary) 10%, transparent);
  --lp-accent-line: color-mix(in srgb, var(--accent-primary) 35%, transparent);
}

[data-theme="dark"] {
  --lp-accent-soft: color-mix(in srgb, var(--accent-primary) 18%, transparent);
}

/*
  TR: Masaüstünde form ile iletişim yan yana, telefonda alt alta (önce form). İletişim kartı yoksa
      (`is-single`) form tek başına okunur bir genişlikte kalır.
  EN: Side by side on desktop, stacked on a phone (form first). Without a contact card (`is-single`)
      the form stands alone at a readable width.
*/
.lp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.lp-grid.is-single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 720px;
}

.lp-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--card-shadow);
}

.lp-card-h {
  padding: 16px 20px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.lp-card-h h2 { font-size: 16px; margin: 0; color: var(--text-primary); }

.lp-card-ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--lp-accent-soft);
  color: var(--accent-primary);
  display: grid;
  place-items: center;
  flex: none;
}

.lp-card-b { padding: 16px 20px 20px; }

/* --- alanlar / fields --- */

.lp-field { margin-bottom: 14px; }

.lp-label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.lp-opt { font-weight: 500; color: var(--text-secondary); font-size: 12px; }

.lp-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background: var(--bg-primary);
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
  padding: 11px 12px;
  transition: border-color .2s, box-shadow .2s;
}

.lp-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--lp-accent-soft);
}

.lp-textarea { min-height: 128px; resize: vertical; line-height: 1.5; }

/*
  TR: TÜR — açılır liste değil, yan yana düğmeler: tek dokunuşla seçilir ve dört seçenek aynı anda
      görünür. Dar ekranda 2×2.
  EN: TYPE — side-by-side buttons rather than a dropdown: one tap, all four visible. 2×2 when narrow.
*/
.lp-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.lp-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 11px 6px;
  cursor: pointer;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background: var(--bg-primary);
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  transition: border-color .15s, background .15s, color .15s;
}

.lp-type:hover { border-color: var(--lp-accent-line); }

.lp-type:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

.lp-type.is-on {
  border-color: var(--accent-primary);
  background: var(--lp-accent-soft);
  color: var(--text-primary);
  box-shadow: 0 0 0 1px var(--accent-primary) inset;
}

.lp-type.is-on svg { color: var(--accent-primary); }


.lp-count { font-size: 11.5px; color: var(--text-secondary); text-align: right; margin-top: 4px; }

.lp-hint { font-size: 12px; color: var(--text-secondary); margin: 6px 0 0; line-height: 1.45; }

.lp-nudge {
  font-size: 12px;
  color: var(--text-primary);
  background: var(--lp-accent-soft);
  border-radius: var(--border-radius-sm);
  padding: 8px 10px;
  margin-top: 8px;
  line-height: 1.45;
}

/*
  TR: Rıza kutusu bir `label`; `.lp-label` kuralını ALMAMASI için kendi sınıfı var (demoda
      `.field label` genel kuralı bu kutuyu görünür yapıyordu).
  EN: The consent box is a `label` with its own class so it never inherits `.lp-label` (in the demo a
      generic `.field label` rule kept this box visible).
*/
.lp-consent {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-secondary);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: 10px 12px;
  margin-top: 10px;
  cursor: pointer;
}

.lp-consent input {
  margin: 2px 0 0;
  accent-color: var(--accent-primary);
  width: 16px;
  height: 16px;
  flex: none;
}

.lp-err { color: var(--error-color); font-size: 12px; margin-top: 6px; }

.lp-alert {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: var(--border-radius-md);
  background: var(--error-bg);
  color: var(--error-color);
  font-size: 13px;
}

.lp-send {
  width: 100%;
  border: none;
  border-radius: var(--border-radius-md);
  background: var(--accent-primary);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 13px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  transition: filter .2s, transform .1s;
}

.lp-send:hover { filter: brightness(1.07); }
.lp-send:active { transform: translateY(1px); }
.lp-send:disabled { opacity: .6; cursor: default; }

/* --- gönderim sonrası / after sending --- */

.lp-done { text-align: center; padding: 26px 20px 28px; }

.lp-ok {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success-color);
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
}

.lp-done h3 { margin: 0 0 6px; font-size: 18px; color: var(--text-primary); outline: none; }
.lp-done p { margin: 0; color: var(--text-secondary); font-size: 13.5px; }
.lp-done .lp-done-hint { font-size: 12.5px; }

/*
  TR: Takip numarası, iletişim bilgisi VERMEYEN kişi için tek bağdır — okunaklı ve kopyalanabilir.
  EN: The reference number is the only thread back for someone who leaves NO contact — legible and copyable.
*/
.lp-ref {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin: 16px 0 8px;
  padding: 10px 14px;
  border-radius: var(--border-radius-md);
  border: 1px dashed var(--lp-accent-line);
  background: var(--lp-accent-soft);
}

.lp-ref-code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-primary);
  user-select: all;
}

.lp-ref button {
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: var(--border-radius-sm);
  padding: 3px 8px;
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}

.lp-again {
  margin-top: 14px;
  background: none;
  border: none;
  color: var(--accent-primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* --- iletişim kartı / contact card --- */

.lp-contact-list { list-style: none; margin: 0; padding: 0; }
.lp-contact-list li + li { border-top: 1px solid var(--border-color); }

.lp-contact-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 11px 4px;
  color: inherit;
  text-decoration: none;
  border-radius: var(--border-radius-md);
  transition: background .15s;
}

a.lp-contact-row:hover { background: var(--bg-primary); }

.lp-contact-ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--lp-accent-soft);
  color: var(--accent-primary);
  display: grid;
  place-items: center;
  flex: none;
}

.lp-contact-text { min-width: 0; flex: 1; }
.lp-contact-label { display: block; font-size: 11.5px; color: var(--text-secondary); }
.lp-contact-value { display: block; font-size: 14px; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.lp-contact-go { color: var(--text-secondary); flex: none; display: grid; }

/* --- alt satır (genel form sayfası) / foot line (the general form page) --- */

.landing-foot {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--border-color);
}

/*
  TR: Bu satır KÜÇÜK ve SOLUK olmalı. Altyapıyı biz sağlıyoruz ama ziyaretçinin muhatabı biz değiliz.
  EN: This line must be SMALL and MUTED. We provide the platform but are not the visitor's counterpart.
*/
.landing-foot p {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-secondary);
  opacity: 0.75;
  text-align: center;
}

/*
  TR: Ekran okuyucu için var, gözle görünmez.
  EN: Present for a screen reader, invisible to the eye.
*/
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
  TR: DAR EKRAN. Bu sayfaya gelenlerin çoğu TELEFONDA — dar ekran istisna değil, olağan durum.
  EN: NARROW SCREENS. Most arrivals are ON A PHONE — the narrow screen is the norm, not the exception.
*/
@media (max-width: 760px) {
  .lp-grid,

  .landing-hero h1 { font-size: 23px; }
}

@media (max-width: 520px) {
  .lp-types { grid-template-columns: repeat(2, 1fr); }
  .lp-card-h { padding: 14px 16px 0; }
  .lp-card-b { padding: 14px 16px 18px; }
}

/* ===========================================================================
   TR: KARŞILAMA SAYFASI — PREMIUM (v1.1.0). Onaylı taslak: docs/05_UI/wireframes/landing-premium.html.
       Sınıflar `pl-` önekli; genel form sayfası (`/f/{kısaltma}`) bunları kullanmaz.

       RENK KURUMDAN: taslaktaki sabit kırmızı yerine `--accent-primary` (Marka rengi, çalışma anında
       yazılır); yumuşak tonlar ondan türetilir. Açık ve koyu tema aynı kalitede: zemin ve yüzeyler
       tasarım belirteçlerinden gelir.

       YAZI TİPİ SİSTEMDEN: başlıklar işletim sisteminin serif ailesiyle (Iowan / Palatino / Georgia) —
       dışarıdan yazı tipi indirilmez, üçüncü taraf bağımlılık yoktur.
   EN: THE LANDING PAGE — PREMIUM (v1.1.0). Approved draft: docs/05_UI/wireframes/landing-premium.html.
       Classes carry the `pl-` prefix; the general form page (`/f/{slug}`) does not use them.

       THE COLOUR COMES FROM THE ORGANISATION: `--accent-primary` (the Branding colour, written at
       runtime) instead of the draft's fixed red; soft tones derive from it. Light and dark are equal in
       quality: grounds and surfaces come from the design tokens.

       THE TYPEFACE COMES FROM THE SYSTEM: headings use the operating system's serif family — no web font
       is downloaded and there is no third-party dependency.
   =========================================================================== */

:root {
  --pl-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --pl-brand-soft: color-mix(in srgb, var(--accent-primary) 9%, var(--bg-secondary));
  --pl-brand-line: color-mix(in srgb, var(--accent-primary) 28%, transparent);
  --pl-shadow: 0 24px 60px -30px rgba(15, 23, 42, .35);
}

[data-theme="dark"] {
  --pl-brand-soft: color-mix(in srgb, var(--accent-primary) 16%, var(--bg-secondary));
  --pl-shadow: 0 24px 60px -30px rgba(0, 0, 0, .8);
}

.pl-body { background: var(--bg-primary); }

.pl-container { width: min(1120px, 100% - 40px); margin: 0 auto; }

/* --- üst çubuk / header --- */

.pl-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border-color);
}

.pl-header-inner { display: flex; align-items: center; gap: 18px; min-height: 68px; }

.pl-lockup { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-width: 0; }

/*
  TR: Logo karosu koyu temada AÇIK zeminli: şeffaf zeminli, koyu yazılı logolar kaybolmasın.
  EN: The logo tile has a LIGHT ground in dark mode so transparent, dark-lettered logos survive.
*/
.pl-logo-tile { height: 46px; padding: 4px 6px; border-radius: 10px; display: grid; place-items: center; }
.pl-logo-tile img { height: 38px; width: auto; max-width: 140px; object-fit: contain; display: block; }
/* TR: Açık karo yalnız koyu logo YOKKEN (v1.3.1). / EN: The light tile only when there is NO dark logo (v1.3.1). */
[data-theme="dark"] .pl-logo-tile:not(:has(.has-dark-logo)) { background: #f4f2ee; }

.pl-lockup-rule { width: 1px; height: 30px; background: var(--border-color); }
.pl-lockup-text { display: flex; flex-direction: column; min-width: 0; }
.pl-org { font-family: var(--pl-serif); font-size: 17px; font-weight: 600; line-height: 1.15; }
.pl-app { font-size: 12.5px; color: var(--text-secondary); letter-spacing: .02em; }

.pl-nav { margin-left: auto; display: flex; gap: 22px; font-size: 14px; }
.pl-nav a { color: var(--text-secondary); text-decoration: none; }
.pl-nav a:hover { color: var(--text-primary); }

.pl-controls { display: flex; gap: 8px; margin-left: 8px; }

.pl-pill {
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: 999px;
  padding: 6px 12px;
  font: 600 12.5px var(--font-family);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pl-pill:focus-visible,
.pl-btn:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

/* --- giriş / hero --- */

.pl-hero {
  background:
    radial-gradient(900px 420px at 0% 0%, color-mix(in srgb, var(--accent-primary) 9%, transparent), transparent 70%),
    var(--bg-primary);
}

.pl-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center;
  padding: 64px 0;
}

/*
  TR: Sayılar kartı hero'nun altına biner; alt pay YALNIZ kart görünürken ayrılır (v1.3.1) — önceden sayılar kapalıyken
      de boş kalıyordu.
  EN: The figures card overlaps the hero's foot; the bottom room is kept ONLY while it shows (v1.3.1) — it used to stay
      empty with figures off.
*/
body[data-trust="on"] .pl-hero-grid { padding-bottom: 104px; }

.pl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-primary);
}

.pl-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--pl-brand-line); }

.pl-hero-title {
  font-family: var(--pl-serif);
  font-weight: 600;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.08;
  margin: 16px 0;
  letter-spacing: -.01em;
}

.pl-lead { font-size: clamp(16px, 1.5vw, 18.5px); color: var(--text-secondary); max-width: 560px; margin: 0 0 28px; }

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

.pl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 12px;
  padding: 13px 20px;
  font: 600 15px var(--font-family);
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: transform .15s ease, box-shadow .15s ease;
}

.pl-btn:hover { transform: translateY(-1px); }
.pl-btn:disabled { opacity: .6; cursor: default; transform: none; }

.pl-btn-primary {
  background: var(--accent-primary);
  color: #fff;
  box-shadow: 0 12px 30px -14px color-mix(in srgb, var(--accent-primary) 90%, transparent);
}

.pl-btn-glass { background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-color); }

.pl-btn-soft {
  background: var(--bg-secondary);
  color: var(--accent-primary);
  border: 1px solid var(--pl-brand-line);
}

.pl-kinds { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }

.pl-kinds span {
  font-size: 13px;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  border-radius: 999px;
  padding: 6px 12px;
}

/*
  TR: Görsel yoksa kurum renginde çizgili desen; görsel varsa kartı kaplar.
  EN: Without an image a striped pattern in the organisation's colour; with one, it covers the card.
*/
.pl-visual {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--pl-shadow);
  border: 1px solid var(--border-color);
  background:
    linear-gradient(160deg, transparent 40%, rgba(0, 0, 0, .35) 100%),
    repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--accent-primary) 85%, #000) 0 22px,
      var(--accent-primary) 22px 44px);
}

.pl-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.pl-visual-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: var(--pl-shadow);
  font-size: 13px;
}

.pl-visual-badge b { color: var(--accent-primary); font-family: var(--pl-serif); font-size: 20px; }

/* --- güven sayıları / trust numbers --- */

.pl-trust { position: relative; z-index: 2; margin-top: -48px; }

.pl-trust-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  box-shadow: var(--pl-shadow);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

/*
  TR: Ayırıcı çizgi yalnız GÖRÜNEN bir hücreden sonra gelen hücrede — bazı sayılar eşik altında gizli olabilir.
  EN: A divider only on a cell that follows a VISIBLE one — some figures may be hidden below the threshold.
*/
.pl-trust-cell { padding: 24px 26px; }
.pl-trust-cell:not([hidden]) ~ .pl-trust-cell { border-left: 1px solid var(--border-color); }
/*
  TR: Kart her zaman tam genişlik; görünen sayılar satırı eşit paylaşır (v1.3.1). Önceden az sayıda kart daralıp sola
      yaslanıyor, sağ taraf boş kalıyordu. Tek sayı ortalanır.
  EN: The card is always full width; visible figures share the row equally (v1.3.1). A narrower, left-aligned card used
      to leave the right side empty. A single figure is centred.
*/
.pl-trust-card[data-count="1"] .pl-trust-cell { text-align: center; }

.pl-trust-n { font-family: var(--pl-serif); font-size: 32px; font-weight: 600; color: var(--accent-primary); line-height: 1; }
.pl-trust-l { font-size: 13.5px; color: var(--text-secondary); margin-top: 8px; }

/* --- bölümler / sections --- */

.pl-section { padding: 84px 0; }

/* TR: Bağlantıyla gelinen bölüm yapışkan üst çubuğun altında kalmasın. / EN: Anchored sections clear the sticky header. */
.pl-section, .pl-trust { scroll-margin-top: 84px; }
.pl-section-tight { padding-top: 0; }
.pl-section-head { max-width: 660px; margin-bottom: 36px; }

.pl-section-head h2 {
  font-family: var(--pl-serif);
  font-weight: 600;
  font-size: clamp(27px, 3.3vw, 40px);
  line-height: 1.15;
  margin: 12px 0 10px;
}

.pl-section-head p { color: var(--text-secondary); margin: 0; }

.pl-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; list-style: none; margin: 0; padding: 0; }

.pl-step { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 16px; padding: 22px; }
.pl-step-n { font-family: var(--pl-serif); font-size: 15px; color: var(--accent-primary); letter-spacing: .08em; }
.pl-step h3 { font-size: 17px; margin: 12px 0 6px; }
.pl-step p { margin: 0; color: var(--text-secondary); font-size: 14.5px; }

/* --- form + takip / form + tracking --- */

/*
  TR: DENGELİ YERLEŞİM v2 (taslak landing-balance-v2.html). Form ve iletişim kartı yan yana; ikisi de satırın yüksekliğine uzar ve
      aynı çizgide biter — iletişim kalemi sayısı ne olursa olsun. İletişim yoksa form tek başına ortalanır.
  EN: BALANCED LAYOUT v2. The form and the contact card side by side, both stretching to the row height whatever the number of
      contact items. Without contact the form is centred alone.
*/
.pl-duo { display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; align-items: stretch; }
.pl-duo:not(:has(> .pl-contact-slot:not([hidden]))) { grid-template-columns: minmax(0, 760px); justify-content: center; }
.pl-form-col, .pl-contact-slot { display: flex; flex-direction: column; min-width: 0; }
.pl-form-card, .pl-contact-card { flex: 1; }
.pl-form-lead { color: var(--text-secondary); margin: 0 0 14px; font-size: 14.5px; max-width: 760px; }
.pl-form-card { box-shadow: var(--pl-shadow); }

/*
  TR: TAKİP ŞERİDİ — formun üstünde tam genişlik: solda başlık ve açıklama, sağda kutu + Sorgula; sonuç ve not altta tam genişlik.
  EN: THE TRACKING STRIP — full width above the form: title and text left, box + Check right; result and note below, full width.
*/
.pl-track-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 460px);
  column-gap: 32px;
  align-items: center;
  margin-bottom: 24px;
  padding: 22px 28px;
}
.pl-track-strip .pl-track-head { grid-column: 1; }
.pl-track-strip .pl-panel-sub { margin-bottom: 0; }
.pl-track-strip .pl-track-row { grid-column: 2; }
.pl-track-strip .pl-track-msg,
.pl-track-strip .pl-timeline,
.pl-track-strip .pl-track-note { grid-column: 1 / -1; }
.pl-track-strip .pl-track-note { margin-top: 12px; }


.pl-panel {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 28px;
  box-shadow: var(--pl-shadow);
  scroll-margin-top: 90px;
}

.pl-panel-title { font-family: var(--pl-serif); font-size: 24px; font-weight: 600; margin: 0 0 6px; }
.pl-panel-sub { color: var(--text-secondary); margin: 0 0 18px; font-size: 14.5px; }

.pl-track-row { display: flex; gap: 8px; }

.pl-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
  border-radius: 12px;
  padding: 12px 14px;
  font: 15px var(--font-family);
}

.pl-input:focus { outline: 2px solid var(--pl-brand-line); border-color: var(--accent-primary); }
.pl-track-input { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .04em; text-transform: uppercase; }

.pl-track-msg { margin-top: 12px; font-size: 13.5px; color: var(--error-color); }

.pl-timeline { list-style: none; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--border-color); }
.pl-timeline-item { display: flex; gap: 12px; padding: 7px 0; font-size: 14px; color: var(--text-secondary); }
.pl-timeline-item b { color: var(--text-secondary); font-weight: 600; }
.pl-timeline-item small { display: block; font-size: 12.5px; }
.pl-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; background: var(--border-color); flex: none; }
.pl-timeline-item.is-done b { color: var(--text-primary); }
.pl-timeline-item.is-done .pl-dot { background: var(--accent-primary); }

.pl-track-note { font-size: 12px; color: var(--text-secondary); margin: 16px 0 0; }

/* --- SSS / FAQ --- */

/*
  TR: SSS — başlık ortada üstte, sorular altında ortalı tek sütun (dengeli yerleşim v2). Önceki düzende başlık solda tek başına
      kalıyor, altı boş görünüyordu.
  EN: FAQ — heading centred on top, questions below in one centred column (balanced layout v2). Before, the heading sat alone on
      the left with nothing beneath it.
*/
.pl-faq-layout { max-width: 860px; }
.pl-faq-head { margin: 0 auto 32px; text-align: center; }
.pl-faq-head .pl-eyebrow { justify-content: center; }
.pl-faq { display: grid; gap: 12px; }

.pl-faq-item { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 14px; padding: 16px 20px; }

.pl-faq-item summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.pl-faq-item summary::-webkit-details-marker { display: none; }
.pl-faq-item summary::after { content: "+"; color: var(--accent-primary); font-size: 20px; line-height: 1; }
.pl-faq-item[open] summary::after { content: "–"; }
.pl-faq-item p { color: var(--text-secondary); margin: 10px 0 0; font-size: 14.5px; }

/* --- iletişim / contact --- */

.pl-contact-card { box-shadow: var(--pl-shadow); }

/* --- KVKK / privacy --- */

.pl-privacy {
  background: var(--pl-brand-soft);
  border: 1px solid var(--pl-brand-line);
  border-radius: 18px;
  padding: 24px 28px;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.pl-privacy h3 { margin: 0 0 4px; font-size: 17px; }
.pl-privacy p { margin: 0; color: var(--text-secondary); font-size: 14.5px; max-width: 640px; }
.pl-privacy-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- alt / footer --- */

.pl-footer { border-top: 1px solid var(--border-color); padding: 26px 0 40px; color: var(--text-secondary); font-size: 13px; }
.pl-footer-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* --- aydınlatma metni penceresi / privacy notice dialog --- */

.pl-dialog {
  width: min(680px, 100% - 32px);
  max-height: min(80vh, 760px);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 0;
  background: var(--bg-secondary);
  color: var(--text-primary);
  box-shadow: var(--pl-shadow);
}

.pl-dialog::backdrop { background: rgba(15, 23, 42, .55); }

.pl-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.pl-dialog-head h3 { margin: 0; font-size: 17px; }

/* TR: Kurumun metni satır sonlarını korur. / EN: The organisation's text keeps its line breaks. */
.pl-dialog-body { padding: 18px 20px 22px; white-space: pre-wrap; font-size: 14.5px; line-height: 1.65; overflow: auto; max-height: calc(min(80vh, 760px) - 70px); }

/* --- dar ekran / narrow screens --- */

@media (max-width: 900px) {
  .pl-hero-grid { grid-template-columns: 1fr; gap: 30px; padding: 36px 0; }
  body[data-trust="on"] .pl-hero-grid { padding-bottom: 92px; }
  .pl-duo { grid-template-columns: 1fr; }
  .pl-track-strip { grid-template-columns: 1fr; row-gap: 14px; }
  .pl-track-strip .pl-track-row { grid-column: 1; }
}

@media (max-width: 860px) {
  .pl-nav { display: none; }
  .pl-lockup-rule, .pl-app { display: none; }
  .pl-steps { grid-template-columns: 1fr 1fr; }
  .pl-faq-head { margin-bottom: 28px; }
  .pl-trust-card { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .pl-trust-cell:not([hidden]) ~ .pl-trust-cell { border-left: 0; }
}

@media (max-width: 520px) {
  .pl-steps { grid-template-columns: 1fr; }
  .pl-section { padding: 60px 0; }
  .pl-section-tight { padding-top: 0; }
  .pl-track-row { flex-direction: column; }
  .pl-panel { padding: 22px; }
}