/* Ana sayfa (/ ve /dropshipping) — içerik stilleri. public_base.html'i EXTEND eder (navbar + footer
   oradan gelir); burada yalnız .ld- önekli içerik. Marka tokenları theme-variables.css
   (--color-primary #0175e4, --color-accent #fd751f).

   2026-10-18 YENİDEN KURGU (kullanıcı: "karmaşık, görsel olarak yetersiz, ikonlar görünmüyor, tüm
   çözünürlüklerde kusursuz"). Mobil öncelikli: kırılımlar 640 / 900 / 1280. Kurallar:
   · dokunma hedefi ≥ 44 px (düğme, SSS satırı) · görünen yazı ≥ 12 px
   · düğme metninde alt çizgi yok (Bootstrap a:hover underline'ı eziliyor)
   · başlık boyları clamp() ile akışkan · hiçbir genişlikte yatay taşma yok (.ld-page overflow-x:clip). */

:root {
  --ld-primary: var(--color-primary, #0175e4);
  --ld-primary-dark: #0a4fb0;
  /* Turuncu SABİT: theme-variables.css'te --color-accent MAVİ (#0175e4) tanımlı; değişkene bağlanınca
     "turuncu" düğme maviden turuncuya geçiyordu (ölçüldü 2026-10-18). */
  --ld-accent: #fd751f;
  --ld-ink: #0f172a;
  --ld-muted: #556173;   /* 2026-09-23: #e6ebf3 zeminde #64748b 4,3:1'e düşüyordu; #556173 ≈5,6:1 */
  --ld-bg-soft: #f6f9fe;
  --ld-border: #e6edf6;
  --ld-radius: 16px;
  --ld-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --ld-shadow-lg: 0 24px 60px rgba(1, 117, 228, 0.16);
  --ld-green: #16a34a;
}

.ld-page { overflow-x: clip; color: var(--ld-ink); }
.ld-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.ld-page img { max-width: 100%; height: auto; display: block; }
.ld-page [data-lucide], .ld-page svg.lucide { flex: 0 0 auto; }

/* ---- Düğmeler ---- */
.ld-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px; border-radius: 12px; border: 0; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2; text-align: center;
  text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ld-btn:hover, .ld-btn:focus, .ld-btn:active { text-decoration: none; }
.ld-btn:focus-visible { outline: 3px solid rgba(1, 117, 228, .45); outline-offset: 2px; }
.ld-btn svg, .ld-btn i { width: 18px; height: 18px; }
.ld-btn--primary { background: linear-gradient(135deg, var(--ld-accent) 0%, #f26212 100%); color: #fff; box-shadow: 0 8px 22px rgba(253, 117, 31, .32); }
.ld-btn--primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(253, 117, 31, .45); }
.ld-btn--blue { background: var(--ld-primary); color: #fff; box-shadow: 0 8px 22px rgba(1, 117, 228, .28); }
.ld-btn--blue:hover { color: #fff; background: var(--ld-primary-dark); transform: translateY(-2px); }
.ld-btn--light { background: #fff; color: var(--ld-primary); }
.ld-btn--light:hover { color: var(--ld-primary-dark); transform: translateY(-2px); }
.ld-btn--block { width: 100%; }
.ld-btn--lg { min-height: 54px; padding: 14px 32px; font-size: 1.0625rem; }

/* ---- Bölüm iskeleti ---- */
.ld-section { padding: 56px 0; }
.ld-section--soft { background: var(--ld-bg-soft); }
.ld-section__head { text-align: center; max-width: 640px; margin: 0 auto 32px; }
.ld-h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); line-height: 1.2; font-weight: 800; letter-spacing: -.02em; margin: 0 0 10px; color: var(--ld-ink); }
.ld-sub { color: var(--ld-muted); font-size: 1.0625rem; line-height: 1.55; margin: 0; }
.ld-grad { background: linear-gradient(120deg, var(--ld-primary), #22a4ff); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- 1. Hero ---- */
.ld-hero {
  /* Zemin sabit menünün ALTINA uzar: public_site.css gövdeye 78 px üst boşluk veriyor, menü ise 56-60 px →
     aradaki ~20 px gri şerit olarak görünüyordu. Menü opak olduğu için üst kısım onun altında kalır. */
  position: relative; overflow: hidden; margin-top: -78px; padding: calc(78px + 28px) 0 48px;
  background:
    radial-gradient(1100px 520px at 82% -8%, rgba(1, 117, 228, .12), transparent 60%),
    radial-gradient(760px 420px at 2% 12%, rgba(253, 117, 31, .09), transparent 55%),
    #fff;
}
.ld-hero__head { text-align: center; max-width: 760px; margin: 0 auto; }
.ld-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  background: rgba(1, 117, 228, .09); color: var(--ld-primary);
  font-weight: 700; font-size: .8125rem; padding: 7px 14px; border-radius: 999px;
}
.ld-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ld-green); animation: ldPulse 2s infinite; }
.ld-h1 { font-size: clamp(2rem, 1.3rem + 3.4vw, 3.5rem); line-height: 1.08; font-weight: 800; letter-spacing: -.025em; margin: 0 0 14px; color: var(--ld-ink); }
.ld-lead { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.55; color: var(--ld-muted); margin: 0 auto; max-width: 44ch; }

/* İki yol kartı */
.ld-paths { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 920px; margin: 26px auto 0; }
.ld-path {
  display: flex; flex-direction: column; gap: 10px; padding: 20px;
  background: #fff; border: 1px solid var(--ld-border); border-radius: var(--ld-radius); box-shadow: var(--ld-shadow);
}
.ld-path__top { display: flex; align-items: center; gap: 10px; }
.ld-path__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(253, 117, 31, .12); color: var(--ld-accent); }
.ld-path__ic--blue { background: rgba(1, 117, 228, .1); color: var(--ld-primary); }
.ld-path__ic svg, .ld-path__ic i { width: 22px; height: 22px; }
.ld-path__tag { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 10px; border-radius: 999px; font-size: .8125rem; font-weight: 700; background: rgba(253, 117, 31, .12); color: #c2410c; }
.ld-path__tag--blue { background: rgba(1, 117, 228, .1); color: var(--ld-primary-dark); }
.ld-path__title { font-size: 1.25rem; line-height: 1.3; font-weight: 800; margin: 2px 0 0; color: var(--ld-ink); }
.ld-path p { margin: 0 0 6px; color: var(--ld-muted); font-size: 1rem; line-height: 1.55; flex: 1 1 auto; }

/* Güven satırı: canlı pazaryeri renkli, yakında olan soluk + etiketli (veri marketplaces[].live) */
.ld-trust { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 22px auto 0; }
.ld-trust__logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ld-trust__mp {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 5px 12px;
  border-radius: 999px; background: #fff; border: 1px solid var(--ld-border);
  font-size: .875rem; font-weight: 700; color: #334155;
}
.ld-trust__mp img { width: 20px; height: 20px; object-fit: contain; }
.ld-trust__soon { margin: 0; text-align: center; color: var(--ld-muted); font-size: .875rem; font-weight: 600; max-width: 60ch; }
.ld-trust__nocard { display: inline-flex; align-items: center; gap: 6px; color: var(--ld-muted); font-size: .9375rem; font-weight: 600; }
.ld-trust__nocard svg, .ld-trust__nocard i { width: 18px; height: 18px; color: var(--ld-green); }

/* Panel görseli + yüzen kartlar */
.ld-hero__visual { position: relative; max-width: 980px; margin: 32px auto 0; }
.ld-shot { border-radius: var(--ld-radius); overflow: hidden; border: 1px solid var(--ld-border); box-shadow: var(--ld-shadow-lg); background: #fff; }
.ld-shot__bar { display: flex; align-items: center; gap: 6px; padding: 9px 14px; background: #f1f5fb; border-bottom: 1px solid var(--ld-border); }
.ld-shot__bar span { width: 10px; height: 10px; border-radius: 50%; }
.ld-shot__bar span:nth-child(1) { background: #ff5f57; }
.ld-shot__bar span:nth-child(2) { background: #febc2e; }
.ld-shot__bar span:nth-child(3) { background: #28c840; }
.ld-shot img { width: 100%; }
.ld-shot--wide { max-width: 980px; margin: 32px auto 0; }
.ld-float-card {
  position: absolute; display: none; align-items: center; gap: 10px; padding: 12px 16px;
  background: #fff; border: 1px solid var(--ld-border); border-radius: 14px; box-shadow: var(--ld-shadow);
  font-weight: 700; font-size: .9375rem; color: var(--ld-ink);
}
.ld-float-card small { display: block; color: var(--ld-muted); font-weight: 600; font-size: .8125rem; }
.ld-fc-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; }
.ld-fc-ic svg, .ld-fc-ic i { width: 20px; height: 20px; }
.ld-float-card--a { top: 14%; left: -28px; animation: ldFloat 5s ease-in-out infinite; }
.ld-float-card--a .ld-fc-ic { background: rgba(22, 163, 74, .12); color: var(--ld-green); }
.ld-float-card--b { bottom: 12%; right: -28px; animation: ldFloat 7s ease-in-out infinite reverse; }
.ld-float-card--b .ld-fc-ic { background: rgba(253, 117, 31, .14); color: var(--ld-accent); }

/* ---- 2. Nasıl çalışır ---- */
.ld-how { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ld-how__col { background: #fff; border: 1px solid var(--ld-border); border-radius: var(--ld-radius); box-shadow: var(--ld-shadow); padding: 22px 20px; }
.ld-how__title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 1.1875rem; font-weight: 800; margin: 0 0 16px; color: var(--ld-ink); }
.ld-how__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: ldadim; }
.ld-how__steps li { display: flex; align-items: flex-start; gap: 14px; }
.ld-how__ic { position: relative; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(253, 117, 31, .12); color: var(--ld-accent); }
.ld-how__steps--blue .ld-how__ic { background: rgba(1, 117, 228, .1); color: var(--ld-primary); }
.ld-how__ic svg, .ld-how__ic i { width: 22px; height: 22px; }
.ld-how__ic::after {
  counter-increment: ldadim; content: counter(ldadim);
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ld-ink); color: #fff; font-size: .75rem; font-weight: 800;
}
.ld-how__steps b { display: block; font-size: 1.0625rem; line-height: 1.35; color: var(--ld-ink); margin: 1px 0 3px; }
.ld-how__steps span { color: var(--ld-muted); font-size: .9688rem; line-height: 1.5; }
.ld-gift { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(100deg, #ecfdf3 0%, #f0fdf4 60%, #eef6ff 120%); border: 1px solid #bbf7d0; }
.ld-gift__ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; background: var(--ld-green); color: #fff; display: grid; place-items: center; }
.ld-gift__ic svg, .ld-gift__ic i { width: 20px; height: 20px; }
.ld-gift > div { flex: 1 1 180px; min-width: 0; }
.ld-gift b { display: block; font-size: 1rem; color: var(--ld-ink); }
.ld-gift span { color: #475569; font-size: .9375rem; }
.ld-gift__zero { font-weight: 800; font-size: 1.25rem; color: var(--ld-green); white-space: nowrap; }

/* ---- 3. Rakamlar ---- */
.ld-stats { background: linear-gradient(135deg, var(--ld-primary) 0%, var(--ld-primary-dark) 100%); color: #fff; }
.ld-stats__grid { display: grid; grid-template-columns: 1fr; gap: 18px; padding: 32px 20px; text-align: center; }
.ld-stat__num { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.ld-stat__lbl { color: rgba(255, 255, 255, .88); font-size: .9688rem; margin-top: 4px; }

/* ---- 4. Panel kartları ---- */
.ld-cards { display: grid; grid-template-columns: 1fr; gap: 14px; }
.ld-card { background: #fff; border: 1px solid var(--ld-border); border-radius: var(--ld-radius); box-shadow: var(--ld-shadow); padding: 20px; }
.ld-card__ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(1, 117, 228, .09); color: var(--ld-primary); }
.ld-card__ic svg, .ld-card__ic i { width: 22px; height: 22px; }
.ld-card h3 { font-size: 1.0625rem; font-weight: 800; margin: 14px 0 6px; color: var(--ld-ink); }
.ld-card p { margin: 0; color: var(--ld-muted); font-size: .9688rem; line-height: 1.55; }

/* ---- 5. Paketler (veri mantığı değişmedi) ---- */
.ld-plans { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: stretch; max-width: 980px; margin: 0 auto; }
.ld-plans--paket { max-width: 860px; }
.ld-plan { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ld-border); border-radius: var(--ld-radius); padding: 26px 22px; box-shadow: var(--ld-shadow); }
.ld-plan--featured { border: 2px solid var(--ld-primary); box-shadow: var(--ld-shadow-lg); }
.ld-plan__badge { position: absolute; top: -13px; left: 22px; background: var(--ld-primary); color: #fff; font-size: .75rem; font-weight: 800; padding: 5px 11px; border-radius: 999px; }
.ld-plan__name { font-weight: 800; font-size: 1.1875rem; color: var(--ld-ink); }
.ld-plan__dur { font-size: .8125rem; font-weight: 600; color: var(--ld-muted); }
.ld-plan__tag { color: var(--ld-muted); font-size: .9375rem; margin: 2px 0 8px; }
.ld-plan__price { font-size: 2rem; font-weight: 800; color: var(--ld-ink); margin: 6px 0 2px; }
.ld-plan__per { font-size: 1rem; font-weight: 600; color: var(--ld-muted); }
.ld-plan__orig { font-size: 1rem; font-weight: 600; color: var(--ld-muted); text-decoration: line-through; margin-right: 8px; }
.ld-plan__meq { font-size: .875rem; font-weight: 600; color: #c2410c; margin: 0 0 4px; }
.ld-plan__list { list-style: none; padding: 0; margin: 14px 0 20px; display: grid; gap: 9px; }
.ld-plan__list li { display: flex; gap: 8px; align-items: flex-start; color: #334155; font-size: .9375rem; line-height: 1.45; }
.ld-plan__list svg, .ld-plan__list i { width: 18px; height: 18px; color: var(--ld-green); margin-top: 1px; }
.ld-plan .ld-btn { margin-top: auto; }
.ld-pricing-note { text-align: center; color: var(--ld-muted); margin: 22px 0 0; font-size: .9375rem; }

/* ---- 6. SSS ---- */
.ld-faq-list { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; }
.ld-faq { background: #fff; border: 1px solid var(--ld-border); border-radius: 12px; overflow: hidden; }
.ld-faq summary { list-style: none; cursor: pointer; min-height: 52px; padding: 14px 18px; font-weight: 700; font-size: 1rem; color: var(--ld-ink); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ld-faq summary::-webkit-details-marker { display: none; }
.ld-faq summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--ld-muted); border-bottom: 2px solid var(--ld-muted); transform: rotate(45deg); transition: transform .25s ease; flex: 0 0 auto; }
.ld-faq[open] summary::after { transform: rotate(-135deg); }
.ld-faq summary:focus-visible { outline: 3px solid rgba(1, 117, 228, .45); outline-offset: -3px; }
.ld-faq__body { padding: 0 18px 16px; color: var(--ld-muted); line-height: 1.6; font-size: 1rem; }
.ld-faq[open] .ld-faq__body { animation: ldFaqIn .28s ease; }

/* ---- 7. Son çağrı ---- */
.ld-final { padding-top: 8px; }
.ld-final__card { position: relative; overflow: hidden; text-align: center; background: linear-gradient(135deg, var(--ld-primary) 0%, var(--ld-primary-dark) 100%); color: #fff; border-radius: var(--ld-radius); padding: 40px 20px; box-shadow: var(--ld-shadow-lg); }
.ld-final__card h2 { color: #fff; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); margin: 0 0 8px; font-weight: 800; }
.ld-final__card p { color: rgba(255, 255, 255, .92); font-size: 1.0625rem; margin: 0 0 22px; }
.ld-final__cta { display: flex; flex-direction: column; gap: 10px; align-items: stretch; max-width: 360px; margin: 0 auto; }

/* ---- Kırılımlar ---- */
@media (min-width: 640px) {
  .ld-paths { grid-template-columns: 1fr 1fr; gap: 18px; }
  .ld-path { padding: 24px; }
  .ld-cards { grid-template-columns: 1fr 1fr; }
  .ld-stats__grid { grid-template-columns: repeat(3, 1fr); }
  .ld-final__cta { flex-direction: row; justify-content: center; max-width: none; }
  .ld-wrap { padding: 0 24px; }
}
@media (min-width: 900px) {
  .ld-hero { padding: calc(78px + 40px) 0 64px; }
  .ld-section { padding: 72px 0; }
  .ld-section__head { margin-bottom: 40px; }
  .ld-how { grid-template-columns: 1fr 1fr; gap: 22px; }
  .ld-how__col { padding: 28px; }
  .ld-plans { grid-template-columns: repeat(3, 1fr); }
  .ld-plans--paket { grid-template-columns: 1fr 1fr; }
  .ld-float-card { display: flex; }
  .ld-final__card { padding: 56px 32px; }
}
@media (min-width: 1280px) {
  .ld-cards { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Kaydırınca belirme ---- */
.ld-reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.ld-reveal.ld-in { opacity: 1; transform: none; }

@keyframes ldFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ldPulse { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); } 70% { box-shadow: 0 0 0 10px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } }
@keyframes ldFaqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .ld-float-card, .ld-dot { animation: none !important; }
  .ld-reveal { opacity: 1; transform: none; transition: none; }
  .ld-faq[open] .ld-faq__body { animation: none; }
  .ld-btn { transition: none; }
}

/* 2026-09-24: public sayfalarda koyu tema akışı YOK; zorla eklenen .dark-mode altında zemin beyaz kalır,
   bu yüzden koyu override YAZILMAZ (yazılınca açık metin beyaz zeminde kalıyordu). */

/* 2026-10-11: WhatsApp erişim butonu — store_layout.html .store-whatsapp-float ile AYNI geometri. */
.ld-whatsapp-float {
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom, 20px));
  right: max(20px, env(safe-area-inset-right, 20px));
  z-index: 1040;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25d366;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  text-decoration: none !important;
  border: none;
}
.ld-whatsapp-float:hover {
  color: #fff !important;
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}
.ld-whatsapp-float i { font-size: 28px; line-height: 1; }
@media (max-width: 991.98px) {
  .ld-whatsapp-float {
    bottom: max(16px, env(safe-area-inset-bottom, 16px));
    right: max(16px, env(safe-area-inset-right, 16px));
    width: 52px;
    height: 52px;
  }
  .ld-whatsapp-float i { font-size: 24px; }
}