/*
  Web Tasarım (hizmetler/web-tasarim) — tasarımın isService bloğu.
  Ortak bölümler (içindekiler, süreçler, içgörü, uzman yazısı, senaryolar, SSS, detaylı bilgi) service-common.css'te.
  Kırılımlar tasarımdaki gibi: 760 ve (max-width: 1024px) and (orientation: portrait).
*/

/* ---------- Hero ---------- */
#page-service-web .hero-area { position: relative; height: clamp(680px, 98vh, 1060px); overflow: hidden; }
#page-service-web .hero-area .crumb { position: absolute; left: 7.002%; top: 150px; z-index: 6; font-weight: 700; font-size: 12px; line-height: 12px; white-space: nowrap; color: #151515; animation: pkRiseIn .9s cubic-bezier(.16, 1, .3, 1) .15s both; }
#page-service-web .hero-area .head { position: absolute; left: 50%; top: 168px; transform: translateX(-50%); z-index: 6; width: min(760px, 86%); text-align: center; }
#page-service-web .hero-area .title { margin: 0; font-weight: 700; font-size: clamp(34px, 3.4vw, 60px); line-height: 1.02; letter-spacing: -0.03em; color: #151515; animation: pkRiseIn .9s cubic-bezier(.16, 1, .3, 1) .15s both; }
#page-service-web .hero-area .texts { margin: 16px auto 0; max-width: 500px; font-weight: 400; font-size: 17px; line-height: 24px; color: rgba(21, 21, 21, 0.58); text-wrap: pretty; animation: pkRiseIn .9s cubic-bezier(.16, 1, .3, 1) .15s both; }

/* Yelpaze: kartlar ortadan dağıtılır (pkDeal), yana açılır (pkSpread), sonra süzülür (pkFloat). */
#page-service-web .fan { position: absolute; left: 0; right: 0; top: 45%; bottom: 0; z-index: 1; }
#page-service-web .fan .card { position: absolute; left: 50%; top: 0; width: 16vw; margin-left: -8vw; aspect-ratio: 1 / 1; }
#page-service-web .fan .spread { width: 100%; height: 100%; animation: pkSpread 1.15s cubic-bezier(.22, 1.1, .34, 1) 1.03s both; will-change: transform; }
#page-service-web .fan .deal { width: 100%; height: 100%; animation: pkDeal .95s cubic-bezier(.16, 1, .3, 1) .1s both; will-change: transform; }
#page-service-web .fan .float { position: relative; width: 100%; height: 100%; animation: pkFloat 5.4s ease-in-out 2.15s infinite; will-change: transform; }
#page-service-web .fan .shade { position: absolute; inset: 0; border-radius: 8px; box-shadow: 0 22px 46px rgba(0, 0, 0, 0.10); opacity: 0; animation: pkShade .8s linear 1.05s both; }
#page-service-web .fan .img { position: relative; width: 100%; height: 100%; border-radius: 8px; overflow: hidden; background: #ffffff; }
#page-service-web .fan .img img { display: block; width: 100%; height: 100%; object-fit: cover; }

#page-service-web .fan .card:nth-child(1) { z-index: 6; }
#page-service-web .fan .card:nth-child(1) .spread { --fx: -39vw; --fy: 7vh; --fr: -17deg; animation-delay: 1.03s; }
#page-service-web .fan .card:nth-child(1) .float { animation-duration: 5.4s; animation-delay: 2.15s; }
#page-service-web .fan .card:nth-child(2) { z-index: 7; }
#page-service-web .fan .card:nth-child(2) .spread { --fx: -26vw; --fy: 3.4vh; --fr: -11deg; animation-delay: .97s; }
#page-service-web .fan .card:nth-child(2) .float { animation-duration: 6.0s; animation-delay: 2.52s; }
#page-service-web .fan .card:nth-child(3) { z-index: 8; }
#page-service-web .fan .card:nth-child(3) .spread { --fx: -13vw; --fy: 0.9vh; --fr: -5deg; animation-delay: .91s; }
#page-service-web .fan .card:nth-child(3) .float { animation-duration: 6.5s; animation-delay: 2.89s; }
#page-service-web .fan .card:nth-child(4) { z-index: 9; }
#page-service-web .fan .card:nth-child(4) .spread { --fx: 0vw; --fy: 0vh; --fr: 0deg; animation-delay: .85s; }
#page-service-web .fan .card:nth-child(4) .float { animation-duration: 7.1s; animation-delay: 3.26s; }
#page-service-web .fan .card:nth-child(4) .shade { opacity: 1; animation: none; }
#page-service-web .fan .card:nth-child(5) { z-index: 8; }
#page-service-web .fan .card:nth-child(5) .spread { --fx: 13vw; --fy: 0.9vh; --fr: 5deg; animation-delay: .91s; }
#page-service-web .fan .card:nth-child(5) .float { animation-duration: 7.6s; animation-delay: 3.63s; }
#page-service-web .fan .card:nth-child(6) { z-index: 7; }
#page-service-web .fan .card:nth-child(6) .spread { --fx: 26vw; --fy: 3.4vh; --fr: 11deg; animation-delay: .97s; }
#page-service-web .fan .card:nth-child(6) .float { animation-duration: 8.2s; animation-delay: 4.00s; }
#page-service-web .fan .card:nth-child(7) { z-index: 6; }
#page-service-web .fan .card:nth-child(7) .spread { --fx: 39vw; --fy: 7vh; --fr: 17deg; animation-delay: 1.03s; }
#page-service-web .fan .card:nth-child(7) .float { animation-duration: 8.7s; animation-delay: 4.37s; }

