/* quik.legal — platform tanıtım sayfası (apex quik.legal).
   Kurallar DESIGN.md v2: Poppins + Caveat, lacivert krom, altın yalnız süs (açık zeminde
   altın birincil düğme YOK), dekorasyon yalnız bant deseni + 3B sahne, gradient metin yok.
   Jetonlar ve bileşenler assets/quik.css'ten gelir; burada yalnız PUBLIC sayfa kabuğu var.
   Uygulama kabuğunun %90 zoom'u bu sayfada YOK: tanıtım sayfası tarayıcının kendi ölçeğinde okunur. */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.lp{font-family:'Poppins',ui-sans-serif,sans-serif;color:var(--q-ink);background:var(--q-bg);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%}
:focus-visible{outline:2px solid var(--q-link);outline-offset:2px;border-radius:6px}
.lp-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.lp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── üst çubuk: panelin .q-hdr dili ───────────────────────────────────── */
.lp-top{position:sticky;top:0;z-index:20;color:#fff;
  background:linear-gradient(160deg,#0A1A35 0%,#13254D 100%);box-shadow:0 10px 30px rgba(10,26,53,.25)}
.lp-top .lp-wrap{height:64px;display:flex;align-items:center;gap:20px}
.lp-brand{display:flex;align-items:center;gap:10px;flex:none}
.lp-brand svg{width:26px;height:26px;color:#fff}
.lp-brand .q-wm{font-size:22px;color:#fff}
.lp-nav{display:flex;align-items:center;gap:22px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.82)}
.lp-nav a{padding:6px 0;border-bottom:2px solid transparent;transition:color .15s var(--q-ease),border-color .15s var(--q-ease)}
.lp-nav a:hover{color:#fff;border-bottom-color:var(--q-gold)}
.lp-top .lp-rt{margin-left:auto;display:flex;align-items:center;gap:10px}
.lp-lang{display:flex;gap:2px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:2px}
.lp-lang button{min-width:40px;height:30px;border:0;border-radius:8px;background:none;color:rgba(255,255,255,.75);
  font:700 11.5px/1 'Poppins',sans-serif;letter-spacing:.06em;cursor:pointer;transition:background .15s var(--q-ease)}
.lp-lang button[aria-current="true"]{background:rgba(255,255,255,.18);color:#fff}

/* ── hero ─────────────────────────────────────────────────────────────── */
.lp-hero{position:relative;overflow:hidden}
.lp-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:url(img/ql/app-page-bg.webp) top/100% auto no-repeat;opacity:.85}
.lp-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 440px at 88% 0%,rgba(184,146,62,.09),transparent 65%)}
.lp-hero .lp-wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,430px);
  gap:40px;align-items:center;padding-top:64px;padding-bottom:64px}
.lp-hero h1{font-size:46px;font-weight:800;letter-spacing:-.03em;line-height:1.07;margin:10px 0 0}
.lp-hero .lp-lede{font-size:17px;color:var(--q-ink-2);line-height:1.55;margin-top:14px;max-width:580px}
.lp-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.lp-facts{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:28px;font-size:13px;color:var(--q-ink-2)}
.lp-facts li{list-style:none;display:flex;align-items:center;gap:8px}
.lp-facts svg{color:var(--q-link)}
.lp-scene{position:relative;display:flex;justify-content:center;align-items:center;min-height:260px}
.lp-scene img{width:100%;max-width:400px;filter:drop-shadow(0 22px 26px rgba(15,23,42,.18))}
.lp-scene .q-hand{position:absolute;right:4px;top:0;font-size:26px;line-height:1.05;transform:rotate(-8deg);text-align:right}
.lp-scene .q-hand::after{content:"";display:block;width:96px;height:3px;border-radius:3px;
  background:rgba(184,146,62,.6);margin:6px 0 0 auto;transform:rotate(-3deg)}

