/* =========================================================================
   Libart Medya — sayfa bilesenleri
   Landing ve hizmet sayfalarinin kendine ozgu bloklari.
   Tokenlar main.css icindeki :root'tan gelir.
   ========================================================================= */

/* ---------- Teklif formu ---------- */
.lead-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  display: grid;
  gap: 0.9rem;
}
.lead-form__head h3 { font-size: 1.2rem; }
.lead-form__head p { margin-top: 0.3rem; font-size: var(--fs-sm); color: var(--ink-dim); }

.lead-form__alert {
  margin: 0;
  padding: 0.7rem 0.9rem;
  background: #FFF4F0;
  border: 1px solid #F6C7B4;
  border-radius: 8px;
  color: #A23A10;
  font-size: var(--fs-sm);
}

.field { display: grid; gap: 0.35rem; }
.field label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }

.field input[type="text"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  padding: 0.72em 0.85em;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0;
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(237, 109, 30, 0.16);
}
.field [aria-invalid="true"] { border-color: #D9552B; }
.field__err { font-size: var(--fs-xs); color: #C0431E; }
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.field--check {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.6rem;
  margin-top: 0.15rem;
}
.field--check input { margin-top: 0.28em; width: 1rem; height: 1rem; accent-color: var(--accent); }
.field--check label { font-weight: 400; font-size: var(--fs-xs); color: var(--ink-dim); line-height: 1.5; }
.field--check label a { color: var(--accent); font-weight: 600; }
.field--check .field__err { grid-column: 1 / -1; }

.lead-form__submit { width: 100%; margin-top: 0.3rem; }
.lead-form__foot { font-size: var(--fs-xs); color: var(--ink-dim); text-align: center; }
.lead-form__foot a { color: var(--ink); font-weight: 600; }
.lead-form__foot a:hover { color: var(--accent); }

/* ---------- Ortalanmis hero ---------- */
.hero--center { text-align: center; }
.hero--center .hero-lede { margin-inline: auto; }
.thanks-mark {
  display: inline-grid;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-radius: 999px;
}

/* ---------- Iki sutunlu landing hero ---------- */
.hero--split .hero-grid { align-items: start; }
@media (min-width: 980px) {
  .hero--split .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
}

/* ---------- Ikonlu anlatim izgarasi ---------- */
.icon-grid {
  display: grid;
  gap: clamp(1.25rem, 2.2vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.icon-item { display: grid; gap: 0.5rem; align-content: start; }
.icon-item__mark {
  display: inline-grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: transform 0.35s var(--ease), border-color 0.3s ease,
              background-color 0.3s ease, color 0.3s ease;
}
.icon-item:hover .icon-item__mark {
  transform: translateY(-3px) rotate(-5deg);
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.icon-item h3 { font-size: 1.02rem; }
.icon-item p { font-size: var(--fs-sm); color: var(--ink-dim); }

.section--dark .icon-item__mark { background: var(--dark-2); border-color: var(--line-onDark); }
.section--dark .icon-item p { color: var(--ink-onDarkDim); }

/* ---------- Akis diyagrami ---------- */
.flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.flow__node {
  position: relative;
  padding: 1.6rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: center;
}
.flow__node + .flow__node { border-left: 0; }
.flow__node:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.flow__node:last-child { border-radius: 0 var(--radius) var(--radius) 0; }

.flow__node::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -7px;
  z-index: 1;
  width: 12px;
  height: 12px;
  border-top: 1.5px solid var(--line-strong);
  border-right: 1.5px solid var(--line-strong);
  background: var(--bg);
  transform: translateY(-50%) rotate(45deg);
}
.flow__node:last-child::after { display: none; }

@media (max-width: 700px) {
  .flow__node { border-radius: 0; }
  .flow__node:first-child { border-radius: var(--radius) var(--radius) 0 0; }
  .flow__node:last-child { border-radius: 0 0 var(--radius) var(--radius); }
  .flow__node + .flow__node { border-left: 1px solid var(--line); border-top: 0; }
  .flow__node::after { display: none; }
}

.flow__icon {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: 0.7rem;
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-radius: 10px;
}
.flow__node h3 { font-size: 0.98rem; }
.flow__node p { margin-top: 0.3rem; font-size: var(--fs-xs); color: var(--ink-dim); }

.section--dark .flow__node { background: var(--dark-2); border-color: var(--line-onDark); }
.section--dark .flow__node::after { background: var(--dark); border-color: var(--line-onDark); }
.section--dark .flow__icon { background: rgba(237, 109, 30, 0.14); color: var(--accent); }
.section--dark .flow__node p { color: var(--ink-onDarkDim); }

/* ---------- Karsi karsiya karsilastirma ---------- */
.versus { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 820px) { .versus { grid-template-columns: 1fr 1fr; } }

.versus__col {
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}
.versus__col--bad { background: var(--surface-2); }
.versus__col--good { border-color: var(--accent); box-shadow: var(--shadow); }

.versus__label {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-bottom: 1rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.versus__col--bad .versus__label { color: var(--ink-dim); }
.versus__col--good .versus__label { color: var(--accent); }

.versus li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 0.6rem;
  align-items: start;
  margin-bottom: 0.65rem;
  font-size: var(--fs-sm);
}
.versus li svg { margin-top: 0.4em; flex: none; }
.versus__col--bad li svg { color: #A79B92; }
.versus__col--good li svg { color: var(--accent); }

/* ---------- Paket kartlari ---------- */
.plans {
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.plan--featured { border-color: var(--accent); box-shadow: var(--shadow-lg); }
.plan__badge {
  position: absolute;
  top: -0.7rem;
  left: clamp(1.4rem, 2.2vw, 1.9rem);
  padding: 0.2rem 0.65rem;
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  border-radius: 999px;
}
.plan h3 { font-size: 1.1rem; }
.plan__price {
  margin: 0.7rem 0 0.2rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.85rem;
  color: var(--ink);
  letter-spacing: -0.03em;
}
.plan__price small { font-size: 0.48em; font-weight: 600; color: var(--ink-dim); }
.plan__for { margin-bottom: 1.1rem; font-size: var(--fs-xs); color: var(--ink-dim); }
.plan ul { display: grid; gap: 0.5rem; margin-bottom: 1.4rem; font-size: var(--fs-sm); }
.plan .btn { margin-top: auto; }

/* ---------- Turuncu vurgu bandi ---------- */
.band { background: var(--accent); color: #fff; padding-block: clamp(2rem, 4vw, 3rem); }
.band h2 { color: #fff; }
.band p { color: rgba(255, 255, 255, 0.88); }
.band .btn { background: #fff; color: var(--accent-deep); box-shadow: none; }
.band .btn:hover { background: var(--dark); color: #fff; }
.band__grid { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 820px) { .band__grid { grid-template-columns: minmax(0, 1fr) auto; } }

/* ---------- Koyu bolum ---------- */
.section--dark { background: var(--dark); color: var(--ink-onDarkDim); }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .section-lede { color: var(--ink-onDarkDim); }
.section--dark .eyebrow { color: var(--accent); }
.section--dark .tick { color: var(--ink-onDarkDim); }
.section--dark .table-wrap { background: var(--dark-2); border-color: var(--line-onDark); }
.section--dark th, .section--dark td { border-bottom-color: var(--line-onDark); }
.section--dark thead th { background: rgba(255, 255, 255, 0.04); color: #fff; }
.section--dark td strong { color: #fff; }

/* ---------- Yapisik teklif cubugu (landing) ---------- */
.offer-bar {
  position: fixed;
  inset: auto 0 0;
  z-index: 65;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem var(--gutter);
  background: var(--dark);
  color: #fff;
  transform: translateY(101%);
  transition: transform 0.35s var(--ease);
}
@media (min-width: 900px) { .offer-bar { display: flex; } }
.offer-bar[data-visible="true"] { transform: translateY(0); }
.offer-bar__text { font-size: var(--fs-sm); }
.offer-bar__text b { color: var(--accent); font-weight: 700; }

/* Fiyat yerine "Teklif alın" gosterilen paket kartlari */
.plan__price--ask {
  font-size: 1.35rem;
  color: var(--accent-deep);
}