/*
  Hizmet sayfaları — ortak bölümler (web tasarım, web geliştirme, dijital pazarlama, marka kimliği).
  Kaynak: tasarımın isService / isDev / isMarketing / isBrand bloklarındaki ortak parçalar.
  Kapsam: <main class="page svc-page" id="page-service-xxx"> — sayfa id'leri farklı olduğu için ortak kurallar
  .svc-page sınıfı altında; sayfaya özel kurallar kendi dosyalarında #page-service-xxx altında.
  Partial'lar: resources/views/hizmetler/partials/{toc,processes,insight,expert,scenarios,faqs,topics}.blade.php
*/

.svc-page { position: relative; width: 100%; overflow-x: clip; background: #ffffff; color: #151515; }
.svc-page h1, .svc-page h2, .svc-page h3, .svc-page p { margin: 0; }

/* Bölüm numarası + başlık (tüm bölümlerde aynı ölçü) */
.svc-page .toc-area .no,
.svc-page .scn-area > .no,
.svc-page .faq-area > .no,
.svc-page .topic-area > .no { font-weight: 700; font-size: 12px; line-height: 12px; color: #151515; }
.svc-page .toc-area .title,
.svc-page .scn-area > .title,
.svc-page .faq-area > .title,
.svc-page .topic-area > .title { margin: 20px 0 0; font-weight: 500; font-size: clamp(26px, 1.85vw, 32px); line-height: 32px; color: #151515; }

/* ---------- İçindekiler + içerik sütunu ---------- */
.svc-page .toc-area { position: relative; padding: 0 7.002%; }
/* İçerik sütunu sayfaya ortalanır; içindekiler paneli solda sabit kalır.
   Sol boşluk en az panel genişliği + aralık olur ki dar ekranda panelle çakışmasın. */
.svc-page .toc-grid { position: relative; }
.svc-page .toc-col { position: absolute; left: 0; top: 0; width: 200px; }
.svc-page .toc-panel { position: fixed; left: 7.002%; top: 150px; width: 200px; box-sizing: border-box; padding-left: 20px; border-left: 1px solid rgba(21, 21, 21, 0.2); opacity: 0; pointer-events: none; transition: opacity .6s cubic-bezier(.16, 1, .3, 1); z-index: 150; }
.svc-page .toc-panel nav { display: flex; flex-direction: column; gap: 14px; }
.svc-page .toc-panel a { font-weight: 400; font-size: 14px; line-height: 14px; white-space: nowrap; color: rgba(21, 21, 21, 0.45); transition: color .3s ease; }
.svc-page .toc-panel a:hover { color: #151515; }
.svc-page .toc-main { max-width: 726px; margin-left: max(calc((100% - 726px) / 2), calc(200px + clamp(28px, 4vw, 96px))); margin-right: auto; }

/* ---------- 1 · Süreçler ---------- */
.svc-page .proc-area { padding: 150px 0 0; }
.svc-page .proc-area .items { margin-top: 60px; display: flex; flex-direction: column; gap: 56px; }
.svc-page .proc-area .item .t { margin: 14px 0 14px; font-weight: 700; font-size: 17px; line-height: 22px; color: #151515; }
.svc-page .proc-area .item .d { display: flex; flex-direction: column; gap: 16px; font-weight: 400; font-size: 16px; line-height: 22px; color: #151515; text-wrap: pretty; }

/* ---------- 2 · Koyu içgörü kartı ---------- */
.svc-page .insight-area { padding: 150px 0 0; }
.svc-page .insight-area .card { position: relative; border-radius: 8px; background: rgb(21, 21, 21); color: #ffffff; padding: clamp(36px, 4.6vw, 80px); box-sizing: border-box; display: flex; flex-direction: column; gap: 20px; overflow: hidden; }
.svc-page .insight-area .badge { position: absolute; right: 40px; top: 40px; height: 23px; border-radius: 20px; background: #000000; padding: 4px 8px; display: flex; align-items: center; box-sizing: border-box; }
.svc-page .insight-area .badge span { font-family: 'Eudoxus Sans', var(--font); font-weight: 700; font-size: 12px; line-height: 100%; letter-spacing: 0.08em; color: rgb(127, 127, 127); }
.svc-page .insight-area .icon { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; }
.svc-page .insight-area .icon svg { width: 120px; height: 120px; }
.svc-page .insight-area .card .no { color: rgb(211, 211, 211); }
.svc-page .insight-area .t { margin: 0; font-weight: 500; font-size: clamp(26px, 1.85vw, 32px); line-height: 32px; color: #ffffff; }
.svc-page .insight-area .d { font-weight: 400; font-size: 16px; line-height: 22px; color: rgba(255, 255, 255, 0.78); }
.svc-page .insight-area .btn { margin-top: 12px; width: 231px; height: 60px; border-radius: 50px; box-shadow: inset 0 0 0 1px #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 400; font-size: 17px; line-height: 20px; color: #ffffff; transition: background-color .45s cubic-bezier(.16, 1, .3, 1), color .45s cubic-bezier(.16, 1, .3, 1); }
.svc-page .insight-area .btn:hover { background-color: #ffffff; color: #151515; }

/* ---------- 3 · Uzman yazısı ---------- */
.svc-page .expert-area { padding: 150px 0 0; text-align: center; }
.svc-page .expert-area .title { text-wrap: pretty; }
.svc-page .expert-area .avatar { position: relative; margin: 42px auto 0; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: #151515; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; line-height: 13px; letter-spacing: 0.02em; color: #ffffff; }
.svc-page .expert-area .avatar span { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; }
.svc-page .expert-area .text { margin: 24px 0 0; font-weight: 400; font-size: 16px; line-height: 22px; color: #151515; text-wrap: pretty; }
.svc-page .expert-area .btn { margin: 40px auto 0; width: 231px; height: 60px; border-radius: 50px; box-shadow: inset 0 0 0 1px #151515; display: flex; align-items: center; justify-content: center; font-weight: 400; font-size: 17px; line-height: 20px; color: #151515; transition: background-color .45s cubic-bezier(.16, 1, .3, 1), color .45s cubic-bezier(.16, 1, .3, 1); }
.svc-page .expert-area .btn:hover { background-color: #151515; color: #ffffff; }

/* ---------- 4 · Senaryolar (koyu, tam genişlik) ---------- */
.svc-page .scn-area { position: relative; margin-top: 150px; padding: clamp(80px, 8vw, 140px) 7.002%; background: rgb(21, 21, 21); color: #ffffff; }
.svc-page .scn-area > .no { color: rgb(211, 211, 211); }
.svc-page .scn-area > .title { color: #ffffff; }
.svc-page .scn-area .texts { margin: 24px 0 0; max-width: 531px; font-weight: 400; font-size: 16px; line-height: 22px; color: #ffffff; text-wrap: pretty; }
.svc-page .scn-area .rows { margin-top: 70px; display: flex; flex-direction: column; }
.svc-page .scn-area .row { border-top: 1px solid rgba(255, 255, 255, 0.14); padding: 32px 0; display: grid; grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 50px); align-items: start; }
.svc-page .scn-area .row .n { font-weight: 700; font-size: 12px; line-height: 12px; color: rgba(255, 255, 255, 0.5); }
.svc-page .scn-area .row .t { font-weight: 400; font-size: 16px; line-height: 22px; color: #ffffff; text-wrap: pretty; }
.svc-page .scn-area .row .d { font-weight: 400; font-size: 16px; line-height: 22px; color: rgba(255, 255, 255, 0.6); text-wrap: pretty; }
.svc-page .scn-area .btn { margin-top: 60px; width: 199px; height: 60px; border-radius: 50px; box-shadow: inset 0 0 0 1px #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 400; font-size: 17px; line-height: 20px; color: #ffffff; transition: background-color .45s cubic-bezier(.16, 1, .3, 1), color .45s cubic-bezier(.16, 1, .3, 1); }
.svc-page .scn-area .btn:hover { background-color: #ffffff; color: #151515; }

/* ---------- 6 · SSS ---------- */
.svc-page .faq-area { position: relative; padding: 150px 7.002% 180px; }
.svc-page .faq-area > .title { max-width: 726px; text-wrap: pretty; }
.svc-page .faq-area .rows { margin-top: 70px; display: flex; flex-direction: column; }
.svc-page .faq-area .row { border-top: 1px solid rgba(21, 21, 21, 0.12); padding: 40px 0; display: grid; grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 50px); align-items: start; }
.svc-page .faq-area .row .n { font-weight: 700; font-size: 12px; line-height: 12px; color: #151515; }
.svc-page .faq-area .row .t { margin: 0; font-weight: 400; font-size: clamp(20px, 1.5vw, 24px); line-height: 30px; color: #151515; text-wrap: pretty; }
.svc-page .faq-area .row .by { margin-top: 16px; font-family: Gilroy, var(--font); font-weight: 400; font-size: 14px; line-height: 18px; color: rgba(21, 21, 21, 0.6); }
.svc-page .faq-area .row .a { display: flex; flex-direction: column; gap: 16px; font-weight: 400; font-size: 16px; line-height: 22px; color: rgba(21, 21, 21, 0.72); text-wrap: pretty; }

/* ---------- 7 · Detaylı bilgi (gri) ---------- */
.svc-page .topic-area { position: relative; padding: 150px 7.002% 180px; background: #eeeeee; }
.svc-page .topic-area > .title { max-width: 726px; text-wrap: pretty; }
.svc-page .topic-area .rows { margin-top: 70px; display: flex; flex-direction: column; }
.svc-page .topic-area .row { border-top: 1px solid rgba(21, 21, 21, 0.14); padding: 40px 0; display: grid; grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(20px, 3vw, 50px); align-items: start; }
.svc-page .topic-area .row .n { font-weight: 700; font-size: 12px; line-height: 12px; color: #151515; }
.svc-page .topic-area .row .t { margin: 0; font-weight: 400; font-size: clamp(20px, 1.5vw, 24px); line-height: 30px; color: #151515; text-wrap: pretty; }
.svc-page .topic-area .row .a { display: flex; flex-direction: column; gap: 16px; font-weight: 400; font-size: 16px; line-height: 24px; color: rgba(21, 21, 21, 0.72); text-wrap: pretty; }
.svc-page .topic-area .row ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.svc-page .topic-area .row li { margin: 0; }

/* ---------- Mobil / dikey tablet (tasarımdaki data-rsp="toc" ve "row3") ---------- */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
    .svc-page .toc-col { display: none; }
    .svc-page .toc-main { margin-left: auto; }
    .svc-page .scn-area .row,
    .svc-page .faq-area .row,
    .svc-page .topic-area .row { grid-template-columns: 36px minmax(0, 1fr); row-gap: 14px; }
    .svc-page .scn-area .row > :nth-child(3),
    .svc-page .faq-area .row > :nth-child(3),
    .svc-page .topic-area .row > :nth-child(3) { grid-column: 2; }
}