/*
  Hizmet detay (hizmetler/page) — tasarımda isSvcDetail bloğu.
  Değerler tasarımın inline stillerinden birebir.
*/

#page-service-detail { position: relative; padding-top: 150px; color: #151515; }
#page-service-detail * { box-sizing: border-box; }

/* ---------- Ana hizmet bildirimi ---------- */
#page-service-detail .toast { position: fixed; right: 12px; bottom: 12px; z-index: 450; width: min(400px, calc(100vw - 24px)); border-radius: 10px; background: #ffffff; box-shadow: 0 18px 44px rgba(0,0,0,0.12), inset 0 0 0 1px rgba(21,21,21,0.08); padding: 10px; display: flex; align-items: center; gap: 14px; animation: pkPop .7s cubic-bezier(.16,1,.3,1) both; }
#page-service-detail .toast[hidden] { display: none; }
#page-service-detail .toast .thumb { flex: 0 0 auto; width: 108px; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: rgb(238,238,238); }
#page-service-detail .toast .thumb span { display: block; width: 100%; height: 100%; background-size: cover; background-position: center top; background-repeat: no-repeat; }
#page-service-detail .toast .thumb [data-master="web"] { background-image: url(../../img/service-detail/snip-web.webp); }
#page-service-detail .toast .thumb [data-master="brand"] { background-image: url(../../img/service-detail/snip-brand.webp); }
#page-service-detail .toast .thumb [data-master="marketing"] { background-image: url(../../img/service-detail/snip-marketing.webp); }
#page-service-detail .toast .thumb [data-master="dev"] { background-image: url(../../img/service-detail/snip-dev.webp); }
#page-service-detail .toast .txt { min-width: 0; flex: 1 1 auto; padding-right: 22px; }
#page-service-detail .toast .d { font-weight: 400; font-size: 13px; line-height: 18px; color: rgba(21,21,21,0.62); text-wrap: pretty; }
#page-service-detail .toast .go { margin-top: 2px; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 15px; line-height: 20px; color: #151515; transition: opacity .3s ease; }
#page-service-detail .toast .go:hover { opacity: .6; }
#page-service-detail .toast .close { position: absolute; right: 8px; top: 8px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background-color .3s ease; }
#page-service-detail .toast .close:hover { background-color: rgba(21,21,21,0.06); }
#page-service-detail .toast .x { position: relative; display: block; width: 10px; height: 10px; }
#page-service-detail .toast .x span { position: absolute; left: 0; top: 4.4px; display: block; width: 10px; height: 1.3px; background: #151515; transform: rotate(45deg); }
#page-service-detail .toast .x span + span { transform: rotate(-45deg); }

/* ---------- Üst alan ---------- */
#page-service-detail .crumb-area { padding: 0 7.002%; }
#page-service-detail .crumb { font-weight: 700; font-size: 12px; line-height: 12px; white-space: nowrap; color: #151515; }
#page-service-detail .crumb a:hover { color: inherit; }

#page-service-detail .wrap { max-width: 1106px; margin: 0 auto; padding: 0 7.002%; }

#page-service-detail .chip-area { margin-top: 48px; display: flex; justify-content: center; }
#page-service-detail .chip { height: 29px; border-radius: 50px; box-shadow: inset 0 0 0 1px rgba(21,21,21,0.18); padding: 0 14px; display: inline-flex; align-items: center; font-weight: 700; font-size: 12px; line-height: 12px; white-space: nowrap; color: rgba(21,21,21,0.62); }
#page-service-detail .chip:hover { color: rgba(21,21,21,0.62); }
#page-service-detail .title { margin: 20px 0 0; text-align: center; font-weight: 500; font-size: clamp(32px, 2.43vw, 42px); line-height: 1.12; letter-spacing: -0.02em; text-wrap: pretty; }

#page-service-detail .links { margin-top: 56px; display: flex; align-items: center; justify-content: flex-end; gap: 24px; font-family: Gilroy, 'Helvetica Now Display', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 14px; }
#page-service-detail .links a { color: #151515; white-space: nowrap; }
#page-service-detail .links a:hover { opacity: .55; }

