/* ==========================================================================
   biMARJ — Yasal sayfalar (Kullanım Koşulları · Gizlilik Politikası)
   Tek şablon (views/pages/legal.php) ve tek stil dosyası kullanılır.
   Yalnızca bu iki sayfada yüklenir (controller: pageStyles => ['legal']).
   ========================================================================== */

/* ---- Mini hero -------------------------------------------------------- */
.lg-hero{
  background:
    radial-gradient(760px 340px at 82% 20%, rgba(255,255,255,.7), transparent 60%),
    linear-gradient(112deg, #ffffff 0%, #f8fbf9 48%, #eef5f0 100%);
  border-bottom: 1px solid #e9efec;
  padding: 26px 0 30px;
}
.lg-hero-inner{
  display: flex; align-items: center; gap: 32px;
}
.lg-hero-copy{ flex: 1 1 auto; min-width: 0; }

.lg-hero .breadcrumb{
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: 0 0 12px; padding: 0;
  font-size: 12.5px; color: #77848c;
}
.lg-hero .breadcrumb li + li:before{ content: "›"; margin-right: 8px; color: #b3bec4; }
.lg-hero .breadcrumb a{ color: #77848c; }
.lg-hero .breadcrumb a:hover{ color: var(--green); }

.lg-hero h1{
  position: relative;
  font-size: 36px; font-weight: 700; letter-spacing: -1.1px;
  line-height: 1.12; color: var(--ink);
  margin: 0 0 16px; padding-bottom: 11px;
}
.lg-hero h1:after{
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 52px; height: 3px; border-radius: 3px; background: #e85d4a;
}
.lg-hero p{
  font-size: 16px; line-height: 1.6; color: #44535f;
  margin: 0; max-width: 60ch;
}

/* Dekoratif ikon kompozisyonu */
.lg-hero-art{ position: relative; flex: 0 0 230px; height: 150px; }
.lga{
  position: absolute; display: grid; place-items: center;
  border-radius: 14px; background: #fff;
  box-shadow: 0 8px 20px rgba(13,40,30,.10);
}
.lga svg{ fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.lga-1{ width: 62px; height: 62px; left: 8px;   top: 12px;   color: #0f8a5f; }
.lga-1 svg{ width: 30px; height: 30px; }
.lga-2{ width: 54px; height: 54px; right: 6px;  top: 0;      color: #2f72cf; }
.lga-2 svg{ width: 26px; height: 26px; }
.lga-3{ width: 50px; height: 50px; left: 52px;  bottom: 6px; color: #c98a06; }
.lga-3 svg{ width: 24px; height: 24px; }
.lga-4{ width: 46px; height: 46px; right: 22px; bottom: 20px; color: #7048c9; }
.lga-4 svg{ width: 22px; height: 22px; }

/* ---- Sayfa gövdesi ---------------------------------------------------- */
.lg-page{ padding: 30px 0 14px; }

.lg-layout{ display: flex; align-items: flex-start; gap: 20px; }
.lg-layout > .lg-card{ flex: 1 1 auto; min-width: 0; }
.lg-layout > .lg-toc{ flex: 0 0 238px; }

/* ---- Ana içerik kartı --------------------------------------------------- */
.lg-card{
  background: #fff; border: 1px solid #e9edeb; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(25,42,57,.04);
  padding: 28px 30px 24px;
}

.lg-section{
  padding-bottom: 22px; margin-bottom: 22px;
  border-bottom: 1px solid #f0f3f1;
}
.lg-section:last-child{ padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }

.lg-title{
  display: flex; align-items: center; gap: 11px;
  font-size: 21px; font-weight: 700; letter-spacing: -.4px;
  color: var(--ink); margin: 0 0 12px;
}
.lg-ic{
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px;
  display: grid; place-items: center;
}
.lg-ic svg{
  width: 19px; height: 19px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.tone-mint { background: #e7f7ef; color: #058a63; }
.tone-blue { background: #ebf5ff; color: #1673cd; }
.tone-amber{ background: #fff7dd; color: #b8820a; }
.tone-lilac{ background: #f1eaff; color: #6a22dc; }

.lg-section p{
  font-size: 15.5px; line-height: 1.75; color: #44535f;
  margin: 0 0 11px; max-width: 74ch;      /* satır uzunluğu okunaklı kalsın */
}
.lg-section p:last-child{ margin-bottom: 0; }
.lg-section a{ color: var(--green); font-weight: 500; }
.lg-section a:hover{ color: var(--green-dark); text-decoration: none; }

/* Bilgi kartı varyantı (ör. "Danışmanlık kapsamı dışındadır") */
.lg-section.is-notice{
  background: #fffaf0; border: 1px solid #f2e3c2; border-radius: 14px;
  padding: 20px 22px; margin-bottom: 0;
}
.lg-section.is-notice .lg-title{ color: #7a5c10; font-size: 19px; }
.lg-section.is-notice p{ color: #6b5514; }
.lg-section.is-notice + .lg-section{ margin-top: 22px; }

/* ---- "Bu sayfada" -------------------------------------------------------- */
.lg-toc-card{
  position: sticky; top: 92px;
  background: #fff; border: 1px solid #e9edeb; border-radius: 15px;
  box-shadow: 0 1px 2px rgba(25,42,57,.04);
  padding: 17px 17px 15px;
}
.lg-toc-card h2{
  font-size: 12px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: #8a959d;
  margin: 0 0 11px;
}
.lg-toc-card ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lg-toc-card a{
  display: block; padding: 8px 10px; border-radius: 9px;
  font-size: 13.5px; line-height: 1.4; color: #44535f;
  transition: background-color .2s ease, color .2s ease;
}
.lg-toc-card a:hover{ background: #f2f9f5; color: var(--green-dark); text-decoration: none; }

/* ---- Alt iletişim bandı ------------------------------------------------- */
.lg-contact{
  display: flex; align-items: center; gap: 13px;
  background: #f7faf8; border: 1px solid #e9efec; border-radius: 14px;
  padding: 15px 18px; margin-top: 20px;
}
.lg-contact-ic{
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px;
  display: grid; place-items: center; background: #e6f4ec; color: #0f8a5f;
}
.lg-contact-ic svg{
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.lg-contact p{ margin: 0; font-size: 13.5px; line-height: 1.6; color: #5b6a76; }
.lg-contact a{ color: var(--green); font-weight: 600; word-break: break-all; }
.lg-contact a:hover{ color: var(--green-dark); text-decoration: none; }

/* ---- Duyarlı ------------------------------------------------------------ */
@media (max-width: 1180px){
  .lg-hero h1{ font-size: 33px; }
  .lg-layout > .lg-toc{ flex: 0 0 210px; }
}
@media (max-width: 980px){
  .lg-hero-inner{ display: block; }
  .lg-hero-inner > .lg-hero-art{ display: none; }
  /* Kısa sayfalarda yan sütun kalabalık yapmasın.
     DOM'da içerikten SONRA geldiği için mobilde gösterilmez; bölümler
     zaten tek ekranda sırayla okunuyor. */
  .lg-layout{ display: block; }
  .lg-layout > .lg-toc{ display: none; }
}
@media (max-width: 560px){
  .lg-hero{ padding: 20px 0 24px; }
  .lg-hero h1{ font-size: 27px; letter-spacing: -.8px; margin-bottom: 13px; }
  .lg-hero p{ font-size: 15px; }
  .lg-page{ padding: 22px 0 10px; }
  .lg-card{ padding: 20px 18px 18px; }
  .lg-title{ font-size: 18.5px; gap: 10px; }
  .lg-ic{ width: 34px; height: 34px; flex: 0 0 34px; }
  .lg-ic svg{ width: 17px; height: 17px; }
  .lg-section{ padding-bottom: 18px; margin-bottom: 18px; }
  .lg-section p{ font-size: 15px; line-height: 1.7; }
  .lg-section.is-notice{ padding: 17px 16px; }
  .lg-contact{ align-items: flex-start; padding: 14px 15px; }
  .lg-contact p{ font-size: 13px; }
}

/* ---- Taşma güvencesi ---------------------------------------------------- */
.lg-layout > *, .lg-hero-inner > *{ min-width: 0; box-sizing: border-box; }
.lg-section p, .lg-toc-card a, .lg-contact p{ overflow-wrap: anywhere; }