/* ds-hizmet: hizmet merkezi ve 12 hizmet sayfası (ds.css'ten sonra yüklenir).
   hz-* sayfa bölümleri · hm-* hero maketleri · hi-* imza bölümü maketleri · hb-* hizmet merkezi.
   Her sayfa data-ton ile kendi renk tonunu alır (mor · seftali · su · limon). */

/* ───────── Tonlar ───────── */
.hz, .hb { --h: #5B3DF5; --h2: #8B6CFF; --h-acik: #B9A6FF; --h-zemin: #F3EFFF; --h-yazi: #5B3DF5; }
.hz[data-ton="seftali"] { --h: #E8572F; --h2: #FF8A65; --h-acik: #FFBFA6; --h-zemin: #FFF1EA; --h-yazi: #B93D17; }
.hz[data-ton="su"] { --h: #0E8FA8; --h2: #2BB5CF; --h-acik: #9BE6F3; --h-zemin: #E9F9FC; --h-yazi: #0A6E82; }
.hz[data-ton="limon"] { --h: #6E8A00; --h2: #9DBB1A; --h-acik: #E3F48A; --h-zemin: #F7FBE2; --h-yazi: #4D6400; }
.hz .ds-ust::before { background: var(--h); box-shadow: 0 0 0 4px color-mix(in srgb, var(--h) 16%, transparent); }

/* ───────── Hero ───────── */
.hz-hero { position: relative; padding: 140px 0 70px;
  background:
    radial-gradient(42% 52% at 6% 4%, color-mix(in srgb, var(--h-acik) 55%, transparent) 0%, transparent 100%),
    radial-gradient(38% 50% at 96% 10%, rgba(255, 191, 166, 0.38) 0%, transparent 100%),
    radial-gradient(40% 44% at 70% 96%, rgba(155, 230, 243, 0.30) 0%, transparent 100%),
    linear-gradient(180deg, #FBFAFF 0%, #FFFFFF 100%); }
.hz-hero__izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 56px; align-items: center; }
.hz-kirinti { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 13px; font-weight: 600; color: var(--ds-muted); }
.hz-kirinti a { color: var(--ds-muted) !important; text-decoration: none !important; }
.hz-kirinti a:hover { color: var(--h-yazi) !important; }
.hz-kirinti i { font-size: 10px; opacity: .55; }
.hz-kirinti span { color: var(--ds-ink); }
.hz-h1 { margin: 18px 0 0; font-family: var(--ds-display); font-weight: 800; color: var(--ds-ink); font-size: clamp(38px, 4.6vw, 64px); line-height: 1.0; letter-spacing: -0.045em; text-wrap: balance; }
.hz-ozet { margin-top: 20px !important; max-width: 600px; font-size: 18px !important; line-height: 1.6 !important; color: var(--ds-muted); }
.hz-etiketler { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.hz-etiketler li { padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,.85); border: 1px solid var(--ds-line); font-size: 13px; font-weight: 600; color: var(--ds-ink); }
.hz-etiketler li:first-child { background: var(--h-zemin); border-color: color-mix(in srgb, var(--h) 22%, transparent); color: var(--h-yazi); }
.hz-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font-size: 13.5px; font-weight: 600; color: var(--ds-muted); }
.hz-meta i { color: var(--h-yazi); margin-right: 4px; }

/* ───────── Maket sahnesi (ortak) ───────── */
.hm-sahne { position: relative; width: 100%; max-width: 620px; margin: 0 auto; padding: 34px 26px; perspective: 1400px; font-family: var(--ds-body); }
.hm-sahne::before { content: ""; position: absolute; inset: 6% 4%; border-radius: 40px; background: radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--h-acik) 60%, transparent), transparent 70%); filter: blur(10px); z-index: 0; }
.hm-sahne > * { position: relative; z-index: 1; }
.hm-3d { position: absolute !important; z-index: 3 !important; pointer-events: none; filter: drop-shadow(0 18px 28px rgba(70, 50, 140, 0.22)); height: auto; }
.hm-3d.ust { width: 132px; right: -18px; top: -26px; }
.hm-3d.alt { width: 112px; left: -26px; bottom: -14px; }
.hm-cip { position: absolute !important; z-index: 4 !important; }
.hm-cip.c1 { left: -30px; top: 44%; }
.hm-cip.c2 { right: -24px; bottom: 6px; }
[data-egim] { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.hm-kart { border-radius: 24px; background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 30px 60px rgba(29, 24, 48, 0.14), 0 0 0 1px var(--ds-line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.hm-pencere-ust { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--ds-line); }
.hm-pencere-ust > span { width: 9px; height: 9px; border-radius: 50%; background: #FF6B5E; flex: 0 0 auto; }
.hm-pencere-ust > span:nth-child(2) { background: #FFBD2E; }
.hm-pencere-ust > span:nth-child(3) { background: #28C840; }
.hm-pencere-ust em { margin-left: 10px; flex: 1; min-width: 0; height: 30px; border-radius: 999px; background: var(--ds-bg); color: var(--ds-ink); font-style: normal; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; padding: 0 14px; white-space: nowrap; overflow: hidden; }
.hm-pencere-ust em i { color: var(--ds-muted); font-size: 11px; }
.hm-satir { display: block; height: 7px; border-radius: 6px; background: rgba(29, 24, 48, 0.08); margin-top: 7px; width: 100%; }
.hm-satir.kisa { width: 62%; }
.hm-cubuk { display: block; height: 8px; border-radius: 6px; background: rgba(29, 24, 48, 0.09); }
.hm-cubuk.koyu { background: rgba(29, 24, 48, 0.2); height: 10px; }
.hm-cubuk.w30 { width: 30%; } .hm-cubuk.w40 { width: 40%; } .hm-cubuk.w50 { width: 50%; } .hm-cubuk.w60 { width: 60%; } .hm-cubuk.w70 { width: 70%; } .hm-cubuk.w80 { width: 80%; }
.hm-yildizlar { display: inline-flex; align-items: center; gap: 2px; color: #F5A524; font-size: 11px; }
.hm-yildizlar small { margin-left: 6px; color: var(--ds-muted); font-size: 11px; font-weight: 600; }
.hm-avatar { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; background: conic-gradient(from 200deg, var(--ds-violet), #B58CFF, var(--ds-peach), var(--ds-violet)); border: 2px solid #FFFFFF; box-shadow: 0 0 0 2px var(--ds-violet); }
.hm-ilerleme { height: 8px; border-radius: 999px; background: rgba(29,24,48,.08); overflow: hidden; }
.hm-ilerleme i { display: block; height: 100%; width: 68%; border-radius: inherit; background: linear-gradient(90deg, var(--h), var(--h2)); transform-origin: left; animation: hmDol 3.2s cubic-bezier(.2,.8,.2,1) infinite alternate; }
@keyframes hmDol { from { transform: scaleX(.35); } to { transform: scaleX(1); } }
.hm-oynat { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.9); color: var(--ds-violet); font-size: 18px; box-shadow: 0 12px 26px rgba(29,24,48,.2); }
.hm-pin { position: absolute; display: grid; place-items: center; color: var(--ds-violet); font-size: 26px; filter: drop-shadow(0 8px 10px rgba(91,61,245,.35)); }
.hm-pin.ana { font-size: 40px; left: 46%; top: 22%; animation: hmZipla 2.4s ease-in-out infinite; }
.hm-pin.ana::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 26px; height: 10px; margin-left: -13px; border-radius: 50%; background: rgba(91,61,245,.25); animation: hmDalga 2.4s ease-out infinite; z-index: -1; }
.hm-pin.p2 { left: 18%; top: 50%; color: #E8572F; font-size: 24px; }
.hm-pin.p3 { left: 74%; top: 56%; color: #0E8FA8; font-size: 22px; }
@keyframes hmZipla { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes hmDalga { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
.hm-kaynaklar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.hm-kaynaklar span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border-radius: 999px; background: var(--ds-bg); font-size: 11.5px; font-weight: 600; color: var(--ds-ink); }
.hm-kaynaklar b { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--h); color: #FFFFFF; font-size: 10px; }
.hm-telefon { position: relative; width: 250px; margin: 0 auto; padding: 10px; border-radius: 40px; background: var(--ds-ink); box-shadow: 0 40px 70px rgba(29,24,48,.28), inset 0 0 0 2px rgba(255,255,255,.08); }
.hm-telefon::before { content: ""; position: absolute; top: 18px; left: 50%; width: 70px; height: 18px; margin-left: -35px; border-radius: 999px; background: var(--ds-ink); z-index: 2; }
.hm-telefon__ekran { position: relative; border-radius: 31px; background: #FFFFFF; overflow: hidden; min-height: 440px; padding: 42px 14px 16px; }
.hm-telefon.kucuk { width: 150px; padding: 7px; border-radius: 28px; }
.hm-telefon.kucuk::before { top: 12px; width: 44px; height: 12px; margin-left: -22px; }
.hm-telefon.kucuk .hm-telefon__ekran { border-radius: 22px; min-height: 270px; padding: 30px 10px 12px; }
.hm-isaret { position: relative; display: inline-block; width: 34px; height: 34px; flex: 0 0 auto; }
.hm-isaret i { position: absolute; width: 22px; height: 22px; border-radius: 50%; top: 6px; mix-blend-mode: multiply; }
.hm-isaret i:first-child { left: 0; background: var(--ds-violet); }
.hm-isaret i:last-child { right: 0; background: var(--ds-peach); }
.hm-isaret.tek i { mix-blend-mode: normal; background: #FFFFFF !important; opacity: .9; }
.hm-isaret.tek i:last-child { opacity: .55; }

/* 1 · SEO: arama sonucu tırmanışı */
.hm-tarayici { overflow: hidden; }
.hm-imlec-cubuk { display: inline-block; width: 1.5px; height: 14px; background: var(--ds-ink); animation: hmImlec 1s steps(2) infinite; }
@keyframes hmImlec { 50% { opacity: 0; } }
.hm-serp { --sh: 90px; position: relative; list-style: none; margin: 0; padding: 14px 16px 0; height: calc(var(--sh) * 4 + 14px); }
.hm-serp li { position: absolute; left: 16px; right: 16px; top: 14px; height: calc(var(--sh) - 10px); padding: 12px 14px; border-radius: 16px; background: #FFFFFF; border: 1px solid var(--ds-line); display: flex; flex-direction: column; gap: 6px; transform: translateY(calc(var(--a) * var(--sh))); animation: hmTirman 7s cubic-bezier(.65,0,.35,1) infinite; }
.hm-serp li small { font-size: 11px; color: var(--ds-muted); font-weight: 600; }
.hm-serp li b { font-size: 14px; color: #1A0DAB; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-serp li .hm-satir { margin-top: 2px; }
.hm-serp li.biz { z-index: 2; background: linear-gradient(110deg, var(--h-zemin), #FFFFFF 70%); border-color: color-mix(in srgb, var(--h) 35%, transparent); box-shadow: 0 16px 34px color-mix(in srgb, var(--h) 22%, transparent); }
.hm-rozet { position: absolute; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: #1FA971; color: #FFFFFF; font-style: normal; font-size: 10.5px; font-weight: 700; }
@keyframes hmTirman { 0%, 22% { transform: translateY(calc(var(--a) * var(--sh))); } 48%, 88% { transform: translateY(calc(var(--b) * var(--sh))); } 100% { transform: translateY(calc(var(--a) * var(--sh))); } }
.hm-etiketler { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 16px 16px; }
.hm-etiketler span { padding: 5px 10px; border-radius: 999px; background: var(--ds-bg); font-size: 11.5px; font-weight: 700; color: var(--ds-ink); }
.hm-etiketler span:first-child { background: var(--h); color: #FFFFFF; }

/* 2 · Yerel SEO: harita + işletme profili */
.hm-harita { position: relative; height: 430px; overflow: hidden; background: #EEF3F8; }
.hm-harita__zemin { position: absolute; inset: 0; background:
  linear-gradient(90deg, transparent 0 calc(50% - 1px), rgba(255,255,255,.9) calc(50% - 1px) calc(50% + 1px), transparent 0) 0 0 / 70px 70px,
  linear-gradient(0deg, transparent 0 calc(50% - 1px), rgba(255,255,255,.9) calc(50% - 1px) calc(50% + 1px), transparent 0) 0 0 / 70px 70px,
  linear-gradient(160deg, #EAF0F7, #F4F1FB); }
.hm-harita__zemin .yol { position: absolute; background: #FFFFFF; box-shadow: 0 0 0 3px rgba(255,255,255,.5); border-radius: 8px; }
.hm-harita__zemin .y1 { left: -10%; right: -10%; top: 38%; height: 14px; transform: rotate(-8deg); }
.hm-harita__zemin .y2 { top: -10%; bottom: -10%; left: 62%; width: 12px; transform: rotate(12deg); }
.hm-harita__zemin .y3 { left: -10%; right: 30%; top: 72%; height: 10px; transform: rotate(6deg); background: #FFE9A8; }
.hm-harita__zemin .park { position: absolute; left: 8%; top: 8%; width: 30%; height: 24%; border-radius: 18px; background: #D7F0D2; }
.hm-harita__zemin .su { position: absolute; right: -6%; top: -8%; width: 32%; height: 36%; border-radius: 50%; background: #CDEBF7; }
.hm-isletme { position: absolute !important; left: 16px; right: 16px; bottom: 16px; padding: 14px 16px 14px; border-radius: 20px; background: #FFFFFF; box-shadow: 0 20px 40px rgba(29,24,48,.16); display: grid; grid-template-columns: 74px minmax(0, 1fr); column-gap: 14px; row-gap: 3px; }
.hm-isletme__kapak { grid-row: span 4; width: 74px; height: 74px; border-radius: 14px; background: url(/assets/dessoci/gorsel/hizmet-yerel-seo.webp) center/cover; }
.hm-isletme b { font-size: 15px; color: var(--ds-ink); }
.hm-isletme > small { font-size: 12px; color: var(--ds-muted); }
.hm-acik { font-size: 11.5px; font-weight: 700; color: #1FA971; }
.hm-isletme__dugmeler { grid-column: 1 / -1; display: flex; gap: 6px; margin-top: 10px; }
.hm-isletme__dugmeler span { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 12px; background: var(--h-zemin); color: var(--h-yazi); font-size: 11px; font-weight: 700; white-space: nowrap; }

/* 3 · GEO: yapay zekâ sohbeti */
.hm-sohbet { padding: 16px; }
.hm-sohbet__ust { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--ds-line); }
.hm-sohbet__ust span { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #FFFFFF; background: linear-gradient(135deg, #0E8FA8, var(--ds-violet)); font-size: 13px; }
.hm-sohbet__ust b { font-size: 14px; color: var(--ds-ink); }
.hm-sohbet__ust em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; color: var(--h-yazi); background: var(--h-zemin); padding: 4px 9px; border-radius: 999px; }
.hm-balon { margin-top: 14px; padding: 12px 14px; border-radius: 18px; font-size: 13.5px; line-height: 1.5; }
.hm-balon.soru { margin-left: 18%; background: var(--ds-ink); color: #FFFFFF; border-bottom-right-radius: 6px; }
.hm-balon.cevap { margin-right: 6%; background: var(--ds-bg); color: var(--ds-ink); border-bottom-left-radius: 6px; }
.hm-balon.cevap p { margin: 0 !important; color: var(--ds-ink) !important; font-size: 13.5px !important; line-height: 1.55 !important; }
.hm-balon mark { padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, var(--h-acik) 70%, #FFFFFF); color: var(--ds-ink); font-weight: 700; animation: hmParla 2.6s ease-in-out infinite; }
.hm-balon sup { font-size: 9px; font-weight: 800; color: var(--h-yazi); margin-left: 1px; }
@keyframes hmParla { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--h) 0%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--h) 18%, transparent); } }
.hm-yaziyor { display: inline-flex; gap: 4px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: var(--ds-bg); }
.hm-yaziyor i { width: 6px; height: 6px; border-radius: 50%; background: var(--ds-muted-2); animation: hmNokta 1.2s ease-in-out infinite; }
.hm-yaziyor i:nth-child(2) { animation-delay: .15s; } .hm-yaziyor i:nth-child(3) { animation-delay: .3s; }
@keyframes hmNokta { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* 4 · Google Ads: kampanya paneli */
.hm-panel { padding: 18px; }
.hm-panel__ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hm-panel__ust b { display: block; font-size: 14.5px; color: var(--ds-ink); }
.hm-panel__ust small { display: block; font-size: 12px; color: var(--ds-muted); margin-top: 2px; }
.hm-durum { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #E7F7EF; color: #12784F; font-style: normal; font-size: 11.5px; font-weight: 700; }
.hm-durum::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1FA971; animation: hmDalgaNokta 1.6s ease-in-out infinite; }
@keyframes hmDalgaNokta { 50% { box-shadow: 0 0 0 5px rgba(31,169,113,.15); } }
.hm-metrikler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.hm-metrikler div { position: relative; padding: 10px; border-radius: 14px; background: var(--ds-bg); }
.hm-metrikler small { display: block; font-size: 10.5px; font-weight: 700; color: var(--ds-muted); line-height: 1.25; min-height: 26px; }
.hm-metrikler svg { display: block; width: 100%; height: 26px; margin-top: 4px; overflow: visible; }
.hm-metrikler polyline { fill: none; stroke: var(--h); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 120; stroke-dashoffset: 120; animation: hmCiz 2.4s ease forwards infinite alternate; }
.hm-metrikler svg.ters polyline { stroke: #1FA971; }
@keyframes hmCiz { to { stroke-dashoffset: 0; } }
.hm-metrikler b { position: absolute; right: 10px; top: 8px; font-size: 13px; }
.hm-metrikler b.yukari { color: #1FA971; } .hm-metrikler b.asagi { color: #1FA971; }
.hm-cubuklar { display: flex; align-items: flex-end; gap: 6px; height: 120px; margin-top: 14px; padding: 12px; border-radius: 16px; background: linear-gradient(180deg, #FFFFFF, var(--h-zemin)); border: 1px solid var(--ds-line); }
.hm-cubuklar i { flex: 1; height: var(--h); border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--h2), var(--h)); transform-origin: bottom; animation: hmBuyu 2.8s cubic-bezier(.2,.8,.2,1) var(--g) infinite alternate; }
.hm-cubuklar i:nth-child(3n) { background: linear-gradient(180deg, #B9EFF8, #2BB5CF); }
@keyframes hmBuyu { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
.hm-reklam { margin-top: 12px; padding: 12px 14px; border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--h) 40%, transparent); }
.hm-reklam small { display: block; font-size: 11.5px; color: var(--ds-muted); }
.hm-reklam small b { color: var(--ds-ink); }
.hm-reklam strong { display: block; margin-top: 4px; font-size: 14px; color: #1A0DAB; line-height: 1.3; }

/* 5 · Meta: gönderi + kitle */
.hm-meta-reklam-yonetimi { padding-bottom: 90px; }
.hm-hikayeler { display: flex; gap: 8px; padding-bottom: 10px; }
.hm-hikayeler i { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; background: var(--ds-bg); box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #E8572F; }
.hm-hikayeler i:nth-child(2) { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--ds-violet); }
.hm-hikayeler i:nth-child(4) { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px rgba(29,24,48,.15); }
.hm-gonderi__ust { display: flex; align-items: center; gap: 8px; padding: 6px 0 8px; }
.hm-gonderi__ust b { display: block; font-size: 12.5px; color: var(--ds-ink); line-height: 1.1; }
.hm-gonderi__ust small { display: block; font-size: 10.5px; color: var(--ds-muted); }
.hm-gonderi__ust > i { margin-left: auto; color: var(--ds-muted); }
.hm-gonderi__gorsel { position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: url(/assets/dessoci/gorsel/hizmet-meta-ads.webp) 62% center / cover; display: grid; place-items: center; }
.hm-gonderi__gorsel span { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(29,24,48,.55); color: #FFFFFF; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hm-gonderi__cta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding: 9px 12px; border-radius: 10px; background: var(--h-zemin); color: var(--h-yazi); font-size: 12px; font-weight: 700; }
.hm-gonderi__ikonlar { display: flex; gap: 14px; padding: 10px 2px 2px; font-size: 16px; color: var(--ds-ink); }
.hm-gonderi__ikonlar .fa-heart { color: #E8572F; animation: hmKalp 2.2s ease-in-out infinite; }
.hm-gonderi__ikonlar .sag { margin-left: auto; }
@keyframes hmKalp { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.3); } }
.hm-kitle { position: absolute !important; left: 0; right: 0; bottom: 6px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hm-kitle span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 999px; background: rgba(255,255,255,.92); border: 1px solid var(--ds-line); box-shadow: 0 10px 22px rgba(29,24,48,.08); font-size: 12.5px; font-weight: 700; color: var(--ds-ink); animation: dsYuz 5s ease-in-out infinite; }
.hm-kitle span:nth-child(2n) { animation-delay: -2s; }
.hm-kitle i { color: var(--h-yazi); }

/* 6 · Web: cihaz üçlüsü */
.hm-cihazlar { position: relative; height: 420px; }
.hm-cihaz { position: absolute; background: #FFFFFF; border: 1px solid var(--ds-line); box-shadow: 0 28px 56px rgba(29,24,48,.16); overflow: hidden; }
.hm-cihaz.masaustu { left: 0; top: 0; width: 86%; border-radius: 20px; }
.hm-cihaz.tablet { right: 4%; bottom: 0; width: 34%; aspect-ratio: 3 / 4; border-radius: 18px; border: 7px solid var(--ds-ink); }
.hm-cihaz.telefon { left: 8%; bottom: -6px; width: 22%; aspect-ratio: 9 / 18; border-radius: 22px; border: 6px solid var(--ds-ink); }
.hm-tel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px; }
.hm-tel i { display: block; border-radius: 8px; background: var(--ds-bg); }
.hm-tel .nav { grid-column: 1 / -1; height: 12px; background: linear-gradient(90deg, var(--ds-ink) 0 18%, transparent 18% 60%, rgba(29,24,48,.12) 60% 100%); border-radius: 4px; }
.hm-tel .hero { grid-column: 1 / -1; height: 120px; background: linear-gradient(120deg, color-mix(in srgb, var(--h-acik) 80%, #FFFFFF), #FFE3D6 60%, #DDF6FB); animation: hmKaydir 6s ease-in-out infinite alternate; background-size: 200% 200%; }
.hm-tel .k { height: 70px; }
@keyframes hmKaydir { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.tablet .hm-tel { grid-template-columns: 1fr 1fr; padding: 9px; gap: 6px; }
.tablet .hm-tel .hero { height: 70px; } .tablet .hm-tel .k { height: 54px; }
.telefon .hm-tel { grid-template-columns: minmax(0, 1fr); padding: 7px; gap: 5px; }
.telefon .hm-tel .hero { height: 54px; } .telefon .hm-tel .k { height: 40px; }
.telefon .hm-tel .nav { height: 8px; }

/* 7 · E-ticaret: ürün kartı + ödeme adımları */
.hm-e-ticaret-sitesi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: 16px; align-items: center; }
.hm-urun { padding: 14px; }
.hm-urun__gorsel { position: relative; aspect-ratio: 1; border-radius: 18px; display: grid; place-items: center; background: radial-gradient(70% 70% at 50% 40%, #FFFFFF, var(--h-zemin)); }
.hm-urun__gorsel img { width: 72%; height: auto; animation: hmDon 9s linear infinite; filter: drop-shadow(0 16px 24px rgba(91,61,245,.25)); }
@keyframes hmDon { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.hm-urun__gorsel span { position: absolute; left: 10px; top: 10px; padding: 4px 9px; border-radius: 999px; background: var(--ds-ink); color: #FFFFFF; font-size: 10.5px; font-weight: 700; }
.hm-urun__gorsel > i { position: absolute; right: 12px; top: 12px; color: var(--ds-ink); }
.hm-urun small { display: block; margin-top: 12px; font-size: 11px; font-weight: 700; color: var(--ds-muted); text-transform: uppercase; letter-spacing: .1em; }
.hm-urun b { display: block; margin-top: 2px; font-size: 16px; color: var(--ds-ink); }
.hm-urun__renk { display: flex; gap: 6px; margin-top: 8px; }
.hm-urun__renk i { width: 14px; height: 14px; border-radius: 50%; background: var(--ds-violet); box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px var(--ds-line); }
.hm-urun__renk i:nth-child(2) { background: var(--ds-peach); } .hm-urun__renk i:nth-child(3) { background: var(--ds-aqua); } .hm-urun__renk i:nth-child(4) { background: var(--ds-ink); }
.hm-urun__alt { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.hm-urun__alt .hm-cubuk { width: 30%; }
.hm-urun__alt button { border: 0; display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 12px; background: var(--ds-ink); color: #FFFFFF; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: default; animation: hmTik 4s ease-in-out infinite; }
@keyframes hmTik { 0%, 40%, 50%, 100% { transform: scale(1); } 45% { transform: scale(.94); background: var(--h); } }
.hm-odeme { padding: 16px; }
.hm-odeme > b { font-size: 14px; color: var(--ds-ink); }
.hm-odeme ol { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hm-odeme li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: var(--ds-bg); font-size: 12.5px; font-weight: 700; color: var(--ds-muted); }
.hm-odeme li i { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: #FFFFFF; font-size: 11px; color: var(--ds-muted); }
.hm-odeme li.tamam { color: var(--ds-ink); }
.hm-odeme li.tamam i { background: #1FA971; color: #FFFFFF; }
.hm-odeme li.aktif { background: var(--h-zemin); color: var(--h-yazi); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 30%, transparent); }
.hm-odeme li.aktif i { background: var(--h); color: #FFFFFF; }

/* 8 · Mobil: Dessoci uygulaması ekranı */
.hm-telefon.buyuk { width: 270px; }
.hm-app { display: flex; flex-direction: column; gap: 10px; background: linear-gradient(180deg, #F6F3FF, #FFFFFF 40%); }
.hm-app__ust { display: flex; align-items: center; justify-content: space-between; }
.hm-app__ust small { display: block; font-size: 11px; color: var(--ds-muted); }
.hm-app__ust b { display: block; font-family: var(--ds-display); font-size: 19px; color: var(--ds-ink); letter-spacing: -0.02em; }
.hm-app__proje { padding: 12px; border-radius: 16px; background: var(--ds-ink); color: #FFFFFF; }
.hm-app__proje small { display: block; font-size: 10.5px; color: rgba(255,255,255,.6); }
.hm-app__proje b { display: block; margin: 2px 0 10px; font-size: 13.5px; }
.hm-app__proje .hm-ilerleme { background: rgba(255,255,255,.14); }
.hm-app__proje .hm-ilerleme i { background: linear-gradient(90deg, var(--ds-lime), #B9EFA0); }
.hm-app__adimlar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hm-app__adimlar li { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 10px; background: #FFFFFF; border: 1px solid var(--ds-line); font-size: 11px; font-weight: 700; color: var(--ds-muted); }
.hm-app__adimlar i { width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; font-size: 9px; background: var(--ds-bg); }
.hm-app__adimlar .tamam { color: var(--ds-ink); } .hm-app__adimlar .tamam i { background: #1FA971; color: #FFFFFF; }
.hm-app__adimlar .aktif { color: var(--ds-violet); border-color: rgba(91,61,245,.3); } .hm-app__adimlar .aktif i { background: var(--ds-violet); color: #FFFFFF; }
.hm-app__onay { padding: 12px; border-radius: 16px; background: #FFFFFF; border: 1px solid var(--ds-line); box-shadow: 0 10px 22px rgba(70,50,140,.08); animation: hmBelir 4s ease-in-out infinite; }
@keyframes hmBelir { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(70,50,140,.14); } }
.hm-app__onay small { display: block; font-size: 10.5px; font-weight: 700; color: #E8572F; }
.hm-app__onay b { display: block; margin-top: 2px; font-size: 13px; color: var(--ds-ink); }
.hm-app__onay div { display: flex; gap: 6px; margin-top: 10px; }
.hm-app__onay span { flex: 1; text-align: center; padding: 7px 6px; border-radius: 10px; background: var(--ds-bg); font-size: 11px; font-weight: 700; color: var(--ds-ink); }
.hm-app__onay span.evet { background: var(--ds-violet); color: #FFFFFF; }
.hm-app__alt { display: flex; justify-content: space-around; margin-top: auto; padding: 10px 6px 2px; border-top: 1px solid var(--ds-line); color: var(--ds-muted-2); font-size: 14px; }
.hm-app__alt i:first-child { color: var(--ds-violet); }

/* 9 · Sosyal medya: içerik takvimi + akış */
.hm-sosyal-medya-yonetimi { padding-bottom: 60px; }
.hm-takvim { padding: 16px; width: 88%; }
.hm-takvim__ust { display: flex; justify-content: space-between; align-items: center; }
.hm-takvim__ust b { font-size: 14.5px; color: var(--ds-ink); }
.hm-takvim__ust em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--h-yazi); background: var(--h-zemin); padding: 4px 10px; border-radius: 999px; }
.hm-takvim__gunler, .hm-takvim__izgara { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.hm-takvim__gunler { margin: 12px 0 6px; }
.hm-takvim__gunler span { text-align: center; font-size: 10px; font-weight: 700; color: var(--ds-muted); }
.hm-takvim__izgara span { aspect-ratio: 1; border-radius: 10px; background: var(--ds-bg); display: flex; align-items: flex-end; padding: 4px; font-size: 8.5px; font-weight: 800; color: var(--ds-ink); overflow: hidden; }
.hm-takvim__izgara .t-r { background: linear-gradient(150deg, #C9BBFF, #8B6CFF); color: #FFFFFF; }
.hm-takvim__izgara .t-g { background: linear-gradient(150deg, #FFE0D3, #FFBFA6); }
.hm-takvim__izgara .t-h { background: linear-gradient(150deg, #D9F6FB, #9BE6F3); }
.hm-takvim__izgara span:nth-child(5) { animation: hmVurgu 3s ease-in-out infinite; }
@keyframes hmVurgu { 50% { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--ds-violet); } }
.hm-akis { position: absolute !important; right: 0; bottom: 0; width: 46%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 6px; border-radius: 18px; background: #FFFFFF; box-shadow: 0 24px 44px rgba(29,24,48,.18); transform: rotate(4deg); }
.hm-akis i { position: relative; aspect-ratio: 1; border-radius: 8px; background: linear-gradient(140deg, #E9E2FF, #FFD7C7); }
.hm-akis i:nth-child(2) { background: linear-gradient(140deg, #9BE6F3, #B9A6FF); } .hm-akis i:nth-child(4) { background: linear-gradient(140deg, #FFBFA6, #FFE6A8); } .hm-akis i:nth-child(6) { background: linear-gradient(140deg, #E3F48A, #9BE6F3); }
.hm-akis i.oynat::after { content: "\f04b"; font-family: 'Font Awesome 6 Pro'; font-weight: 900; position: absolute; right: 5px; top: 4px; font-size: 9px; color: #FFFFFF; }

/* 10 · Yapay zekâ video: kurgu ekranı */
.hm-kurgu { padding: 14px; background: #191529; border-color: rgba(255,255,255,.06); }
.hm-onizleme { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; background: url(/assets/dessoci/gorsel/hizmet-video.webp) center/cover; display: grid; place-items: center; overflow: hidden; }
.hm-onizleme::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(25,21,41,.5)); }
.hm-onizleme__etiket { position: absolute; left: 10px; top: 10px; z-index: 1; display: inline-flex; gap: 6px; align-items: center; padding: 5px 10px; border-radius: 999px; background: rgba(25,21,41,.7); color: #FFFFFF; font-size: 11px; font-weight: 700; }
.hm-onizleme .hm-oynat { position: relative; z-index: 1; }
.hm-kareler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.hm-kareler span { display: flex; flex-direction: column; gap: 5px; font-size: 10px; font-weight: 700; color: rgba(255,255,255,.6); }
.hm-kareler span i { aspect-ratio: 16 / 10; border-radius: 8px; background: linear-gradient(135deg, #3A2E6E, #8B6CFF); }
.hm-kareler span:nth-child(2) i { background: linear-gradient(135deg, #FFBFA6, #B9A6FF); }
.hm-kareler span:nth-child(3) i { background: linear-gradient(135deg, #2BB5CF, #3A2E6E); }
.hm-kareler span:nth-child(4) i { background: linear-gradient(135deg, #E3F48A, #2BB5CF); }
.hm-kareler span.secili { color: #FFFFFF; } .hm-kareler span.secili i { box-shadow: 0 0 0 2px var(--ds-peach); }
.hm-zaman { position: relative; margin-top: 12px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.05); display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.hm-zaman__iz { position: relative; height: 18px; padding-left: 26px; }
.hm-zaman__iz small { position: absolute; left: 0; top: 0; width: 18px; height: 18px; display: grid; place-items: center; color: rgba(255,255,255,.55); font-size: 10px; }
.hm-zaman__iz > i { position: absolute; top: 2px; bottom: 2px; left: calc(26px + var(--x) * 0.9); width: calc(var(--w) * 0.9); border-radius: 5px; background: linear-gradient(90deg, #8B6CFF, #B58CFF); }
.hm-zaman__iz.ses > i { background: repeating-linear-gradient(90deg, #2BB5CF 0 3px, rgba(43,181,207,.5) 3px 6px); }
.hm-zaman__iz.yazi > i { background: #FFBFA6; }
.hm-zaman__ibre { position: absolute; top: 4px; bottom: 4px; left: 36px; width: 2px; background: #FFFFFF; box-shadow: 0 0 10px rgba(255,255,255,.7); animation: hmIbre 6s linear infinite; }
.hm-zaman__ibre::before { content: ""; position: absolute; top: -4px; left: -4px; width: 10px; height: 10px; border-radius: 3px; background: #FFFFFF; }
@keyframes hmIbre { from { left: 36px; } to { left: calc(100% - 12px); } }

/* 11 · Reels ve fotoğraf: dikey kareler + çekim listesi */
.hm-reels-ve-fotograf-cekimi { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 16px; align-items: center; }
.hm-dikeyler { position: relative; height: 420px; }
.hm-dikey { position: absolute; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; border: 5px solid #FFFFFF; box-shadow: 0 26px 50px rgba(29,24,48,.2); display: grid; place-items: center; color: rgba(255,255,255,.85); font-size: 22px; }
.hm-dikey.d1 { width: 46%; left: 0; top: 30px; transform: rotate(-7deg); background: url(/assets/dessoci/gorsel/hizmet-cekim.webp) 20% center / cover; }
.hm-dikey.d3 { width: 46%; right: 0; top: 30px; transform: rotate(7deg); background: url(/assets/dessoci/gorsel/hizmet-sosyal.webp) 70% center / cover; }
.hm-dikey.d2 { width: 56%; left: 22%; top: 0; z-index: 2; background: url(/assets/dessoci/gorsel/hizmet-video.webp) 45% center / cover; }
.hm-dikey.d1 i, .hm-dikey.d3 i { text-shadow: 0 4px 12px rgba(29,24,48,.4); }
.hm-kayit { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; background: rgba(29,24,48,.6); color: #FFFFFF; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.hm-kayit::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #FF4D4D; animation: hmImlec 1.2s steps(2) infinite; }
.hm-dikey__alt { position: absolute; left: 10px; right: 30%; bottom: 14px; }
.hm-dikey__alt .hm-satir { background: rgba(255,255,255,.75); }
.hm-cekimlistesi { padding: 16px; }
.hm-cekimlistesi b { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ds-ink); }
.hm-cekimlistesi b i { color: var(--h-yazi); }
.hm-cekimlistesi ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hm-cekimlistesi li { position: relative; padding: 8px 10px 8px 30px; border-radius: 10px; background: var(--ds-bg); font-size: 12px; font-weight: 600; color: var(--ds-muted); line-height: 1.3; }
.hm-cekimlistesi li::before { content: ""; position: absolute; left: 10px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 4px; border: 2px solid rgba(29,24,48,.2); }
.hm-cekimlistesi li.tamam { color: var(--ds-ink); }
.hm-cekimlistesi li.tamam::before { background: #1FA971; border-color: #1FA971; }
.hm-cekimlistesi li.aktif { background: var(--h-zemin); color: var(--h-yazi); }
.hm-cekimlistesi li.aktif::before { border-color: var(--h); animation: hmVurgu 2s ease-in-out infinite; }

/* 12 · Logo ve kimlik: marka panosu */
.hm-pano { padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hm-pano > div { border-radius: 16px; background: var(--ds-bg); padding: 14px; }
.hm-pano__logo { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 120px; background: linear-gradient(135deg, #FFFFFF, var(--h-zemin)) !important; }
.hm-pano__logo .hm-isaret { width: 56px; height: 56px; }
.hm-pano__logo .hm-isaret i { width: 38px; height: 38px; top: 9px; }
.hm-pano__logo .hm-isaret i:first-child { animation: hmSol 4s ease-in-out infinite; }
.hm-pano__logo .hm-isaret i:last-child { animation: hmSag 4s ease-in-out infinite; }
@keyframes hmSol { 50% { transform: translateX(6px); } } @keyframes hmSag { 50% { transform: translateX(-6px); } }
.hm-pano__logo b { font-family: var(--ds-display); font-size: 34px; letter-spacing: -0.04em; color: var(--ds-ink); }
.hm-pano__renkler { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 8px !important; }
.hm-pano__renkler span { display: flex; align-items: flex-end; height: 64px; padding: 6px; border-radius: 10px; background: var(--r); }
.hm-pano__renkler small { font-size: 9.5px; font-weight: 700; color: #FFFFFF; mix-blend-mode: normal; }
.hm-pano__renkler span:nth-child(n+3) small { color: var(--ds-ink); }
.hm-pano__yazi { display: flex; align-items: center; gap: 10px; }
.hm-pano__yazi > b { font-family: var(--ds-display); font-size: 44px; line-height: 1; color: var(--ds-ink); letter-spacing: -0.04em; }
.hm-pano__yazi strong { display: block; font-size: 12px; color: var(--ds-ink); }
.hm-pano__yazi small { display: block; font-size: 10.5px; color: var(--ds-muted); line-height: 1.3; }
.hm-pano__izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px !important; }
.hm-pano__izgara > span { display: grid; place-items: center; height: 46px; border-radius: 10px; background: #FFFFFF; }
.hm-pano__izgara > span.koyu { background: var(--ds-ink); }
.hm-pano__izgara > span.mor { background: var(--ds-violet); }
.hm-pano__izgara > span.acik { background: var(--ds-lime); }
.hm-pano__izgara .hm-isaret { width: 28px; height: 28px; }
.hm-pano__izgara .hm-isaret i { width: 18px; height: 18px; top: 5px; }

/* ───────── Öne çıkanlar ───────── */
.hz-one { position: relative; margin-top: -26px; z-index: 2; }
.hz-one__izgara { display: grid; grid-template-columns: 220px repeat(3, minmax(0, 1fr)); gap: 14px; }
.hz-one__ikon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; border-radius: var(--ds-radius); background: var(--ds-ink); color: #FFFFFF; text-align: center;
  background: radial-gradient(80% 80% at 50% 0%, color-mix(in srgb, var(--h) 55%, transparent), transparent 70%), var(--ds-ink); }
.hz-one__ikon img { width: 104px; height: auto; filter: drop-shadow(0 14px 22px rgba(0,0,0,.3)); }
.hz-one__ikon span { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.hz-one__kart { position: relative; padding: 26px 24px; border-radius: var(--ds-radius); background: #FFFFFF; border: 1px solid var(--ds-line); box-shadow: 0 18px 40px rgba(70, 50, 140, 0.08); overflow: hidden; }
.hz-one__kart::after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--h-acik) 55%, transparent), transparent 70%); }
.hz-one__no { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--h-zemin); color: var(--h-yazi); font-family: var(--ds-display); font-weight: 800; font-size: 15px; }
.hz-one__kart .ds-h3 { margin-top: 16px; font-size: 20px; }
.hz-one__kart p { margin-top: 8px !important; font-size: 14.5px !important; }

/* ───────── İmza bölümü ───────── */
.hz-imza { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.hz-imza.ters .hz-imza__metin { order: 2; }
.hz-imza__metin .ds-h2 { margin-top: 18px; }
.hz-imza__metin p { margin-top: 18px !important; }
.hz-tikli { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hz-tikli li { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 16px; background: #FFFFFF; border: 1px solid var(--ds-line); font-size: 14px; font-weight: 600; color: var(--ds-ink); line-height: 1.4; }
.hz-tikli i { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--h); color: #FFFFFF; font-size: 10px; margin-top: 1px; }
.hz-imza__sahne { position: relative; padding: 26px; border-radius: 32px; background: linear-gradient(145deg, var(--h-zemin), #FFFFFF 70%); border: 1px solid var(--ds-line); min-height: 380px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hz-imza__sahne::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(29,24,48,.07) 1px, transparent 1px); background-size: 18px 18px; mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent); -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent); }
.hz-imza__sahne > * { position: relative; width: 100%; }
.hi-baslik { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.hi-baslik b { font-size: 15px; color: var(--ds-ink); }
.hi-baslik em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--h-yazi); background: #FFFFFF; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--ds-line); }
.hi-baslik em::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--h); vertical-align: middle; animation: hmImlec 1s steps(2) infinite; }

/* SEO: denetim listesi + konu kümesi */
.hi-denetim { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: center; }
.hi-denetim .hi-baslik { grid-column: 1 / -1; margin: 0; }
.hi-kontrol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hi-kontrol li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 14px; background: #FFFFFF; border: 1px solid var(--ds-line); font-size: 13px; font-weight: 600; color: var(--ds-ink); }
.hi-kontrol li i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; color: #FFFFFF; background: #1FA971; animation: hiTik 6s ease var(--g) infinite both; }
@keyframes hiTik { 0%, 8% { transform: scale(0); background: rgba(29,24,48,.12); } 14%, 92% { transform: scale(1); background: #1FA971; } 100% { transform: scale(0); } }
.hi-kume { position: relative; aspect-ratio: 1; }
.hi-kume span { position: absolute; display: grid; place-items: center; padding: 8px 12px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--ds-line); font-size: 11.5px; font-weight: 700; color: var(--ds-ink); box-shadow: 0 8px 18px rgba(70,50,140,.08); transform: translate(-50%, -50%); white-space: nowrap; }
.hi-kume .merkez { left: 50%; top: 50%; padding: 18px 16px; border-radius: 50%; width: 96px; height: 96px; text-align: center; background: var(--h); color: #FFFFFF; border: 0; font-size: 12px; line-height: 1.2; box-shadow: 0 0 0 10px color-mix(in srgb, var(--h) 14%, transparent), 0 0 0 22px color-mix(in srgb, var(--h) 7%, transparent); white-space: normal; }
.hi-kume .u1 { left: 50%; top: 10%; } .hi-kume .u2 { left: 80%; top: 34%; } .hi-kume .u3 { left: 72%; top: 86%; } .hi-kume .u4 { left: 28%; top: 86%; } .hi-kume .u5 { left: 20%; top: 34%; }
.hi-kume .u { animation: dsYuz 5s ease-in-out infinite; }
.hi-kume .u:nth-child(odd) { animation-delay: -2.5s; }

/* Yerel: harita paketi + yorum yanıtı */
.hi-yerel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.hi-yerel__harita { position: relative; grid-row: span 2; min-height: 300px; border-radius: 20px; overflow: hidden; background:
  linear-gradient(90deg, transparent 0 calc(50% - 1px), #FFFFFF calc(50% - 1px) calc(50% + 1px), transparent 0) 0 0 / 56px 56px,
  linear-gradient(0deg, transparent 0 calc(50% - 1px), #FFFFFF calc(50% - 1px) calc(50% + 1px), transparent 0) 0 0 / 56px 56px, #EAF0F7; }
.hi-paket { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hi-paket li { display: flex; flex-direction: column; gap: 5px; padding: 11px 12px; border-radius: 14px; background: #FFFFFF; border: 1px solid var(--ds-line); }
.hi-paket li.biz { border-color: color-mix(in srgb, var(--h) 45%, transparent); box-shadow: 0 12px 26px color-mix(in srgb, var(--h) 18%, transparent); }
.hi-paket b { font-size: 13.5px; color: var(--ds-ink); }
.hi-paket small { font-size: 11px; color: #1FA971; font-weight: 700; }
.hi-yorum { display: flex; flex-direction: column; gap: 8px; }
.hi-yorum > div { padding: 11px 12px; border-radius: 14px; background: #FFFFFF; border: 1px solid var(--ds-line); }
.hi-yorum p { margin: 4px 0 0 !important; font-size: 12.5px !important; line-height: 1.45 !important; color: var(--ds-ink) !important; }
.hi-yorum .yanit { margin-left: 16px; background: var(--h-zemin); border-color: transparent; }
.hi-yorum .yanit small { font-size: 10.5px; font-weight: 800; color: var(--h-yazi); }

/* GEO: karşılaştırma + varlık grafiği */
.hi-geo { display: grid; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); gap: 10px; align-items: center; }
.hi-geo__kol { padding: 14px; border-radius: 18px; background: #FFFFFF; border: 1px solid var(--ds-line); display: flex; flex-direction: column; gap: 9px; }
.hi-geo__kol > small { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ds-muted); }
.hi-geo__kol.cevap { box-shadow: 0 16px 34px color-mix(in srgb, var(--h) 18%, transparent); border-color: color-mix(in srgb, var(--h) 35%, transparent); }
.hi-geo__kol.cevap > small { color: var(--h-yazi); }
.hi-link { display: flex; flex-direction: column; gap: 4px; }
.hi-link .hm-cubuk.koyu { background: rgba(26,13,171,.35); height: 8px; }
.hi-geo__ok { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--h); color: #FFFFFF; font-size: 12px; }
.hi-varlik { grid-column: 1 / -1; position: relative; height: 150px; margin-top: 6px; }
.hi-varlik span { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--ds-line); font-size: 11.5px; font-weight: 700; color: var(--ds-ink); transform: translate(-50%, -50%); white-space: nowrap; box-shadow: 0 8px 18px rgba(70,50,140,.07); }
.hi-varlik span i { color: var(--h-yazi); }
.hi-varlik .merkez { left: 50%; top: 50%; background: var(--ds-ink); color: #FFFFFF; padding: 12px 18px; font-size: 13px; box-shadow: 0 0 0 8px color-mix(in srgb, var(--h) 16%, transparent); }
.hi-varlik .u1 { left: 16%; top: 22%; } .hi-varlik .u2 { left: 84%; top: 22%; } .hi-varlik .u3 { left: 18%; top: 80%; } .hi-varlik .u4 { left: 82%; top: 80%; }
.hi-varlik::before { content: ""; position: absolute; inset: 22% 16% 20%; border: 1.5px dashed color-mix(in srgb, var(--h) 45%, transparent); border-radius: 30px; }

/* Google Ads: kampanya ağacı + dönüşüm akışı */
.hi-agac { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hi-agac .kok { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--ds-ink); color: #FFFFFF; font-size: 13px; font-weight: 700; }
.hi-agac .dallar { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; padding-top: 14px; }
.hi-agac .dallar::before { content: ""; position: absolute; top: 0; left: 16%; right: 16%; height: 14px; border: 1.5px solid color-mix(in srgb, var(--h) 45%, transparent); border-bottom: 0; border-radius: 12px 12px 0 0; }
.hi-agac .dal { display: flex; flex-direction: column; gap: 6px; }
.hi-agac .dal span { padding: 9px 10px; border-radius: 12px; font-size: 11.5px; font-weight: 700; text-align: center; line-height: 1.3; }
.hi-agac .kampanya { background: var(--h); color: #FFFFFF; display: flex; align-items: center; justify-content: center; gap: 6px; }
.hi-agac .grup { background: #FFFFFF; border: 1px solid var(--ds-line); color: var(--ds-ink); }
.hi-agac .kelime { background: var(--h-zemin); color: var(--h-yazi); }
.hi-akis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; margin-top: 6px; }
.hi-akis span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 14px; background: #FFFFFF; border: 1px solid var(--ds-line); font-size: 11px; font-weight: 700; color: var(--ds-ink); text-align: center; animation: hiYan 4s ease var(--g) infinite; }
.hi-akis span i { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--ds-bg); color: var(--h-yazi); }
@keyframes hiYan { 0%, 30%, 100% { box-shadow: none; } 12% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--h) 35%, transparent); } }

/* Meta: huni */
.hi-huni { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hi-huni__kat { display: grid; grid-template-columns: auto 44px minmax(0, 1fr); align-items: center; gap: 12px; width: calc(100% - var(--n) * 14%); padding: 14px 16px; border-radius: 18px; color: #FFFFFF; box-shadow: 0 14px 30px rgba(29,24,48,.12); }
.hi-huni__kat.g1 { background: linear-gradient(110deg, #5B3DF5, #8B6CFF); }
.hi-huni__kat.g2 { background: linear-gradient(110deg, #7C5CFF, #E07AA5); }
.hi-huni__kat.g3 { background: linear-gradient(110deg, #E8572F, #FF9D7A); }
.hi-huni__etiket { display: flex; flex-direction: column; font-size: 13px; font-weight: 800; line-height: 1.15; }
.hi-huni__etiket small { font-size: 10px; opacity: .7; }
.hi-huni__mini { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.18); }
.hi-huni__kat b { font-size: 13px; text-align: right; }
.hi-olaylar { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.hi-olaylar span { padding: 6px 10px; border-radius: 8px; background: var(--ds-ink); color: #B9EFF8; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }

/* Web: Core Web Vitals + site haritası */
.hi-web { display: flex; flex-direction: column; gap: 16px; }
.hi-vitals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hi-vitals > div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px; border-radius: 18px; background: #FFFFFF; border: 1px solid var(--ds-line); text-align: center; }
.hi-olcer { position: relative; width: 74px; height: 40px; overflow: hidden; margin-bottom: 4px; }
.hi-olcer::before { content: ""; position: absolute; left: 0; top: 0; width: 74px; height: 74px; border-radius: 50%; background: conic-gradient(from -90deg, #1FA971 0 60deg, #F5A524 60deg 120deg, #E8572F 120deg 180deg, transparent 180deg); -webkit-mask: radial-gradient(circle, transparent 25px, #000 26px); mask: radial-gradient(circle, transparent 25px, #000 26px); }
.hi-olcer i { position: absolute; left: 50%; bottom: 0; width: 3px; height: 32px; margin-left: -1.5px; border-radius: 3px; background: var(--ds-ink); transform-origin: bottom center; animation: hiIgne 3.5s ease-in-out infinite alternate; }
@keyframes hiIgne { from { transform: rotate(-80deg); } to { transform: rotate(-58deg); } }
.hi-vitals b { font-family: var(--ds-display); font-size: 18px; color: var(--ds-ink); }
.hi-vitals small { font-size: 11.5px; color: var(--ds-muted); }
.hi-vitals em { font-style: normal; font-size: 11px; font-weight: 700; color: #12784F; background: #E7F7EF; padding: 3px 8px; border-radius: 999px; }
.hi-haritasi { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hi-haritasi .kok { display: inline-flex; gap: 8px; align-items: center; padding: 10px 16px; border-radius: 12px; background: var(--ds-ink); color: #FFFFFF; font-size: 13px; font-weight: 700; }
.hi-haritasi > div { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; padding-top: 12px; }
.hi-haritasi > div::before { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 12px; border: 1.5px solid color-mix(in srgb, var(--h) 50%, transparent); border-bottom: 0; border-radius: 10px 10px 0 0; }
.hi-haritasi > div span { padding: 10px 6px; border-radius: 12px; background: #FFFFFF; border: 1px solid var(--ds-line); font-size: 11.5px; font-weight: 700; color: var(--ds-ink); text-align: center; }
.hi-not { text-align: center; font-size: 11.5px; color: var(--ds-muted); }

/* E-ticaret: yolculuk + entegrasyonlar */
.hi-yolculuk { display: flex; flex-direction: column; gap: 18px; }
.hi-yol { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.hi-yol::before { content: ""; position: absolute; left: 10%; right: 10%; top: 28px; height: 2px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--h) 50%, transparent) 0 6px, transparent 6px 12px); }
.hi-yol span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; color: var(--ds-ink); text-align: center; }
.hi-yol span i { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: #FFFFFF; border: 1px solid var(--ds-line); color: var(--h-yazi); font-size: 18px; box-shadow: 0 10px 22px rgba(70,50,140,.08); animation: hiAdim 3s ease var(--g) infinite; }
@keyframes hiAdim { 0%, 40%, 100% { transform: translateY(0); } 15% { transform: translateY(-6px); background: var(--h); color: #FFFFFF; } }
.hi-yol__top { display: none; }
.hi-entegre { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hi-entegre span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--ds-line); font-size: 12px; font-weight: 700; color: var(--ds-ink); }
.hi-entegre i { color: var(--h-yazi); font-size: 11px; }

/* Mobil: ekran yelpazesi */
.hi-ekranlar { position: relative; height: 360px; }
.hi-ekranlar .hm-telefon { position: absolute; top: 10px; }
.hi-ekranlar .e1 { left: 50%; margin-left: -230px; transform: rotate(-9deg); }
.hi-ekranlar .e2 { left: 50%; margin-left: -75px; z-index: 2; top: 0; }
.hi-ekranlar .e3 { left: 50%; margin-left: 80px; transform: rotate(9deg); }
.hi-ekran { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.hi-ekran__daire { width: 80px; height: 80px; border-radius: 50%; margin: 18px 0 8px; background: radial-gradient(circle at 35% 35%, #FFFFFF, var(--h-acik) 60%, var(--h)); }
.hi-ekran__dugme { width: 80%; height: 24px; margin-top: auto; border-radius: 10px; background: var(--h); }
.hi-ekran.liste { align-items: stretch; }
.hi-ekran.liste span { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 10px; background: var(--ds-bg); }
.hi-ekran.liste span i { width: 24px; height: 24px; border-radius: 8px; background: var(--h-acik); flex: 0 0 auto; }
.hi-ekran.grafik { align-items: stretch; }
.hi-ekran__grafik { display: flex; align-items: flex-end; gap: 6px; height: 110px; padding: 10px; border-radius: 12px; background: var(--ds-bg); }
.hi-ekran__grafik i { flex: 1; height: var(--h); border-radius: 5px; background: linear-gradient(180deg, var(--h2), var(--h)); transform-origin: bottom; animation: hmBuyu 2.6s ease infinite alternate; }
.hi-platform { position: absolute !important; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hi-platform span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--ds-line); box-shadow: 0 10px 22px rgba(29,24,48,.08); font-size: 12px; font-weight: 700; color: var(--ds-ink); }

/* Sosyal: onay akışı (kanban) */
.hi-kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hi-kanban__sutun { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 16px; background: rgba(255,255,255,.7); border: 1px solid var(--ds-line); min-height: 240px; }
.hi-kanban__sutun > small { font-size: 11px; font-weight: 800; color: var(--ds-muted); text-transform: uppercase; letter-spacing: .06em; }
.hi-kanban__sutun:nth-child(2) { background: var(--h-zemin); }
.hi-kanban__kart { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; background: #FFFFFF; box-shadow: 0 8px 18px rgba(70,50,140,.08); font-size: 11.5px; color: var(--ds-ink); }
.hi-kanban__kart > i { aspect-ratio: 4 / 3; border-radius: 8px; background: linear-gradient(140deg, #E9E2FF, #8B6CFF); }
.hi-kanban__kart.t-g > i { background: linear-gradient(140deg, #FFE0D3, #FFBFA6); }
.hi-kanban__kart.t-h > i { background: linear-gradient(140deg, #D9F6FB, #9BE6F3); }
.hi-kanban__kart em { font-style: normal; text-align: center; padding: 5px; border-radius: 8px; background: var(--ds-violet); color: #FFFFFF; font-size: 10.5px; font-weight: 700; }
.hi-kanban__kart.hareket { animation: hiOnay 4s ease-in-out infinite; }
@keyframes hiOnay { 0%, 55%, 100% { transform: none; } 65% { transform: scale(.96); } 75% { transform: translateY(-4px); box-shadow: 0 0 0 3px #1FA971; } }

/* Yapay zekâ video: üretim hattı */
.hi-hat { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.hi-hat > div { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 16px; background: #FFFFFF; border: 1px solid var(--ds-line); text-align: center; animation: hiYan 5s ease var(--g) infinite; }
.hi-hat > div span { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--h-zemin); color: var(--h-yazi); }
.hi-hat b { font-size: 11.5px; color: var(--ds-ink); line-height: 1.25; }
.hi-hat small { font-size: 10px; color: var(--ds-muted); }
.hi-hat__kareler { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 10px; padding: 10px; border-radius: 16px; background: #191529; }
.hi-hat__kareler i { aspect-ratio: 16 / 10; border-radius: 6px; background: url(/assets/dessoci/gorsel/hizmet-video.webp) calc(var(--n) * 18%) center / 600% auto; opacity: .9; }

/* Reels: güvenli alan kadrajı + ekipman */
.hi-kadraj { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: center; }
.hi-kadraj__ekran { position: relative; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: url(/assets/dessoci/gorsel/hizmet-cekim.webp) 30% center / cover; border: 5px solid var(--ds-ink); }
.hi-kadraj__ekran .guvenli { position: absolute; left: 8px; right: 8px; padding: 6px 8px; border: 1.5px dashed rgba(255,255,255,.9); border-radius: 10px; background: rgba(29,24,48,.35); color: #FFFFFF; font-size: 10px; font-weight: 700; text-align: center; }
.hi-kadraj__ekran .ust { top: 10px; } .hi-kadraj__ekran .alt { bottom: 12px; height: 26%; display: grid; place-items: center; }
.hi-kadraj__orta { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.85); color: var(--ds-ink); font-size: 22px; }
.hi-kadraj__ekran .izgara { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 33%, rgba(255,255,255,.35) 33% calc(33% + 1px), transparent 0 66%, rgba(255,255,255,.35) 66% calc(66% + 1px), transparent 0), linear-gradient(0deg, transparent 33%, rgba(255,255,255,.35) 33% calc(33% + 1px), transparent 0 66%, rgba(255,255,255,.35) 66% calc(66% + 1px), transparent 0); }
.hi-ekipman { display: flex; flex-direction: column; gap: 8px; }
.hi-ekipman span { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px; background: #FFFFFF; border: 1px solid var(--ds-line); font-size: 13px; font-weight: 700; color: var(--ds-ink); }
.hi-ekipman i { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--h-zemin); color: var(--h-yazi); }

/* Kimlik: uygulamalar */
.hi-uygulamalar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 92px; gap: 10px; }
.hi-uygulamalar > div { display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 18px; background: #FFFFFF; border: 1px solid var(--ds-line); box-shadow: 0 10px 22px rgba(70,50,140,.06); transition: transform .3s ease; }
.hi-uygulamalar > div:hover { transform: translateY(-4px) rotate(-1deg); }
.hi-uygulamalar b { font-family: var(--ds-display); font-size: 18px; color: var(--ds-ink); letter-spacing: -0.03em; }
.hi-uygulamalar .kartvizit { grid-column: span 4; flex-direction: row; justify-content: flex-start; padding: 0 20px; background: linear-gradient(135deg, #FFFFFF, var(--h-zemin)); }
.hi-uygulamalar .kartvizit .hm-cubuk { margin-left: auto; }
.hi-uygulamalar .profil { grid-column: span 2; grid-row: span 2; flex-direction: column; background: var(--ds-ink); }
.hi-uygulamalar .profil .hm-isaret { width: 64px; height: 64px; padding: 10px; border-radius: 50%; background: #FFFFFF; box-sizing: content-box; }
.hi-uygulamalar .profil .hm-isaret i { width: 40px; height: 40px; top: 22px; }
.hi-uygulamalar .profil .hm-isaret i:first-child { left: 10px; } .hi-uygulamalar .profil .hm-isaret i:last-child { right: 10px; }
.hi-uygulamalar .profil small { color: rgba(255,255,255,.75); font-size: 12px; font-weight: 600; }
.hi-uygulamalar .tabela { grid-column: span 2; background: var(--ds-violet); }
.hi-uygulamalar .tabela b { color: #FFFFFF; font-size: 15px; }
.hi-uygulamalar .tabela .hm-isaret i:first-child { background: #FFFFFF; } .hi-uygulamalar .tabela .hm-isaret i { mix-blend-mode: normal; opacity: .9; }
.hi-uygulamalar .ambalaj { grid-column: span 2; background: linear-gradient(160deg, var(--ds-lime), #FFFFFF); }
.hi-uygulamalar .favicon { grid-column: span 6; height: auto; justify-content: flex-start; padding: 0 14px; background: var(--ds-bg); }
.hi-uygulamalar .sekme { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border-radius: 12px 12px 0 0; background: #FFFFFF; font-size: 12.5px; font-weight: 600; color: var(--ds-ink); align-self: flex-end; }
.hi-uygulamalar .sekme .hm-isaret { width: 22px; height: 22px; }
.hi-uygulamalar .sekme .hm-isaret i { width: 14px; height: 14px; top: 4px; }

/* ───────── Uzun içerik + içindekiler ───────── */
.hz-uzun { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 56px; align-items: start; }
.hz-toc { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 14px; }
.hz-toc__kutu { padding: 18px; border-radius: 24px; background: #FFFFFF; border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow); }
.hz-toc__ust { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.hz-toc__ust b { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ds-ink); }
.hz-toc__ilerleme { height: 4px; border-radius: 4px; background: var(--ds-bg); overflow: hidden; }
.hz-toc__ilerleme i { display: block; height: 100%; background: linear-gradient(90deg, var(--h), var(--h2)); transform: scaleX(0); transform-origin: left; transition: transform .15s linear; }
.hz-toc ol, .hz-toc-mobil ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 360px); overflow-y: auto; }
.hz-toc a, .hz-toc-mobil a { display: flex; gap: 10px; padding: 8px 10px; border-radius: 12px; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--ds-muted) !important; text-decoration: none !important; transition: background-color .2s ease, color .2s ease; }
.hz-toc a span, .hz-toc-mobil a span { flex: 0 0 auto; font-family: var(--ds-display); font-size: 12px; font-weight: 800; color: rgba(29,24,48,.3); padding-top: 1px; }
.hz-toc a:hover { color: var(--ds-ink) !important; background: var(--ds-bg); }
.hz-toc a.aktif { color: var(--h-yazi) !important; background: var(--h-zemin); }
.hz-toc a.aktif span { color: var(--h-yazi); }
.hz-toc__kart { padding: 18px; border-radius: 22px; color: #FFFFFF; background: radial-gradient(80% 100% at 100% 0%, color-mix(in srgb, var(--h) 60%, transparent), transparent 70%), var(--ds-ink); }
.hz-toc__kart b { display: block; font-family: var(--ds-display); font-size: 18px; color: #FFFFFF; }
.hz-toc__kart small { display: block; margin-top: 4px; font-size: 13px; color: rgba(255,255,255,.66); line-height: 1.45; }
.hz-toc__kart .ds-btn { margin-top: 14px; height: 46px; font-size: 14px; }
.hz-toc__kart .ds-btn i { width: 30px; height: 30px; }
.hz-toc-mobil { display: none; margin-bottom: 26px; border-radius: 18px; background: #FFFFFF; border: 1px solid var(--ds-line); }
.hz-toc-mobil summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; font-size: 14.5px; font-weight: 700; color: var(--ds-ink); }
.hz-toc-mobil summary::-webkit-details-marker { display: none; }
.hz-toc-mobil summary span i { color: var(--h-yazi); margin-right: 6px; }
.hz-toc-mobil[open] summary > i { transform: rotate(180deg); }
.hz-toc-mobil ol { padding: 0 8px 10px; max-height: none; }

/* Yazı tipografisi (Markdown gövdesi) */
.hz-prose { min-width: 0; color: var(--ds-ink); }
.hz-prose p, .hz-prose li { font-size: 17px; line-height: 1.75; color: #3E3856; }
.hz-prose p { margin: 0 0 16px !important; }
.hz-prose p:last-child { margin-bottom: 0 !important; }
.hz-prose a { color: var(--h-yazi) !important; font-weight: 600; text-decoration: underline !important; text-decoration-color: color-mix(in srgb, var(--h) 35%, transparent) !important; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.hz-prose a:hover { text-decoration-color: var(--h) !important; }
.hz-prose strong { color: var(--ds-ink); font-weight: 700; }
.hz-prose ul, .hz-prose ol { margin: 0 0 18px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.hz-prose ul li { position: relative; padding-left: 28px; }
.hz-prose ul li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 10px; height: 10px; border-radius: 4px; background: var(--h); transform: rotate(45deg); opacity: .85; }
.hz-prose ol { counter-reset: hz; }
.hz-prose ol li { position: relative; padding-left: 38px; counter-increment: hz; }
.hz-prose ol li::before { content: counter(hz); position: absolute; left: 0; top: 2px; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; background: var(--h-zemin); color: var(--h-yazi); font-size: 12.5px; font-weight: 800; }
.hz-prose blockquote { margin: 22px 0; padding: 20px 24px; border-radius: 20px; background: var(--h-zemin); border-left: 4px solid var(--h); }
.hz-prose blockquote p { color: var(--ds-ink); font-size: 17.5px; }
.hz-prose h4 { margin: 20px 0 8px; font-family: var(--ds-display); font-size: 18px; color: var(--ds-ink); }
.hz-prose table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; display: block; overflow-x: auto; }
.hz-prose th, .hz-prose td { padding: 10px 12px; border-bottom: 1px solid var(--ds-line); text-align: left; }
.hz-prose th { background: var(--ds-bg); font-weight: 700; }
.hz-giris { padding: 26px 28px; margin-bottom: 40px; border-radius: 26px; background: linear-gradient(145deg, var(--h-zemin), #FFFFFF); border: 1px solid var(--ds-line); }
.hz-giris p { font-size: 18.5px; color: var(--ds-ink); }
.hz-bolum { padding-top: 12px; margin-bottom: 64px; scroll-margin-top: 100px; }
.hz-bolum:last-child { margin-bottom: 0; }
.hz-bolum__no { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--h-zemin); color: var(--h-yazi); font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hz-bolum__no em { font-style: normal; opacity: .55; }
.hz-bolum > h2 { margin: 14px 0 18px; font-family: var(--ds-display); font-weight: 800; color: var(--ds-ink); font-size: clamp(28px, 3vw, 40px); line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; }
.hz-bolum__giris { margin-bottom: 22px; }
.hz-altlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hz-altlar.uzun { grid-template-columns: minmax(0, 1fr); }
.hz-alt { position: relative; padding: 24px; border-radius: 24px; background: #FFFFFF; border: 1px solid var(--ds-line); box-shadow: 0 8px 22px rgba(70, 50, 140, 0.04); scroll-margin-top: 100px; transition: border-color .25s ease, box-shadow .25s ease; }
.hz-alt:hover { border-color: color-mix(in srgb, var(--h) 30%, transparent); box-shadow: 0 16px 36px rgba(70, 50, 140, 0.08); }
.hz-alt__no { position: absolute; right: 20px; top: 18px; font-family: var(--ds-display); font-weight: 800; font-size: 30px; letter-spacing: -0.04em; color: rgba(29,24,48,.07); line-height: 1; }
.hz-alt h3 { margin: 0 44px 10px 0; font-family: var(--ds-display); font-weight: 700; font-size: 20px; line-height: 1.25; letter-spacing: -0.02em; color: var(--ds-ink); }
.hz-alt h3::before { content: ""; display: block; width: 28px; height: 4px; border-radius: 4px; margin-bottom: 14px; background: linear-gradient(90deg, var(--h), var(--h2)); }
.hz-alt p, .hz-alt li { font-size: 15.5px; line-height: 1.7; }
.hz-altlar.uzun .hz-alt { padding: 28px 30px; }
.hz-altlar.uzun .hz-alt p, .hz-altlar.uzun .hz-alt li { font-size: 16.5px; }

/* ───────── Kimler için ───────── */
.hz-kimler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hz-kimler.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hz-kim { position: relative; padding: 26px 22px; border-radius: var(--ds-radius); background: linear-gradient(160deg, var(--h-zemin), #FFFFFF 60%); border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow); transition: transform .25s ease; }
.hz-kim:hover { transform: translateY(-4px); }
.hz-kim__ikon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: #FFFFFF; color: var(--h-yazi); font-size: 19px; box-shadow: 0 10px 22px rgba(70,50,140,.08); }
.hz-kim__no { position: absolute; right: 20px; top: 22px; font-family: var(--ds-display); font-weight: 800; font-size: 34px; color: rgba(29,24,48,.07); letter-spacing: -0.04em; }
.hz-kim .ds-h3 { margin-top: 18px; font-size: 19px; }
.hz-kim p { margin-top: 8px !important; font-size: 14.5px !important; }

/* ───────── Çıktılar ───────── */
.hz-cikti { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; padding: 40px; border-radius: 34px; color: #FFFFFF;
  background: radial-gradient(70% 60% at 0% 0%, color-mix(in srgb, var(--h) 50%, transparent), transparent 70%), radial-gradient(60% 50% at 100% 100%, rgba(255, 191, 166, 0.16), transparent 70%), var(--ds-ink); }
.hz-cikti .ds-ust { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); color: #FFFFFF; box-shadow: none; }
.hz-cikti .ds-h3 { margin-top: 16px; color: #FFFFFF; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.08; letter-spacing: -0.03em; }
.hz-cikti p { margin-top: 10px !important; color: rgba(255,255,255,.68) !important; }
.hz-cikti ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hz-cikti li { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); font-size: 14px; line-height: 1.45; color: #FFFFFF; }
.hz-cikti li span { flex: 0 0 auto; font-family: var(--ds-display); font-weight: 800; font-size: 13px; color: var(--h-acik); }
.hz-cikti__gorsel { position: relative; }
.hz-cikti__gorsel img { display: block; width: 100%; height: auto; border-radius: 24px; border: 8px solid rgba(255,255,255,.08); }
.hz-cikti__gorsel .ds-cip { left: -18px; bottom: 26px; }

/* ───────── Süreç ───────── */
.hz-surec { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.hz-surec.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hz-surec.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hz .ds-adim__no { background: linear-gradient(135deg, var(--h), var(--h2)); box-shadow: 0 10px 22px color-mix(in srgb, var(--h) 30%, transparent); }
.hz-zaman { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; max-width: 920px; }
.hz-zaman::before { content: ""; position: absolute; left: 31px; top: 30px; bottom: 30px; width: 2px; background: linear-gradient(180deg, var(--h), var(--h-acik)); }
.hz-zaman li { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; align-items: flex-start; padding: 0; }
.hz-zaman__no { position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-family: var(--ds-display); font-weight: 800; font-size: 19px; color: #FFFFFF; background: linear-gradient(135deg, var(--h), var(--h2)); box-shadow: 0 0 0 8px #FFFFFF, 0 14px 26px color-mix(in srgb, var(--h) 30%, transparent); }
.hz-zaman li > div { padding: 20px 24px; border-radius: 22px; background: #FFFFFF; border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow); }
.hz-zaman .ds-h3 { font-size: 20px; }
.hz-zaman p { margin-top: 6px !important; font-size: 15px !important; }

/* ───────── Çalışma modeli ───────── */
.hz-model { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.hz-model__metin .ds-h2 { margin-top: 18px; }
.hz-model__metin p { margin: 18px 0 26px !important; }
.hz-model__kartlar { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hz-model__kart { padding: 28px 24px; border-radius: var(--ds-radius); background: #FFFFFF; border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow); }
.hz-model__kart.koyu { background: radial-gradient(80% 80% at 100% 0%, color-mix(in srgb, var(--h) 50%, transparent), transparent 70%), var(--ds-ink); border-color: transparent; }
.hz-model__kart.koyu .ds-h3 { color: #FFFFFF; }
.hz-model__kart.koyu p { color: rgba(255,255,255,.7) !important; }
.hz-model__ikon { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: var(--h-zemin); color: var(--h-yazi); font-size: 18px; }
.hz-model__kart.koyu .hz-model__ikon { background: rgba(255,255,255,.1); color: #FFFFFF; }
.hz-model__kart .ds-h3 { margin-top: 18px; font-size: 21px; }
.hz-model__kart p { margin-top: 8px !important; font-size: 14.5px !important; }

/* ───────── SSS (ds.css üzerine) ───────── */
.hz .ds-sss details[open] summary i { background: var(--h); }
.hz-sss__sol { position: sticky; top: 104px; }

/* ───────── İlgili ───────── */
.hz-ilgili { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hz-mini { position: relative; display: flex; flex-direction: column; padding: 20px; border-radius: 24px; background: linear-gradient(150deg, #F3EFFF, #FFFFFF 70%); border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow); text-decoration: none !important; transition: transform .25s ease, box-shadow .25s ease; }
.hz-mini.seftali { background: linear-gradient(150deg, #FFF1EA, #FFFFFF 70%); } .hz-mini.su { background: linear-gradient(150deg, #E9F9FC, #FFFFFF 70%); } .hz-mini.limon { background: linear-gradient(150deg, #F7FBE2, #FFFFFF 70%); }
.hz-mini:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(70, 50, 140, 0.12); }
.hz-mini__ust { display: flex; justify-content: space-between; align-items: flex-start; }
.hz-mini__ikon { width: 56px; height: 56px; border-radius: 17px; display: grid; place-items: center; background: #FFFFFF; border: 1px solid var(--ds-line); }
.hz-mini__ikon img { width: 42px; height: 42px; object-fit: contain; }
.hz-mini__no { font-family: var(--ds-display); font-weight: 800; font-size: 28px; letter-spacing: -0.04em; color: rgba(29,24,48,.08); }
.hz-mini__kat { margin-top: 16px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ds-violet); }
.hz-mini__baslik { margin: 6px 0 0; font-family: var(--ds-display); font-weight: 700; font-size: 18.5px; line-height: 1.2; letter-spacing: -0.02em; color: var(--ds-ink); }
.hz-mini__ozet { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--ds-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hz-mini__ok { margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--ds-ink); }
.hz-mini__ok i { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--ds-violet); color: #FFFFFF; font-size: 11px; margin-left: auto; transition: transform .2s ease; }
.hz-mini:hover .hz-mini__ok i { transform: translateX(3px); }
.hz-sektorler { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 18px; padding: 20px 22px; border-radius: 24px; background: var(--ds-bg); }
.hz-sektorler > b { font-size: 14px; color: var(--ds-ink); }
.hz-sektorler > div { display: flex; flex-wrap: wrap; gap: 8px; }
.hz-sektorler a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--ds-line); font-size: 13.5px; font-weight: 600; color: var(--ds-ink) !important; text-decoration: none !important; transition: background-color .2s ease, color .2s ease; }
.hz-sektorler a i { font-size: 10px; color: var(--ds-violet); }
.hz-sektorler a:hover { background: var(--ds-ink); color: #FFFFFF !important; }
.hz-sektorler a:hover i { color: var(--ds-lime); }
.hz-yazilar { margin-top: 34px; }
.hz-yazilar__ust { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; }
.hz-yazilar__ust b { font-family: var(--ds-display); font-size: 22px; color: var(--ds-ink); letter-spacing: -0.02em; }
.hz-yazilar__ust a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ds-violet) !important; text-decoration: none !important; }
.hz-yazilar__izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hz-yazi { display: flex; flex-direction: column; gap: 10px; padding: 10px 10px 18px; border-radius: 24px; background: #FFFFFF; border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow); text-decoration: none !important; transition: transform .25s ease; }
.hz-yazi:hover { transform: translateY(-4px); }
.hz-yazi__kapak { display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--ds-bg); }
.hz-yazi__kapak img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.hz-yazi:hover .hz-yazi__kapak img { transform: scale(1.04); }
.hz-yazi__meta { display: flex; justify-content: space-between; gap: 10px; padding: 0 8px; }
.hz-yazi__meta em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ds-violet); }
.hz-yazi__meta small { font-size: 12px; color: var(--ds-muted); }
.hz-yazi > b { padding: 0 8px; font-family: var(--ds-display); font-size: 17.5px; line-height: 1.3; letter-spacing: -0.015em; color: var(--ds-ink); }

/* ───────── Son çağrı (koyu şerit) ───────── */
.hz-cta { position: relative; margin-top: 110px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px 40px; align-items: center; padding: 52px 52px; border-radius: 36px; color: #FFFFFF; overflow: hidden;
  background: radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--h) 60%, transparent), transparent 60%), radial-gradient(40% 80% at 0% 100%, rgba(155,230,243,.16), transparent 70%), var(--ds-ink); }
.hz-cta .ds-ust { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); color: #FFFFFF; box-shadow: none; }
.hz-cta .ds-h2 { margin-top: 16px; color: #FFFFFF; font-size: clamp(32px, 3.6vw, 52px); }
.hz-cta p { margin-top: 12px !important; color: rgba(255,255,255,.7) !important; max-width: 620px; }
.hz-cta__dugmeler { display: flex; flex-direction: column; gap: 10px; align-items: stretch; position: relative; z-index: 1; }
.hz-cta__dugmeler .ds-btn { justify-content: space-between; }
.hz-cta__eposta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding-top: 6px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.75) !important; text-decoration: none !important; }
.hz-cta__3d { position: absolute; right: 30%; top: -10px; width: 130px; height: auto; opacity: .9; pointer-events: none; filter: drop-shadow(0 18px 30px rgba(0,0,0,.35)); }

/* ───────── Duyarlı ───────── */
@media (max-width: 1199.98px) {
  .hz-one__izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hz-one__ikon { display: none; }
  .hz-uzun { grid-template-columns: 250px minmax(0, 1fr); gap: 36px; }
  .hz-ilgili { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hz-surec, .hz-surec.n4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hz-kimler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .hz-hero { padding: 120px 0 56px; }
  .hz-hero__izgara, .hz-imza, .hz-model, .hz-cikti { grid-template-columns: minmax(0, 1fr); }
  .hz-imza.ters .hz-imza__metin { order: 0; }
  .hz-hero__gorsel { margin-top: 8px; }
  .hz-one { margin-top: 0; }
  .hz-one__izgara { grid-template-columns: minmax(0, 1fr); }
  .hz-uzun { grid-template-columns: minmax(0, 1fr); }
  .hz-toc { display: none; }
  .hz-toc-mobil { display: block; }
  .hz-sss__sol { position: static; }
  .hz-cta { grid-template-columns: minmax(0, 1fr); padding: 44px 30px; }
  .hz-cta__3d { right: 16px; top: 16px; width: 90px; }
  .hz-yazilar__izgara { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
  .hz-h1 { font-size: clamp(34px, 9vw, 44px); }
  .hz-ozet { font-size: 16.5px !important; }
  .hz-tikli, .hz-cikti ul, .hz-altlar, .hz-kimler, .hz-kimler.n3, .hz-model__kartlar, .hz-ilgili, .hz-yazilar__izgara, .hz-surec, .hz-surec.n4, .hz-surec.n3 { grid-template-columns: minmax(0, 1fr); }
  .hz-cikti { padding: 26px 20px; border-radius: 28px; }
  .hz-cikti__gorsel .ds-cip { left: 8px; }
  .hz-cta { padding: 36px 22px; border-radius: 28px; margin-top: 84px; }
  .hz-cta__3d { display: none; }
  .hz-prose p, .hz-prose li { font-size: 16px; }
  .hz-giris { padding: 20px; }
  .hz-alt, .hz-altlar.uzun .hz-alt { padding: 20px; }
  .hz-zaman::before { left: 23px; }
  .hz-zaman li { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
  .hz-zaman__no { width: 48px; height: 48px; font-size: 15px; box-shadow: 0 0 0 6px #FFFFFF; }
  .hz-imza__sahne { padding: 16px; border-radius: 26px; min-height: 0; }
  /* Maketler dar ekranda */
  .hm-sahne { padding: 24px 6px 30px; }
  .hm-3d.ust { width: 84px; right: -4px; top: -16px; }
  .hm-3d.alt { width: 70px; left: -6px; bottom: -6px; }
  .hm-cip.c1 { left: 0; top: -4px; bottom: auto; }
  .hm-meta-reklam-yonetimi { padding-bottom: 30px; }
  .hm-kitle { position: relative !important; bottom: auto; margin-top: 16px; }
  .hm-urun { max-width: 300px; margin: 0 auto; width: 100%; }
  .hm-serp { --sh: 84px; padding: 10px 10px 0; }
  .hm-serp li { left: 10px; right: 10px; padding: 10px 12px; }
  .hm-serp li b { font-size: 13px; }
  .hm-rozet { display: none; }
  .hm-harita { height: 380px; }
  .hm-metrikler { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .hm-metrikler small { font-size: 9.5px; min-height: 24px; }
  .hm-telefon { width: 230px; }
  .hm-telefon.buyuk { width: 240px; }
  .hm-cihazlar { height: 300px; }
  .hm-tel .hero { height: 70px; } .hm-tel .k { height: 44px; }
  .hm-e-ticaret-sitesi, .hm-reels-ve-fotograf-cekimi { grid-template-columns: minmax(0, 1fr); }
  .hm-dikeyler { height: 360px; max-width: 320px; margin: 0 auto; width: 100%; }
  .hm-takvim { width: 100%; }
  .hm-akis { width: 52%; right: -2px; bottom: -6px; }
  .hm-kitle span { font-size: 11.5px; padding: 7px 10px; }
  .hm-pano__renkler span { height: 48px; }
  .hi-denetim, .hi-yerel, .hi-kadraj { grid-template-columns: minmax(0, 1fr); }
  .hi-yerel__harita { min-height: 180px; grid-row: auto; }
  .hi-kume { max-width: 300px; width: 100%; margin: 0 auto; }
  .hi-geo { grid-template-columns: minmax(0, 1fr); }
  .hi-geo__ok { margin: 0 auto; transform: rotate(90deg); }
  .hi-varlik { height: 190px; }
  .hi-varlik .u1 { left: 26%; top: 12%; } .hi-varlik .u2 { left: 74%; top: 12%; } .hi-varlik .u3 { left: 26%; top: 88%; } .hi-varlik .u4 { left: 74%; top: 88%; }
  .hi-agac .dallar { grid-template-columns: minmax(0, 1fr); }
  .hi-agac .dallar::before { display: none; }
  .hi-akis { grid-template-columns: 1fr 1fr; }
  .hi-huni__kat { width: 100% !important; grid-template-columns: auto 38px minmax(0, 1fr); }
  .hi-vitals { grid-template-columns: minmax(0, 1fr); }
  .hi-vitals > div { flex-direction: row; justify-content: flex-start; gap: 12px; text-align: left; flex-wrap: wrap; }
  .hi-haritasi > div { grid-template-columns: 1fr 1fr; }
  .hi-yol { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .hi-yol span { font-size: 10px; } .hi-yol span i { width: 44px; height: 44px; border-radius: 14px; font-size: 15px; }
  .hi-yol::before { top: 22px; }
  .hi-ekranlar { height: 330px; }
  .hi-ekranlar .hm-telefon.kucuk { width: 124px; }
  .hi-ekranlar .e1 { margin-left: -160px; } .hi-ekranlar .e2 { margin-left: -62px; } .hi-ekranlar .e3 { margin-left: 36px; }
  .hi-kanban { grid-template-columns: 1fr 1fr; }
  .hi-kanban__sutun { min-height: 0; }
  .hi-hat { grid-template-columns: 1fr 1fr; }
  .hi-hat > div:last-of-type { grid-column: 1 / -1; }
  .hi-hat__kareler { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hi-kadraj__ekran { max-width: 200px; width: 100%; margin: 0 auto; }
  .hi-uygulamalar { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 84px; }
  .hi-uygulamalar .kartvizit, .hi-uygulamalar .favicon { grid-column: 1 / -1; }
  .hi-uygulamalar .profil, .hi-uygulamalar .tabela, .hi-uygulamalar .ambalaj { grid-column: span 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hz *, .hb *, .hz *::before, .hz *::after, .hb *::before, .hb *::after { animation: none !important; }
  .hm-serp li { transform: translateY(calc(var(--b) * var(--sh))); }
  [data-egim] { transform: none !important; }
}

/* ───────── Hizmet merkezi (hb-*) ───────── */
.hb-h1 { font-size: clamp(44px, 5.6vw, 80px); line-height: .96; text-wrap: balance; }
.hb .hz-etiketler a { color: inherit !important; text-decoration: none !important; }
.hb-yorunge { position: relative; width: min(560px, 100%); aspect-ratio: 1; margin: 0 auto; }
.hb-yorunge::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle, rgba(185,166,255,.45), transparent 70%); filter: blur(14px); }
.hb-yorunge__merkez { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; z-index: 3;
  background: radial-gradient(70% 70% at 30% 20%, rgba(139,108,255,.65), transparent 70%), var(--ds-ink); box-shadow: 0 30px 60px rgba(29,24,48,.3), 0 0 0 10px rgba(255,255,255,.6); }
.hb-yorunge__merkez img { width: 40%; height: auto; filter: brightness(0) invert(1); }
.hb-yorunge__merkez b { font-family: var(--ds-display); font-size: clamp(12px, 1.4vw, 16px); color: #FFFFFF; letter-spacing: .08em; text-transform: uppercase; }
.hb-halka { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1.5px dashed rgba(91,61,245,.22); transform: translate(-50%, -50%); animation: hbDon 60s linear infinite; }
.hb-halka.h1 { width: 52%; aspect-ratio: 1; animation-duration: 40s; }
.hb-halka.h2 { width: 76%; aspect-ratio: 1; animation-direction: reverse; animation-duration: 55s; }
.hb-halka.h3 { width: 100%; aspect-ratio: 1; animation-duration: 70s; }
@keyframes hbDon { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.hb-uydu { position: absolute; inset: 0; transform: rotate(var(--a)); pointer-events: none; }
.hb-uydu__ic { position: absolute; left: 50%; top: 0; margin: -32px 0 0 -32px; width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 14px 30px rgba(70,50,140,.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transform: rotate(calc(var(--a) * -1)); }
.hb-halka .hb-uydu__ic { animation: hbKarsi 60s linear infinite; }
.hb-halka.h1 .hb-uydu__ic { animation-duration: 40s; }
.hb-halka.h2 .hb-uydu__ic { animation-duration: 55s; animation-direction: reverse; }
.hb-halka.h3 .hb-uydu__ic { animation-duration: 70s; }
@keyframes hbKarsi { from { transform: rotate(calc(var(--a) * -1)); } to { transform: rotate(calc(var(--a) * -1 - 360deg)); } }
.hb-uydu__ic img { width: 44px; height: 44px; object-fit: contain; }
.hb-yorunge__3d { position: absolute; right: 2%; bottom: 4%; width: 96px; z-index: 4; filter: drop-shadow(0 16px 26px rgba(91,61,245,.3)); }

.hb-kategoriler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hb-kategori { display: flex; flex-direction: column; padding: 28px; border-radius: 28px; border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow); background: linear-gradient(160deg, #F3EFFF, #FFFFFF 55%); scroll-margin-top: 110px; }
.hb-kategori.k2 { background: linear-gradient(160deg, #FFF1EA, #FFFFFF 55%); }
.hb-kategori.k3 { background: linear-gradient(160deg, #E9F9FC, #FFFFFF 55%); }
.hb-kategori__ust { display: flex; justify-content: space-between; align-items: center; }
.hb-kategori__no { font-family: var(--ds-display); font-weight: 800; font-size: 44px; letter-spacing: -0.05em; line-height: 1; color: rgba(29,24,48,.1); }
.hb-kategori__ikon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--ds-ink); color: #FFFFFF; font-size: 18px; }
.hb-kategori__ad { margin-top: 20px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ds-violet); }
.hb-kategori .ds-h3 { margin-top: 6px; font-size: 26px; }
.hb-kategori p { margin-top: 10px !important; font-size: 15px !important; }
.hb-akis { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; }
.hb-akis span { padding: 6px 11px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--ds-line); font-size: 12px; font-weight: 700; color: var(--ds-ink); }
.hb-akis i { font-size: 10px; color: var(--ds-muted-2); }
.hb-kategori ul { list-style: none; margin: 20px 0 0; padding: 14px 0 0; border-top: 1px solid var(--ds-line); display: flex; flex-direction: column; gap: 4px; }
.hb-kategori ul a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; font-size: 14.5px; font-weight: 600; color: var(--ds-ink) !important; text-decoration: none !important; transition: background-color .2s ease; }
.hb-kategori ul a > i:first-child { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: #FFFFFF; color: var(--ds-violet); font-size: 12px; border: 1px solid var(--ds-line); }
.hb-kategori ul a .ok { margin-left: auto; font-size: 11px; color: var(--ds-muted-2); transition: transform .2s ease, color .2s ease; }
.hb-kategori ul a:hover { background: #FFFFFF; }
.hb-kategori ul a:hover .ok { transform: translateX(3px); color: var(--ds-violet); }

.hb-sekmeler { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; padding: 6px; border-radius: 999px; background: var(--ds-bg); width: fit-content; max-width: 100%; }
.hb-sekmeler button { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; font-family: var(--ds-body); font-size: 14px; font-weight: 700; color: var(--ds-muted); cursor: pointer; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.hb-sekmeler button small { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: rgba(29,24,48,.08); font-size: 11.5px; }
.hb-sekmeler button[aria-selected="true"] { background: var(--ds-ink); color: #FFFFFF; box-shadow: 0 10px 22px rgba(29,24,48,.18); }
.hb-sekmeler button[aria-selected="true"] small { background: rgba(255,255,255,.16); }
.hb-sekmeler button:focus-visible { outline: 2px solid var(--ds-violet); outline-offset: 2px; }
.hb-katalog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hb-katalog .ds-kart[hidden] { display: none; }
.hz-kart .ds-h3 a { color: inherit !important; text-decoration: none !important; }
.hz-kart .ds-h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hz-kart .ds-h3 { font-size: 23px; }
.hz-kart .ds-kart__alt { position: relative; z-index: 1; pointer-events: none; }

.hb-rehber { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hb-durum { display: flex; flex-direction: column; padding: 22px; border-radius: 24px; background: #FFFFFF; border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow); }
.hb-durum__ikon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(91,61,245,.1); color: var(--ds-violet); font-size: 16px; }
.hb-durum h3 { margin: 16px 0 0; font-family: var(--ds-display); font-weight: 700; font-size: 18px; line-height: 1.25; letter-spacing: -0.015em; color: var(--ds-ink); }
.hb-durum small { margin-top: auto; padding-top: 16px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ds-muted-2); }
.hb-durum div { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.hb-durum a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--ds-bg); font-size: 13.5px; font-weight: 700; color: var(--ds-ink) !important; text-decoration: none !important; transition: background-color .2s ease, color .2s ease; }
.hb-durum a i { font-size: 10px; color: var(--ds-violet); }
.hb-durum a:hover { background: var(--ds-violet); color: #FFFFFF !important; }
.hb-durum a:hover i { color: #FFFFFF; }

.hb-sektorler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hb-sektor { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 22px; background: #FFFFFF; border: 1px solid var(--ds-line); box-shadow: 0 8px 22px rgba(70,50,140,.05); text-decoration: none !important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.hb-sektor:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(70,50,140,.12); border-color: rgba(91,61,245,.25); }
.hb-sektor__ikon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(135deg, #F3EFFF, #FFF1EA); color: var(--ds-violet); font-size: 18px; }
.hb-sektor:nth-child(3n+2) .hb-sektor__ikon { background: linear-gradient(135deg, #FFF1EA, #E9F9FC); color: #B93D17; }
.hb-sektor:nth-child(3n) .hb-sektor__ikon { background: linear-gradient(135deg, #E9F9FC, #F7FBE2); color: #0A6E82; }
.hb-sektor__metin { min-width: 0; }
.hb-sektor__metin b { display: block; font-size: 15.5px; color: var(--ds-ink); line-height: 1.25; }
.hb-sektor__metin small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ds-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-sektor__ok { margin-left: auto; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; display: grid !important; place-items: center; background: var(--ds-bg); color: var(--ds-ink); font-size: 11px; transition: background-color .2s ease, color .2s ease; }
.hb-sektor:hover .hb-sektor__ok { background: var(--ds-violet); color: #FFFFFF; }

.hb-modeller { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hb-model { padding: 28px; border-radius: 28px; background: #FFFFFF; border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow); }
.hb-model__etiket { display: inline-flex; padding: 6px 12px; border-radius: 999px; background: rgba(91,61,245,.1); color: var(--ds-violet); font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hb-model .ds-h3 { margin-top: 18px; font-size: 24px; }
.hb-model p { margin-top: 10px !important; font-size: 15px !important; }
.hb-model ul { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hb-model li { padding: 6px 11px; border-radius: 999px; background: var(--ds-bg); font-size: 12.5px; font-weight: 600; color: var(--ds-ink); }
.hb-model.koyu { background: radial-gradient(70% 70% at 100% 0%, rgba(91,61,245,.55), transparent 70%), var(--ds-ink); border-color: transparent; }
.hb-model.koyu .hb-model__etiket { background: var(--ds-lime); color: var(--ds-ink); }
.hb-model.koyu .ds-h3 { color: #FFFFFF; }
.hb-model.koyu p { color: rgba(255,255,255,.7) !important; }
.hb-model.koyu li { background: rgba(255,255,255,.08); color: #FFFFFF; }

.hb-surec { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; position: relative; }
.hb-surec::before { content: ""; position: absolute; left: 4%; right: 4%; top: 27px; height: 2px; background: linear-gradient(90deg, var(--ds-violet), var(--ds-lavender), var(--ds-peach)); }
.hb-surec li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 10px; }
.hb-surec span { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-family: var(--ds-display); font-weight: 800; color: #FFFFFF; background: linear-gradient(135deg, var(--ds-violet), #8B6CFF); box-shadow: 0 0 0 8px #FFFFFF, 0 14px 26px rgba(91,61,245,.28); }
.hb-surec b { margin-top: 18px; font-family: var(--ds-display); font-size: 18px; color: var(--ds-ink); }
.hb-surec small { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--ds-muted); }

@media (max-width: 1199.98px) {
  .hb-rehber { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hb-katalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hb-surec { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 30px; }
  .hb-surec::before { display: none; }
}
@media (max-width: 991.98px) {
  .hb-kategoriler, .hb-modeller { grid-template-columns: minmax(0, 1fr); }
  .hb-sektorler { grid-template-columns: 1fr 1fr; }
  .hb-yorunge { width: min(460px, 100%); }
      }
@media (max-width: 767.98px) {
  .hb-h1 { font-size: clamp(38px, 10vw, 52px); }
  .hb-katalog, .hb-rehber, .hb-sektorler { grid-template-columns: minmax(0, 1fr); }
  .hb-surec { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .hb-surec li { flex-direction: row; align-items: flex-start; gap: 14px; text-align: left; flex-wrap: wrap; }
  .hb-surec li span { flex: 0 0 auto; width: 46px; height: 46px; }
  .hb-surec b { margin-top: 10px; }
  .hb-surec small { flex-basis: 100%; padding-left: 60px; margin-top: -8px; }
  .hb-sekmeler { border-radius: 22px; }
  .hb-sekmeler button { height: 40px; padding: 0 14px; font-size: 13px; }
  .hb-uydu__ic { width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 14px; }
  .hb-uydu__ic img { width: 32px; height: 32px; }
  .hb-yorunge__3d { width: 64px; }
}

/* ═════════ Telefon ve tablet (< 992 px) — masaüstü bu bloktan etkilenmez ═════════
   Uzun dikey kart yığınları kaydırmalı şeritlere (yandaki kart kenardan görünür), kısa listeler kompakt
   ızgaralara döner; maketler küçülür ama hareketleriyle kalır. Şerit nokta göstergeleri (.hz-noktalar)
   ds-hizmet.js tarafından yalnızca bu genişlikte eklenir. */
.hz-noktalar { display: none; }
@media (max-width: 991.98px) {
  .hz { --hz-kenar: 24px; }

  /* ── Ortak şerit ── */
  .hz .hz-one__izgara, .hz .hz-altlar, .hz .hz-altlar.uzun, .hz .hz-kimler, .hz .hz-kimler.n3, .hz .hz-surec, .hz .hz-surec.n4, .hz .hz-surec.n3,
  .hz .hz-ilgili, .hz .hz-yazilar__izgara, .hb .hb-kategoriler, .hb .hb-katalog, .hb .hb-rehber, .hb .hb-modeller {
    --w: min(80%, 340px);
    position: relative; display: flex; flex-wrap: nowrap; align-items: stretch; gap: 12px; grid-template-columns: none;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--hz-kenar); margin-inline: calc(var(--hz-kenar) * -1); padding: 10px var(--hz-kenar) 26px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .hz .hz-one__izgara::-webkit-scrollbar, .hz .hz-altlar::-webkit-scrollbar, .hz .hz-kimler::-webkit-scrollbar, .hz .hz-surec::-webkit-scrollbar, .hz .hz-ilgili::-webkit-scrollbar,
  .hz .hz-yazilar__izgara::-webkit-scrollbar, .hb .hb-kategoriler::-webkit-scrollbar, .hb .hb-katalog::-webkit-scrollbar, .hb .hb-rehber::-webkit-scrollbar, .hb .hb-modeller::-webkit-scrollbar { display: none; }
  .hz .hz-one__izgara > *, .hz .hz-altlar > *, .hz .hz-kimler > *, .hz .hz-surec > *, .hz .hz-ilgili > *, .hz .hz-yazilar__izgara > *,
  .hb .hb-kategoriler > *, .hb .hb-katalog > *, .hb .hb-rehber > *, .hb .hb-modeller > * { flex: 0 0 var(--w); min-width: 0; scroll-snap-align: start; }
  .hz-noktalar { display: flex; justify-content: center; align-items: center; gap: 6px; height: 6px; margin: -10px 0 4px; pointer-events: none; }
  .hz-noktalar[hidden] { display: none !important; }
  .hz-noktalar i { width: 6px; height: 6px; border-radius: 3px; background: rgba(29, 24, 48, 0.16); transition: width .3s ease, background-color .3s ease; }
  .hz-noktalar i.aktif { width: 20px; background: var(--h, #5B3DF5); }

  /* ── Bölüm ritmi ── */
  .hz .ds-baslik { margin-bottom: 26px; gap: 16px; }
  .hz .ds-baslik .ds-bilgi { padding: 14px 16px; border-radius: 18px; }

  /* ── Hero ── */
  .hz .hz-hero { padding-bottom: 36px; }
  .hz .hz-hero__izgara { gap: 22px; }
  .hz .hz-kirinti { gap: 0 8px; margin-bottom: 6px; }
  .hz .hz-kirinti a { display: inline-flex; align-items: center; min-height: 44px; }
  .hz .hz-etiketler { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 22px calc(var(--hz-kenar) * -1) 0; padding: 2px var(--hz-kenar); scroll-padding-inline: var(--hz-kenar); }
  .hz .hz-etiketler::-webkit-scrollbar { display: none; }
  .hz .hz-etiketler li { flex: 0 0 auto; white-space: nowrap; }
  .hb .hz-etiketler li { padding: 0; }
  .hb .hz-etiketler a { display: flex; align-items: center; min-height: 44px; padding: 0 16px; }
  .hz .hz-meta { margin-top: 16px; gap: 6px 18px; font-size: 13px; }
  .hz .hz-hero__gorsel { margin-top: 0; }
  .hz .hm-sahne { max-width: 540px; padding: 50px 10px 56px; }
  .hz .hm-3d.ust { width: 100px; right: -2px; top: 2px; }
  .hz .hm-3d.alt { width: 84px; left: -4px; bottom: 6px; }
  .hz .hm-cip { transform: none; scale: .88; }
  .hz .hm-cip.c1 { left: 0; right: auto; top: 4px; bottom: auto; transform-origin: left top; }
  .hz .hm-cip.c2, .hz .hm-cip.c2.gizle-mobil { display: flex; left: auto; right: 0; top: auto; bottom: 6px; transform-origin: right bottom; }

  /* ── Öne çıkanlar ── */
  .hz .hz-one { margin-top: 0; }
  .hz .hz-one__izgara { --w: min(max(calc(100% - 136px), 220px), 300px); }
  .hz .hz-one__ikon { display: flex; flex-basis: 96px; padding: 14px 8px; border-radius: 24px; }
  .hz .hz-one__ikon img { width: 66px; }
  .hz .hz-one__ikon span { font-size: 9.5px; letter-spacing: .12em; line-height: 1.35; }
  .hz .hz-one__kart { padding: 22px 20px; border-radius: 24px; box-shadow: 0 14px 30px rgba(70, 50, 140, 0.08); }
  .hz .hz-one__kart .ds-h3 { margin-top: 14px; font-size: 18.5px; }
  .hz .hz-one__kart p { font-size: 14px !important; line-height: 1.55 !important; }

  /* ── İmza ── */
  .hz .hz-imza { gap: 26px; }
  .hz .hz-imza__metin p { margin-top: 14px !important; }
  .hz .hz-tikli { margin-top: 20px; gap: 8px; }
  .hz .hz-tikli li { padding: 10px 12px; font-size: 13.5px; border-radius: 14px; }

  /* ── Uzun içerik ── */
  .hz .hz-toc-mobil { margin-bottom: 22px; }
  .hz .hz-toc-mobil summary { min-height: 52px; }
  .hz .hz-toc-mobil a { min-height: 44px; align-items: center; }
  .hz .hz-giris { margin-bottom: 30px; padding: 20px 20px; border-radius: 22px; }
  .hz .hz-bolum { margin-bottom: 40px; }
  .hz .hz-bolum > h2 { margin: 12px 0 14px; font-size: clamp(25px, 6.6vw, 34px); }
  .hz .hz-bolum__giris { margin-bottom: 16px; }
  .hz .hz-altlar, .hz .hz-altlar.uzun { --w: min(calc(100% - 30px), 460px); }
  .hz .hz-alt, .hz .hz-altlar.uzun .hz-alt { padding: 20px 18px 22px; border-radius: 22px; box-shadow: 0 10px 24px rgba(70, 50, 140, 0.06); }
  .hz .hz-alt h3 { font-size: 18px; margin-right: 40px; }
  .hz .hz-alt h3::before { margin-bottom: 12px; }
  .hz .hz-alt__no { right: 16px; top: 16px; font-size: 26px; }
  .hz .hz-alt p, .hz .hz-alt li, .hz .hz-altlar.uzun .hz-alt p, .hz .hz-altlar.uzun .hz-alt li { font-size: 15px; line-height: 1.62; }

  /* ── Kimler için ── */
  .hz .hz-kimler, .hz .hz-kimler.n3 { --w: min(80%, 310px); }
  .hz .hz-kim { padding: 22px 20px; border-radius: 24px; }
  .hz .hz-kim__ikon { width: 46px; height: 46px; border-radius: 14px; font-size: 17px; }
  .hz .hz-kim .ds-h3 { margin-top: 14px; font-size: 18px; }
  .hz .hz-kim p { font-size: 14px !important; line-height: 1.55 !important; }

  /* ── Çıktılar ── */
  .hz .hz-cikti { gap: 24px; padding: 28px 24px; border-radius: 30px; }
  .hz .hz-cikti ul { gap: 8px; margin-top: 18px; }
  .hz .hz-cikti li { padding: 11px 12px; font-size: 13.5px; border-radius: 14px; gap: 10px; }

  /* ── Süreç ── */
  .hz .hz-surec, .hz .hz-surec.n4, .hz .hz-surec.n3 { --w: min(72%, 270px); }
  .hz .hz-surec .ds-adim { padding: 20px 18px; border-radius: 22px; }
  .hz .hz-surec .ds-adim__no { width: 46px; height: 46px; font-size: 15px; }
  .hz .hz-surec .ds-adim .ds-h3 { margin-top: 16px; font-size: 18px; }
  .hz .hz-surec .ds-adim p { font-size: 14px !important; line-height: 1.55 !important; }
  .hz .hz-zaman { gap: 12px; }
  .hz .hz-zaman li > div { padding: 16px 18px; border-radius: 20px; }
  .hz .hz-zaman .ds-h3 { font-size: 18px; }
  .hz .hz-zaman p { font-size: 14px !important; line-height: 1.55 !important; }

  /* ── Çalışma modeli ── */
  .hz .hz-model { gap: 26px; }
  .hz .hz-model__metin p { margin: 14px 0 20px !important; }
  .hz .hz-model__kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hz .hz-model__kart { padding: 20px 16px; border-radius: 22px; }
  .hz .hz-model__ikon { width: 42px; height: 42px; border-radius: 13px; font-size: 16px; }
  .hz .hz-model__kart .ds-h3 { margin-top: 14px; font-size: 17px; }
  .hz .hz-model__kart p { font-size: 13.5px !important; line-height: 1.5 !important; }

  /* ── SSS: başlık · sorular · "sorunuz yok mu" kartı ── */
  .hz .ds-sss { gap: 0; }
  .hz .hz-sss__sol { display: contents; }
  .hz .hz-sss__sol > .ds-ust { justify-self: start; }
  .hz .ds-sss__liste { order: 1; margin-top: 22px; gap: 8px; }
  .hz .ds-sss__kart { order: 2; margin-top: 14px; padding: 20px; border-radius: 22px; }
  .hz .ds-sss__kart b { font-size: 18px; }
  .hz .ds-sss details { border-radius: 18px; }
  .hz .ds-sss summary { min-height: 58px; padding: 14px 14px 14px 18px; font-size: 15.5px; line-height: 1.35; }
  .hz .ds-sss details p { padding: 0 18px 18px; font-size: 14.5px; }

  /* ── İlgili: hizmetler, çalışmalar, sektörler, bölgeler, yazılar ── */
  .hz .hz-ilgili { --w: min(74%, 290px); }
  .hz .hz-mini { padding: 18px; border-radius: 22px; }
  .hz .hz-sektorler { display: block; margin-top: 14px; padding: 16px 0 12px; border-radius: 22px; }
  .hz .hz-sektorler > b { display: flex; align-items: center; gap: 8px; padding: 0 18px; font-size: 14px; }
  .hz .hz-sektorler > div { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 10px 18px 4px; scroll-padding-inline: 18px; }
  .hz .hz-sektorler > div::-webkit-scrollbar { display: none; }
  .hz .hz-sektorler a { flex: 0 0 auto; min-height: 44px; padding: 0 16px; white-space: nowrap; }
  .hz .hz-yazilar { margin-top: 26px; }
  .hz .hz-yazilar__ust { margin-bottom: 4px; }
  .hz .hz-yazilar__ust b { font-size: 19px; }
  .hz .hz-yazilar__ust a { min-height: 44px; }
  .hz .hz-yazilar__izgara { --w: min(80%, 320px); }
  .hz .hz-yazi { border-radius: 22px; }
  .hz .hz-yazi > b { font-size: 16px; }

  /* ── Son çağrı ── */
  .hz .hz-cta { margin-top: 80px; gap: 24px; }
  .hz .hz-cta__eposta { min-height: 44px; padding-top: 0; }

  /* ── Hizmet merkezi ── */
  .hb .hb-yorunge { width: min(440px, calc(100% - 44px)); }
  .hb .hb-kategoriler { --w: min(86%, 370px); }
  .hb .hb-kategori { padding: 22px 20px; border-radius: 26px; }
  .hb .hb-kategori .ds-h3 { font-size: 23px; }
  .hb .hb-kategori ul a { min-height: 44px; }
  .hb .hb-sekmeler { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; border-radius: 999px; margin-bottom: 8px; }
  .hb .hb-sekmeler::-webkit-scrollbar { display: none; }
  .hb .hb-sekmeler button { flex: 0 0 auto; height: 44px; white-space: nowrap; }
  .hb .hb-katalog { --w: min(82%, 330px); }
  .hb .hb-katalog .ds-kart { padding: 22px 20px; }
  .hb .hb-katalog .ds-kart__ikon { width: 60px; height: 60px; border-radius: 18px; }
  .hb .hb-katalog .ds-kart__ikon img { width: 44px; height: 44px; }
  .hb .hb-katalog .ds-kart .ds-h3 { font-size: 22px; }
  .hb .hb-katalog .ds-kart p { font-size: 14.5px; }
  .hb .hb-rehber { --w: min(74%, 290px); }
  .hb .hb-durum a { min-height: 44px; }
  .hb .hb-modeller { --w: min(82%, 330px); }
  .hb .hb-model { padding: 24px 22px; border-radius: 26px; }
  .hb .hb-surec { display: flex; gap: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--hz-kenar) * -1); padding: 6px var(--hz-kenar) 18px; scroll-padding-inline: var(--hz-kenar); text-align: center; row-gap: 0; }
  .hb .hb-surec::-webkit-scrollbar { display: none; }
  .hb .hb-surec::before { display: none; }
  .hb .hb-surec li { flex: 0 0 min(40%, 190px); flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 0; padding: 0 8px; text-align: center; scroll-snap-align: start; }
  .hb .hb-surec li::before { content: ""; position: absolute; left: 0; right: 0; top: 27px; height: 2px; background: linear-gradient(90deg, var(--ds-violet), var(--ds-lavender)); }
  .hb .hb-surec li:nth-child(even)::before { background: linear-gradient(90deg, var(--ds-lavender), var(--ds-peach)); }
  .hb .hb-surec li:first-child::before { left: 50%; }
  .hb .hb-surec li:last-child::before { right: 50%; }
  .hb .hb-surec li span { position: relative; z-index: 1; width: 56px; height: 56px; }
  .hb .hb-surec b { margin-top: 16px; font-size: 16.5px; }
  .hb .hb-surec small { flex-basis: auto; padding-left: 0; margin-top: 6px; font-size: 13px; }

  /* ── Hero maketleri (tablet ve telefon) ── */
  .hz .hm-rozet { display: inline-flex; right: 10px; top: 10px; padding: 3px 8px; font-size: 10px; }
  .hz .hm-e-ticaret-sitesi { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 10px; }
  .hz .hm-urun { max-width: none; margin: 0; }
  .hz .hm-reels-ve-fotograf-cekimi { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 10px; }
  .hz .hm-dikeyler { max-width: none; margin: 0; }
  .hz .hm-sosyal-medya-yonetimi { padding-bottom: 96px; }
  .hz .hm-takvim { width: 90%; }
  .hz .hm-akis { width: 46%; right: 4px; bottom: 30px; }
  .hz .hm-sosyal-medya-yonetimi .hm-cip.c2 { right: auto; left: 0; transform-origin: left bottom; }
  .hz .hm-meta-reklam-yonetimi { padding-bottom: 56px; }
}

@media (max-width: 767.98px) {
  .hz { --hz-kenar: 16px; }
  .hz .ds-bolum { padding-top: 66px; }
  .hz .ds-h2 { font-size: clamp(30px, 8.6vw, 38px); }
  .hz .hz-hero { padding-top: 112px; }
  .hz .hm-sahne { padding: 50px 4px 54px; }
  .hz .hm-3d.ust { width: 80px; right: -6px; top: 0; }
  .hz .hm-3d.alt { width: 66px; left: -8px; bottom: 6px; }
  .hz .hm-cip { scale: .8; }
  .hz .hz-tikli { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hz .hz-tikli li { padding: 10px; gap: 8px; font-size: 12.5px; line-height: 1.35; }
  .hz .hz-tikli i { width: 20px; height: 20px; font-size: 9px; }
  .hz .hz-cikti { padding: 24px 18px; border-radius: 28px; }
  .hz .hz-cikti ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .hz .hz-cikti li { flex-direction: column; gap: 4px; padding: 10px 11px; font-size: 12.5px; line-height: 1.4; }
  .hz .hz-cta { padding: 34px 20px 26px; margin-top: 70px; }
  .hz .hz-cta__3d { display: block; width: 74px; right: 14px; top: 14px; }
  .hz .hz-cta .ds-h2 { font-size: clamp(28px, 8vw, 36px); padding-right: 40px; }

  /* Hizmet merkezi */
  .hb .hb-h1 { font-size: clamp(36px, 10vw, 50px); }
  .hb .hb-sektorler { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hb .hb-sektor { position: relative; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 14px 16px; border-radius: 20px; }
  .hb .hb-sektor__ikon { width: 42px; height: 42px; border-radius: 13px; font-size: 16px; }
  .hb .hb-sektor__metin { width: 100%; }
  .hb .hb-sektor__metin b { font-size: 14.5px; }
  .hb .hb-sektor__metin small { font-size: 11.5px; }
  .hb .hb-sektor__ok { position: absolute; right: 12px; top: 14px; width: 30px; height: 30px; }

  /* Maketler: telefon */
  .hz .hm-serp { --sh: 80px; }
  .hz .hm-e-ticaret-sitesi .hm-urun { padding: 10px; border-radius: 20px; }
  .hz .hm-urun small { margin-top: 8px; font-size: 9.5px; }
  .hz .hm-urun b { font-size: 14px; }
  .hz .hm-urun__alt .hm-cubuk { display: none; }
  .hz .hm-urun__alt button { padding: 8px 10px; font-size: 11px; width: 100%; justify-content: center; }
  .hz .hm-odeme { padding: 12px; border-radius: 20px; }
  .hz .hm-odeme > b { font-size: 13px; }
  .hz .hm-odeme ol { gap: 6px; margin: 10px 0; }
  .hz .hm-odeme li { gap: 7px; padding: 7px 8px; font-size: 11.5px; border-radius: 10px; }
  .hz .hm-odeme li i { width: 22px; height: 22px; font-size: 10px; flex: 0 0 auto; }
  .hz .hm-dikeyler { height: 300px; }
  .hz .hm-dikey { border-width: 4px; border-radius: 18px; font-size: 18px; }
  .hz .hm-cekimlistesi { padding: 12px; border-radius: 20px; }
  .hz .hm-cekimlistesi b { font-size: 12.5px; }
  .hz .hm-cekimlistesi ul { gap: 6px; margin-top: 10px; }
  .hz .hm-cekimlistesi li { padding: 7px 8px 7px 26px; font-size: 11px; }
  .hz .hm-cekimlistesi li::before { left: 8px; width: 11px; height: 11px; margin-top: -5.5px; }
  .hz .hm-takvim { padding: 12px; }
  .hz .hm-takvim__izgara span { border-radius: 8px; font-size: 7.5px; padding: 3px; }

  /* İmza maketleri: masaüstü düzenine yakın, küçültülmüş */
  .hz .hz-imza__sahne { padding: 16px 14px; }
  .hz .hi-kontrol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .hz .hi-kontrol li { padding: 9px 10px; font-size: 12px; gap: 6px; border-radius: 12px; }
  .hz .hi-kontrol li i { width: 20px; height: 20px; flex: 0 0 auto; }
  .hz .hi-kume { max-width: none; aspect-ratio: 1.45; }
  .hz .hi-kume .merkez { width: 84px; height: 84px; padding: 12px; font-size: 11.5px; }
  .hz .hi-kume span { padding: 7px 11px; font-size: 11px; transform: none; translate: -50% -50%; }
  .hz .hi-kume .u1 { top: 9%; } .hz .hi-kume .u2 { left: 82%; top: 36%; } .hz .hi-kume .u5 { left: 18%; top: 36%; } .hz .hi-kume .u3 { left: 74%; top: 88%; } .hz .hi-kume .u4 { left: 26%; top: 88%; }
  .hz .hi-yerel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hz .hi-yerel__harita { grid-column: 1 / -1; grid-row: auto; min-height: 150px; }
  .hz .hi-paket { gap: 6px; }
  .hz .hi-paket li { padding: 9px 10px; }
  .hz .hi-paket b { font-size: 12.5px; }
  .hz .hi-yorum > div { padding: 9px 10px; }
  .hz .hi-yorum p { font-size: 11.5px !important; }
  .hz .hi-yorum .yanit { margin-left: 8px; }
  .hz .hi-geo { grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); gap: 6px; }
  .hz .hi-geo__ok { width: 26px; height: 26px; margin: 0; transform: none; font-size: 11px; }
  .hz .hi-geo__kol { padding: 11px 10px; gap: 7px; border-radius: 14px; }
  .hz .hi-geo__kol > small { font-size: 9.5px; letter-spacing: .04em; }
  .hz .hi-geo .hm-kaynaklar { gap: 4px; margin-top: 6px; }
  .hz .hi-geo .hm-kaynaklar span { padding: 3px 7px 3px 3px; font-size: 10px; gap: 4px; }
  .hz .hi-geo .hm-kaynaklar b { width: 15px; height: 15px; font-size: 8.5px; }
  .hz .hi-varlik { height: 170px; }
  .hz .hi-varlik span { padding: 7px 10px; font-size: 10.5px; }
  .hz .hi-varlik .merkez { padding: 10px 14px; font-size: 12px; }
  .hz .hi-agac { gap: 10px; }
  .hz .hi-agac .dallar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .hz .hi-agac .dallar::before { display: block; }
  .hz .hi-agac .dal span { padding: 7px 5px; font-size: 10px; border-radius: 10px; }
  .hz .hi-agac .kampanya { flex-direction: column; gap: 3px; }
  .hz .hi-akis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .hz .hi-akis span { padding: 10px 4px; font-size: 10px; gap: 5px; border-radius: 12px; }
  .hz .hi-akis span i { width: 26px; height: 26px; border-radius: 8px; font-size: 11px; }
  .hz .hi-huni__kat { grid-template-columns: auto 38px minmax(0, 1fr); gap: 10px; padding: 12px 14px; }
  .hz .hi-huni__mini { width: 38px; height: 38px; }
  .hz .hi-vitals { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .hz .hi-vitals > div { flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding: 12px 4px; text-align: center; border-radius: 14px; flex-wrap: nowrap; }
  .hz .hi-olcer { transform: scale(.82); margin: -4px 0 0; }
  .hz .hi-vitals b { font-size: 16px; }
  .hz .hi-vitals small { font-size: 10px; line-height: 1.2; }
  .hz .hi-vitals em { font-size: 9.5px; padding: 2px 6px; white-space: nowrap; }
  .hz .hi-haritasi > div { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .hz .hi-haritasi > div span { padding: 8px 2px; font-size: 10px; border-radius: 10px; }
  .hz .hi-kanban { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .hz .hi-kanban__sutun { padding: 6px; gap: 6px; border-radius: 12px; min-height: 200px; }
  .hz .hi-kanban__sutun > small { font-size: 8.5px; letter-spacing: 0; }
  .hz .hi-kanban__kart { padding: 5px; gap: 4px; border-radius: 9px; font-size: 9.5px; }
  .hz .hi-kanban__kart > i { border-radius: 6px; }
  .hz .hi-kanban__kart em { padding: 4px 2px; font-size: 9px; border-radius: 6px; }
  .hz .hi-hat { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .hz .hi-hat > div { padding: 10px 3px; gap: 5px; border-radius: 12px; }
  .hz .hi-hat > div span { width: 30px; height: 30px; border-radius: 9px; font-size: 12px; }
  .hz .hi-hat b { font-size: 9.5px; }
  .hz .hi-hat small { font-size: 8px; }
  .hz .hi-hat > div:last-of-type { grid-column: auto; }
  .hz .hi-hat__kareler { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 7px; border-radius: 12px; }
  .hz .hi-kadraj { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 12px; }
  .hz .hi-kadraj__ekran { max-width: none; margin: 0; border-width: 4px; border-radius: 18px; }
  .hz .hi-kadraj__ekran .guvenli { left: 5px; right: 5px; padding: 4px; font-size: 8.5px; }
  .hz .hi-kadraj__orta { width: 44px; height: 44px; font-size: 17px; }
  .hz .hi-ekipman { gap: 6px; }
  .hz .hi-ekipman span { padding: 8px 10px; gap: 8px; font-size: 12px; border-radius: 12px; }
  .hz .hi-ekipman i { width: 26px; height: 26px; border-radius: 8px; font-size: 11px; flex: 0 0 auto; }
}

@media (max-width: 379.98px) {
  .hz .hz-tikli { grid-template-columns: minmax(0, 1fr); }
  .hz .hz-cikti ul { grid-template-columns: minmax(0, 1fr); }
  .hz .hz-cikti li { flex-direction: row; }
  .hz .hz-model__kartlar { gap: 8px; }
  .hz .hz-model__kart { padding: 18px 13px; }
  .hz .hi-akis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hz .hi-kanban__sutun > small { font-size: 7.5px; }
  .hz .hm-takvim__izgara span { font-size: 0; }
}

@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  .hz .hz-noktalar i { transition: none; }
}