/* ── bölüm iskeleti ───────────────────────────────────────────────────── */
.lp-sec{padding:56px 0}
.lp-sec.lp-tint{background:#fff;border-top:1px solid var(--q-line);border-bottom:1px solid var(--q-line)}
.lp-h{max-width:720px;margin-bottom:28px}
.lp-h h2{font-size:34px;font-weight:800;letter-spacing:-.025em;line-height:1.12;margin-top:8px}
.lp-h p{font-size:15.5px;color:var(--q-ink-2);margin-top:10px;line-height:1.55}

/* ── iki hedef kitle ──────────────────────────────────────────────────── */
.lp-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.lp-who{padding:24px}
.lp-who>header{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.lp-who h3{font-size:19px;font-weight:700;letter-spacing:-.01em}
.lp-who>p{font-size:14px;color:var(--q-ink-2);margin:8px 0 16px;line-height:1.5}
.lp-who ul{display:grid;gap:11px}
.lp-who li{list-style:none;display:grid;grid-template-columns:20px 1fr;gap:11px;font-size:14px;line-height:1.45;color:var(--q-ink-2)}
.lp-who li b{color:var(--q-ink);font-weight:600}
.lp-who li svg{color:var(--q-em-600);margin-top:3px}

/* ── yetenek bantları ─────────────────────────────────────────────────── */
.lp-bands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.lp-bands .q-hband{margin-bottom:0}
.lp-bands .q-band{min-height:96px;padding:16px 20px;align-items:flex-start}
.lp-bands .q-band>div{min-width:0}
.lp-bands .q-band h3{font-size:16.5px}
.lp-bands .q-band p{font-size:12.5px;opacity:.78;line-height:1.42;margin-top:3px;max-width:46ch}
.lp-bands .q-note{padding:12px 20px 14px;font-size:13px;color:var(--q-ink-2);line-height:1.45;border-top:1px solid var(--q-line-2)}

/* ── koyu bölüm (geliştirilen iş) ─────────────────────────────────────── */
.lp-dark{position:relative;overflow:hidden;border-radius:var(--q-r-card);color:#fff;
  background:linear-gradient(135deg,#132C5A,#0A1A35);box-shadow:var(--q-sh-card);padding:34px 36px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:28px;align-items:center}
.lp-dark .q-kicker{color:#E6CD8E}
.lp-dark h2{font-size:30px;font-weight:800;letter-spacing:-.025em;line-height:1.14;margin:8px 0 10px}
.lp-dark p{font-size:14.5px;color:rgba(255,255,255,.82);line-height:1.55;max-width:60ch}
.lp-dark .lp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.lp-dark .q-pill{background:rgba(255,255,255,.12);color:#fff}
.lp-dark .q-pill.lp-wip{background:var(--q-gold-tint);color:var(--q-gold-ink)}
.lp-steps{display:grid;gap:10px}
.lp-steps li{list-style:none;display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;
  font-size:13.5px;color:rgba(255,255,255,.85);line-height:1.4}
.lp-steps b{display:grid;place-items:center;width:26px;height:26px;border-radius:9px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);font-size:12px;font-weight:700;color:#fff}

/* ── ekranlar ─────────────────────────────────────────────────────────── */
.lp-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}  /* start: kartlar komşusunun boyuna gerilmesin — ekran görüntüleri farklı yükseklikte, gerilen kartın altında boş alan kalıyordu. */
.lp-shot{overflow:hidden}
.lp-shot img{display:block;width:100%;border-bottom:1px solid var(--q-line)}
.lp-shot .lp-cap{padding:14px 18px}
.lp-shot .lp-cap b{font-size:15px;font-weight:700}
.lp-shot .lp-cap small{display:block;font-size:12.5px;color:var(--q-ink-3);margin-top:3px;line-height:1.45}
.lp-shot.lp-phone{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;padding:22px}
.lp-shot.lp-phone img{width:230px;border:7px solid #0B1426;border-radius:28px;border-bottom-width:7px;
  box-shadow:0 30px 60px -32px rgba(14,36,71,.5)}
.lp-shot.lp-phone .lp-cap{padding:0}

/* ── durum ────────────────────────────────────────────────────────────── */
.lp-status{display:grid;gap:12px;max-width:860px}
.lp-status li{list-style:none;display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start;
  background:#fff;border:1px solid var(--q-line-card);border-radius:16px;box-shadow:var(--q-sh-card);padding:16px 18px;
  font-size:14px;color:var(--q-ink-2);line-height:1.5}
.lp-status li b{color:var(--q-ink);font-weight:600}
.lp-status .q-tile{width:36px;height:36px;border-radius:11px}

/* ── alt bilgi ────────────────────────────────────────────────────────── */
.lp-foot{background:var(--q-night-0);color:rgba(255,255,255,.75);padding:34px 0;font-size:13px}
.lp-foot .lp-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.lp-foot .q-wm{font-size:19px;color:#fff}
.lp-foot .lp-r{margin-left:auto;display:flex;flex-wrap:wrap;gap:18px}
.lp-foot a:hover{color:#fff}

/* ── telefon / tablet ─────────────────────────────────────────────────── */
@media (max-width:1100px){
  .lp-hero .lp-wrap{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:44px;padding-bottom:48px}
  .lp-scene{order:-1;min-height:0}
  .lp-scene img{max-width:320px}
  .lp-scene .q-hand{position:static;text-align:left;transform:none;margin-top:6px}
  .lp-scene .q-hand::after{margin-left:0}
  .lp-dark{grid-template-columns:minmax(0,1fr);padding:26px 22px}
}
@media (max-width:700px){
  /* Telefonda sahne başlığın ALTINA iner (DOM sırası): yoksa 240 px'lik görsel h1'i katlamanın altına itiyor. */
  .lp-scene{order:0;flex-direction:column;gap:4px;margin-top:2px}
  .lp-scene img{max-width:250px}
  .lp-scene .q-hand{align-self:flex-start}
}
@media (max-width:900px){
  .lp-nav{display:none}
  .lp-two,.lp-bands,.lp-shots{grid-template-columns:minmax(0,1fr)}
  .lp-shot.lp-phone{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
}
@media (max-width:620px){
  .lp-wrap{padding:0 16px}
  .lp-hero h1{font-size:32px}
  .lp-hero .lp-lede{font-size:15.5px}
  .lp-h h2{font-size:26px}
  .lp-dark h2{font-size:24px}
  .lp-sec{padding:40px 0}
  .lp-cta .q-btn{flex:1 1 100%}
  /* 64 px'lik çubuğa üç parça sığmalı: marka + dil + panel düğmesi. Telefonda hepsi küçülür,
     taşma olursa yatay kaydırma çıkar — ölçülerek daraltıldı (375 px'te toplam ~345 px). */
  .lp-top .lp-wrap{gap:8px}
  .lp-brand{gap:8px;min-width:0}
  .lp-brand svg{width:22px;height:22px}
  .lp-brand .q-wm{font-size:18px}
  .lp-top .lp-rt{gap:8px}
  .lp-lang{padding:2px}
  .lp-lang button{min-width:30px;height:28px;font-size:11px}
  .lp-top .q-btn.q-sm{padding:0 11px;font-size:12px}
}
@media (max-width:359px){ .lp-brand .q-wm{display:none} }
@media (min-width:1320px){ .lp-hero h1{font-size:49px} }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms!important;transition-duration:1ms!important}
}