#page-service-web .hero-area .badge { position: absolute; right: 24%; top: 34%; z-index: 12; width: clamp(92px, 8.4vw, 132px); animation: pkPop .8s cubic-bezier(.16, 1, .3, 1) 1.85s both; }
#page-service-web .hero-area .badge img { display: block; width: 100%; height: auto; animation: pkSpin 18s linear infinite; }
#page-service-web .hero-area .tag { position: absolute; left: 22%; top: 65%; z-index: 12; height: 34px; border-radius: 30px; background: #ecff5d; padding: 0 14px; display: flex; align-items: center; white-space: nowrap; animation: pkPop .7s cubic-bezier(.16, 1, .3, 1) 2s both; }
#page-service-web .hero-area .tag span { font-weight: 700; font-size: 12px; line-height: 12px; color: #151515; }

#page-service-web .hero-area .actions { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); z-index: 6; text-align: center; animation: pkRiseIn .9s cubic-bezier(.16, 1, .3, 1) .15s both; }
#page-service-web .hero-area .btns { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
#page-service-web .hero-area .btn { height: 52px; border-radius: 50px; padding: 0 22px; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 16px; line-height: 16px; white-space: nowrap; }
#page-service-web .hero-area .btn.dark { background: #151515; color: #ffffff; transition: opacity .3s ease; }
#page-service-web .hero-area .btn.dark:hover { opacity: .84; }
#page-service-web .hero-area .btn.line { box-shadow: inset 0 0 0 1px rgba(21, 21, 21, 0.18); color: #151515; transition: background-color .4s cubic-bezier(.16, 1, .3, 1), color .4s cubic-bezier(.16, 1, .3, 1); }
#page-service-web .hero-area .btn.line:hover { background-color: #151515; color: #ffffff; }
#page-service-web .hero-area .calc-link { display: inline-block; margin-top: 18px; font-weight: 700; font-size: 12px; line-height: 12px; color: #000000; text-decoration: underline; }

/* ---------- 1 · Tamamlanan projeler ---------- */
#page-service-web .cases-area { position: relative; padding: 40px 7.002% 0; }
#page-service-web .cases-area > .no { font-weight: 700; font-size: 12px; line-height: 12px; color: #000000; }
#page-service-web .cases-area > .title { margin: 12px 0 0; font-weight: 500; font-size: clamp(26px, 1.85vw, 32px); line-height: 32px; letter-spacing: -0.01em; color: #151515; }
/* Tam genişlikte 3 sütun (tasarımdaki 1240px sınırında auto-fit 3 sütun veriyordu); daraldıkça 2 ve 1. */
#page-service-web .cases-area .grid { margin-top: 52px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 1024px) { #page-service-web .cases-area .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { #page-service-web .cases-area .grid { grid-template-columns: minmax(0, 1fr); } }
#page-service-web .case { display: block; text-decoration: none; color: inherit; }
#page-service-web .case[hidden] { display: none; }
#page-service-web .case .media { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: rgb(239, 239, 239); }
#page-service-web .case .media video,
#page-service-web .case .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.16, 1, .3, 1); }
#page-service-web .case .media video:hover,
#page-service-web .case .media img:hover { transform: scale(1.035); }
#page-service-web .case .meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#page-service-web .case .firm { margin-top: 14px; font-weight: 700; font-size: 13px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #151515; }
#page-service-web .case .soon { margin-top: 14px; height: 20px; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(21, 21, 21, 0.25); padding: 0 9px; display: inline-flex; align-items: center; font-weight: 700; font-size: 11px; line-height: 11px; letter-spacing: 0.04em; white-space: nowrap; color: rgba(21, 21, 21, 0.65); }
#page-service-web .case .tags { margin-top: 6px; font-weight: 400; font-size: 12px; line-height: 16px; color: rgba(21, 21, 21, 0.5); text-wrap: pretty; }
#page-service-web .cases-area .more-wrap { margin-top: 56px; padding-bottom: 40px; display: flex; justify-content: center; }
#page-service-web .cases-area .more-wrap[hidden] { display: none; }
#page-service-web .cases-area .more { 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); }
#page-service-web .cases-area .more:hover { background-color: #151515; color: #ffffff; }
#page-service-web .cases-area .end { height: 96px; }
#page-service-web .cases-area .end[hidden] { display: none; }

