/* ds-calisma: Çalışmalarımız (ds.css'ten sonra yüklenir).
   cl-*  → proje sayfası (/calismalarimiz/{slug}), dizin (/calismalarimiz) ve site geneli proje kartları
           (ana sayfa, bölge merkez sayfaları, "Bu hizmetle yaptığımız işler").
   Her proje kendi marka tonunu alır: --c-ana (koyu vurgu), --c-isik (koyu zeminde vurgu), --c-zemin (açık kart), --c-koyu (kahraman zemini).
   Bkz. src/data/calismalar.ts › calismaTonu */

.cl, .cl-kart, .cl-bolum, .hz-calismalar { --c-ana: #5B3DF5; --c-isik: #B9A6FF; --c-zemin: #F3EFFF; --c-koyu: #1D1830; --cl-yesil: #1FA971; }

/* Koyu zeminde ortak öğeler */
.cl-hero .ds-ust, .cl-ag-panel .ds-ust, .cl-cta .ds-ust { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #FFFFFF; box-shadow: none; }
.cl-hero .ds-ust::before, .cl-ag-panel .ds-ust::before, .cl-cta .ds-ust::before { background: var(--c-isik); box-shadow: 0 0 0 4px rgba(255,255,255,.1); }
.cl-ag-panel .ds-vurgu, .cl-cta .ds-vurgu { background: linear-gradient(100deg, var(--c-isik) 0%, #FFFFFF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-decoration-color: rgba(255,255,255,.22); }
.cl .ds-ust { height: auto; min-height: 34px; padding-top: 7px; padding-bottom: 7px; line-height: 1.35; max-width: 100%; }
.cl .ds-h2 { overflow-wrap: break-word; }

/* Bölüm başlığı */
.cl-bas { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 18px 40px; margin-bottom: 36px; }
.cl-bas > div { min-width: 0; max-width: 100%; }
.cl-bas .ds-h2 { margin-top: 16px; }
.cl-bas p { margin-top: 16px !important; max-width: 640px; }
.cl-bas > p { max-width: 440px; margin-top: 0 !important; }
.cl-bas__not { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; background: var(--ds-bg); font-size: 13.5px !important; line-height: 1.5 !important; }
.cl-bas__not i { margin-top: 3px; color: var(--c-ana); }

/* ───────── Rozet ───────── */
.cl-rozetler { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cl-rozetler > li { display: contents; }
.cl-rozet {
  display: inline-flex; align-items: center; gap: 10px; min-height: 38px; max-width: 100%; padding: 5px 14px 5px 5px; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #FFFFFF; font-size: 13px; font-weight: 600; line-height: 1.3;
}
.cl-rozet > i { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #FFFFFF; background: linear-gradient(135deg, var(--ds-violet), #8B6CFF); }
.cl-rozet.sira > i { background: linear-gradient(135deg, #1FA971, #4CC98F); box-shadow: 0 0 0 4px rgba(31, 169, 113, .18); }
.cl-rozet.sira { border-color: rgba(76, 201, 143, .38); background: rgba(31, 169, 113, .12); }
.cl-rozet > span { min-width: 0; }
.cl-rozet b { font-weight: 800; }
.cl-rozet time { margin-left: 8px; padding-left: 8px; border-left: 1px solid rgba(255,255,255,.22); font-size: 12px; font-weight: 600; opacity: .78; white-space: nowrap; }
.cl-rozet.daha { padding: 5px 16px; color: #FFFFFF !important; text-decoration: none !important; background: transparent; border-style: dashed; }
.cl-rozet.daha i { font-size: 11px; }
/* Açık zeminde */
.cl-rozetler.acik .cl-rozet, .cl-kart .cl-rozet { background: #FFFFFF; border-color: var(--ds-line); color: var(--ds-ink); box-shadow: 0 6px 16px rgba(70, 50, 140, .05); }
.cl-rozetler.acik .cl-rozet.sira, .cl-kart .cl-rozet.sira { background: #EFFAF4; border-color: rgba(31, 169, 113, .25); }
.cl-rozetler.acik .cl-rozet time, .cl-kart .cl-rozet time { border-left-color: var(--ds-line); color: var(--ds-muted); opacity: 1; }
.cl-rozetler.acik .cl-rozet.daha { color: var(--c-ana) !important; border-color: color-mix(in srgb, var(--c-ana) 30%, transparent); }
.cl-rozet.kisa { min-height: 30px; gap: 7px; padding: 3px 11px 3px 3px; font-size: 12px; }
.cl-rozet.kisa > i { width: 24px; height: 24px; font-size: 10.5px; box-shadow: none; }
.cl-rozet.kisa time { margin-left: 6px; padding-left: 6px; font-size: 11.5px; }

/* ───────── Cihaz maketi ───────── */
.cl-cihaz { position: relative; padding: 0 0 44px 9%; }
.cl-tarayici { position: relative; margin: 0; border-radius: 22px; padding: 10px; background: #15121F; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 40px 80px rgba(13, 10, 25, .35); }
.cl-tarayici__ust { display: flex; align-items: center; gap: 6px; padding: 2px 6px 10px; }
.cl-tarayici__ust > span { width: 9px; height: 9px; border-radius: 50%; background: #FF6B5E; }
.cl-tarayici__ust > span:nth-child(2) { background: #FFBD2E; }
.cl-tarayici__ust > span:nth-child(3) { background: #28C840; }
.cl-tarayici__ust em { margin-left: 10px; flex: 1; min-width: 0; height: 24px; border-radius: 999px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.62); font-style: normal; font-size: 11.5px; display: flex; align-items: center; gap: 7px; padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-tarayici__ust em i { font-size: 9px; color: #6FDBA6; }
.cl-tarayici img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; border-radius: 13px; background: #2A2440; }
.cl-telefon { position: absolute; left: 0; bottom: 0; width: 27%; min-width: 96px; margin: 0; padding: 7px; border-radius: 30px; background: #0E0C14; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 30px 60px rgba(13, 10, 25, .45), inset 0 0 0 2px #2A2633; }
.cl-telefon img { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; object-fit: cover; object-position: top center; border-radius: 23px; background: #2A2440; }
.cl-telefon__centik { position: absolute; top: 13px; left: 50%; z-index: 1; width: 30%; height: 11px; border-radius: 999px; background: #0E0C14; transform: translateX(-50%); }
.cl-cip { z-index: 2; }
.cl-cip--ust { top: -18px; right: 22px; }
.cl-cip--alt { right: -14px; bottom: 6px; }
.cl-cip img { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; }
.cl-cihaz:not(.koyu) .cl-tarayici { background: #FFFFFF; border-color: var(--ds-line); box-shadow: 0 30px 60px rgba(70, 50, 140, .16); }
.cl-cihaz:not(.koyu) .cl-tarayici__ust em { background: var(--ds-bg); color: var(--ds-muted); }
.cl-cihaz:not(.koyu) .cl-tarayici img { background: var(--ds-bg); }

/* ───────── Proje kahramanı (koyu vitrin) ───────── */
.cl-hero { position: relative; padding: 146px 0 56px; color: #FFFFFF; overflow: hidden;
  background:
    radial-gradient(48% 62% at 88% 22%, color-mix(in srgb, var(--c-ana) 78%, transparent) 0%, transparent 72%),
    radial-gradient(42% 52% at 2% 0%, color-mix(in srgb, var(--c-isik) 26%, transparent) 0%, transparent 70%),
    radial-gradient(40% 40% at 55% 105%, rgba(155, 230, 243, .14) 0%, transparent 70%),
    var(--c-koyu); }
.cl-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.11) 1.2px, transparent 1.5px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(60% 70% at 72% 40%, #000 0%, transparent 80%); mask-image: radial-gradient(60% 70% at 72% 40%, #000 0%, transparent 80%); }
.cl-hero > .ds-kap { position: relative; }
.cl-hero__izgara { display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr); gap: 56px; align-items: center; }
.cl-hero__metin { min-width: 0; }
.cl-kirinti { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; margin-bottom: 22px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.6); }
.cl-kirinti a { color: rgba(255,255,255,.6) !important; text-decoration: none !important; transition: color .2s ease; }
.cl-kirinti a:hover { color: #FFFFFF !important; }
.cl-kirinti i { font-size: 10px; opacity: .55; }
.cl-kirinti span[aria-current] { color: #FFFFFF; min-width: 0; overflow-wrap: anywhere; }
.cl-kirinti.acik, .cl-kirinti.acik a { color: var(--ds-muted) !important; }
.cl-kirinti.acik a:hover { color: var(--ds-violet) !important; }
.cl-kirinti.acik span[aria-current] { color: var(--ds-ink); }
.cl-hero__marka { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cl-hero__logo { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 20px; padding: 5px; background: #FFFFFF; box-shadow: 0 14px 30px rgba(0,0,0,.25), 0 0 0 4px rgba(255,255,255,.08); }
.cl-hero__logo img { width: 100%; height: 100%; border-radius: 15px; object-fit: contain; }
.cl-proje[data-proje="sebnem-pilates"] .cl-hero__logo { padding: 0; overflow: hidden; }
.cl-proje[data-proje="sebnem-pilates"] .cl-hero__logo img { border-radius: 20px; object-fit: cover; }
.cl-h1 { margin: 22px 0 0; font-family: var(--ds-display); font-weight: 800; font-size: clamp(46px, 5.6vw, 84px); line-height: .96; letter-spacing: -0.05em; text-wrap: balance; overflow-wrap: break-word;
  background: linear-gradient(100deg, #FFFFFF 0%, #FFFFFF 46%, var(--c-isik) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.cl-hero__slogan { margin: 16px 0 0 !important; font-family: var(--ds-display); font-size: clamp(19px, 1.7vw, 23px) !important; font-weight: 600; line-height: 1.35 !important; letter-spacing: -0.015em; color: #FFFFFF !important; text-wrap: balance; }
.cl-hero__giris { margin-top: 16px !important; max-width: 600px; color: rgba(255,255,255,.72) !important; font-size: 16.5px !important; }
.cl-hero .cl-rozetler { margin-top: 24px; }
.cl-hero__dugmeler { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.cl-magaza { display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 20px 0 16px; border-radius: 16px; background: #000000; border: 1px solid rgba(255,255,255,.28); color: #FFFFFF !important; text-decoration: none !important; transition: transform .2s ease, border-color .2s ease; }
.cl-magaza:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.5); }
.cl-magaza i { font-size: 26px; }
.cl-magaza span { display: flex; flex-direction: column; font-family: var(--ds-display); font-size: 16px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
.cl-magaza small { font-family: var(--ds-body); font-size: 11px; font-weight: 600; opacity: .72; letter-spacing: 0; }
.cl-magaza.koyu { margin-top: 18px; border-color: #000000; }
.cl-hero__sahne { min-width: 0; padding-top: 18px; }

/* Künye */
.cl-kunye { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 64px 0 0; border-radius: 26px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); overflow: hidden; }
.cl-kunye > div { min-width: 0; padding: 20px 22px; border-left: 1px solid rgba(255,255,255,.08); }
.cl-kunye > div:first-child { border-left: 0; }
.cl-kunye dt { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c-isik); }
.cl-kunye dd { margin: 8px 0 0; font-size: 15px; font-weight: 700; line-height: 1.35; color: #FFFFFF; overflow-wrap: break-word; }
.cl-kunye dd small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.6); }
.cl-kunye dd a { color: #FFFFFF !important; text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 3px; }
.cl-kunye dd a i { font-size: 11px; opacity: .7; }
.cl-kunye__sehir { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.cl-kunye__sehir > span:not(.bo-plaka) { min-width: 0; }
.cl-tek { white-space: nowrap; }
.cl-kunye__sehir .bo-plaka { box-shadow: none; }

/* ───────── Sıralama panosu ───────── */
.cl-pano { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.cl-pano.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cl-pano.n1 { grid-template-columns: minmax(0, 1fr); }
.cl-pano__kart { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 18px; border-radius: 24px; background: #FFFFFF; border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow); overflow: hidden; }
.cl-pano__kart::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(closest-side, rgba(31, 169, 113, .14), transparent); pointer-events: none; }
.cl-pano__kart.ilk::after { background: radial-gradient(closest-side, rgba(91, 61, 245, .14), transparent); }
.cl-pano__arama { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 16px; border-radius: 999px; background: var(--ds-bg); border: 1px solid var(--ds-line); font-size: 15px; font-weight: 600; color: var(--ds-ink); overflow-wrap: anywhere; }
.cl-pano__arama i { color: var(--ds-muted); font-size: 13px; }
.cl-pano__sonuc { display: flex; align-items: center; gap: 14px; }
.cl-pano__no { flex: 0 0 auto; width: 62px; height: 62px; border-radius: 20px; display: grid; place-items: center; font-family: var(--ds-display); font-size: 34px; font-weight: 800; letter-spacing: -0.04em; color: #FFFFFF; background: linear-gradient(135deg, #1FA971, #4CC98F); box-shadow: 0 12px 26px rgba(31, 169, 113, .28); }
.cl-pano__no.ok { font-size: 22px; background: linear-gradient(135deg, var(--ds-violet), #8B6CFF); box-shadow: 0 12px 26px rgba(91, 61, 245, .26); }
.cl-pano__sonuc b { display: block; font-family: var(--ds-display); font-size: 18px; line-height: 1.2; letter-spacing: -0.015em; color: var(--ds-ink); }
.cl-pano__sonuc time { display: inline-block; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--ds-muted); }

/* ───────── Başlangıç noktası → Bugün ───────── */
.cl-os { display: grid; grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1.12fr); align-items: stretch; }
.cl-os__panel { min-width: 0; padding: 28px; border-radius: 30px; }
.cl-os__panel.once { background: repeating-linear-gradient(135deg, #FAF9FC 0 12px, #F5F3F9 12px 13px); border: 1.5px dashed rgba(29, 24, 48, .16); }
.cl-os__panel.sonra { color: #FFFFFF; background: radial-gradient(70% 80% at 100% 0%, color-mix(in srgb, var(--c-ana) 70%, transparent) 0%, transparent 70%), radial-gradient(60% 60% at 0% 100%, color-mix(in srgb, var(--c-isik) 18%, transparent) 0%, transparent 70%), var(--c-koyu); box-shadow: 0 30px 60px rgba(13, 10, 25, .18); }
.cl-os__ust { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 8px; border-bottom: 1px solid var(--ds-line); }
.cl-os__panel.sonra .cl-os__ust { border-bottom-color: rgba(255,255,255,.12); }
.cl-os__ust span { font-family: var(--ds-display); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--ds-muted); }
.cl-os__panel.sonra .cl-os__ust span { color: #FFFFFF; }
.cl-os__ust time { padding: 5px 12px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--ds-line); font-size: 12px; font-weight: 700; color: var(--ds-muted); }
.cl-os__panel.sonra .cl-os__ust time { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.16); color: var(--c-isik); }
.cl-os ul { margin: 0; padding: 0; list-style: none; }
.cl-os li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--ds-line); }
.cl-os li:last-child { border-bottom: 0; padding-bottom: 0; }
.cl-os__panel.sonra li { border-bottom-color: rgba(255,255,255,.1); }
.cl-os li > i { flex: 0 0 auto; margin-top: 2px; font-size: 18px; color: rgba(29, 24, 48, .3); }
.cl-os__panel.sonra li > i { color: #4CC98F; }
.cl-os li > div { min-width: 0; }
.cl-os li b { display: block; font-size: 16px; line-height: 1.35; color: var(--ds-ink); }
.cl-os__panel.once li b { color: #4A4560; }
.cl-os__panel.sonra li b { color: #FFFFFF; }
.cl-os li p { margin-top: 4px !important; font-size: 14.5px !important; line-height: 1.55 !important; }
.cl-os__panel.sonra li p { color: rgba(255,255,255,.68) !important; }
.cl-os li time { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: rgba(29, 24, 48, .06); font-size: 11.5px; font-weight: 700; color: var(--ds-muted); }
.cl-os__panel.sonra li time { background: rgba(255,255,255,.1); color: var(--c-isik); }
.cl-os__panel.once { display: flex; flex-direction: column; }
.cl-os__donum { display: flex; align-items: center; gap: 14px; margin-top: auto; padding: 14px 16px; border-radius: 20px; background: #FFFFFF; border: 1px solid var(--ds-line); box-shadow: 0 10px 24px rgba(70, 50, 140, .06); }
.cl-os__panel.once ul { margin-bottom: 20px; }
.cl-os__donum > i { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--c-ana); color: #FFFFFF; font-size: 15px; }
.cl-os__donum span { display: flex; flex-direction: column; min-width: 0; }
.cl-os__donum small { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ana); }
.cl-os__donum b { font-size: 16px; line-height: 1.3; color: var(--ds-ink); }
.cl-os__ok { position: relative; display: grid; place-items: center; }
.cl-os__ok::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, var(--c-ana) 0 6px, transparent 6px 12px); opacity: .45; }
.cl-os__ok span { position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--c-ana); color: #FFFFFF; font-size: 18px; box-shadow: 0 0 0 8px color-mix(in srgb, var(--c-ana) 14%, transparent), 0 14px 30px color-mix(in srgb, var(--c-ana) 35%, transparent); }

/* ───────── "Ne yaptık" ağ şeması ───────── */
.cl-ag-panel { position: relative; padding: 46px 44px 34px; border-radius: 36px; overflow: hidden; color: #FFFFFF;
  background: radial-gradient(50% 60% at 50% 55%, color-mix(in srgb, var(--c-ana) 40%, transparent) 0%, transparent 72%), radial-gradient(40% 50% at 100% 0%, rgba(91, 61, 245, .35) 0%, transparent 70%), var(--ds-ink); }
.cl-ag-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.4px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(60% 60% at 50% 55%, #000, transparent 85%); mask-image: radial-gradient(60% 60% at 50% 55%, #000, transparent 85%); }
.cl-ag-panel > * { position: relative; }
.cl-ag-panel .ds-h2 { color: #FFFFFF; }
.cl-ag-panel .cl-bas p { color: rgba(255,255,255,.66) !important; }
.cl-ag { margin-top: 6px; }
.cl-ag__sahne { position: relative; aspect-ratio: var(--oran, 1000 / 620); }
.cl-ag__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cl-ag__halka-iz { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 14; }
.cl-ag__halka { fill: none; stroke: var(--c-isik); stroke-width: 2; stroke-dasharray: 2 12; stroke-linecap: round; opacity: .7; animation: clAkis 2.2s linear infinite; }
.cl-ag__kol line { stroke: rgba(255,255,255,.22); stroke-width: 1.5; stroke-dasharray: 5 7; animation: clAkis 1.6s linear infinite reverse; }
.cl-ag__nabiz { fill: var(--c-isik); filter: drop-shadow(0 0 6px var(--c-isik)); }
.cl-ag__gezgin { fill: #FFFFFF; filter: drop-shadow(0 0 8px var(--c-isik)); }
@keyframes clAkis { to { stroke-dashoffset: -28; } }
.cl-ag__merkez { position: absolute; left: 50%; top: 50%; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; transform: translate(-50%, -38%); }
.cl-ag__halo { position: absolute; top: 0; left: 50%; width: 140px; height: 140px; margin-left: -70px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c-isik) 60%, transparent); animation: clHalo 3.2s ease-out infinite; pointer-events: none; }
@keyframes clHalo { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
.cl-ag__logo { width: 140px; height: 140px; border-radius: 50%; padding: 12px; background: #FFFFFF; display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(255,255,255,.06), 0 0 0 22px rgba(255,255,255,.03), 0 30px 60px rgba(0,0,0,.35); }
.cl-ag__logo img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; }
.cl-proje[data-proje="sebnem-pilates"] .cl-ag__logo { padding: 0; overflow: hidden; }
.cl-proje[data-proje="sebnem-pilates"] .cl-ag__logo img { object-fit: cover; }
.cl-ag__hedef { display: flex; flex-direction: column; align-items: center; padding: 8px 16px; border-radius: 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-align: center; white-space: nowrap; }
.cl-ag__hedef small { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c-isik); }
.cl-ag__hedef b { font-family: var(--ds-display); font-size: 16px; letter-spacing: -0.01em; color: #FFFFFF; }
.cl-ag__liste { margin: 0; padding: 0; list-style: none; }
.cl-dugum { position: absolute; left: var(--x); top: var(--y); z-index: 2; width: clamp(176px, 19.5%, 226px); transform: translate(-50%, -50%); }
.cl-dugum a { display: flex; flex-direction: column; gap: 6px; padding: 14px 15px 13px; border-radius: 20px; background: #FFFFFF; border: 1px solid rgba(255,255,255,.6); box-shadow: 0 18px 40px rgba(0,0,0,.28); color: var(--ds-ink) !important; text-decoration: none !important; transition: transform .22s ease, box-shadow .22s ease; }
.cl-dugum a:hover, .cl-dugum a:focus-visible { transform: translateY(-4px); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-isik) 55%, transparent), 0 24px 46px rgba(0,0,0,.34); }
.cl-dugum__ust { display: flex; justify-content: space-between; align-items: center; }
.cl-dugum__ikon { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--c-zemin); color: var(--c-ana); font-size: 14px; }
.cl-dugum__no { font-family: var(--ds-display); font-size: 13px; font-weight: 800; letter-spacing: .06em; color: rgba(29, 24, 48, .22); }
.cl-dugum b { font-family: var(--ds-display); font-size: 15.5px; line-height: 1.2; letter-spacing: -0.01em; }
.cl-dugum small { font-size: 12.5px; line-height: 1.45; color: var(--ds-muted); }
.cl-dugum__hizmet { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--ds-line); font-size: 11.5px; font-weight: 800; color: var(--c-ana); }
.cl-dugum__hizmet i { font-size: 9.5px; transition: transform .2s ease; }
.cl-dugum a:hover .cl-dugum__hizmet i { transform: translateX(3px); }
.cl-ag-panel__hizmetler { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255,255,255,.1); list-style: none; }
.cl-ag-panel__hizmetler a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.86) !important; font-size: 13px; font-weight: 600; text-decoration: none !important; transition: background-color .2s ease; }
.cl-ag-panel__hizmetler a:hover { background: rgba(255,255,255,.16); color: #FFFFFF !important; }
.cl-ag-panel__hizmetler i { font-size: 11px; color: var(--c-isik); }

/* ───────── Öne çıkanlar (bento) ───────── */
.cl-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 16px; }
.cl-vitrin { grid-column: span 2; grid-row: span 2; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 24px; align-items: center; padding: 30px; border-radius: 30px; overflow: hidden;
  background: radial-gradient(70% 90% at 100% 100%, color-mix(in srgb, var(--c-ana) 16%, transparent) 0%, transparent 70%), linear-gradient(150deg, var(--c-zemin), #FFFFFF 70%); border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow); }
.cl-vitrin__metin { min-width: 0; }
.cl-vitrin__ikon, .cl-oz__ikon { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: var(--c-ana); color: #FFFFFF; font-size: 21px; box-shadow: 0 12px 24px color-mix(in srgb, var(--c-ana) 30%, transparent); }
.cl-vitrin .ds-h3 { margin-top: 18px; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.12; letter-spacing: -0.025em; }
.cl-vitrin p { margin-top: 12px !important; font-size: 15.5px !important; }
.cl-vitrin__not { display: flex; gap: 8px; align-items: flex-start; margin-top: 16px; font-size: 12.5px; line-height: 1.45; color: var(--ds-muted); }
.cl-vitrin__not i { margin-top: 2px; color: var(--c-ana); }
.cl-vitrin__gorsel { position: relative; min-width: 0; display: flex; justify-content: center; align-items: center; gap: 14px; }
.cl-vitrin__form { position: relative; margin: 0; width: 100%; max-width: 380px; transform: rotate(-2deg); }
.cl-vitrin__form img { display: block; width: 100%; height: auto; border-radius: 22px; background: #FFFFFF; box-shadow: 0 30px 60px rgba(70, 50, 140, .18), 0 0 0 1px var(--ds-line); }
.cl-vitrin__cip { left: -26px; top: 30%; }
/* Önce/sonra karşılaştırma */
.cl-ka { position: relative; margin: 0; flex: 0 1 270px; min-width: 0; aspect-ratio: 720 / 1279; border-radius: 30px; overflow: hidden; border: 7px solid #0E0C14; background: #0E0C14; box-shadow: 0 30px 60px rgba(13, 10, 25, .3); --k: 50%; touch-action: pan-y; }
.cl-ka img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cl-ka img.sonra { clip-path: inset(0 0 0 var(--k)); }
.cl-ka__cizgi { position: absolute; top: 0; bottom: 0; left: var(--k); width: 2px; margin-left: -1px; background: #FFFFFF; pointer-events: none; }
.cl-ka__cizgi i { position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; display: grid; place-items: center; background: #FFFFFF; color: var(--ds-ink); font-size: 13px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.cl-ka__etiket { position: absolute; top: 14px; padding: 5px 10px; border-radius: 999px; background: rgba(14, 12, 20, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #FFFFFF; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; pointer-events: none; }
.cl-ka__etiket.sol { left: 12px; }
.cl-ka__etiket.sag { right: 12px; }
.cl-ka input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.cl-ka:focus-within { outline: 2px solid var(--c-ana); outline-offset: 4px; }
.cl-mini-telefon { position: relative; margin: 0; flex: 0 1 200px; min-width: 0; padding: 6px; border-radius: 30px; background: #0E0C14; box-shadow: 0 30px 60px rgba(13, 10, 25, .28); }
.cl-mini-telefon img { display: block; width: 100%; height: auto; border-radius: 24px; }
.cl-vitrin.oncesonra .cl-mini-telefon { flex-basis: 170px; transform: translateY(26px) rotate(3deg); }
.cl-telefonlar { display: flex; justify-content: center; align-items: flex-start; width: 100%; }
.cl-telefonlar .cl-mini-telefon { flex: 0 1 220px; transform: rotate(-4deg); }
.cl-telefonlar .cl-mini-telefon.ikinci { margin-left: -36px; transform: translateY(40px) rotate(5deg); }
/* Küçük kartlar */
.cl-oz { min-width: 0; display: flex; flex-direction: column; padding: 24px; border-radius: 26px; background: #FFFFFF; border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow); transition: transform .25s ease, box-shadow .25s ease; }
.cl-oz:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(70, 50, 140, .1); }
.cl-oz__ikon { width: 44px; height: 44px; border-radius: 14px; font-size: 17px; background: var(--c-zemin); color: var(--c-ana); box-shadow: none; }
.cl-oz .ds-h3 { margin-top: 16px; font-size: 19px; }
.cl-oz p { margin-top: 8px !important; font-size: 14.5px !important; line-height: 1.6 !important; }
.cl-oz.genis { flex-direction: row; align-items: center; gap: 20px; background: linear-gradient(110deg, var(--c-zemin), #FFFFFF 55%); }
.cl-oz.genis .cl-oz__ikon { flex: 0 0 auto; width: 56px; height: 56px; font-size: 20px; }
.cl-oz.genis .ds-h3 { margin-top: 0; }
.cl-oz--dikey { grid-row: span 2; background: linear-gradient(170deg, var(--c-zemin), #FFFFFF 60%); }
.cl-oz__telefon { margin: auto 0 0; padding-top: 20px; display: flex; justify-content: center; }
.cl-oz__telefon img { width: 64%; max-width: 230px; height: auto; border-radius: 30px; box-shadow: 0 24px 50px rgba(13, 10, 25, .25); }
.cl-oz--yatay { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 32px; align-items: center; padding: 28px; background: linear-gradient(120deg, var(--c-zemin), #FFFFFF 60%); }
.cl-oz--yatay p { max-width: 420px; }
.cl-oz__pencere { margin: 0; min-width: 0; padding: 8px; border-radius: 18px; background: #FFFFFF; border: 1px solid var(--ds-line); box-shadow: 0 24px 50px rgba(70, 50, 140, .14); }
.cl-oz__pencere-ust { display: flex; align-items: center; gap: 5px; padding: 2px 4px 8px; }
.cl-oz__pencere-ust > span { width: 8px; height: 8px; border-radius: 50%; background: #FF6B5E; }
.cl-oz__pencere-ust > span:nth-child(2) { background: #FFBD2E; }
.cl-oz__pencere-ust > span:nth-child(3) { background: #28C840; }
.cl-oz__pencere-ust em { margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: var(--ds-bg); font-style: normal; font-size: 11px; color: var(--ds-muted); }
.cl-oz__pencere img { display: block; width: 100%; height: auto; border-radius: 11px; }

/* ───────── Zaman çizelgesi ───────── */
.cl-zaman { position: relative; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 0 18px; margin: 0; padding: 0; list-style: none; }
.cl-zaman::before { content: ""; position: absolute; left: 0; right: 0; top: 50px; height: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--c-ana) 20%, transparent), var(--c-ana), color-mix(in srgb, var(--c-ana) 20%, transparent)); }
.cl-zaman li { position: relative; min-width: 0; display: flex; flex-direction: column; }
.cl-zaman time { align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: var(--c-zemin); font-size: 12.5px; font-weight: 800; color: var(--c-ana); white-space: nowrap; }
.cl-zaman__nokta { position: relative; z-index: 1; width: 38px; height: 38px; margin: 12px 0 18px; border-radius: 50%; display: grid; place-items: center; background: #FFFFFF; border: 2px solid var(--c-ana); font-family: var(--ds-display); font-size: 12.5px; font-weight: 800; color: var(--c-ana); }
.cl-zaman li.vurgu .cl-zaman__nokta { background: var(--cl-yesil); border-color: var(--cl-yesil); color: #FFFFFF; box-shadow: 0 0 0 6px rgba(31, 169, 113, .16); }
.cl-zaman li.vurgu time { background: #EFFAF4; color: #157A52; }
.cl-zaman b { font-family: var(--ds-display); font-size: 18px; line-height: 1.2; letter-spacing: -0.015em; color: var(--ds-ink); }
.cl-zaman p { margin-top: 6px !important; font-size: 14px !important; line-height: 1.55 !important; }

/* ───────── Proje kartı ───────── */
.cl-kartlar, .cl-diger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cl-kartlar.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cl-kart { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 28px; background: #FFFFFF; border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow); overflow: hidden; color: var(--ds-ink) !important; text-decoration: none !important; transition: transform .25s ease, box-shadow .25s ease; }
.cl-kart:hover { transform: translateY(-5px); box-shadow: 0 26px 50px rgba(70, 50, 140, .14); }
.cl-kart__gorsel { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: radial-gradient(80% 90% at 100% 0%, color-mix(in srgb, var(--c-ana) 75%, transparent), transparent 70%), var(--c-koyu); }
.cl-kart__gorsel > img { position: absolute; left: 7%; right: 7%; top: 12%; width: 86%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; border-radius: 12px 12px 0 0; box-shadow: 0 20px 40px rgba(0,0,0,.35); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.cl-kart:hover .cl-kart__gorsel > img { transform: translateY(-4%); }
.cl-kart__logo { position: absolute; left: 16px; bottom: 14px; z-index: 1; width: 56px; height: 56px; border-radius: 18px; padding: 4px; background: #FFFFFF; box-shadow: 0 12px 26px rgba(0,0,0,.25); overflow: hidden; }
.cl-kart__logo img { width: 100%; height: 100%; border-radius: 14px; object-fit: cover; }
.cl-kart__sehir { position: absolute; right: 14px; top: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.92); font-size: 12px; font-weight: 700; color: var(--ds-ink); }
.cl-kart__sehir i { color: var(--c-ana); font-size: 11px; }
.cl-kart__govde { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 20px; }
.cl-kart__ust { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ana); }
.cl-kart__ad { margin: 8px 0 0; font-family: var(--ds-display); font-size: 24px; font-weight: 800; line-height: 1.12; letter-spacing: -0.025em; color: var(--ds-ink); }
.cl-kart__ozet { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--ds-muted); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cl-kart__rozetler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.cl-kart__etiketler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.cl-kart__etiketler span { padding: 5px 10px; border-radius: 999px; background: var(--ds-bg); font-size: 12px; font-weight: 600; color: var(--ds-ink); }
.cl-kart__etiketler span.arti { background: var(--c-zemin); color: var(--c-ana); font-weight: 800; }
.cl-kart__ok { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--c-ana); }
.cl-kart__ok i { transition: transform .2s ease; }
.cl-kart:hover .cl-kart__ok i { transform: translateX(4px); }

/* Diğer projeler: Elbistan kartı */
.cl-bolge { display: flex; flex-direction: column; gap: 8px; padding: 26px; border-radius: 28px; color: #FFFFFF !important; text-decoration: none !important; transition: transform .25s ease;
  background: radial-gradient(70% 70% at 100% 0%, rgba(227, 244, 138, .3) 0%, transparent 70%), radial-gradient(60% 60% at 0% 100%, rgba(91, 61, 245, .5) 0%, transparent 70%), var(--ds-ink); }
.cl-bolge:hover { transform: translateY(-5px); }
.cl-bolge__ust { display: flex; justify-content: space-between; align-items: center; margin-bottom: auto; padding-bottom: 30px; }
.cl-bolge__ust > i { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: rgba(255,255,255,.1); color: var(--ds-lime); font-size: 18px; }
.cl-bolge small { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ds-lime); }
.cl-bolge b { font-family: var(--ds-display); font-size: 26px; line-height: 1.1; letter-spacing: -0.025em; }
.cl-bolge > span:not(.cl-bolge__ust):not(.cl-bolge__ok) { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.7); }
.cl-bolge__ok { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: #FFFFFF; }

/* ───────── Çağrı ───────── */
.cl-cta { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 40px; align-items: center; margin-top: 110px; padding: 56px; border-radius: 36px; overflow: hidden; color: #FFFFFF;
  background: radial-gradient(55% 80% at 100% 0%, color-mix(in srgb, var(--c-ana) 80%, transparent) 0%, transparent 70%), radial-gradient(45% 70% at 0% 100%, color-mix(in srgb, var(--c-isik) 22%, transparent) 0%, transparent 70%), var(--c-koyu); }
.cl-dizin .cl-cta { background: radial-gradient(55% 80% at 100% 0%, rgba(91, 61, 245, .7) 0%, transparent 70%), radial-gradient(45% 70% at 0% 100%, rgba(155, 230, 243, .2) 0%, transparent 70%), var(--ds-ink); }
.cl-cta::after { content: ""; position: absolute; right: -80px; bottom: -80px; width: 320px; height: 320px; border-radius: 50%; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 0 0 40px rgba(255,255,255,.03), 0 0 0 80px rgba(255,255,255,.02); pointer-events: none; }
.cl-cta .ds-h2 { margin-top: 18px; color: #FFFFFF; font-size: clamp(34px, 4vw, 56px); }
.cl-cta p { margin-top: 16px !important; max-width: 560px; color: rgba(255,255,255,.72) !important; }
.cl-cta__dugmeler { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 28px; }
.cl-cta__ikincil { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: #FFFFFF !important; text-decoration: none !important; }
.cl-cta__liste { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cl-cta__liste li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.cl-cta__liste i { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.1); color: var(--c-isik); font-size: 13px; }

/* ───────── Dizin (/calismalarimiz) ───────── */
.cl-dizin-hero { position: relative; padding: 150px 0 40px; overflow: hidden;
  background: radial-gradient(40% 55% at 4% 0%, rgba(185, 166, 255, .45) 0%, transparent 100%), radial-gradient(34% 50% at 100% 10%, rgba(155, 230, 243, .32) 0%, transparent 100%), radial-gradient(30% 40% at 70% 100%, rgba(227, 244, 138, .28) 0%, transparent 100%), linear-gradient(180deg, #FBFAFF 0%, #FFFFFF 100%); }
.cl-dizin-hero__izgara { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 48px; align-items: center; }
.cl-dizin-hero__metin { min-width: 0; container-type: inline-size; }
.cl-dizin-h1 { margin: 20px 0 0; font-family: var(--ds-display); font-weight: 800; font-size: min(108px, 12.4cqi); line-height: .95; letter-spacing: -0.055em; white-space: nowrap;
  background: linear-gradient(100deg, var(--ds-ink) 0%, var(--ds-ink) 45%, var(--ds-violet) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
.cl-dizin-hero__alt { margin-top: 20px !important; max-width: 560px; font-family: var(--ds-display); font-size: clamp(19px, 1.8vw, 23px) !important; font-weight: 600; line-height: 1.4 !important; letter-spacing: -0.015em; color: var(--ds-ink) !important; }
.cl-dizin-hero__not { margin-top: 14px !important; max-width: 560px; font-size: 14.5px !important; }
.cl-dizin-hero__liste { display: flex; flex-direction: column; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; max-width: 520px; }
.cl-dizin-hero__liste a { display: flex; align-items: center; gap: 14px; padding: 8px 18px 8px 8px; border-radius: 20px; background: rgba(255,255,255,.88); border: 1px solid var(--ds-line); color: var(--ds-ink) !important; text-decoration: none !important; transition: transform .2s ease, border-color .2s ease; }
.cl-dizin-hero__liste a:hover { transform: translateX(4px); border-color: color-mix(in srgb, var(--c-ana) 40%, transparent); }
.cl-dizin-hero__liste img { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 14px; object-fit: cover; box-shadow: 0 0 0 1px var(--ds-line); }
.cl-dizin-hero__liste span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cl-dizin-hero__liste b { font-size: 15.5px; line-height: 1.25; }
.cl-dizin-hero__liste small { font-size: 12.5px; color: var(--ds-muted); }
.cl-dizin-hero__liste i { color: var(--c-ana); font-size: 13px; }
/* Yelpaze: üç tarayıcı kartı */
.cl-yelpaze { position: relative; min-width: 0; aspect-ratio: 1 / 0.9; }
.cl-yelpaze__kart { position: absolute; margin: 0; width: 74%; padding: 8px; border-radius: 18px; background: #FFFFFF; border: 1px solid var(--ds-line); box-shadow: 0 30px 60px rgba(70, 50, 140, .2); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.cl-yelpaze__kart img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 11px; }
.cl-yelpaze__kart.k1 { left: 0; top: 2%; z-index: 3; transform: rotate(-5deg); }
.cl-yelpaze__kart.k2 { right: 0; top: 20%; z-index: 1; transform: rotate(4deg); }
.cl-yelpaze__kart.k3 { left: 4%; bottom: 0; z-index: 2; transform: rotate(2deg); }
.cl-yelpaze:hover .cl-yelpaze__kart.k1 { transform: rotate(-7deg) translate(-8px, -8px); }
.cl-yelpaze:hover .cl-yelpaze__kart.k2 { transform: rotate(6deg) translate(8px, -4px); }
.cl-yelpaze__ust { display: flex; align-items: center; gap: 5px; padding: 2px 4px 8px; }
.cl-yelpaze__ust > span { width: 8px; height: 8px; border-radius: 50%; background: #FF6B5E; }
.cl-yelpaze__ust > span:nth-child(2) { background: #FFBD2E; }
.cl-yelpaze__ust > span:nth-child(3) { background: #28C840; }
.cl-yelpaze__ust em { margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: var(--ds-bg); font-style: normal; font-size: 11px; color: var(--ds-muted); }
.cl-yelpaze__logo { position: absolute; right: -14px; bottom: -14px; width: 58px; height: 58px; border-radius: 18px; padding: 3px; background: #FFFFFF; box-shadow: 0 12px 26px rgba(29, 24, 48, .22); overflow: hidden; }
.cl-yelpaze__logo img { width: 100%; height: 100%; border-radius: 15px; object-fit: cover; }
.cl-yelpaze__cip { right: 6%; top: -2%; z-index: 4; }
.cl-yelpaze__cip i { background: var(--ds-violet); }
/* Proje satırları */
.cl-satirlar { padding-top: 70px; }
.cl-satir { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 60px; align-items: center; padding: 56px 0; border-top: 1px solid var(--ds-line); scroll-margin-top: 100px; }
.cl-satir:first-child { border-top: 0; padding-top: 0; }
.cl-satir.ters .cl-satir__gorsel { order: 2; }
.cl-satir__gorsel { min-width: 0; position: relative; padding: 34px; border-radius: 34px; background: radial-gradient(60% 70% at 100% 0%, color-mix(in srgb, var(--c-ana) 22%, transparent), transparent 70%), linear-gradient(150deg, var(--c-zemin), #FFFFFF 75%); border: 1px solid var(--ds-line); }
.cl-satir__metin { min-width: 0; position: relative; }
.cl-satir__no { position: absolute; right: 0; top: -14px; font-family: var(--ds-display); font-size: 88px; font-weight: 800; line-height: 1; letter-spacing: -0.05em; color: color-mix(in srgb, var(--c-ana) 12%, transparent); pointer-events: none; }
.cl-satir__marka { display: flex; align-items: center; gap: 14px; }
.cl-satir__marka img { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 18px; object-fit: cover; box-shadow: 0 10px 22px rgba(70, 50, 140, .12), 0 0 0 1px var(--ds-line); }
.cl-satir__marka span { display: flex; flex-direction: column; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ana); }
.cl-satir__marka small { margin-top: 3px; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ds-muted); }
.cl-satir__ad { margin: 20px 0 0; font-family: var(--ds-display); font-size: clamp(34px, 3.6vw, 50px); font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.cl-satir__ad a { color: var(--ds-ink) !important; text-decoration: none !important; }
.cl-satir__ad a:hover { color: var(--c-ana) !important; }
.cl-satir__slogan { margin-top: 12px !important; font-family: var(--ds-display); font-size: 19px !important; font-weight: 600; line-height: 1.35 !important; color: var(--ds-ink) !important; }
.cl-satir__metin > p:not(.cl-satir__slogan) { margin-top: 12px !important; }
.cl-satir .cl-rozetler { margin-top: 20px; }
.cl-satir__hizmetler { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; padding: 0; list-style: none; }
.cl-satir__hizmetler a { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--ds-bg); font-size: 12.5px; font-weight: 600; color: var(--ds-ink) !important; text-decoration: none !important; transition: background-color .2s ease, color .2s ease; }
.cl-satir__hizmetler a:hover { background: var(--c-ana); color: #FFFFFF !important; }
.cl-satir__dugmeler { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 26px; }
.cl-satir__dis { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: var(--ds-ink) !important; text-decoration: underline !important; text-decoration-color: var(--ds-line) !important; text-underline-offset: 4px; }
.cl-satir__dis i { font-size: 11px; color: var(--c-ana); }
/* Elbistan şeridi */
.cl-elbistan { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 22px 24px; border-radius: 28px; background: linear-gradient(110deg, #F7FBE2, #FFFFFF 70%); border: 1px solid var(--ds-line); color: var(--ds-ink) !important; text-decoration: none !important; transition: transform .2s ease, box-shadow .2s ease; }
.cl-elbistan:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(70, 50, 140, .1); }
.cl-elbistan__metin { flex: 1; min-width: 220px; display: flex; flex-direction: column; }
.cl-elbistan__metin b { font-family: var(--ds-display); font-size: 22px; letter-spacing: -0.02em; }
.cl-elbistan__metin small { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--ds-muted); }
.cl-elbistan__ok { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: 999px; background: var(--ds-ink); color: #FFFFFF; font-size: 14px; font-weight: 700; }

/* ───────── Hizmet sayfası: "Bu hizmetle yaptığımız işler" ───────── */
.hz-calismalar { background: linear-gradient(110deg, #EFFAF4, #FFFFFF 70%); border: 1px solid var(--ds-line); }
.hz-calismalar > b i { margin-right: 4px; color: var(--cl-yesil); }
.hz-calismalar a img { width: 22px; height: 22px; border-radius: 7px; object-fit: cover; margin-left: -6px; }

/* ───────── Hareket azaltma ───────── */
@media (prefers-reduced-motion: reduce) {
  .cl-ag__halka, .cl-ag__kol line, .cl-ag__halo { animation: none; }
  .cl-ag__nabiz, .cl-ag__gezgin { display: none; }
  .cl-yelpaze__kart, .cl-kart__gorsel > img { transition: none; }
}

/* ───────── Duyarlı ───────── */
@media (max-width: 1199.98px) {
  .cl-hero__izgara { gap: 40px; }
  .cl-kunye { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cl-kunye > div { border-top: 1px solid rgba(255,255,255,.08); }
  .cl-kunye > div:nth-child(-n+3) { border-top: 0; }
  .cl-kunye > div:nth-child(4) { border-left: 0; }
  .cl-pano { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-dugum { width: clamp(160px, 20%, 210px); }
  .cl-dugum small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .cl-satir { gap: 40px; }
}
@media (max-width: 991.98px) {
  .cl-hero { padding-top: 120px; }
  .cl-hero__izgara, .cl-dizin-hero__izgara, .cl-satir, .cl-cta { grid-template-columns: minmax(0, 1fr); }
  .cl-hero__sahne { max-width: 640px; }
  .cl-satir.ters .cl-satir__gorsel { order: 0; }
  .cl-dizin-hero { padding-top: 120px; }
  .cl-yelpaze { max-width: 620px; width: 100%; margin: 10px auto 0; }
  /* Ağ şeması: dikey akış */
  .cl-ag-panel { padding: 34px 26px 26px; }
  .cl-ag__sahne { aspect-ratio: auto; }
  .cl-ag__svg { display: none; }
  .cl-ag__merkez { position: relative; left: auto; top: auto; transform: none; flex-direction: row; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
  .cl-ag__logo { width: 92px; height: 92px; padding: 8px; box-shadow: 0 0 0 8px rgba(255,255,255,.06), 0 20px 40px rgba(0,0,0,.3); }
  .cl-ag__halo { width: 92px; height: 92px; left: auto; margin-left: 0; }
  .cl-ag__hedef { white-space: normal; }
  .cl-ag__liste { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .cl-dugum { position: relative; left: auto; top: auto; width: auto; transform: none; }
  .cl-dugum small { display: block; -webkit-line-clamp: unset; }
  .cl-dugum a { height: 100%; }
  .cl-os { grid-template-columns: minmax(0, 1fr); }
  .cl-os__ok { height: 64px; }
  .cl-os__ok::before { left: 50%; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--c-ana) 0 6px, transparent 6px 12px); }
  .cl-os__ok span { transform: rotate(90deg); }
  .cl-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-vitrin { grid-column: 1 / -1; grid-row: auto; }
  .cl-oz { grid-column: auto !important; }
  .cl-oz--dikey { grid-row: span 2; }
  .cl-oz--yatay { grid-column: 1 / -1 !important; }
  .cl-zaman { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 4px; }
  .cl-zaman::before { left: 22px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; background: linear-gradient(180deg, var(--c-ana), color-mix(in srgb, var(--c-ana) 20%, transparent)); }
  .cl-zaman li { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 18px; padding-bottom: 26px; }
  .cl-zaman li:last-child { padding-bottom: 0; }
  .cl-zaman__nokta { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
  .cl-zaman time, .cl-zaman b, .cl-zaman p { grid-column: 2; }
  .cl-zaman time { justify-self: start; }
  .cl-zaman b { margin-top: 10px; }
  .cl-kartlar, .cl-diger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-cta { padding: 44px 34px; gap: 28px; }
}
@media (max-width: 767.98px) {
  .cl-hero { padding-bottom: 40px; }
  .cl-h1 { font-size: clamp(40px, 11vw, 56px); }
  .cl-hero__logo { width: 54px; height: 54px; border-radius: 17px; }
  .cl-hero__dugmeler .ds-btn, .cl-hero__dugmeler .cl-magaza { width: 100%; justify-content: space-between; }
  .cl-cihaz { padding: 0 0 34px 11%; }
  .cl-telefon { width: 31%; padding: 5px; border-radius: 22px; }
  .cl-telefon img { border-radius: 17px; }
  .cl-telefon__centik { top: 9px; height: 8px; }
  .cl-cip { transform: scale(.82); }
  .cl-cip--ust { right: 0; top: -22px; transform-origin: right top; }
  .cl-cip--alt { right: -4px; bottom: -2px; transform-origin: right bottom; }
  .cl-tarayici { padding: 7px; border-radius: 16px; }
  .cl-tarayici img { border-radius: 9px; }
  .cl-kunye { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 44px; }
  .cl-kunye > div { padding: 16px; border-left: 1px solid rgba(255,255,255,.08) !important; border-top: 1px solid rgba(255,255,255,.08) !important; }
  .cl-kunye > div:nth-child(odd) { border-left: 0 !important; }
  .cl-kunye > div:nth-child(-n+2) { border-top: 0 !important; }
  .cl-kunye > div:last-child { grid-column: 1 / -1; }
  .cl-pano { grid-template-columns: minmax(0, 1fr) !important; }
  .cl-ag-panel { padding: 28px 16px 20px; border-radius: 28px; }
  .cl-ag__liste { grid-template-columns: minmax(0, 1fr); }
  .cl-ag__liste::before { content: ""; position: absolute; left: 32px; top: 10px; bottom: 10px; width: 2px; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--c-isik) 60%, transparent) 0 6px, transparent 6px 12px); }
  .cl-dugum a { position: relative; }
  .cl-os__panel { padding: 22px 18px; border-radius: 24px; }
  .cl-bento { grid-template-columns: minmax(0, 1fr); }
  .cl-vitrin, .cl-oz--yatay { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .cl-oz--dikey { grid-row: auto; }
  .cl-oz__telefon img { width: 56%; }
  .cl-vitrin__form { max-width: 320px; }
  .cl-vitrin__cip { left: -6px; transform: scale(.86); }
  .cl-vitrin.oncesonra .cl-vitrin__gorsel { gap: 10px; }
  .cl-ka { flex-basis: 58%; border-width: 5px; border-radius: 24px; }
  .cl-ka__etiket { top: 8px; padding: 4px 7px; font-size: 9px; letter-spacing: .08em; }
  .cl-ka__etiket.sol { left: 7px; }
  .cl-ka__etiket.sag { right: 7px; }
  .cl-oz.genis { flex-direction: column; align-items: flex-start; }
  .cl-oz.genis .cl-oz__ikon { width: 44px; height: 44px; font-size: 17px; }
  .cl-oz.genis .ds-h3 { margin-top: 16px; }
  .cl-vitrin.oncesonra .cl-mini-telefon { flex-basis: 38%; }
  .cl-telefonlar .cl-mini-telefon { flex-basis: 50%; }
  .cl-telefonlar .cl-mini-telefon.ikinci { margin-left: -20px; transform: translateY(28px) rotate(5deg); }
  .cl-telefonlar { padding-bottom: 28px; }
  .cl-zaman time { white-space: normal; }
  .cl-kartlar, .cl-diger { grid-template-columns: minmax(0, 1fr); }
  .cl-kart__ad { font-size: 22px; }
  .cl-cta { margin-top: 84px; padding: 36px 20px; border-radius: 28px; }
  .cl-cta__dugmeler .ds-btn { width: 100%; justify-content: space-between; }
  .cl-satir { padding: 40px 0; gap: 26px; }
  .cl-satir__gorsel { padding: 18px; border-radius: 26px; }
  .cl-satir__no { font-size: 64px; top: -6px; }
  .cl-satir__dugmeler .ds-btn { width: 100%; justify-content: space-between; }
  .cl-yelpaze__logo { width: 44px; height: 44px; border-radius: 14px; right: -8px; bottom: -8px; }
  .cl-yelpaze__cip { transform: scale(.82); transform-origin: right top; right: 0; }
  .cl-elbistan { padding: 20px; }
  .cl-elbistan__ok { width: 100%; justify-content: space-between; }
  .cl-rozet time { white-space: normal; }
}
@media (max-width: 359.98px) {
  .cl-rozet { font-size: 12px; }
  .cl-kunye { grid-template-columns: minmax(0, 1fr); }
  .cl-kunye > div { border-left: 0 !important; border-top: 1px solid rgba(255,255,255,.08) !important; }
  .cl-kunye > div:first-child { border-top: 0 !important; }
}

/* ───────── Ağ şeması, dar ekran: kare yörünge (≤ 991 px). Masaüstü sahnesi gizlenir. ───────── */
.cl-agm { display: none; }
@media (max-width: 991.98px) {
  .cl-ag__sahne { display: none; }
  .cl-agm { display: block; }
}
.cl-agm__sahne { position: relative; width: min(100%, 460px); aspect-ratio: 1 / 1; margin: 0 auto; }
.cl-agm__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cl-agm__svg .cl-ag__halka-iz { stroke-width: 10; }
.cl-agm__merkez { position: absolute; left: 50%; top: 50%; z-index: 1; width: clamp(66px, 22%, 96px); aspect-ratio: 1 / 1; transform: translate(-50%, -50%); }
.cl-agm__logo { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 7px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 7px rgba(255,255,255,.06), 0 0 0 15px rgba(255,255,255,.03), 0 18px 36px rgba(0,0,0,.35); }
.cl-agm__logo img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; }
.cl-proje[data-proje="sebnem-pilates"] .cl-agm__logo { padding: 0; overflow: hidden; }
.cl-proje[data-proje="sebnem-pilates"] .cl-agm__logo img { object-fit: cover; }
.cl-agm__halo { position: absolute; inset: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c-isik) 60%, transparent); animation: clHalo 3.2s ease-out infinite; pointer-events: none; }
.cl-agm__dugum {
  position: absolute; left: var(--x); top: var(--y); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 25%; padding: 0; margin: 0; border: 0; background: none; color: #FFFFFF; font: inherit; cursor: pointer;
  transform: translate(-50%, calc(-1 * clamp(17px, 5.5vw, 23px))); -webkit-tap-highlight-color: transparent;
}
.cl-agm__ikon {
  display: grid; place-items: center; width: clamp(34px, 11vw, 46px); aspect-ratio: 1 / 1; border-radius: 50%;
  background: #FFFFFF; color: var(--c-ana); font-size: clamp(13px, 3.8vw, 16px);
  box-shadow: 0 10px 22px rgba(0,0,0,.32); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, background-color .3s ease, color .3s ease;
}
.cl-agm__etiket {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%;
  font-size: clamp(9.5px, 2.8vw, 11.5px); font-weight: 700; line-height: 1.2; text-align: center; letter-spacing: -0.005em;
  color: rgba(255,255,255,.78); text-shadow: 0 1px 8px rgba(0,0,0,.55); transition: color .3s ease;
}
.cl-agm__dugum.aktif .cl-agm__ikon { transform: scale(1.14); background: var(--c-isik); color: var(--c-koyu, #1D1830); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c-isik) 35%, transparent), 0 0 26px color-mix(in srgb, var(--c-isik) 70%, transparent); }
.cl-agm__dugum.aktif .cl-agm__etiket { color: #FFFFFF; }
.cl-agm__dugum:focus-visible { outline: none; }
.cl-agm__dugum:focus-visible .cl-agm__ikon { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--c-isik); }
.cl-agm__hedef { display: flex; flex-direction: column; align-items: center; width: fit-content; max-width: 100%; margin: 4px auto 0; padding: 8px 16px; border-radius: 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); text-align: center; }
.cl-agm__hedef small { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c-isik); }
.cl-agm__hedef b { font-family: var(--ds-display); font-size: 15px; color: #FFFFFF; }
.cl-agm__detay { margin-top: 16px; }
.cl-agm__kart { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 15px; border-radius: 22px; background: #FFFFFF; box-shadow: 0 18px 40px rgba(0,0,0,.28); color: var(--ds-ink) !important; text-decoration: none !important; }
.cl-agm__kart[hidden] { display: none; }
.cl-agm__kart:not([hidden]) { animation: clAgmKart .38s cubic-bezier(.2,.8,.2,1); }
.cl-agm__kart-ust { display: flex; align-items: center; justify-content: space-between; }
.cl-agm__kart-ikon { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--c-zemin); color: var(--c-ana); font-size: 14px; }
.cl-agm__kart-no { font-family: var(--ds-display); font-size: 12.5px; font-weight: 800; letter-spacing: .06em; color: rgba(29, 24, 48, .3); }
.cl-agm__kart b { font-family: var(--ds-display); font-size: 17px; line-height: 1.2; letter-spacing: -0.01em; }
.cl-agm__kart small { font-size: 13.5px; line-height: 1.5; color: var(--ds-muted); }
.cl-agm__kart-hizmet { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding-top: 9px; border-top: 1px solid var(--ds-line); font-size: 12px; font-weight: 800; color: var(--c-ana); }
.cl-agm__kart-hizmet i { font-size: 10px; }
@keyframes clAgmKart { from { transform: translateY(6px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cl-agm__halo, .cl-agm__kart:not([hidden]) { animation: none; }
  .cl-agm__ikon { transition: none; }
}

/* ═════════ Mobil ve tablet vitrini (≤ 991 px) ═════════
   Uzun dikey yığınlar yerine kaydırmalı şeritler (yandaki kart kenardan görünür) ve kompakt ızgaralar; önce → sonra ve
   zaman çizelgesi masaüstündeki gibi yatay akar. Ağ şeması (.cl-agm) yukarıdaki kendi bloğunda. Masaüstü (≥ 992 px) etkilenmez.
   --kenar: şeridin taştığı kenar boşluğu (ds-kap ya da panelin iç boşluğu). */
@media (max-width: 991.98px) {
  .cl, .bo, .cl-bolum { --kenar: 24px; --serit-bosluk: 12px; }
  .cl-ag-panel { --kenar: 26px; }

  /* Ortak şerit: bölge sayfalarındaki çalışmalar, diğer projeler, önce → sonra, zaman çizelgesi */
  .bo .cl-kartlar, .cl-bolum .cl-kartlar, .cl-proje .cl-diger, .cl-os, .cl-zaman,
  .cl-hero .cl-rozetler, .cl-satir .cl-rozetler, .cl-satir__hizmetler, .cl-ag-panel__hizmetler {
    display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--serit-bosluk);
    margin-inline: calc(-1 * var(--kenar)); padding-inline: var(--kenar); scroll-padding-inline: var(--kenar);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .bo .cl-kartlar::-webkit-scrollbar, .cl-bolum .cl-kartlar::-webkit-scrollbar, .cl-proje .cl-diger::-webkit-scrollbar, .cl-os::-webkit-scrollbar, .cl-zaman::-webkit-scrollbar,
  .cl-rozetler::-webkit-scrollbar, .cl-satir__hizmetler::-webkit-scrollbar, .cl-ag-panel__hizmetler::-webkit-scrollbar { display: none; }

  /* Proje kartı şeritleri */
  .bo .cl-kartlar, .cl-bolum .cl-kartlar, .cl-proje .cl-diger { padding-block: 4px 26px; }
  .bo .cl-kartlar > *, .cl-bolum .cl-kartlar > *, .cl-proje .cl-diger > * { flex: 0 0 min(84%, 340px); scroll-snap-align: start; }
  .bo .cl-kartlar > :only-child, .cl-bolum .cl-kartlar > :only-child { flex-basis: 100%; }
  .bo .cl-kartlar > .ds-belir, .cl-bolum .cl-kartlar > .ds-belir, .cl-proje .cl-diger > .ds-belir { transform: none; }
  .bo .cl-kart__ozet, .cl-bolum .cl-kart__ozet, .cl-proje .cl-diger .cl-kart__ozet { -webkit-line-clamp: 3; }

  /* Rozet ve hizmet sıraları: tek satır, yana kayar */
  .cl-hero .cl-rozetler, .cl-satir .cl-rozetler, .cl-satir__hizmetler { padding-block: 6px; scroll-snap-type: x proximity; }
  .cl-hero .cl-rozetler { margin-top: 18px; }
  .cl-satir .cl-rozetler { margin-top: 14px; }
  .cl-satir__hizmetler { margin-top: 6px; gap: 6px; }
  .cl-hero .cl-rozet, .cl-satir .cl-rozet, .cl-satir__hizmetler li { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
  .cl-hero .cl-rozet time, .cl-satir .cl-rozet time { white-space: nowrap; }
  .cl-satir__hizmetler a, .cl-rozet.daha { position: relative; }
  .cl-satir__hizmetler a::after, .cl-rozet.daha::after { content: ""; position: absolute; inset: -6px -3px; }

  /* Ne yaptık › hizmet çipleri tek satır (sığarsa ortalı) */
  .cl-ag-panel__hizmetler { justify-content: flex-start; gap: 8px; margin-top: 22px; padding-top: 18px; padding-bottom: 2px; scroll-snap-type: x proximity; }
  .cl-ag-panel__hizmetler li { flex: 0 0 auto; scroll-snap-align: start; }
  .cl-ag-panel__hizmetler li:first-child { margin-left: auto; }
  .cl-ag-panel__hizmetler li:last-child { margin-right: auto; }
  .cl-ag-panel__hizmetler a { min-height: 44px; white-space: nowrap; }

  /* Başlangıç noktası → Bugün: iki panel yan yana kayar, aradaki ok sağa davet eder */
  .cl-os { gap: 0; align-items: stretch; padding-block: 4px 24px; }
  .cl-os__panel { flex: 0 0 min(84%, 420px); scroll-snap-align: start; }
  .cl-os__ok { flex: 0 0 52px; height: auto; display: block; }
  .cl-os__ok::before { left: 0; right: 0; top: 44px; bottom: auto; width: auto; height: 2px; background: repeating-linear-gradient(90deg, var(--c-ana) 0 6px, transparent 6px 12px); }
  .cl-os__ok span { position: absolute; left: 6px; top: 24px; width: 40px; height: 40px; font-size: 15px; transform: none; animation: clDavet 2.4s ease-in-out infinite;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-ana) 14%, transparent), 0 12px 24px color-mix(in srgb, var(--c-ana) 30%, transparent); }
  @keyframes clDavet { 0%, 60%, 100% { transform: none; } 30% { transform: translateX(5px); } }

  /* Zaman çizelgesi: yatay şerit, çizgi noktalardan geçer (masaüstündeki gibi) */
  .cl-zaman { gap: 14px; padding-block: 4px 18px; }
  .cl-zaman::before { display: none; }
  .cl-zaman li { position: relative; display: flex; flex-direction: column; flex: 0 0 min(66%, 250px); padding-bottom: 0; scroll-snap-align: start; }
  .cl-zaman time { display: inline-flex; align-items: center; height: 26px; padding-block: 0; white-space: nowrap; }
  .cl-zaman__nokta { margin: 12px 0 14px; }
  .cl-zaman b { margin-top: 0; }
  .cl-zaman li:not(:last-child)::after { content: ""; position: absolute; top: 56px; left: 38px; width: calc(100% - 38px + 14px); height: 2px;
    background: linear-gradient(90deg, var(--c-ana), color-mix(in srgb, var(--c-ana) 25%, transparent)); pointer-events: none; }

  /* Küçük bağlantılar: dokunma alanı ≥ 44 px */
  .cl-kirinti a, .cl-kunye dd a { display: inline-block; padding: 12px 0; margin: -12px 0; }
  .cl-satir__dis, .cl-cta__ikincil { min-height: 44px; }
}

@media (max-width: 767.98px) {
  .cl, .bo, .cl-bolum { --kenar: 16px; }
  .cl-ag-panel { --kenar: 16px; }

  /* Proje kahramanı */
  .cl-kunye > div { padding: 14px; }

  /* Sıralama panosu: 2 sütunlu skor tablosu */
  .cl-pano, .cl-pano.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .cl-pano.n1 { grid-template-columns: minmax(0, 1fr) !important; }
  .cl-pano > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cl-pano__kart { gap: 12px; padding: 12px; border-radius: 20px; }
  .cl-pano__arama { align-items: flex-start; gap: 7px; min-height: 0; padding: 8px 10px; border-radius: 13px; font-size: 12.5px; line-height: 1.3; }
  .cl-pano__arama i { margin-top: 2px; font-size: 11px; }
  .cl-pano__sonuc { gap: 10px; }
  .cl-pano__no { width: 42px; height: 42px; border-radius: 14px; font-size: 22px; box-shadow: 0 8px 18px rgba(31, 169, 113, .26); }
  .cl-pano__no.ok { font-size: 16px; }
  .cl-pano__sonuc b { font-size: 13.5px; line-height: 1.25; }
  .cl-pano__sonuc time { margin-top: 2px; font-size: 11px; }

  /* Önce → sonra panelleri */
  .cl-os__panel { padding: 20px 16px; }
  .cl-os__ust { padding-bottom: 14px; }
  .cl-os__ust span { font-size: 19px; }
  .cl-os li { gap: 11px; padding: 13px 0; }
  .cl-os li > i { font-size: 16px; }
  .cl-os li b { font-size: 15px; }
  .cl-os li p { font-size: 13.5px !important; }
  .cl-os__donum { gap: 11px; padding: 12px; border-radius: 18px; }
  .cl-os__donum > i { width: 36px; height: 36px; border-radius: 11px; font-size: 14px; }
  .cl-os__donum b { font-size: 14.5px; }

  /* Öne çıkanlar: 2 sütunlu bento (vitrin, AR telefonu ve pencere tam genişlikte) */
  .cl-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cl-vitrin, .cl-oz--dikey, .cl-oz--yatay { grid-column: 1 / -1 !important; }
  .cl-vitrin { gap: 20px; padding: 20px 18px; border-radius: 26px; }
  .cl-oz { padding: 16px 14px; border-radius: 22px; }
  .cl-oz__ikon { width: 38px; height: 38px; border-radius: 12px; font-size: 15px; }
  .cl-oz .ds-h3 { margin-top: 12px; font-size: 15.5px; line-height: 1.25; }
  .cl-oz p { margin-top: 6px !important; font-size: 13px !important; line-height: 1.5 !important; }
  .cl-oz.genis .cl-oz__ikon { width: 38px; height: 38px; font-size: 15px; }
  .cl-oz.genis .ds-h3 { margin-top: 12px; }
  .cl-bento > .cl-oz:nth-last-child(1 of .cl-oz:not(.cl-oz--dikey, .cl-oz--yatay)):nth-child(odd of .cl-oz:not(.cl-oz--dikey, .cl-oz--yatay)) {
    grid-column: 1 / -1 !important; flex-direction: row; align-items: flex-start; gap: 14px; }
  .cl-bento > .cl-oz:nth-last-child(1 of .cl-oz:not(.cl-oz--dikey, .cl-oz--yatay)):nth-child(odd of .cl-oz:not(.cl-oz--dikey, .cl-oz--yatay)) .cl-oz__ikon { flex: 0 0 auto; }
  .cl-bento > .cl-oz:nth-last-child(1 of .cl-oz:not(.cl-oz--dikey, .cl-oz--yatay)):nth-child(odd of .cl-oz:not(.cl-oz--dikey, .cl-oz--yatay)) .ds-h3 { margin-top: 0; }
  /* AR telefonu: metin solda, telefon sağda */
  .cl-oz--dikey { display: grid; grid-template-columns: minmax(0, 1fr) 36%; grid-template-rows: auto auto 1fr; column-gap: 14px; align-items: start; padding: 18px 16px; }
  .cl-oz--dikey > .cl-oz__ikon { grid-column: 1; grid-row: 1; }
  .cl-oz--dikey > .ds-h3 { grid-column: 1; grid-row: 2; }
  .cl-oz--dikey > p { grid-column: 1; grid-row: 3; }
  .cl-oz--dikey > .cl-oz__telefon { grid-column: 2; grid-row: 1 / 4; align-self: center; margin: 0; padding: 0; }
  .cl-oz--dikey .cl-oz__telefon img { width: 100%; border-radius: 20px; transform: rotate(3deg); }
  .cl-oz--yatay { gap: 16px; padding: 18px 16px; }

  /* Zaman çizelgesi */
  .cl-zaman li { flex-basis: min(70%, 250px); }

  /* Dizin kahramanı: proje seçici üçlü karo */
  .cl-dizin-hero__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: none; margin-top: 22px; }
  .cl-dizin-hero__liste li { min-width: 0; }
  .cl-dizin-hero__liste a { position: relative; height: 100%; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 10px 12px 12px; border-radius: 18px; }
  .cl-dizin-hero__liste a:hover { transform: translateY(-2px); }
  .cl-dizin-hero__liste img { width: 40px; height: 40px; border-radius: 12px; }
  .cl-dizin-hero__liste span { flex: 0 1 auto; width: 100%; }
  .cl-dizin-hero__liste b { font-size: 13.5px; overflow-wrap: break-word; }
  .cl-dizin-hero__liste small { margin-top: 2px; font-size: 11px; line-height: 1.3; }
  .cl-dizin-hero__liste a > i { position: absolute; top: 12px; right: 10px; }

  /* Proje satırları */
  .cl-satir { gap: 22px; }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  .cl-os__ok span { animation: none; }
}