/* ---------- Kapak (paintSvcCover) ---------- */
#page-service-detail .cover-area { margin-top: 30px; position: relative; }
#page-service-detail .cover { position: relative; width: 100%; aspect-ratio: 1106 / 660; border-radius: 4px; will-change: transform; background: #151515; overflow: hidden; }
#page-service-detail .cover .par { position: absolute; left: 0; right: 0; top: -12%; height: 124%; background: #151515 center / cover no-repeat; will-change: transform; }
#page-service-detail .cover video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- AI özet bandı ---------- */
#page-service-detail .ai-area { margin-top: 14px; width: 100%; border-radius: 4px; background: #151515; padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
#page-service-detail .ai-area .l { display: flex; align-items: center; gap: 12px; }
#page-service-detail .ai-area svg { width: 25.5px; height: 25.5px; flex-shrink: 0; animation: pkSpin 14s linear infinite; }
#page-service-detail .ai-area .l span { font-weight: 400; font-size: 14px; line-height: 14px; color: #ffffff; }
#page-service-detail .ai-area .btn { height: 57.6px; border-radius: 50px; box-shadow: inset 0 0 0 1px #ffffff; padding: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; color: #ffffff; transition: background-color .45s cubic-bezier(.16,1,.3,1), color .45s cubic-bezier(.16,1,.3,1); }
#page-service-detail .ai-area .btn:hover { background-color: #ffffff; color: #151515; }
#page-service-detail .ai-area .btn .i { width: 25.6px; height: 25.6px; background: url(../../img/service-detail/chatgpt-icon.webp) center / cover no-repeat; border-radius: 50%; flex-shrink: 0; filter: brightness(0) invert(1); transition: filter .3s ease; }
#page-service-detail .ai-area .btn:hover .i { filter: none; }
#page-service-detail .ai-area .btn .t { font-weight: 400; font-size: 17px; line-height: 20px; }

/* ---------- Metin ---------- */
#page-service-detail .art { position: relative; margin-top: 96px; display: grid; grid-template-columns: minmax(0, 145px) minmax(0, 1fr) minmax(0, 56px); gap: clamp(16px, 1.8vw, 32px); }
#page-service-detail .art article { max-width: 620px; }
#page-service-detail .intro { display: flex; flex-direction: column; gap: 22px; font-weight: 400; font-size: 16px; line-height: 22px; text-wrap: pretty; }
#page-service-detail .intro p { margin: 0; }

#page-service-detail .matrix { margin-top: 76px; }
#page-service-detail .matrix .n { font-weight: 700; font-size: 12px; line-height: 12px; }
#page-service-detail .matrix h2 { margin: 16px 0 20px; font-weight: 500; font-size: clamp(28px, 2.43vw, 42px); line-height: 1.12; letter-spacing: -0.02em; text-wrap: pretty; }
#page-service-detail .matrix p { margin: 0; font-weight: 400; font-size: 16px; line-height: 22px; text-wrap: pretty; }
#page-service-detail .matrix p + p { margin-top: 22px; }
#page-service-detail .matrix .n + p { margin-top: 16px; }

#page-service-detail .cta { margin-top: 72px; padding-bottom: 200px; }
#page-service-detail .cta a { height: 60px; border-radius: 50px; background: #151515; padding: 0 30px; display: inline-flex; align-items: center; font-weight: 500; font-size: 17px; line-height: 20px; white-space: nowrap; color: #ffffff; transition: opacity .3s ease; }
#page-service-detail .cta a:hover { opacity: .82; color: #ffffff; }

/* Çubuk son butondan sonraki 200px boşluğa inmeden durur (footer'a kaymasın). */
#page-service-detail .share-col { padding-bottom: 200px; }
#page-service-detail .share { position: sticky; top: 132px; width: 56px; height: 90px; border-radius: 50px; box-shadow: inset 0 0 0 1px #151515; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
#page-service-detail .share a { display: flex; align-items: center; justify-content: center; }
#page-service-detail .share a:hover { opacity: .5; }

/* data-rsp="art" */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
    #page-service-detail .art { grid-template-columns: minmax(0, 1fr); }
    #page-service-detail .art > :first-child { display: none; }
    /* Mobilde paylaşım çubuğu içeriğin başında, sola yaslı yatay hap. */
    #page-service-detail .share-col { order: -1; padding-bottom: 0; display: flex; justify-content: flex-start; }
    #page-service-detail .share { position: static; width: auto; height: 48px; flex-direction: row; gap: 16px; padding: 0 18px; }
}

/* Telefon: AI şeridi tek satır (ikon + kısa metin solda, küçük buton sağda). */
@media (max-width: 760px) {
    #page-service-detail .ai-area { padding: 12px 12px 12px 16px; gap: 12px; flex-wrap: nowrap; }
    #page-service-detail .ai-area .l { gap: 10px; min-width: 0; }
    #page-service-detail .ai-area svg { width: 20px; height: 20px; }
    #page-service-detail .ai-area .l span { font-size: 13px; line-height: 17px; }
    #page-service-detail .ai-area .btn { flex: 0 0 auto; height: 40px; padding: 0 14px; gap: 8px; }
    #page-service-detail .ai-area .btn .i { width: 20px; height: 20px; }
    #page-service-detail .ai-area .btn .t { font-size: 14px; line-height: 16px; white-space: nowrap; }
    #page-service-detail .share { height: 42px; }
}