/* ---------- 2 · Fiyat hesaplayıcı ---------- */
#page-service-web .price-area { position: relative; padding: clamp(80px, 9vw, 160px) 7.002%; border-radius: 8px; background: rgb(21, 21, 21); color: #ffffff; }
#page-service-web .price-area > .badge { position: absolute; right: 7.002%; top: 40px; height: 23px; border-radius: 20px; background: #000000; padding: 4px 8px; display: flex; align-items: center; box-sizing: border-box; }
#page-service-web .price-area > .badge span { font-family: 'Eudoxus Sans', var(--font); font-weight: 700; font-size: 12px; line-height: 100%; letter-spacing: 0.08em; white-space: nowrap; color: rgb(127, 127, 127); }
#page-service-web .price-area > .no { font-weight: 700; font-size: 12px; line-height: 12px; color: rgb(211, 211, 211); }
#page-service-web .price-area > .title { margin: 20px 0 0; font-weight: 400; font-size: clamp(26px, 1.85vw, 32px); line-height: 32px; color: #ffffff; }
#page-service-web .price-area > .texts { margin: 20px 0 0; max-width: 560px; font-weight: 400; font-size: 16px; line-height: 22px; color: rgba(255, 255, 255, 0.55); text-wrap: pretty; }

#page-service-web .calc { margin-top: clamp(48px, 5vw, 80px); border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); display: flex; flex-wrap: wrap; overflow: hidden; }
#page-service-web .calc .groups { flex: 1 1 520px; min-width: 0; padding: clamp(28px, 3vw, 48px); box-sizing: border-box; display: flex; flex-direction: column; gap: 0; }
#page-service-web .calc .group { padding: 22px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr); gap: 20px; align-items: center; }
#page-service-web .calc .group .label { font-weight: 700; font-size: 12px; line-height: 16px; white-space: nowrap; color: rgba(255, 255, 255, 0.55); }
#page-service-web .calc .chips { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-y; }
#page-service-web .calc .chip { height: 36px; border-radius: 30px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); padding: 0 14px; display: flex; align-items: center; font-weight: 700; font-size: 12px; line-height: 12px; white-space: nowrap; color: rgba(255, 255, 255, 0.75); transition: background-color .3s ease, color .3s ease; }
#page-service-web .calc .chip:hover { background-color: rgba(255, 255, 255, 0.1); color: #ffffff; }
#page-service-web .calc .chip.on,
#page-service-web .calc .chip.on:hover { background: #ffffff; box-shadow: none; color: #151515; transition: none; }

#page-service-web .calc .result { flex: 1 1 320px; min-width: 0; background: rgba(255, 255, 255, 0.05); padding: clamp(28px, 3vw, 48px); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
#page-service-web .calc .result .k { font-weight: 700; font-size: 12px; line-height: 12px; color: rgba(255, 255, 255, 0.5); }
#page-service-web .calc .result .price { margin-top: 20px; font-weight: 500; font-size: clamp(30px, 2.9vw, 48px); line-height: 1.04; letter-spacing: -0.02em; white-space: nowrap; color: #ffffff; }
#page-service-web .calc .result .note { margin-top: 18px; font-weight: 400; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.5); text-wrap: pretty; }
#page-service-web .calc .result .incl { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; flex-direction: column; gap: 10px; }
#page-service-web .calc .result .incl > div { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.72); }
#page-service-web .calc .result .incl .dot { flex: 0 0 auto; margin-top: 7px; width: 5px; height: 5px; border-radius: 50%; background: rgb(28, 215, 96); }
#page-service-web .calc .result .btn { margin-top: 30px; align-self: flex-start; height: 52px; border-radius: 50px; background: #ffffff; padding: 0 26px; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 16px; line-height: 16px; white-space: nowrap; color: #151515; transition: opacity .3s ease; }
#page-service-web .calc .result .btn:hover { opacity: .86; }

