/* ==========================================================================
   main.css — Layout / Section Scaffold
   ----------------------------------------------------------------------------
   Sayfa düzeyinde paylaşılan: .wrap, .section, sec-* başlıklar, .link-arrow.
   Sayfaya özgü stiller pages/ altında.
   ========================================================================== */

.wrap{max-width:1480px;margin:0 auto;padding:0 48px}
.section{padding:120px 0}
.sec-light{background:var(--paper);color:var(--ink)}
.sec-dark{background:var(--bg);color:var(--cream)}

.sec-head{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end;padding-bottom:64px}
.sec-num{font-size:18px;color:var(--olive);opacity:.85;letter-spacing:.04em;margin-bottom:14px;font-weight:400}
.sec-dark .sec-num{color:var(--olive-l)}
.sec-title{font-weight:500;font-size:clamp(40px,5.4vw,80px);line-height:1.02;letter-spacing:-.03em;max-width:14ch;margin:0 auto}
.sec-title i{font-style:normal;color:var(--olive);font-weight:inherit}
.sec-dark .sec-title i{color:var(--olive-l)}
/* Default sec-head 2-kolon ızgarasında sol-hizalı kalsın — sadece is-center variantında ortala */
.sec-head:not(.is-center) .sec-title{margin-left:0}
.sec-lede{max-width:380px;font-size:15px;line-height:1.7;color:var(--ink-2);font-weight:300}
.sec-dark .sec-lede{color:rgba(241,243,244,.78)}

/* Center variant: tek kolon + her şey ortalı (comparison vs. tek-cümle bölümler için) */
.sec-head.is-center{grid-template-columns:1fr;text-align:center;justify-items:center}
.sec-head.is-center .sec-title{max-width:22ch;margin:0 auto}
.sec-head.is-center .sec-lede{max-width:540px;margin:14px auto 0}
.sec-head.is-center .eyebrow{margin-bottom:6px}

.link-arrow{
  display:inline-flex;align-items:center;gap:14px;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  color:var(--ink);border:none;border-bottom:1px solid var(--ink);padding-bottom:6px;
}
.sec-dark .link-arrow{color:var(--cream);border-color:var(--cream)}
.link-arrow:hover{color:var(--olive)}
.link-arrow svg,.link-arrow i{transition:.25s ease}
.link-arrow:hover svg,.link-arrow:hover i{transform:translateX(4px)}

@media (max-width:720px){
  .wrap{padding:0 22px}
  .section{padding:72px 0}
  .sec-head{grid-template-columns:1fr;gap:24px;padding-bottom:40px}
}