/* Karşılaştırma matrisi */
#page-service-web .compare { margin-top: clamp(64px, 7vw, 112px); }
#page-service-web .compare .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
#page-service-web .compare .head .t { margin: 0; font-weight: 400; font-size: clamp(22px, 1.62vw, 28px); line-height: 32px; color: #ffffff; text-wrap: pretty; }
#page-service-web .compare .head .d { max-width: 420px; font-weight: 400; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.5); text-wrap: pretty; }

#page-service-web .tbl-desk { margin-top: 36px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-y; }
#page-service-web .tbl-desk .inner { min-width: 748px; }
#page-service-web .tbl-desk .row { display: grid; grid-template-columns: minmax(190px, 1fr) repeat(3, minmax(170px, 1fr)); gap: 16px; align-items: start; border-top: 1px solid rgba(255, 255, 255, 0.08); }
#page-service-web .tbl-desk .row.top { align-items: end; border-top: 0; }
#page-service-web .tbl-desk .row.bot { border-top: 0; }
#page-service-web .tbl-desk .tier { padding: 0 18px 18px; }
#page-service-web .tbl-desk .tier .name { font-weight: 500; font-size: 16px; line-height: 20px; color: rgba(255, 255, 255, 0.8); }
#page-service-web .tbl-desk .tier .size { margin-top: 8px; font-weight: 700; font-size: 12px; line-height: 12px; color: rgba(255, 255, 255, 0.4); }
#page-service-web .tbl-desk .tier .range { margin-top: 14px; font-weight: 700; font-size: 17px; line-height: 17px; white-space: nowrap; color: rgba(255, 255, 255, 0.8); }
#page-service-web .tbl-desk .tier.hl { border-radius: 8px 8px 0 0; background: rgba(255, 255, 255, 0.07); padding: 22px 18px 18px; }
#page-service-web .tbl-desk .tier.hl .name { color: #ffffff; }
#page-service-web .tbl-desk .tier.hl .size { color: rgba(255, 255, 255, 0.55); }
#page-service-web .tbl-desk .tier.hl .range { color: #ffffff; }
#page-service-web .tbl-desk .label { padding: 20px 0; font-weight: 700; font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, 0.55); }
#page-service-web .tbl-desk .cell { padding: 20px 18px; font-weight: 400; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.5); text-wrap: pretty; }
#page-service-web .tbl-desk .cell.hl { background: rgba(255, 255, 255, 0.07); color: #ffffff; }
#page-service-web .tbl-desk .row.bot .hl { height: 18px; border-radius: 0 0 8px 8px; background: rgba(255, 255, 255, 0.07); }

#page-service-web .tbl-mob { display: none; margin-top: 22px; flex-direction: column; gap: 14px; }
#page-service-web .tcard { border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); background: transparent; padding: 20px; box-sizing: border-box; }
#page-service-web .tcard.hl { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.07); }
#page-service-web .tcard .name { font-weight: 500; font-size: 17px; line-height: 22px; color: #ffffff; }
#page-service-web .tcard .size { margin-top: 6px; font-weight: 700; font-size: 12px; line-height: 14px; color: rgba(255, 255, 255, 0.5); }
#page-service-web .tcard .range { margin-top: 12px; font-weight: 700; font-size: 18px; line-height: 20px; color: #ffffff; }
#page-service-web .tcard .rows { margin-top: 14px; display: flex; flex-direction: column; }
#page-service-web .tcard .r { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 12px; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
#page-service-web .tcard .r .label { font-weight: 700; font-size: 12px; line-height: 17px; color: rgba(255, 255, 255, 0.55); }
#page-service-web .tcard .r .v { font-weight: 400; font-size: 14px; line-height: 19px; color: rgba(255, 255, 255, 0.86); text-wrap: pretty; }

/* ---------- Mobil / dikey tablet ---------- */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
    #page-service-web .fan { transform: scale(1.5); transform-origin: 50% 0; }
    #page-service-web .calc .group { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    #page-service-web .calc .chips { flex-wrap: wrap; overflow: visible; touch-action: auto; }
    #page-service-web .tbl-desk { display: none; }
    #page-service-web .tbl-mob { display: flex; }
}
@media (max-width: 760px) {
    #page-service-web .fan { transform: scale(2); }
}